<template>
    <div>
        <div class="chosedate">
            <span class="demonstration">挑选统计时候:</span>
            <el-date-picker
                v-model="chosedate" 
                type="datetimerange" 
                :picker-options="pickerOptions2" 
                format="yyyy-MM-dd" 
                value-format="yyyy-MM-dd" 
                range-separator="至" 
                start-placeholder="最先日期" 
                end-placeholder="完毕日期" align="right"
            >
            </el-date-picker>
            <el-button type="primary" @click="getDataList()">搜刮</el-button>
        </div>
        <div class="mod-demo-echarts">
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-card>
                        <div id="J_chartLineBox" class="chart-box"></div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
    import echarts from 'echarts'
    export default {
        data() {
            return {
                chartLine: null,
                pickerOptions2: {
                    shortcuts: [{
                        text: '近来一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '近来一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '近来三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                chosedate: [],
                date: [],
                community: [],
                pageData: {}

            }
        },
        mounted() {
            var end = new Date()
            var start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            var startdate = this.formatDate(start, "yyyy-MM-dd")
            var enddate = this.formatDate(end, "yyyy-MM-dd")

            this.chosedate = [startdate, enddate]
            this.getDataList()

        },
        activated() {
            // 因为给echart添加了resize事宜, 在组件激活时须要从新resize绘画一次, 不然涌现空缺bug
            if(this.chartLine) {
                this.chartLine.resize()
            }
        },
        methods: {
            getDataList() {
                this.dataListLoading = true
                this.$http({
                    url: this.$http.adornUrl('/statistics/equipment'),
                    method: 'get',
                    params: this.$http.adornParams({
                        'startDate': this.chosedate[0] + " 00:00:00",
                        'endDate': this.chosedate[1] + " 23:59:59"
                    })
                }).then(({
                    data
                }) => {
                    this.pageData = JSON.parse(JSON.stringify(data.page, null, 4));
                    this.date = data.date
                    this.community = data.community
                    console.log("pageData = ", this.pageData)
                    console.log("date = ", this.date)
                    console.log("community = ", this.community)
                    this.initChartLine()
                })
            },
            // 折线图
            initChartLine() {
                var option = {
                    'title': {
                        'text': '装备数目统计图'
                    },
                    'tooltip': {
                        'trigger': 'axis'
                    },
                    'legend': {
                        'data': this.community
                    },
                    'grid': {
                        'left': '3%',
                        'right': '4%',
                        'bottom': '3%',
                        'containLabel': true
                    },
                    'toolbox': {
                        'feature': {
                            'saveAsImage': {}
                        }
                    },
                    'xAxis': {
                        'type': 'category',
                        'boundaryGap': false,
                        'data': this.date
                    },
                    'yAxis': {
                        'type': 'value'
                    },
                    'series': []
                }
                var communityLength = this.community.length
                for(var i = 0; i < communityLength; i++) {
                    var series = {
                        'name': this.community[i],
                        'type': 'line',
                        'data': []
                    }
                    var key = this.community[i]
                    var communityData = JSON.parse(JSON.stringify(this.pageData[key], null, 4))
                    console.log("communityData = ", communityData)
                    var dateLength = this.date.length
                    for(var j = 0; j < dateLength; j++) {
                        var key2 = this.date[j]
                        series.data.push(parseInt(communityData[key2].sumEqunum))
                    }
                    option.series.push(series)
                }
                this.chartLine = echarts.init(document.getElementById('J_chartLineBox'))
                console.log("option = ", JSON.stringify(option, null, 4))
                this.chartLine.setOption(option)
                window.addEventListener('resize', () => {
                    this.chartLine.resize()
                })
            },
            formatDate(date, fmt) {
                if(/(y+)/.test(fmt)) {
                    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
                }
                let o = {
                    'M+': date.getMonth() + 1,
                    'd+': date.getDate(),
                    'h+': date.getHours(),
                    'm+': date.getMinutes(),
                    's+': date.getSeconds()
                }
                for(let k in o) {
                    let str = o[k] + '';
                    if(new RegExp(`(${k})`).test(fmt)) {
                        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : this.padLeftZero(str));
                    }
                }
                return fmt;
            },
            padLeftZero(str) {
                return('00' + str).substr(str.length);
            }
        }
    }
</script>

<style lang="scss">
    .mod-demo-echarts {
        >.el-alert {
            margin-bottom: 10px;
        }
        >.el-row {
            margin-top: -10px;
            margin-bottom: -10px;
            .el-col {
                padding-top: 10px;
                padding-bottom: 10px;
            }
        }
        .chart-box {
            min-height: 400px;
        }
    }
    
    .chosedate {
        margin-bottom: 10px;
        text-align: center;
    }
</style>