<template>
    <div class="tendency" >
        <el-card class="box-card" style="height: 100%">
            <el-row :gutter="5">
                <!--左侧列表区-->
                <el-col :span="3">
                    <PointTree showCheckbox @check-change="checkChange" :highlightCurrent="false"
                    />
                </el-col>
                <!--右侧内容区-->
                <el-col :span="21">
                    <div class="content" style="display: block;" id="sdf">
                        <el-form :inline="true">
                            <el-form-item label="统计指标:">
                                <el-select v-model="formInline.statisticalId" filterable clearable placeholder="请选择">
                                    <el-option v-for="item in statisticalOptions" :key="item.value" :label="item.label"
                                               :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="值类型:">
                                <el-select v-model="formInline.valueType" filterable clearable placeholder="请选择">
                                    <el-option v-for="item in valueTypeOptions" :key="item.value" :label="item.label"
                                               :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <!--                                <el-date-picker-->
                                <!--                                    v-model="formInline.date"-->
                                <!--                                    clearable-->
                                <!--                                    type="datetimerange"-->
                                <!--                                    value-format="yyyy-MM-dd HH:mm:ss"-->
                                <!--                                    :picker-options="pickerOptions"-->
                                <!--                                    range-separator="至"-->
                                <!--                                    start-placeholder="开始日期"-->
                                <!--                                    end-placeholder="结束日期"-->
                                <!--                                    align="right"-->
                                <!--                                >-->
                                <!--                                </el-date-picker>-->
                                <timepicker ref="timepk" :interval="3"></timepicker>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="queryLineCommonStatistical" icon="el-icon-search">
                                    查询
                                </el-button>
                            </el-form-item>
                        </el-form>
                        <!-- <div style="height: 20px;"></div> -->
                        <el-empty description="暂无数据" v-if="tableData.length == 0"></el-empty>
                        <div id="echarts-dom" v-else ref="fglkrdd"
                             :style="`heigth:100%;width:100%`"></div>
                    </div>
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>
<script>
import {queryLineCommonStatistical} from '@/api/app/analyze.js'
import {queryByCode, queryCsDictTree, queryByid} from '@/api/app/setting.js'
import PointTree from '../components/pointTree'
import * as echarts from 'echarts'
import DeviceTree from "@/views/govern/components/deviceTree.vue";
import {queryFisrtCommonStatistical, queryStatisticalSelect} from "@/api/app/steady";
import yan from "@/assets/commjs/color";
import timepicker from "@/views/components/TimePicker/index4.vue";

export default {
    name: 'GovernAnalyzeTendency',
    components: {timepicker, DeviceTree, PointTree},
    computed: {
        vth() {
            return window.sessionStorage.getItem("appheight") - 190;
        }
    },
    data() {
        return {
            pickerOptions: {
                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])
                        },
                    },
                ],
            },
            tableData: [],
            statisticalOptions: [],
            valueTypeOptions: [
                {
                    label: '平均值',
                    value: 'avg',
                },
                {
                    label: '最大值',
                    value: 'max',
                },
                {
                    label: '最小值',
                    value: 'min',
                },
                {
                    label: 'CP95值',
                    value: 'cp95',
                },
            ],
            formInline: {
                "endTime": "",
                "lineList": [],
                "startTime": "",
                "statisticalId": "",
                "valueType": "",
                "date": []
            },
            zoom: '',
            myChartes: ''
        }
    },
    created() {
        queryByCode('Harmonic_Type').then((res) => {
            // queryStatisticalSelect(res.data.id).then((res) => {
            //     if (res.code == 'A0000') {
            //         this.statisticalOptions = res.data.map((item) => {
            //             return {
            //                 label: item.phase == 'T' || item.phase == 'M' ? '' : item.phase + '相' + item.showName,
            //                 value: item.id,
            //                 ...item,
            //             }
            //         })
            //         this.formInline.statisticalId = this.statisticalOptions[0].value
            //         this.formInline.valueType = this.valueTypeOptions[0].value
            //         // this.queryLineCommonStatistical()
            //     }
            // })
            queryCsDictTree(res.data.id).then((res) => {
                this.statisticalOptions = res.data.map((item) => {
                    return {
                        value: item.id,
                        label: item.name,
                        ...item,
                    }
                })
            })
        })
    },
    mounted() {
        this.zoom = 1 / document.body.style.zoom;
        //this.vh = window.sessionStorage.getItem("appheight") - 125 + "px";
        window.addEventListener("resize", () => {
            this.zoom = 1 / document.body.style.zoom;
            if (this.myChartes !== '') {
                this.myChartes.resize();
            }

        });
        // this.$nextTick(() => {
        //   this.lisjbl();
        // });
    },
    methods: {
        checkChange(data, checked, indeterminate) {
            console.log(data, checked, indeterminate)
            if (data.level === 3) {
                if (checked) {
                    this.formInline.lineList.push(data.id)
                } else {
                    this.formInline.lineList.splice(this.formInline.lineList.indexOf(data.id), 1)
                }
            }
        },
        queryLineCommonStatistical() {
            if (this.formInline.lineList.length == 0) {
                this.$message({
                    message: '请选择监测点',
                    type: 'warning'
                })
                return
            }
            this.formInline.startTime = this.$refs.timepk.timeValue[0]
            this.formInline.endTime = this.$refs.timepk.timeValue[1]
            queryLineCommonStatistical(this.formInline).then((res) => {
                this.tableData = res.data
                console.log(this.tableData)
                if (this.tableData.length == 0) {
                    this.$message({
                        message: '暂无数据',
                        type: 'warning'
                    })
                    return
                }
                this.$nextTick(() => {
                    this.initEcharts()
                })
            })
        },
        // initEcharts() {
        //   let chartDom = document.getElementById('echarts-dom')
        //   let myChart = echarts.init(chartDom)
        //   let option = {
        //     title: {
        //       // text: '准实时' + this.statisticalOptions.find((item) => item.value == this.formInline.statisticalId).label,
        //       // subtext: 'Feature Sample: Gradient Color, Shadow, Click Zoom'
        //     },
        //     tooltip: {
        //       trigger: 'axis',
        //       axisPointer: {
        //         type: 'shadow',
        //       },
        //     },
        //     // legend: {
        //     //     data: this.tableData.map((item) => item.lineName),
        //     // },
        //     xAxis: {
        //       type: 'category',
        //       data: this.tableData.map((item) => item.lineName),
        //     },
        //     yAxis: {
        //       type: 'value',
        //     },
        //     series: [
        //       {
        //         // name: '负载侧',
        //         data: this.tableData.map((item) => item.statisticalData),
        //         type: 'bar',
        //       },
        //       // {
        //       //     name: '电网侧',
        //       //     data: [110],
        //       //     type: 'bar',
        //       // },
        //       // {
        //       //     name: '输出侧',
        //       //     data: [120],
        //       //     type: 'bar',
        //       // },
        //     ],
        //   }
        
        // },
        initEcharts() {
            let legend = []
            let series = []
            let xAxis = []
            this.tableData.forEach((item) => {
                if (!legend.includes(item.lineName)) {
                    legend.push(item.lineName)
                }
                if (!xAxis.includes(item.time)) {
                    xAxis.push(item.time)
                }
            })
            legend.forEach((item) => {
                let data = []
                this.tableData.forEach((item2) => {
                    if (item == item2.lineName) {
                        data.push(item2.statisticalData)
                    }
                })
                series.push({
                    name: item,
                    type: 'line',
                    symbol: 'none',
                    smooth: true,
                    // stack: 'Total',
                    data: data,
                })
            })
            console.log(legend, series, xAxis)
            let domID1 = document.getElementById('echarts-dom')
            setTimeout(() => {
                domID1.style.width = document.getElementById("sdf").offsetWidth - 10 + 'px'
                domID1.style.height =
                    window.sessionStorage.getItem("appheight") - 96 + "px";
            }, 0);
            let myChartes = echarts.init(domID1)
            this.myChartes = myChartes
            myChartes.clear()
            let option = {
                tooltip: {
                    trigger: 'axis',
                },
                legend: {
                    data: legend,
                },
                grid: {
                    left: '10',
                    right: '40',
                    bottom: '50px',
                    containLabel: true,
                },
                xAxis: {
                    name: '时间',
                    type: 'category',
                    data: xAxis,
                    axisLabel: {
                        formatter: function (value, index) {
                            return value.split(' ').join('\n')
                        },
                    },
                    axisLine: {
                        show: true,
                        //symbol: ["none", "arrow"],
                        lineStyle: {
                            color: '#333',
                        },
                    },
                },
                toolbox: {
                    feature: {
                        saveAsImage: {},
                    },
                },

                yAxis: {
                    name: '单位:(%)',
                    type: 'value',
                    axisLine: {
                        show: true,
                        //symbol: ["none", "arrow"],
                        lineStyle: {
                            color: '#333',
                        },
                    },
                },
                dataZoom: yan.EchartObject.dataZoom,
                series: series,
            }
            console.log(option)
            myChartes.setOption(option)
window.echartsArr.push(myChartes)
            setTimeout(() => {
                myChartes.resize();
            }, 100);
            let _this = this;
            _this.$erd.listenTo(_this.$refs.fglkrdd, (element) => {
                _this.$nextTick(() => {
                    domID1.style.width = document.getElementById("sdf").offsetWidth - 10 + 'px'
                    myChartes.resize();
                });
            });
        },
    },
}
</script>
<style lang="scss">
.tendency {
    padding: 10px;
    height: 100%;
    width: 100%;
    .el-tree {
        //   height: calc(100vh - 158px) !important;
    }

    #echarts-dom {
        width: 98%;
        height: 300px;
    }

    .el-dialog__body {
        // .el-descriptions__title {
        //     font-size: 14px;
        // }
        // .el-descriptions__extra {
        //     height: 36px;
        //     align-items: center;
        //     display: flex;
        // }
        .el-form {
            padding-right: 0;
        }
    }

    .custom-tree-node {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-right: 8px;
        font-size: 14px;
        flex: 1;
    }

    .content {
        display: flex;
        align-items: center;
        justify-content: center;
        //height: calc(100vh - 198px);
        overflow: auto;
    }

    #main {
        width: 100%;
        height: 60vh;
    }
}

.tendency-box-card {
    // height: calc(100vh - 250px);
    // overflow-y: scroll;
}
</style>
