<template>
    <div class="flex">
        <span style="width: 100px; margin-top: 3px">电压等级:</span>
        <el-checkbox
            :indeterminate="isIndeterminate"
            v-model="checkAll"
            @change="handleCheckAllChange"
            style="margin-right: 28px"
        >
            全选
        </el-checkbox>
        <el-checkbox-group
            v-model="checkedVoltage"
            @change="handleCheckedVoltageChange"
            style="height: 72px; overflow-y: auto; flex: 1"
        >
            <el-checkbox v-for="(item, index) in grade" :label="item" :key="index">{{ item.name }}</el-checkbox>
        </el-checkbox-group>
    </div>
    <div class="flex">
        <span style="width: 100px; margin-top: 3px">干扰源类型:</span>
        <el-checkbox
            :indeterminate="isIndeterminate1"
            v-model="checkAll1"
            @change="handleCheckAllChange1"
            style="margin-right: 28px"
        >
            全选
        </el-checkbox>
        <el-checkbox-group
            v-model="checkedSource"
            @change="handleCheckedSourceChange"
            style="height: 72px; overflow-y: auto; flex: 1"
        >
            <el-checkbox v-for="(item, index) in type" :label="item" :key="index">{{ item.name }}</el-checkbox>
        </el-checkbox-group>
    </div>
    <div class="flex">
        <span style="width: 100px; line-height: 32px">兼容曲线:</span>
        <el-radio-group v-model="radio" @change="radioChange">
            <el-radio label="ITIC">ITIC</el-radio>
            <el-radio label="F47">F47</el-radio>
        </el-radio-group>
    </div>
    <my-echart class="bars_w" :options="echartList" @echartClick="echartClick" />

    <vxe-table class="dw" :data="TableData" height="50px" v-bind="defaultAttribute">
        <vxe-column field="name" title="名称" width="100px"></vxe-column>
        <vxe-column field="totalEvents" title="事件总数" width="100px"></vxe-column>
        <vxe-column field="tolerable" title="可容忍" width="100px"></vxe-column>
        <vxe-column field="Intolerable" title="不可容忍" width="100px"></vxe-column>
    </vxe-table>
</template>
<script setup lang="ts">
import { useDictData } from '@/stores/dictData'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { mainHeight } from '@/utils/layout'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import { ref, reactive } from 'vue'
const emit = defineEmits(['viewWave'])
const dictData = useDictData()
const isIndeterminate = ref(false)
const isIndeterminate1 = ref(false)
const checkAll = ref(true)
const checkAll1 = ref(true)
const radio = ref('ITIC')
const echartList = ref({})
const ITIC = ref({})
const F47 = ref({})
const pointI: any = ref([])
const pointIun: any = ref([])
const pointF: any = ref([])
const pointFun: any = ref([])
const datalist: any = ref([])
const TableData = ref([
    {
        name: '事件个数',
        totalEvents: '',
        tolerable: '',
        Intolerable: ''
    }
])
const checkedVoltage: any = ref(ref(dictData.getBasicData('Dev_Voltage_Stand')))
const checkedSource: any = ref(dictData.getBasicData('Interference_Source'))
const grade = ref(dictData.getBasicData('Dev_Voltage_Stand'))
const type = ref(dictData.getBasicData('Interference_Source'))
// 电压等级多选
const handleCheckedVoltageChange = (val: any) => {
    const checkedCount = val.length
    checkAll.value = checkedCount === grade.value.length
    isIndeterminate.value = checkedCount > 0 && checkedCount < grade.value.length
}
const handleCheckAllChange = (val: any) => {
    checkedVoltage.value = val ? grade.value : []
    isIndeterminate.value = false
}
// 干扰源类型多选
const handleCheckAllChange1 = (val: any) => {
    checkedSource.value = val ? type.value : []
    isIndeterminate.value = false
}
const handleCheckedSourceChange = (val: any) => {
    const checkedCount = val.length
    checkAll1.value = checkedCount === type.value.length
    isIndeterminate1.value = checkedCount > 0 && checkedCount < type.value.length
}

const info = async (list: any) => {
    datalist.value = []
    list.forEach((item: any) => {
        // if (item.eventValue < 2 && item.eventValue > 0) {
        datalist.value.push(item)
        // }
    })
    await gongfunction()

    ITIC.value = {
        title: {
            text: 'ITIC曲线'
        },
        tooltip: {
            formatter: function (a: any) {
                if (a[0].value[4] == undefined) {
                    return
                }

                let relVal = ''
                relVal = "<font style='color:" + "'>监测点名称:" + '&nbsp' + '&nbsp' + a[0].value[7] + '</font><br/>'
                relVal += "<font style='color:" + "'>供电公司:" + '&nbsp' + '&nbsp' + a[0].value[3] + '</font><br/>'
                relVal += "<font style='color:" + "'>变电站:" + '&nbsp' + '&nbsp' + a[0].value[4] + '</font><br/>'
                relVal += "<font style='color:" + "'>发生时刻:" + '&nbsp' + '&nbsp' + a[0].value[2] + '</font><br/>'
                relVal +=
                    "<font style='color:" +
                    "'>持续时间:" +
                    '&nbsp' +
                    '&nbsp' +
                    a[0].value[0].toFixed(3) +
                    's</font><br/>'
                relVal +=
                    "<font style='color:" + "'>特征幅值:" + '&nbsp' + '&nbsp' + a[0].value[1].toFixed(3) + '%</font>'
                return relVal
            }
        },
        legend: {
            data: ['上限', '下限', '可容忍事件', '不可容忍事件'],
            // selectedMode: false,
            left: '80px',
            top: '18px'
        },
        grid: {
            top: '60px',
            bottom: '10px'
        },
        color: ['#FF8C00', '#00BFFF', 'green', 'red'],
        xAxis: {
            type: 'log',
            min: '0.001',
            max: '1000',
            name: 's',
            splitLine: { show: false }
        },
        yAxis: {
            type: 'value',
            splitNumber: 10,
            minInterval: 3,
            name: '%'
        },
        dataZoom: {
            type: null,
            show: false
        },
        options: {
            series: [
                {
                    name: '上限',
                    type: 'line',
                    data: [
                        [0.001, 200],
                        [0.003, 140],
                        [0.003, 120],
                        [0.5, 120],
                        [0.5, 110],
                        [10, 110],
                        [1000, 110]
                    ],
                    showSymbol: false,
                    tooltips: {
                        show: false
                    }
                },
                {
                    name: '下限',
                    type: 'line',
                    data: [
                        [0.02, 0],
                        [0.02, 70],
                        [0.5, 70],
                        [0.5, 80],
                        [10, 80],
                        [10, 90],
                        [1000, 90]
                    ],
                    showSymbol: false,
                    tooltips: {
                        show: false
                    }
                },
                {
                    name: '可容忍事件',
                    type: 'scatter',
                    symbol: 'circle',
                    data: pointI.value
                },
                {
                    name: '不可容忍事件',
                    type: 'scatter',
                    symbol: 'circle',
                    data: pointIun.value
                }
            ]
        }
    }
    F47.value = {
        title: {
            text: 'F47曲线'
        },
        tooltip: {
            formatter: function (a: any) {
                if (a[0].value[4] == undefined) {
                    return
                }

                let relVal = ''
                relVal = "<font style='color:" + "'>监测点名称:" + '&nbsp' + '&nbsp' + a[0].value[7] + '</font><br/>'
                relVal += "<font style='color:" + "'>供电公司:" + '&nbsp' + '&nbsp' + a[0].value[3] + '</font><br/>'
                relVal += "<font style='color:" + "'>变电站:" + '&nbsp' + '&nbsp' + a[0].value[4] + '</font><br/>'
                relVal += "<font style='color:" + "'>发生时刻:" + '&nbsp' + '&nbsp' + a[0].value[2] + '</font><br/>'
                relVal +=
                    "<font style='color:" +
                    "'>持续时间:" +
                    '&nbsp' +
                    '&nbsp' +
                    Math.floor(a[0].value[0] * 1000) / 1000 +
                    's</font><br/>'
                relVal +=
                    "<font style='color:" +
                    "'>特征幅值:" +
                    '&nbsp' +
                    '&nbsp' +
                    Math.floor(a[0].value[1] * 1000) / 1000 +
                    '%</font>'
                return relVal
            }
        },
        legend: {
            data: ['分割线', '可容忍事件', '不可容忍事件'],
            // selectedMode: false,
            left: '80px',
            top: '18px'
        },
        grid: {
            top: '60px',
            bottom: '10px'
        },
        color: ['#DAA520', 'green', 'red'],
        xAxis: {
            type: 'log',
            min: '0.001',
            max: '1000',
            name: 's',
            splitLine: { show: false }
        },
        yAxis: {
            type: 'value',
            splitNumber: 10,
            minInterval: 3,
            name: '%'
        },
        dataZoom: {
            type: null,
            show: false
        },
        options: {
            series: [
                {
                    name: '分割线',
                    type: 'line',
                    data: [
                        [0.05, 0],
                        [0.05, 50],
                        [0.2, 50],
                        [0.2, 70],
                        [0.5, 70],
                        [0.5, 80],
                        [10, 80],
                        [1000, 80]
                    ],
                    showSymbol: false,
                    tooltips: {
                        show: false
                    }
                },
                {
                    name: '可容忍事件',
                    type: 'scatter',
                    symbol: 'circle',
                    data: pointF.value
                },
                {
                    name: '不可容忍事件',
                    type: 'scatter',
                    symbol: 'circle',
                    data: pointFun.value
                }
            ]
        }
    }
    radioChange(radio.value)
}
const radioChange = (e: any) => {
    if (e == 'ITIC') {
        echartList.value = ITIC.value
        TableData.value[0].totalEvents = pointI.value.length + pointIun.value.length
        TableData.value[0].tolerable = pointI.value.length
        TableData.value[0].Intolerable = pointIun.value.length
    } else if (e == 'F47') {
        echartList.value = F47.value
        TableData.value[0].totalEvents = pointF.value.length + pointFun.value.length
        TableData.value[0].tolerable = pointF.value.length
        TableData.value[0].Intolerable = pointFun.value.length
    }
}

const gongfunction = () => {
    var standI = 0
    var unstandI = 0
    var standF = 0
    var unstandF = 0
    pointI.value = []
    pointIun.value = []
    pointF.value = []
    pointFun.value = []
    var total = 0
    total = datalist.value.length
    if (total == 0) {
    } else {
        for (var i = 0; i < datalist.value.length; i++) {
            var point = []
            var xx = datalist.value[i].persistTime
            var yy = datalist.value[i].eventValue * 100
            var time = datalist.value[i].time.replace('T', ' ')
            var company = datalist.value[i].gdName
            var substation = datalist.value[i].subName
            var index = datalist.value[i].lineId
            var eventId = datalist.value[i].eventId
            var lineName = datalist.value[i].lineName
            point = [xx, yy, time, company, substation, index, eventId, lineName, datalist.value[i]]

            if (xx <= 0.003) {
                var line = 0
                line = 230 - 30000 * xx
                if (yy > line) {
                    unstandI++
                    pointIun.value.push({
                        value: point,
                        itemStyle: { normal: { color: 'red' } }
                    })
                } else {
                    standI++
                    pointI.value.push({
                        value: point,
                        itemStyle: { normal: { color: 'green' } }
                    })
                }
            } else if (xx <= 0.02) {
                if (yy > 120) {
                    unstandI++
                    pointIun.value.push({
                        value: point,
                        itemStyle: { normal: { color: 'red' } }
                    })
                } else {
                    standI++
                    pointI.value.push({
                        value: point,
                        itemStyle: { normal: { color: 'green' } }
                    })
                }
            } else if (xx <= 0.5) {
                if (yy > 120 || yy < 70) {
                    unstandI++
                    pointIun.value.push({
                        value: point,
                        itemStyle: { normal: { color: 'red' } }
                    })
                } else {
                    standI++
                    pointI.value.push({
                        value: point,
                        itemStyle: { normal: { color: 'green' } }
                    })
                }
            } else if (xx <= 10) {
                if (yy > 110 || yy < 80) {
                    unstandI++
                    pointIun.value.push({
                        value: point,
                        itemStyle: { normal: { color: 'red' } }
                    })
                } else {
                    standI++
                    pointI.value.push({
                        value: point,
                        itemStyle: { normal: { color: 'green' } }
                    })
                }
            } else {
                if (yy > 110 || yy < 90) {
                    unstandI++
                    pointIun.value.push({
                        value: point,
                        itemStyle: { normal: { color: 'red' } }
                    })
                } else {
                    standI++
                    pointI.value.push({
                        value: point,
                        itemStyle: { normal: { color: 'green' } }
                    })
                }
            }

            if (xx < 0.05) {
                standF++
                pointF.value.push({
                    value: point,
                    itemStyle: { normal: { color: 'green' } }
                })
            } else if (xx < 0.2) {
                if (yy > 50) {
                    standF++
                    pointF.value.push({
                        value: point,
                        itemStyle: { normal: { color: 'green' } }
                    })
                } else {
                    unstandF++
                    pointFun.value.push({
                        value: point,
                        itemStyle: { normal: { color: 'red' } }
                    })
                }
            } else if (xx < 0.5) {
                if (yy > 70) {
                    standF++
                    pointF.value.push({
                        value: point,
                        itemStyle: { normal: { color: 'green' } }
                    })
                } else {
                    unstandF++
                    pointFun.value.push({
                        value: point,
                        itemStyle: { normal: { color: 'red' } }
                    })
                }
            } else {
                if (yy > 80) {
                    standF++
                    pointF.value.push({
                        value: point,
                        itemStyle: { normal: { color: 'green' } }
                    })
                } else {
                    unstandF++
                    pointFun.value.push({
                        value: point,
                        itemStyle: { normal: { color: 'red' } }
                    })
                }
            }
        }
    }
}
const echartClick = (params: any) => {
   
    emit('viewWave', params.value[8])
}

defineExpose({ checkedVoltage, checkedSource, info })
const layout = mainHeight(320) as any
</script>
<style lang="scss" scoped>
.flex {
    display: flex;
}

.bars_w {
    height: calc(v-bind('layout.height'));
}

.dw {
    position: absolute;
    top: 160px;
    right: 70px;
}

:deep(.vxe-table--body-wrapper) {
    min-height: 30px !important;
    height: 40px !important;
}
</style>
