<template>
    <div style="display: flex; flex-direction: column; height: 100%">
        <el-form :inline="true" class="fx-jcsb">
            <el-form-item label="统计时间">
                <DatePicker ref="datePickerRef"></DatePicker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="init" icon="el-icon-Search">查询</el-button>
            </el-form-item>
        </el-form>
        <el-descriptions class="mt2" direction="vertical" :column="4" border>
            <el-descriptions-item align="center" label="名称">{{ data.name }}</el-descriptions-item>
            <el-descriptions-item align="center" label="事件总数">{{ data.gs }}</el-descriptions-item>
            <el-descriptions-item align="center" label="可容忍">{{ data.krr }}</el-descriptions-item>
            <el-descriptions-item align="center" label="不可容忍">{{ data.bkrr }}</el-descriptions-item>
        </el-descriptions>
        <div style="flex: 1" class="mt10">
            <my-echart :options="options" @echartClick="echartClick" />
        </div>
    </div>
</template>
<script setup lang="ts">
import { nextTick, onMounted, reactive, ref } from 'vue'
import DatePicker from '@/components/form/datePicker/index.vue'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { useMonitoringPoint } from '@/stores/monitoringPoint'
import { getPlot } from '@/api/event-boot/monitor'

const datePickerRef = ref()
const monitoringPoint = useMonitoringPoint()
const loading = ref(true)
const formData = reactive({
    lineIndex: monitoringPoint.state.lineId,
    startTime: '',
    endTime: ''
})
const data = reactive({
    name: '事件个数',
    gs: 0,
    krr: 0,
    bkrr: 0
})
const options = ref({})

const init = () => {
    loading.value = true
    formData.lineIndex = monitoringPoint.state.lineId
    formData.startTime = datePickerRef.value.timeValue[0]
    formData.endTime = datePickerRef.value.timeValue[1]
    getPlot(formData).then((res: any) => {
        const gongData = gongfunction(res.data.voltageToleranceCurveDataList)
        data.gs = res.data.voltageToleranceCurveDataList.length
        data.krr = gongData.pointF.length
        data.bkrr = gongData.pointFun.length

        options.value = {
            // backgroundColor: "#f9f9f9", //地图背景色深蓝
            title: {
                text: `SEMI F47曲线`
            },
            legend: {
                data: ['上限', '下限', '可容忍事件', '不可容忍事件']
            },
            tooltip: {
                trigger: 'item',
                show: true,
                axisPointer: {
                    type: 'shadow',
                    label: {
                        color: '#fff',
                        fontSize: 16
                    }
                },
                textStyle: {
                    color: '#fff',
                    fontStyle: 'normal',
                    opacity: 0.35,
                    fontSize: 14
                },
                backgroundColor: 'rgba(0,0,0,0.55)',
                borderWidth: 0,
                formatter: function (a: any) {
                    var relVal = ''
                    relVal = "<font style='color:" + "'>发生时间:" + a.value[2] + '</font><br/>'
                    relVal += "<font style='color:" + "'>持续时间:" + a.value[0] + 's</font><br/>'
                    relVal += "<font style='color:" + "'>特征幅值:" + a.value[1].toFixed(2) + '%</font>'
                    return relVal
                }
            },
            xAxis: [
                {
                    type: 'log',
                    min: 0.001,
                    max: 1000,
                    splitLine: {
                        show: false
                    },
                    name: 's'
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    max: function (value: any) {
                        return value.max + 20
                    },
                    splitNumber: 10,
                    minInterval: 0.1,
                    name: '%'
                }
            ],
            color: ['#DAA520', 'green', 'red'],
            options: {
                dataZoom: null,
                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: gongData.pointF
                    },
                    {
                        name: '不可容忍事件',
                        type: 'scatter',
                        symbol: 'circle',
                        data: gongData.pointFun
                    }
                ]
            }
        }
        nextTick(() => {
            loading.value = false
        })
    })
}

function gongfunction(arr: any) {
    let standI = 0
    let unstandI = 0
    let standF = 0
    let unstandF = 0
    let total = 0
    let pointIun = []
    let pointI = []
    let pointF = []
    let pointFun = []
    total = arr.length
    if (total == 0) {
    } else {
        for (let i = 0; i < arr.length; i++) {
            let point = []
            let xx = arr[i].persistTime
            let yy = arr[i].eventValue
            let time = arr[i].time
            let eventId = arr[i].eventId
            // let index =arr[i].eventDetailIndex;
            point = [xx, yy, time, eventId, arr[i]]

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

            if (xx < 0.05) {
                standF++
                pointF.push({
                    value: point,
                    itemStyle: { normal: { color: 'green' } }
                })
            } else if (xx < 0.2) {
                if (yy > 50) {
                    standF++
                    pointF.push({
                        value: point,
                        itemStyle: { normal: { color: 'green' } }
                    })
                } else {
                    unstandF++
                    pointFun.push({
                        value: point,
                        itemStyle: { normal: { color: 'red' } }
                    })
                }
            } else if (xx < 0.5) {
                if (yy > 70) {
                    standF++
                    pointF.push({
                        value: point,
                        itemStyle: { normal: { color: 'green' } }
                    })
                } else {
                    unstandF++
                    pointFun.push({
                        value: point,
                        itemStyle: { normal: { color: 'red' } }
                    })
                }
            } else {
                if (yy > 80) {
                    standF++
                    pointF.push({
                        value: point,
                        itemStyle: { normal: { color: 'green' } }
                    })
                } else {
                    unstandF++
                    pointFun.push({
                        value: point,
                        itemStyle: { normal: { color: 'red' } }
                    })
                }
            }
        }
    }
    return {
        standI,
        unstandI,
        pointI,
        pointIun,
        standF,
        unstandF,
        pointF,
        pointFun
    }
}
const emit = defineEmits(['viewWave'])
const echartClick = (params: any) => {
    emit('viewWave', params.value[4])
}
onMounted(() => {
    datePickerRef.value.setTheDate(1)
    init()
})
</script>
<style></style>
