<template>
    <div class="steady">
        <el-card class="box-card" style="height: 100%">
            <el-row :gutter="5">
                <!--左侧列表区-->
                <el-col :span="3">
                    <DeviceTree @selectDevice="selectDevice" :devId="devId"/>
                </el-col>
                <!--右侧内容区-->
                <el-col :span="21" v-loading="loading">
                    <div class="content" style="display: block" id="fgh">
                        <el-form :inline="true">
                            <el-form-item label="统计指标:">
                                <el-select v-model="formInline.statisticalId" filterable clearable
                                           placeholder="请选择">
                                    <el-option v-for="item in xblist" :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 typelist" :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"-->
<!--                                    @change="xiebojibianlvTimeChange"-->
<!--                                >-->
                                <timepicker ref="timepk" :interval="3"></timepicker>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="xiebojibianlvSearch" 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>
                        <template v-else>
                            <div id="lsxbjbl2" ref="fglkrss"  :style="`heigth:100%;width:100%`"></div>
                        </template>
                    </div>
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>
<script>
import DeviceTree from '../../components/deviceTree'
import {queryStatisticalSelect, queryCommonStatisticalByTime} from '@/api/app/steady'
import {queryByCode} from '@/api/app/setting'
import * as echarts from 'echarts'
import yan from "@/assets/commjs/color";
import timepicker from "@/views/components/TimePicker/index4.vue";
export default {
    name: 'GovernAnalyzeTransient',
    components: {timepicker, DeviceTree},
    data() {
        return {
            loading:true,
            devId: null,
            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: [],
            xblist: [],
            typelist: [
                {
                    label: '平均值',
                    value: 'avg',
                },
                {
                    label: '最大值',
                    value: 'max',
                },
                {
                    label: '最小值',
                    value: 'min',
                },
                {
                    label: 'CP95值',
                    value: 'cp95',
                },
            ],
            formInline: {
                devId: '',
                date: [],
                endTime: '',
                frequency: '',
                startTime: '',
                statisticalId: '',
                valueType: '',
            },
            linePosition: [],
            zoom:'',
            myChartes:''

        }
    },
    created() {
        const dictypeData = JSON.parse(localStorage.getItem('dictypeData'))
        if (dictypeData) {
            dictypeData.forEach((item) => {
                let arr = [
                    {
                        code: 'Line_Position',
                        key: 'linePosition',
                    },
                ]
                arr.forEach((item2) => {
                    if (item.code == item2.code) {
                        this[item2.key] = item.children.map((item3) => {
                            return {
                                label: item3.name,
                                value: item3.id,
                                code: item3.code,
                            }
                        })
                    }
                })
            })
        }

    },
    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: {
        selectDevice({id}) {
            if (!id) return
            this.formInline.devId = id
            this.init()
        },
        init() {
            if (this.xblist.length) {
                this.formInline.statisticalId = this.xblist[0].value
                this.formInline.valueType = this.typelist[0].value
                this.xiebojibianlvSearch()
            } else {
                queryByCode('Event_Type').then((res) => {
                    queryStatisticalSelect(res.data.id).then((res) => {
                        if (res.code == 'A0000') {
                            this.xblist = res.data.map((item) => {
                                return {
                                    label: item.phase == 'T' || item.phase == 'M' ? '' : item.phase + '相' + item.showName,
                                    value: item.id,
                                    ...item,
                                }
                            })
                            this.formInline.statisticalId = this.xblist[0].value
                            this.formInline.valueType = this.typelist[0].value
                            this.xiebojibianlvSearch()
                        }
                    })
                })
            }
        },
        xiebojibianlvTimeChange(e) {
            this.formInline.startTime = e[0]
            this.formInline.endTime = e[1]
        },
        xiebojibianlvSearch() {
            this.loading = true
            this.formInline.startTime = this.$refs.timepk.timeValue[0]
            this.formInline.endTime = this.$refs.timepk.timeValue[1]
            queryCommonStatisticalByTime(this.formInline).then((res) => {
                this.tableData = res.data.map((item) => {
                    item.positionName = this.linePosition.find((item2) => {
                        return item2.value == item.position
                    }).label
                    return {
                        ...item,
                    }
                })
                console.log(this.tableData)
                if (this.tableData.length) {
                    this.$nextTick(()=>{
                        this.lsxbjbl2()
                    })
                }
                this.loading = false
            })
        },
        lsxbjbl2() {
            let legend = []
            let series = []
            let xAxis = []
            this.tableData.forEach((item) => {
                if (!legend.includes(item.positionName)) {
                    legend.push(item.positionName)
                }
                if (!xAxis.includes(item.time)) {
                    xAxis.push(item.time)
                }
            })
            legend.forEach((item) => {
                let data = []
                this.tableData.forEach((item2) => {
                    if (item == item2.positionName) {
                        data.push(item2.statisticalData)
                    }
                })
                series.push({
                    name: item,
                    type: 'line',
                    symbol:'none',
                    smooth: true,
                    type: 'line',
                    // stack: 'Total',
                    data: data,
                })
            })
            console.log(legend, series, xAxis)
            let domID1 = document.getElementById('lsxbjbl2')
            setTimeout(() => {
            domID1.style.width =document.getElementById("fgh").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: '10px',
                    right: '40px',
                    bottom: '50px',
                    containLabel: true,
                },
                toolbox: {
                    feature: {
                        saveAsImage: {},
                    },
                },
                dataZoom: yan.EchartObject.dataZoom,
                xAxis: {
                    name:'时间',
                    type: 'category',
                    boundaryGap: false,
                    data: xAxis,
                    axisLabel: {
                        formatter: function (value, index) {
                            return value.split(' ').join('\n')
                        },
                    },
                    axisLine: {
              show: true,
              //symbol: ["none", "arrow"],
              lineStyle: {
                color: '#333',
              },
            },
                },
                yAxis: {
                    name:'单位:(%)',
                    type: 'value',
                    axisLine: {
              show: true,
              //symbol: ["none", "arrow"],
              lineStyle: {
                color: '#333',
              },
            },
                },
                series: series,
            }
            myChartes.setOption(option)
window.echartsArr.push(myChartes)
            setTimeout(() => {
  myChartes.resize();
      }, 100);
      let _this = this;
      _this.$erd.listenTo(_this.$refs.fglkrss, (element) => {
        _this.$nextTick(() => {
          domID1.style.width = document.getElementById("fgh").offsetWidth -10+'px'
          myChartes.resize();
        });
      });
        },
    },
}
</script>
<style lang="scss">
.steady {
    padding: 10px;
    height: 100%;
    width: 100%;

    .el-tree {
       // height: calc(100vh - 178px) !important;
    }
}

#lsxbjbl2,
#ssxbhl2 {
    width: 100%;
    height: 300px;
}
</style>

