<template>
    <div class="leftChartBottom">
        <div class="leftchartbottom-title">近期新增签约</div>
        <div id="leftChartBottom" :style="{ height: '250px', width: '100%' }"></div>
    </div>
</template>

<script>
import { httpPost } from '../../api';
import moment from 'moment';
import echarts from 'echarts';
export default {
    name: 'leftChartBottom',
    data() {
        return {
            chartsBottom: {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: {},
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                        splitLine: {
                            show: false
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        splitLine: {
                            show: false
                        }
                    }
                ],
                series: [
                    {
                        type: 'line',
                        name: '签约数',
                        lineStyle: {
                            normal: {
                                width: 2,
                                color: "#0000ff", //设置实线的颜色
                            },
                        },
                        areaStyle: {
                            opacity: 0.8,
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: 'rgb(128, 255, 165)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgb(1, 191, 236)'
                                }
                            ])
                        },
                        smooth: true,
                        data: [10, 20, 54, 5, 35, 41, 18]
                    },
                ]
            }
        }
    },
    mounted() {
        let charts = this.chartsBottom
        let data = {
            "orderBy": "create_time desc",
            "q": JSON.stringify({
                status: '1'
            })
        }
        let list = []
        for (let i = 1; i <= 7; i++) {
            list.unshift(moment().subtract(i, 'days').format('MM-DD'))
        }
        charts.xAxis[0].data = list
        httpPost(data, this.$api.postLeasesList).then(res => {
            console.log("111", res)
            if (res.success) {
                res.data.list.map(li => {
                    li.createTime = moment().format("MM-DD")
                    for (let i = 0; i < 7; i++) {
                        if (list[i] == li.createTime) {
                            charts.series[0].data[i] += 1
                        }
                    }
                })
            }
            let chartsObj2 = this.$echarts.init(
                document.getElementById('leftChartBottom')
            )
            chartsObj2.setOption(charts, true)
        })
        // let chartsObj2 = this.$echarts.init(
        //     document.getElementById('leftChartBottom')
        // )
        // chartsObj2.setOption(charts, true)
    }
}
</script>

<style scoped>
.leftChartBottom {
    margin-top: 30px;
}
.leftchartbottom-title{
    margin-bottom: 10px;
    font-size: 20px;
    font-weight: bold;
    color: #FFFFFF;
    width: 100%;
    background-image: linear-gradient(to right, #00BFFF 20%, transparent 100%);
    padding: 10px;
}
</style>