<template>
    <div class="content" style="display: block" id="jkl" v-loading="loading">
        <el-form :inline="true">
            <el-form-item label="统计指标:">
                <el-select v-model="formData.statisticalId" filterable placeholder="请选择">
                    <el-option
                        v-for="item in zblist"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="值类型:">
                <el-select v-model="formData.valueType" filterable 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 label="时间:">
                <el-date-picker
                    v-model="formData.date"
                    :clearable="false"
                    type="datetimerange"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :picker-options="pickerOptions"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    align="right"
                    @change="xiebojibianlvTimeChange"
                ></el-date-picker>
                <!--                <timepicker com-type="datetimerange" ref="timepk" :interval="5" value-format="yyyy-MM-dd hh:mm:ss"></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="lisjbl" ref="lisjbl"></div>
            <span style="position: absolute; right: 10px; top: 10px">
                <i style="color: #ff9912" type="warning" class="el-icon-warning"></i>
                总输出电流阈值和总输出电流比较
            </span>
        </template>
    </div>
</template>

<script>
import * as echarts from 'echarts'
import { queryStatisticalSelect, queryCommonStatisticalByTime, getDevCapacity } from '@/api/app/steady'
import yan from '@/assets/commjs/color'
import { queryCsDictTree } from '@/api/app/setting'
import timepicker from '@/views/components/TimePicker/index4.vue'

export default {
    components: { timepicker },
    data() {
        return {
            loading: true,
            zoom: '',
            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: [],
            zblist: [],
            typelist: [
                {
                    label: '平均值',
                    value: 'avg'
                },
                {
                    label: '最大值',
                    value: 'max'
                },
                {
                    label: '最小值',
                    value: 'min'
                },
                {
                    label: 'CP95值',
                    value: 'cp95'
                }
            ],
            formData: {
                devId: '',
                date: [],
                endTime: '',
                frequency: '',
                startTime: '',
                statisticalId: '',
                valueType: ''
            },
            linePosition: [],
            myCharts: '',
            vh: '',
            devCapacity: 0
        }
    },
    props: {
        queryByCodeId: {
            type: String,
            default: ''
        },
        devId: {
            type: String,
            default: ''
        }
    },
    watch: {
        devId() {
            if (this.formData.statisticalId) {
                getDevCapacity(this.devId).then(res => {
                    this.devCapacity = res.data
                    this.xiebojibianlvSearch()
                })
            }
        }
    },
    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
                            }
                        })
                    }
                })
            })
        }
        queryCsDictTree(this.queryByCodeId).then(res => {
            this.zblist = res.data.map(item => {
                return {
                    value: item.id,
                    label: item.name,
                    ...item
                }
            })
            this.formData.statisticalId = this.zblist[0].value
            this.formData.valueType = this.typelist[0].value
            getDevCapacity(this.devId).then(res => {
                this.devCapacity = res.data
                this.xiebojibianlvSearch()
            })
        })
        this.formData.endTime = this.$tools.formatDate()
        // 今日0点
        this.formData.startTime = this.$tools.formatDate(new Date(new Date().setHours(0, 0, 0, 0)))
        this.formData.date = [this.formData.startTime, this.formData.endTime]
        // formData.date
        // queryStatisticalSelect(this.queryByCodeId).then((res) => {
        //     if (res.code == 'A0000') {
        //         this.zblist = res.data.map((item) => {
        //             return {
        //                 label: item.phase == 'T' || item.phase == 'M' ? '' : item.phase + '相' + item.showName,
        //                 value: item.id,
        //                 ...item,
        //             }
        //         })
        //
        //     }
        // })
    },
    methods: {
        xiebojibianlvTimeChange(e) {
            if (e) {
                this.formData.startTime = e[0]
                this.formData.endTime = e[1]
            } else {
                this.formData.startTime = ''
                this.formData.endTime = ''
            }
        },
        xiebojibianlvSearch() {
            this.loading = true
            this.tableData = []
            console.log('谐波畸变率查询')
            this.formData.devId = this.devId
            // this.formData.startTime = this.$refs.timepk.timeValue[0]
            // this.formData.endTime = this.$refs.timepk.timeValue[1]
            queryCommonStatisticalByTime(this.formData).then(res => {
                this.tableData = res.data
                if (this.tableData.length) {
                    this.$nextTick(() => {
                        this.lisjbl()
                    })
                }
                this.loading = false
            })
        },
        lisjbl() {
            let legend = []
            let xAxis = []
            this.tableData.forEach(item => {
                if (!xAxis.includes(item.time)) {
                    xAxis.push(item.time)
                }
                if (!legend.includes(item.anotherName)) {
                    legend.push(item.anotherName)
                }
            })
            let series = [
                // 总输出电流
                {
                    name: this.tableData.find(item => item.statisticalName === 'Apf_RmsI_TolOut').anotherName,
                    symbol: 'none',
                    smooth: true,
                    type: 'line',
                    //stack: 'Total',
                    data: this.tableData
                        .map(item => {
                            if (item.statisticalName === 'Apf_RmsI_TolOut') {
                                return item.statisticalData
                            } else {
                                return ''
                            }
                        })
                        .filter(item => item !== ''),
                    markLine: {
                        symbol: 'none',
                        data: [
                            {
                                yAxis: this.devCapacity,
                                label: {
                                    position: 'middle', // 表现内容展示的位置
                                    formatter: '总输出电流阈值', // 标线展示的内容
                                    color: '#daa569' // 展示内容颜色
                                }
                            }
                        ]
                    },
                    yAxisIndex: 1
                },
                //负载电流畸变率
                {
                    name: this.tableData.find(item => item.statisticalName === 'Apf_ThdA_Load').anotherName,
                    symbol: 'none',
                    smooth: true,
                    type: 'line',
                    data: this.tableData
                        .map(item => {
                            if (item.statisticalName === 'Apf_ThdA_Load') {
                                return item.statisticalData
                            } else {
                                return ''
                            }
                        })
                        .filter(item => item !== '')
                },
                // 电网电流畸变率
                {
                    name: this.tableData.find(item => item.statisticalName === 'Apf_ThdA_Sys').anotherName,
                    symbol: 'none',
                    smooth: true,
                    type: 'line',
                    data: this.tableData
                        .map(item => {
                            if (item.statisticalName === 'Apf_ThdA_Sys') {
                                return item.statisticalData
                            } else {
                                return ''
                            }
                        })
                        .filter(item => item !== '')
                }
            ]
            console.log(this.$refs)
            let myCharts = echarts.init(this.$refs.lisjbl)
            let option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                legend: {
                    data: legend
                },
                grid: {
                    left: '20px',
                    right: '40px',
                    bottom: '50px',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                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',
                        max: 10,
                        min: 0,
                        axisLine: {
                            show: true,
                            //symbol: ["none", "arrow"],
                            lineStyle: {
                                color: '#333'
                            }
                        }
                    },
                    {
                        name: '电流:(A)',
                        type: 'value',
                        min: 0,
                        // 寻找data最大值
                        max:
                            series[0].data.reduce((a, b) => Math.max(a, b)) > this.devCapacity
                                ? series[0].data.reduce((a, b) => Math.max(a, b))
                                : this.devCapacity + this.devCapacity * 0.5,
                        interval:
                            (series[0].data.reduce((a, b) => Math.max(a, b)) > this.devCapacity
                                ? series[0].data.reduce((a, b) => Math.max(a, b))
                                : this.devCapacity) / 10,
                        axisLine: {
                            show: true,
                            //symbol: ["none", "arrow"],
                            lineStyle: {
                                color: '#333'
                            }
                        }
                    }
                ],
                dataZoom: yan.EchartObject.dataZoom,
                series: series
            }
            myCharts.setOption(option)
window.echartsArr.push(myCharts)
        }
    }
}
</script>

<style lang="scss">
#lisjbl,
#ssxbhl {
    width: 100%;
    height: calc(100vh - 184px);
}
</style>
