<template>

    <el-dialog class="base_eev_dialog" :visible.sync="dialogVisible" top="10vh" width="70%" :before-close="handleClose">

        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="一氧化碳" name="一氧化碳"></el-tab-pane>
            <el-tab-pane label="风速" name="风速"></el-tab-pane>
            <el-tab-pane label="二氧化氮" name="二氧化氮"></el-tab-pane>
            <el-tab-pane label="温度" name="温度"></el-tab-pane>
        </el-tabs>

        <div class="charts_div" v-show="!VisibleShow" style="display:flex;align-items: center; justify-content: center; font-size: 5vh;"> 暂无数据 </div>
        <div ref="myCharts" v-show="VisibleShow" class="charts_div"></div>
    </el-dialog>
</template>

<script>
import { timeParse, randNum, unique } from '@/utils'
import { environment } from '@/api/weikuangku'
export default {
    data() {
        return {
            dialogVisible: false,
            activeName: '一氧化碳',
            VisibleShow: false,
        }
    },

    methods: {

        core() {
            const compony_info = this.$store.state.compony_info

            environment({
                page: 0,
                size: 4000,
                sort: 'id,desc',
                company: compony_info.name,
                item: this.activeName
            }).then(res => {
                const content = res.content

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

                content.map(item => {
                    location.push(item.location)
                })
                location = unique(location)

                for (let index in location) {
                    arr.push({
                        data: [],
                        time: [],
                        test: [],
                        nickname: location[index],
                        color: color[index],
                    })
                }

                this.dialogVisible = true
                this.VisibleShow = true

                if (content.length == 0) {
                    this.VisibleShow = false
                    return
                }

                for (let dataItem of content) {
                    for (let i of arr) {
                        if (dataItem.location == i.nickname) {
                            i.data.push(dataItem.value)
                            i.time.push(timeParse(dataItem.insertTime))
                            i.test.push([timeParse(dataItem.insertTime), dataItem.value])
                        }
                    }
                }

                let dataX = []
                let series = []
                var legendData = []
                var legendSelected = {}

                dataX = arr[0].time

                for (let i in arr) {
                    series.push({
                        name: arr[i].nickname,
                        type: "line",
                        smooth: true,
                        itemStyle: {
                            normal: {
                                color: arr[i].color,
                            },
                        },
                        data: arr[i].test,
                    });
                    legendData.push(arr[i].nickname)
                    let nickname = arr[i].nickname
                    if (i < 4) {
                        legendSelected[nickname] = true
                    } else {
                        legendSelected[nickname] = false
                    }
                }
                setTimeout(() => {
                    this.myCharts(dataX, series, legendData, legendSelected)
                }, 1000);
            })
        },

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

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

                legend: {
                    data: legendData,
                    selected: legendSelected,
                    top: "2%",
                    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: "6%",
                    right: "5%",
                    left: "5%",
                    bottom: "15%",
                },

                xAxis: [
                    {
                        type: "category",
                        boundaryGap: false,
                        axisLine: {
                            lineStyle: {
                                color: "#1DD8EF",
                            },
                        },
                        axisTick: {
                            alignWithLabel: true,
                        },
                        // data: dataX,
                    },
                ],
                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.core()
        }
    },

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

    watch: {
        is_show_huan_jing_jian_ce() {
            this.activeName = '一氧化碳'
            this.core()
        }
    }
}
</script>

<style lang="scss">
.base_eev_dialog {
    .charts_div {
        margin-top: 2vh;
        height: 68vh;
    }

    .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>