<template>
    <el-dialog class="item_charts" :visible.sync="dialogVisible" top="5vh" width="70%" :before-close="handleClose">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="降雨量" name="jyl"></el-tab-pane>
            <el-tab-pane label="浸润线" name="jrx"></el-tab-pane>
            <el-tab-pane label="库水位" name="ksw"></el-tab-pane>
            <el-tab-pane label="干滩" name="gt"></el-tab-pane>
            <el-tab-pane label="表面位移" name="bmwy"></el-tab-pane>
        </el-tabs>
        <div ref="myCharts" v-show="isMyCharts" class="charts_div"></div>
        <div class="charts_div" v-show="!isMyCharts" >暂无数据</div>
    </el-dialog>
</template>

<script>
import { timeParse, randNum, unique } from '@/utils'
import { wkk } from '@/api'
import { jiangYuLiang, jinRunXian, ganTan, kuShuiWei, biaoMianWeiYi, wkkAlarmMsg } from '@/api/weikuangku'

export default {
    data() {
        return {
            dialogVisible: false,
            activeName: 'jyl',
            start_time: '',
            stop_time: '',
            isMyCharts: true,
        }
    },

    methods: {

        core() {
            const compony_info = this.$store.state.compony_info
            let day = 3 * 86400 * 1000;
            let dateCur = Date.parse(new Date());
            this.start_time = timeParse(dateCur - day); // 开始时间
            this.stop_time = timeParse(); // 结束时间
            this.isMyCharts = true
            wkk({
                indic_name: this.activeName,
                wkk_name: compony_info.name, // 尾矿库名称
                start_time: this.start_time, // 开始时间
                end_time: this.stop_time, // 结束时间
                sensor_name: '',
                page: {
                    page_size: 9999,
                    cur_page: 1
                }
            }).then(res => {
                const content = res.data.data
                let sensor_list = res.data.sensor_list
                
                if (content == null) {
                    this.isMyCharts = false
                    return
                }

                let color = ['#3A84FF', 'rgba(255,80,124,1)', 'rgba(234, 242, 16, 1)']
                let arr = []

                for (let index in sensor_list) {
                    arr.push({
                        test: [],
                        bmwyX: [],
                        bmwyZ: [],
                        nickname: sensor_list[index].trim(),
                        color: color[index],
                    })
                }

                this.dialogVisible = true

                for (let dataItem of content) {
                    for (let i of arr) {
                        if (dataItem.sensor_name.trim() == i.nickname) {

                            if (this.activeName == 'jyl') {
                                i.test.push([dataItem.insert_time, dataItem.rainfall_value])
                            }

                            if (this.activeName == 'jrx') {
                                i.test.push([dataItem.insert_time, dataItem.groundwater_level_value])
                            }

                            if (this.activeName == 'ksw') {
                                i.test.push([dataItem.insert_time, dataItem.water_level_value])
                            }

                            if (this.activeName == 'gt') {
                                i.test.push([dataItem.insert_time, dataItem.beach_length_value])
                            }

                            if (this.activeName == 'bmwy') {
                                i.test.push([dataItem.insert_time, dataItem.value_y])
                                i.bmwyX.push([dataItem.insert_time, dataItem.value_x])
                                i.bmwyZ.push([dataItem.insert_time, dataItem.value_z])
                            }
                        }
                    }
                }

                let series = []
                var legendData = []
                var legendSelected = {}
                for (let i in arr) {

                    if (this.activeName == 'bmwy') {

                        series.push({
                            name: arr[i].nickname + '沉降位移',
                            type: "line",
                            smooth: true,
                            itemStyle: {
                                normal: {
                                    color: arr[i].color,
                                },
                            },
                            data: arr[i].test,
                        });

                        series.push({
                            name: arr[i].nickname + '竖向位移',
                            type: "line",
                            itemStyle: {
                                normal: {
                                    color: arr[i].color,
                                },
                            },
                            yAxisIndex: 1,
                            data: arr[i].bmwyZ,
                        });

                        series.push({
                            name: arr[i].nickname + '水平位移',
                            type: 'bar',
                            barMaxWidth: 30,
                            smooth: true,
                            itemStyle: {
                                normal: {
                                    color: arr[i].color,
                                },
                            },
                            data: arr[i].bmwyX,
                        });
                    } else {
                        series.push({
                            name: arr[i].nickname,
                            type: "line",
                            smooth: true,
                            itemStyle: {
                                normal: {
                                    color: arr[i].color,
                                },
                            },
                            data: arr[i].test,
                        });
                    }
                }
                setTimeout(() => {
                    for (let item of series) {
                        let name = item.name
                        legendSelected[name] = true
                        legendData.push(name)
                    }
                    this.myCharts(series, legendData, legendSelected)
                }, 1000);
            })
        },

        myCharts(series, legendData, legendSelected) {
            let myChart = echarts.init(this.$refs.myCharts)

            var option = {
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "cross",
                    },
                },

                legend: {
                    data: legendData,
                    selected: legendSelected,
                    top: "0",
                    left: "center",
                    textStyle: {
                        color: "#1DD8EF",
                    },
                },

                dataZoom: [{
                    show: true,
                    height: 30,
                    xAxisIndex: [0],
                    bottom: 30,
                    start: 0,
                    end: 10,
                    handleSize: '110%',
                    handleStyle: {
                        color: "#5B3AAE",
                    },
                    textStyle: {
                        color: "rgba(204,187,225,0.5)",
                    },
                    fillerColor: "rgba(67,55,160,0.4)",
                    borderColor: "rgba(204,187,225,0.5)",

                }],

                grid: {
                    top: "8%",
                    right: "5%",
                    left: "5%",
                    bottom: "15%",
                },

                xAxis: [
                    {
                        type: "category",
                        boundaryGap: false,
                        axisLine: {
                            lineStyle: {
                                color: "#1DD8EF",
                            },
                        },
                        axisTick: {
                            alignWithLabel: true,
                        },

                        axisLabel: {
                            formatter: function (params) {
                                return params.split(" ")[0] + "\n" + params.split(" ")[1];
                            }
                        }


                    },
                ],
                yAxis: [
                    {
                        type: "value",
                        axisLine: {
                            lineStyle: {
                                color: "#1DD8EF",
                            },
                        },

                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: "#11366e",
                            },
                        },

                        position: "left",
                    },

                    {
                        type: "value",
                        axisLine: {
                            lineStyle: {
                                color: "#1DD8EF",
                            },
                        },
                        splitLine: {
                            show: false,
                        },
                        position: "right",
                    },
                ],
                series,
            };

            myChart.setOption(option, true);

        },

        handleClose() {
            this.dialogVisible = false
        },

        handleClick(e) {
            this.activeName = e.name
            this.core()
        }
    },

    computed: {
        showItemCharts() {
            return this.$store.state.showItemCharts
        }
    },

    watch: {
        showItemCharts(e) {
            this.activeName = e.name

            setTimeout(() => {
                this.core()
            }, 500);
        }
    }
}
</script>

<style lang="scss">
.item_charts {
    .charts_div {
        margin-top: 2vh;
        height: 70vh;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 6vh;
    }

    .el-dialog,
    .el-pager li {
        background-color: #040624;
    }

    .el-tabs__nav-scroll {
        display: flex;
        justify-content: center;
    }

    .el-tabs--card > .el-tabs__header {
        border-bottom-width: 1px;
    }

    .el-tabs__item {
        color: #fff;
    }

    .el-tabs__item.is-active {
        color: #409eff !important;
    }
}
</style>