<template>
    <div class="chart-box">
        <div v-if="dateName" class="btn-back" @click="chartOption">
            <i class="el-icon-back"></i> 返回
        </div>
        <el-date-picker
            v-else
            class="date-legend"
            v-model="value"
            align="right"
            type="date"
            placeholder="选择日期"
            :picker-options="pickerOptions"
            size="mini"
            @change="changeDate">
        </el-date-picker>
        <echart :options="barOption" id="center-bottom-bar" v-if="chartData.riqi"></echart>
    </div>
</template>

<script>
import { currentPOST } from 'api/modules';
import { formatTime, dateChange } from "@/utils/index.js";

export default {
    props: {
        chartData: {
            type: Object,
            default: {}
        }
    },

    data() {
        return {
            dateName: '',

            env: process.env.NODE_ENV,

            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                    picker.$emit('pick', new Date());
                    }
                }, {
                    text: '昨天',
                    onClick(picker) {
                    const date = new Date();
                    date.setTime(date.getTime() - 3600 * 1000 * 24);
                    picker.$emit('pick', date);
                    }
                }, {
                    text: '一周前',
                    onClick(picker) {
                    const date = new Date();
                    date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit('pick', date);
                    }
                }]
            },
            value: '',

            barData: this.chartData,

            barOption: {},
            
            dateX: '',
            jihuaY: [],
            shijiY: [],
            xAxisData: []
        }
    },

    computed: {
        baseUrl() {
            return this.env == 'development' ? 'project' : 'http://1.190.195.54:8050';
        }
    },

    methods: {
        changeDate(a, b) {
            this.handleGetDayData(this.value)
        },

        arrayConcat(arr1, arr2) {
            return Array.from(new Set(arr1.concat(arr2)));
        },

        handleData() {
            const data = this.barData;

            if (data && data.riqi) {
                const riqi = dateChange(data ? data.riqi : '');
                this.value = new Date(riqi);
            } else {
                // this.value = '';
                this.xAxisData = [];
                this.jihuaY = [];
                this.shijiY = [];

                return;
            }

            let jihua = [];
            let shiji = [];
            let jihuaObj = {};
            let shijiObj = {};

            data.jixieList.forEach(jixieItem => {
                jihua = [...jihua, ...jixieItem.jihua]
                shiji = [...shiji, ...jixieItem.shiji]
            })

            jihua.forEach(item => {
                if (jihuaObj[item.name]) {
                    jihuaObj[item.name] += Number(item.value)
                } else {
                    jihuaObj[item.name] = 0
                    jihuaObj[item.name] += Number(item.value)
                }
            })
            shiji.forEach(item => {
                if (shijiObj[item.name]) {
                    shijiObj[item.name] += Number(item.value)
                } else {
                    shijiObj[item.name] = 0
                    shijiObj[item.name] += Number(item.value)
                }
            })

            this.xAxisData = this.arrayConcat(Object.keys(jihuaObj), Object.keys(shijiObj))
            this.xAxisData.forEach(item => {
                let i = jihuaObj[item] ? jihuaObj[item] : 0
                this.jihuaY.push(i)

                let j = shijiObj[item] ? shijiObj[item] : 0
                this.shijiY.push(i)
            })
        },

        chartOption() {
            this.dateName = '';

            this.barOption = {
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "cross",
                        label: {
                            backgroundColor: "#6a7985",
                        },
                    },
                },
                legend: {
                    data: ["计划", "实际"],
                    textStyle: {
                        color: "#fff",
                    },
                    left: 0
                },
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "5%",
                    containLabel: true,
                },
                xAxis: [
                    {
                        type: "category",
                        data: this.xAxisData,
                        axisLabel: {
                            color: "#fff",
                            fontSize: 14,
                        },
                    },
                ],
                yAxis: [
                    {
                        type: "value",
                        axisLabel: {
                            color: "#fff",
                            fontSize: 14,
                        },
                        name: '台',
                        nameTextStyle: {
                            color: '#fff'
                        }
                    },
                ],
                series: [
                    {
                        name: "计划",
                        type: "bar",
                        areaStyle: {},
                        emphasis: {
                            focus: "series",
                        },
                        data: this.jihuaY,
                        itemStyle: {
                            opacity: 0.6,
                        },
                    },
                    {
                        name: "实际",
                        type: "bar",
                        areaStyle: {},
                        emphasis: {
                            focus: "series",
                        },
                        data: this.shijiY,
                        itemStyle: {
                            opacity: 0.6,
                        },
                    },
                ],
            };
        },

        handleGetDayData(value) {
            const day = formatTime(value, "yyyy年MM月dd日");
            const title = sessionStorage.getItem('defaultValue');
            currentPOST(this.baseUrl + "/x_program_center/jaxrs/invoke/BI-zongliang/execute", {
                startTime: day,
                endTime: day,
                title: title
            })
			.then((res) => {
                if (res.code == 0) {
                    const result = res.result;
                    
                    this.barData = result[0];

                    this.handleData()
                    this.chartOption()
                }
            });
        }
    },

    mounted() {
        this.handleData()
        this.chartOption()
    }
}
</script>

<style lang="scss" scoped>
.chart-box {
    width: 100%;
    height: 100%;
    position: relative;
    #center-bottom-bar {
        width: 100%;
        height: 100%;
    }
}
</style>