<template>
    <div style="display: flex; flex-direction: column; height: 100%; position: relative">
        <el-form :inline="true">
            <el-form-item label="多监测点">
                <el-checkbox v-model="checked" @change="checkChange" />
            </el-form-item>
            <el-form-item label="统计时间">
                <DatePicker ref="datePickerRef" ></DatePicker>
            </el-form-item>
            <el-form-item label="指标类型:">
                <el-select
                    v-model="formData.condition"
                    multiple
                    collapse-tags
                    :multiple-limit="5"
                    filterable
                    placeholder="请选择指标"
                    @change="conditionChange"
                >
                    <el-option-group v-for="group in indexOptions" :key="group.label" :label="group.label">
                        <el-option
                            v-for="item in group.options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-option-group>
                </el-select>
            </el-form-item>
            <el-form-item label="谐波次数:" v-if="showXieBoCiShu">
                <el-select style="width: 100%" v-model="formData.harmonic" placeholder="请选择谐波" filterable>
                    <el-option
                        v-for="item in harmonicOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item v-if="showJianXieBoCiShu" label="间谐波次数:">
                <el-select style="width: 100%" v-model="formData.inHarmonic" placeholder="请选择间谐波" filterable>
                    <el-option
                        v-for="item in inharmonicOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="init" icon="el-icon-Search">查询</el-button>
            </el-form-item>
        </el-form>
        <div style="flex: 1; overflow: hidden" class="mt10" v-loading="loading">
            <vxe-table height="auto" v-bind="defaultAttribute" :data="tableData">
                <vxe-column field="subName" title="变电站" min-width="120px"></vxe-column>
                <vxe-column field="lineName" title="监测点名称" min-width="120px"></vxe-column>
                <vxe-column field="targetName" title="指标类型" min-width="120px"></vxe-column>
                <vxe-column field="phaseType" title="相别" min-width="100px"></vxe-column>
                <vxe-column field="scale" title="电压等级" min-width="100px"></vxe-column>
                <vxe-column field="timeId" title="时间" min-width="130px"></vxe-column>
                <vxe-column field="unit" title="单位" min-width="100px"></vxe-column>
                <vxe-column field="maxData" title="最大值(%)" min-width="100px">
                    <template #default="scope">
                        <el-button
                            @click="showCharts(scope.row, 3, '最大值')"
                            :style="{ color: scope.row.statisticalType === 3 ? '#A52a2a' : '#07d75a' }"
                            type="text"
                            size="small"
                        >
                            {{ scope.row.maxData }}
                        </el-button>
                        <el-button v-if="scope.row.statisticalType === 3.14159">/</el-button>
                    </template>
                </vxe-column>
                <vxe-column field="minData" title="最小值(%)" min-width="100px">
                    <template #default="scope">
                        <el-button
                            @click="showCharts(scope.row, 2, '最小值')"
                            :style="{ color: scope.row.statisticalType === 2 ? '#A52a2a' : '#07d75a' }"
                            type="text"
                            size="small"
                        >
                            {{ scope.row.minData }}
                        </el-button>
                        <el-button v-if="scope.row.statisticalType === 3.14159">/</el-button>
                    </template>
                </vxe-column>
                <vxe-column field="avgData" title="平均值(%)" min-width="100px">
                    <template #default="scope">
                        <el-button
                            @click="showCharts(scope.row, 1, '平均值')"
                            :style="{ color: scope.row.statisticalType === 1 ? '#A52a2a' : '#07d75a' }"
                            type="text"
                            size="small"
                        >
                            {{ scope.row.avgData }}
                        </el-button>
                        <el-button v-if="scope.row.statisticalType === 3.14159">/</el-button>
                    </template>
                </vxe-column>
                <vxe-column field="cp95Data" title="CP95值(%)" min-width="100px">
                    <template #default="scope">
                        <el-button
                            @click="showCharts(scope.row, 4, 'CP95值')"
                            :style="{ color: scope.row.statisticalType === 4 ? '#A52a2a' : '#07d75a' }"
                            type="text"
                            size="small"
                        >
                            {{ scope.row.cp95Data }}
                        </el-button>
                        <el-button v-if="scope.row.statisticalType === 3.14159">/</el-button>
                    </template>
                </vxe-column>
            </vxe-table>
            <SecondSheet v-if="options" style="background: #fff; z-index: 10">
                <el-button
                    style="position: absolute; right: 0; top: 0; cursor: pointer; z-index: 3"
                    icon="el-icon-Back"
                    size="small"
                    @click="close"
                >
                    返回
                </el-button>
                <MyEChart :options="options"></MyEChart>
            </SecondSheet>
        </div>
    </div>
</template>
<script setup lang="ts">
import { nextTick, onMounted, reactive, ref } from 'vue'
import { Close } from '@element-plus/icons-vue'
import DatePicker from '@/components/form/datePicker/index.vue'
import { useMonitoringPoint } from '@/stores/monitoringPoint'
import { indexOptions, harmonicOptions, inharmonicOptions } from '@/utils/dictionary'
import { getHistoryTableData, getHistoryLineData } from '@/api/harmonic-boot/normLimit'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import SecondSheet from '@/components/secondSheet/index.vue'
import MyEChart from '@/components/echarts/MyEchart.vue'

const datePickerRef = ref()
const monitoringPoint = useMonitoringPoint()
const loading = ref(true)
const checked = ref(monitoringPoint.state.showCheckBox)
const formData = reactive<{
    lineId: string[]
    searchBeginTime: string
    searchEndTime: string
    condition: string[]
    harmonic: number
    inHarmonic: number
}>({
    lineId: [],
    searchBeginTime: '',
    searchEndTime: '',
    condition: ['10', '11', '12'],
    harmonic: 2,
    inHarmonic: 1
})
const tableData = ref([])
const showXieBoCiShu = ref(false)
const showJianXieBoCiShu = ref(false)
const options = ref<any>(null)

onMounted(() => {
    init()
})
const init = () => {
    loading.value = true
    formData.lineId = checked.value ? monitoringPoint.state.lineIds : [monitoringPoint.state.lineId]
    formData.searchBeginTime = datePickerRef.value.timeValue[0]
    formData.searchEndTime = datePickerRef.value.timeValue[1]
    getHistoryTableData(formData).then((res: any) => {
        tableData.value = res.data.map((item: any) => {
            return {
                ...item,
                maxData: item.maxData.toFixed(2),
                minData: item.minData.toFixed(2),
                avgData: item.avgData.toFixed(2),
                cp95Data: item.cp95Data.toFixed(2)
            }
        })
        nextTick(() => {
            loading.value = false
        })
    })
}
const checkChange = () => {
    if (checked.value) {
        monitoringPoint.setShowCheckBox(true)
    } else {
        monitoringPoint.setShowCheckBox(false)
        init()
    }
}
const close = () => {
    // console.log('====================================')
    // console.log(2123123)
    // console.log('====================================')
    options.value = null
}
const showCharts = (row: any, valueType: number, name: string) => {
    getHistoryLineData({
        lineId: row.lineId,
        number: row.number,
        phaseType: row.phaseType,
        searchTime: row.timeId,
        targetCode: row.targetCode,
        valueType
    }).then(res => {
        options.value = {
            title: {
                text: row.subName + ' ' + row.lineName + ' ' + row.targetName + ' ' + row.phaseType + '相' + name
            },
            legend: {
                show: false
            },
            xAxis: {
                type: 'category',
                name: '时间',
                data: res.data[0]?.value.map((item: any[]) => item[0])
            },
            yAxis: {
                name: '%',
                type: 'value'
            },
            series: [
                {
                    name: name,
                    data: res.data[0]?.value.map((item: any[]) => item[1]),
                    type: 'line'
                }
            ],
            options: {
                grid: {
                    top: '50px',
                    left: '40px',
                    right: '60px',
                    bottom: '10px',
                    containLabel: true
                },
                dataZoom: null
            }
        }
    })
}
const conditionChange = () => {
    //判断一个指标时
    if (formData.condition.length == 1) {
        if (
            formData.condition.includes('40') ||
            formData.condition.includes('43') ||
            formData.condition.includes('44') ||
            formData.condition.includes('45')
        ) {
            showXieBoCiShu.value = true
        } else {
            showXieBoCiShu.value = false
        }
        if (
            formData.condition.includes('46') ||
            // formData.condition.includes('47') ||
            // formData.condition.includes('48') ||
            formData.condition.includes('49')
        ) {
            showJianXieBoCiShu.value = true
        } else {
            showJianXieBoCiShu.value = false
        }
    }
    //判断2个指标时
    if (formData.condition.length == 2) {
        if (
            formData.condition.includes('40') ||
            formData.condition.includes('43') ||
            formData.condition.includes('44') ||
            (formData.condition.includes('45') && formData.condition.includes('46')) ||
            // formData.condition.includes('47') ||
            // formData.condition.includes('48') ||
            formData.condition.includes('49')
        ) {
            showXieBoCiShu.value = true
            showJianXieBoCiShu.value = true
        }
        if (
            formData.condition.includes('40') ||
            formData.condition.includes('43') ||
            formData.condition.includes('44') ||
            formData.condition.includes('45')
        ) {
            showXieBoCiShu.value = true
        } else {
            showXieBoCiShu.value = false
        }
        if (
            formData.condition.includes('46') ||
            // formData.condition.includes('47') ||
            // formData.condition.includes('48') ||
            formData.condition.includes('49')
        ) {
            showJianXieBoCiShu.value = true
        } else {
            showJianXieBoCiShu.value = false
        }
    }
    //判断3个指标时
    if (formData.condition.length == 3) {
        if (
            (formData.condition.includes('40') ||
                formData.condition.includes('43') ||
                formData.condition.includes('44') ||
                formData.condition.includes('45')) &&
            (formData.condition.includes('46') ||
                // formData.condition.includes('47') ||
                // formData.condition.includes('48') ||
                formData.condition.includes('49'))
        ) {
            showXieBoCiShu.value = true
            showJianXieBoCiShu.value = true
        } else {
            showXieBoCiShu.value = false
            showJianXieBoCiShu.value = false
        }
        if (
            formData.condition.includes('46') ||
            // formData.condition.includes('47') ||
            // formData.condition.includes('48') ||
            formData.condition.includes('49')
        ) {
            showJianXieBoCiShu.value = true
        } else {
            showJianXieBoCiShu.value = false
        }
        if (
            formData.condition.includes('40') ||
            formData.condition.includes('43') ||
            formData.condition.includes('44') ||
            formData.condition.includes('45')
        ) {
            showXieBoCiShu.value = true
        } else {
            showXieBoCiShu.value = false
        }
    }
    //判断4个指标时
    if (formData.condition.length == 4) {
        if (
            (formData.condition.includes('40') ||
                formData.condition.includes('43') ||
                formData.condition.includes('44') ||
                formData.condition.includes('45')) &&
            (formData.condition.includes('46') ||
                // formData.condition.includes('47') ||
                // formData.condition.includes('48') ||
                formData.condition.includes('49'))
        ) {
            showXieBoCiShu.value = true
            showJianXieBoCiShu.value = true
        } else {
            showXieBoCiShu.value = false
            showJianXieBoCiShu.value = false
        }
        if (
            formData.condition.includes('46') ||
            // formData.condition.includes('47') ||
            // formData.condition.includes('48') ||
            formData.condition.includes('49')
        ) {
            showJianXieBoCiShu.value = true
        } else {
            showJianXieBoCiShu.value = false
        }
        if (
            formData.condition.includes('40') ||
            formData.condition.includes('43') ||
            formData.condition.includes('44') ||
            formData.condition.includes('45')
        ) {
            showXieBoCiShu.value = true
        } else {
            showXieBoCiShu.value = false
        }
    }
    //判断5个指标时
    if (formData.condition.length == 5) {
        if (
            (formData.condition.includes('40') ||
                formData.condition.includes('43') ||
                formData.condition.includes('44') ||
                formData.condition.includes('45')) &&
            (formData.condition.includes('46') ||
                // formData.condition.includes('47') ||
                // formData.condition.includes('48') ||
                formData.condition.includes('49'))
        ) {
            showXieBoCiShu.value = true
            showJianXieBoCiShu.value = true
        } else {
            showXieBoCiShu.value = false
            showJianXieBoCiShu.value = false
        }
        if (
            formData.condition.includes('46') ||
            // formData.condition.includes('47') ||
            // formData.condition.includes('48') ||
            formData.condition.includes('49')
        ) {
            showJianXieBoCiShu.value = true
        } else {
            showJianXieBoCiShu.value = false
        }
        if (
            formData.condition.includes('40') ||
            formData.condition.includes('43') ||
            formData.condition.includes('44') ||
            formData.condition.includes('45')
        ) {
            showXieBoCiShu.value = true
        } else {
            showXieBoCiShu.value = false
        }
    }
    //判断无指标时
    if (formData.condition.length == 0) {
        showJianXieBoCiShu.value = false
        showXieBoCiShu.value = false
    }
}
</script>
<style></style>
