<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>
                <el-button type="primary" @click="xiebojibianlvSearch">查询</el-button>
            </el-form-item>
        </el-form>
        <el-descriptions border direction="vertical" :column="4">
            <el-descriptions-item label="最新数据时间">{{ new Date().toLocaleString() }}</el-descriptions-item>
            <el-descriptions-item label="设备温度">10</el-descriptions-item>
            <el-descriptions-item label="环境温度">10</el-descriptions-item>
            <el-descriptions-item label="湿度">10</el-descriptions-item>
        </el-descriptions>
        <div style="height: 10px"></div>
        <el-table
   stripe         :cell-style="{ textAlign: 'center' }"
            :header-cell-style="{ textAlign: 'center' }"
            style="width: 100%"
            :data="tableData"
            border
            header-cell-class-name="table_header"
        >
            <!-- <el-table-column type="phase" :index="indexMethod"></el-table-column> -->
            <el-table-column prop="positionName" label="位置"> </el-table-column>
            <el-table-column prop="statisticalData" label="值"> </el-table-column>
            <!-- <el-table-column prop="address" label="输出侧"> </el-table-column> -->
        </el-table>
        <div style="height: 20px"></div>
        <div id="实时谐波畸变率"></div>
    </div>
</template>

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

export default {
    data() {
        return {
            tableData: [],
            统计指标下拉框: [],
            值类型下拉框: [
                {
                    label: '平均值',
                    value: 'avg',
                },
                {
                    label: '最大值',
                    value: 'max',
                },
                {
                    label: '最小值',
                    value: 'min',
                },
                {
                    label: 'CP95值',
                    value: 'cp95',
                },
            ],
            谐波畸变率筛选表单: {
                devId: '',
                date: [],
                endTime: '',
                frequency: '2',
                startTime: '',
                statisticalId: '',
                valueType: '',
            },
            timesOptions: [],
            linePosition: [],
        }
    },
    props: {
        queryByCodeId: {
            type: String,
            default: '',
        },
        devId: {
            type: String,
            default: '',
        },
    },
    created() {
        for (let i = 2; i < 51; 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
                this.xiebojibianlvSearch()
            }
        })
    },
    methods: {
        xiebojibianlvSearch() {
            console.log('谐波畸变率查询')
            this.谐波畸变率筛选表单.devId = this.devId
            queryFisrtCommonStatistical(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)

                this.实时谐波畸变率()
            })
        },
        实时谐波畸变率() {
            let chartDom = document.getElementById('实时谐波畸变率')
            let myChart = echarts.init(chartDom)
            let option = {
                title: {
                    // text: '准实时' + this.统计指标下拉框.find((item) => item.value == this.谐波畸变率筛选表单.statisticalId).label,
                    // subtext: 'Feature Sample: Gradient Color, Shadow, Click Zoom'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow',
                    },
                },
                // legend: {
                //     data: this.tableData.map((item) => item.positionName),
                // },
                xAxis: {
                    type: 'category',
                    data: this.tableData.map((item) => item.positionName),
                },
                yAxis: {
                    type: 'value',
                },
                series: [
                    {
                        // name: '负载侧',
                        data: this.tableData.map((item) => item.statisticalData),
                        type: 'bar',
                    },
                    // {
                    //     name: '电网侧',
                    //     data: [110],
                    //     type: 'bar',
                    // },
                    // {
                    //     name: '输出侧',
                    //     data: [120],
                    //     type: 'bar',
                    // },
                ],
            }
            option && myChart.setOption(option)
window.echartsArr.push(myChart)
        },
    },
}
</script>

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