<template>
    <div class="chart-box">
        <div v-if="dateName" class="btn-back" @click="chartOption">
            <i class="el-icon-back"></i> 返回
        </div>
        <div v-else class="range-legend">
            <span :class="{active: active == '周'}" @click="changeDateType('周')">周</span>
            <span :class="{active: active == '月'}" @click="changeDateType('月')">月</span>
        </div>
        <echart :options="lineOption" id="left-top-line" @chartClick="chartClick"></echart>
    </div>
</template>

<script>
export default {
    props: {
        chartWeekData: {
            type: Array,
            default: []
        },

        chartMonthData: {
            type: Array,
            default: []
        }
    },

    data() {
        return {
            dateName: '',
            active: '周',
            lineOption: {},

            xAxisData: [],
            shijiArr: [],
            jihuaArr: [],

            dateObj: {}
        }
    },

    methods: {
        changeDateType(type) {
            this.active = type
            
            if (type == '月') {
                this.handleMonthData()
                this.chartOption()
            } else if (type == '周') {
                this.handleWeekData()
                this.chartOption()
            }
        },

        handleWeekData() {
            let data = this.chartWeekData;

            this.xAxisData = data.map(item => item.riqi);
            this.shijiArr = data.map(item => item.shijicailiaoTotal);
            this.jihuaArr = data.map(item => item.jihuacailiaoTotal);

            data.forEach(item => {
                this.dateObj[item.riqi] = item
            })
        },

        handleMonthData() {
            let data = this.chartMonthData;

            this.xAxisData = data.map(item => item.riqi);
            this.shijiArr = data.map(item => item.shijicailiaoTotal);
            this.jihuaArr = data.map(item => item.jihuacailiaoTotal);

            data.forEach(item => {
                this.dateObj[item.riqi] = item
            })
        },

        chartClick(e) {
            if (e.componentSubType == 'bar') return;

            this.dateName = e.name;
            const dateObj = this.dateObj;
            const barData = dateObj[e.name];
            const xAxisName = e.name.split('年')[1];
            
            const cailiaoList = barData.cailiaoList;
            const xAxisBar = cailiaoList.map(item => item.shigongdanwei)
            let jihuaBar = []
            let shijiBar = []

            cailiaoList.forEach(item => {
                let shijiTotal = 0
                let jihuaTotal = 0

                item.shiji.forEach(shiji => {
                    shijiTotal += Number(shiji.value)
                })
                jihuaBar.push(shijiTotal)

                item.jihua.forEach(jihua => {
                    jihuaTotal += Number(jihua.value)
                })
                shijiBar.push(jihuaTotal)
            })

            this.lineOption = {
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "cross",
                        label: {
                            backgroundColor: "#6a7985",
                        },
                    },
                },
                legend: {
                    data: ["计划", "实际"],
                    textStyle: {
                        color: "#fff",
                    },
                    left: 0
                },
                grid: {
                    left: "3%",
                    right: "12%",
                    bottom: "5%",
                    containLabel: true,
                },
                xAxis: [
                    {
                        type: "category",
                        data: xAxisBar,
                        axisLabel: {
                            color: "#fff",
                            fontSize: 14,
                        },
                        name: xAxisName,
                        nameTextStyle: {
                            color: "#fff"
                        },
                        nameGap: -2
                    },
                ],
                yAxis: [
                    {
                        type: "value",
                        axisLabel: {
                            color: "#fff",
                            fontSize: 14,
                        },
                        name: '㎡',
                        nameTextStyle: {
                            color: '#fff'
                        }
                    },
                ],
                series: [
                    {
                        name: "计划",
                        type: "bar",
                        areaStyle: {},
                        emphasis: {
                            focus: "series",
                        },
                        data: jihuaBar,
                        itemStyle: {
                            opacity: 0.6,
                        },
                    },
                    {
                        name: "实际",
                        type: "bar",
                        areaStyle: {},
                        emphasis: {
                            focus: "series",
                        },
                        data: shijiBar,
                        itemStyle: {
                            opacity: 0.6,
                        },
                    },
                ],
            }
        },

        chartOption() {
            this.dateName = '';
            
            this.lineOption = {
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "cross",
                        label: {
                            backgroundColor: "#6a7985",
                        },
                    },
                },
                legend: {
                    data: ["计划", "实际"],
                    textStyle: {
                        color: "#fff",
                    },
                    left: 0
                },
                grid: {
                    left: "3%",
                    right: "10%",
                    bottom: "5%",
                    containLabel: true,
                },
                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    data: this.xAxisData,
                    axisLabel: {
                        color: "#fff",
                        fontSize: 14,
                        formatter: function (value) {
                            return value.split('年')[1]
                        }
                    },
                },
                yAxis: {
                    type: "value",
                    axisLabel: {
                        color: "#fff",
                        fontSize: 14,
                    },
                    name: '㎡',
                    nameTextStyle: {
                        color: '#fff'
                    }
                },
                series: [
                    {
                        name: "计划",
                        data: this.jihuaArr,
                        type: "line",
                        smooth: true,
                        areaStyle: {
                            opacity: 0.2,
                        },
                    },
                    {
                        name: "实际",
                        data: this.shijiArr,
                        type: "line",
                        smooth: true,
                        areaStyle: {
                            opacity: 0.2,
                        },
                    },
                ],
            };
        }
    },

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

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