<template>
    <div class="content" style="display: block">
        <el-form :inline="true">
            <el-form-item label="统计指标:">
                <el-select v-model="谐波畸变率筛选表单.statisticalId" filterable clearable placeholder="请选择">
                    <el-option v-for="item in 统计指标下拉框" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="值类型:">
                <el-select v-model="谐波畸变率筛选表单.valueType" filterable clearable placeholder="请选择">
                    <el-option v-for="item in 值类型下拉框" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="频次:">
                <el-select v-model="谐波畸变率筛选表单.frequency" filterable clearable placeholder="请选择">
                    <el-option v-for="item in timesOptions" :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="谐波畸变率筛选表单.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"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="xiebojibianlvSearch">查询</el-button>
            </el-form-item>
        </el-form>
        <div style="height: 20px"></div>
        <el-empty description="暂无数据" v-if="tableData.length == 0"></el-empty>
        <div id="历史谐波畸变率"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts'
import { queryStatisticalSelect, queryCommonStatisticalByTime } from '@/api/app/steady'

export default {
    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: [],
            统计指标下拉框: [],
            值类型下拉框: [
                {
                    label: '平均值',
                    value: 'avg',
                },
                {
                    label: '最大值',
                    value: 'max',
                },
                {
                    label: '最小值',
                    value: 'min',
                },
                {
                    label: 'CP95值',
                    value: 'cp95',
                },
            ],
            timesOptions: [],
            谐波畸变率筛选表单: {
                devId: '',
                date: [],
                endTime: '',
                frequency: '2',
                startTime: '',
                statisticalId: '',
                valueType: '',
            },
            linePosition: [],
        }
    },
    props: {
        queryByCodeId: {
            type: String,
            default: '',
        },
        devId: {
            type: String,
            default: '',
        },
    },
    created() {
        for (let i = 2; i < 50; i++) {
            this.timesOptions.push({
                label: i + '次',
                value: i,
            })
        }
        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,
                            }
                        })
                    }
                })
            })
        }
        queryStatisticalSelect(this.queryByCodeId).then((res) => {
            if (res.code == 'A0000') {
                this.统计指标下拉框 = res.data.map((item) => {
                    return {
                        label: item.phase == 'T' || item.phase == 'M' ? '' : item.phase + '相' + item.showName,
                        value: item.id,
                        ...item,
                    }
                })
                this.谐波畸变率筛选表单.statisticalId = this.统计指标下拉框[0].value
                this.谐波畸变率筛选表单.valueType = this.值类型下拉框[0].value
                // 谐波畸变率筛startTime和endTime默认值是一天内  yyyy-MM-dd HH:mm:ss
                this.谐波畸变率筛选表单.endTime = this.$tools.formatDate()
                this.谐波畸变率筛选表单.startTime = this.$tools.formatDate(new Date(new Date().getTime() - 3600 * 1000 * 24))
                this.谐波畸变率筛选表单.date = [this.谐波畸变率筛选表单.startTime, this.谐波畸变率筛选表单.endTime]
                this.xiebojibianlvSearch()
            }
        })
    },
    methods: {
        xiebojibianlvTimeChange(e) {
            this.谐波畸变率筛选表单.startTime = e[0]
            this.谐波畸变率筛选表单.endTime = e[1]
        },
        xiebojibianlvSearch() {
            console.log('谐波畸变率查询')
            this.谐波畸变率筛选表单.devId = this.devId
            queryCommonStatisticalByTime(this.谐波畸变率筛选表单).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.历史谐波畸变率()
                }
            })
        },
        历史谐波畸变率() {
            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',
                    stack: 'Total',
                    data: data,
                })
            })
            console.log(legend, series, xAxis)
            let chartDom = document.getElementById('历史谐波畸变率')
            let myChart = echarts.init(chartDom)
            let option = {
                tooltip: {
                    trigger: 'axis',
                },
                legend: {
                    data: legend,
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true,
                },
                toolbox: {
                    feature: {
                        saveAsImage: {},
                    },
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: xAxis,
                },
                yAxis: {
                    type: 'value',
                },
                series: series,
            }
            option && myChart.setOption(option)
window.echartsArr.push(myChart)
        },
    },
}
</script>

<style lang="scss">
#历史谐波畸变率,
#实时谐波含量 {
    width: 100%;
    height: 300px;
}
</style>
