<template>
    <div v-loading="loading" class="dianyazanjiangbaojimidu">
        <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>
        <div class="mt10 dianyazanjiang">
            <div class="first">
                <div class="mb10">DISDIP表格(国际发配电联盟UNIPEDE)</div>
                <div style="flex: 1; overflow: hidden">
                    <vxe-table v-bind="defaultAttribute" height="420px" size="mini" :data="firstData">
                        <vxe-colgroup title="剩余电压" field="name" width="80px"></vxe-colgroup>
                        <vxe-colgroup title="持续时间">
                            <vxe-column field="twentyMs" title="20ms" :formatter="formatter" />
                            <vxe-column field="oneHundredMs" title="100ms" :formatter="formatter" />
                            <vxe-column field="fiveHundredMs" title="500ms" :formatter="formatter" />
                            <vxe-column field="oneS" title="1s" :formatter="formatter" />
                            <vxe-column field="threeS" title="2s" :formatter="formatter" />
                            <vxe-column field="twentyS" title="20s" :formatter="formatter" />
                            <vxe-column field="sixtyS" title="60s" :formatter="formatter" />
                            <vxe-column field="oneEightyS" title="180s" :formatter="formatter" />
                        </vxe-colgroup>
                    </vxe-table>
                </div>
            </div>
            <div class="second">
                <div class="mb10">EC61000-4-11(用电终端的电压暂降抗度)</div>
                <div style="flex: 1; overflow: hidden">
                    <vxe-table v-bind="defaultAttribute" height="220px" size="mini" :data="secondData">
                        <vxe-colgroup title="剩余电压" field="name" width="80px"></vxe-colgroup>
                        <vxe-colgroup title="持续时间">
                            <vxe-column field="tenTwentyMs" title="10-20ms" :formatter="formatter" />
                            <vxe-column field="twentyOneHundredMs" title="20-100ms" :formatter="formatter" />
                            <vxe-column field="zeroPiontOneTwoS" title="0.1-0.2s" :formatter="formatter" />
                            <vxe-column field="zeroPiontFive1S" title="0.2-0.5s" :formatter="formatter" />
                            <vxe-column field="zeroPiontTwoFiveS" title="0.5-1s" :formatter="formatter" />
                            <vxe-column field="greater1S" title=">1s" :formatter="formatter" />
                        </vxe-colgroup>
                    </vxe-table>
                </div>
            </div>
            <div class="third">
                <div class="mb10">IEC61000-2-8(公共用电暂降测量统计)</div>
                <div style="flex: 1; overflow: hidden">
                    <vxe-table v-bind="defaultAttribute" height="100%" size="mini" :data="thirdData">
                        <vxe-colgroup title="剩余电压" field="name" width="120px"></vxe-colgroup>
                        <vxe-colgroup title="持续时间">
                            <vxe-column field="q" title="0.01-0.1s" align="center" :formatter="formatter" />
                            <vxe-column field="w" title="0.1-0.25s" align="center" :formatter="formatter" />
                            <vxe-column field="e" title="0.25-0.5s" align="center" :formatter="formatter" />
                            <vxe-column field="r" title="0.5-1s" align="center" :formatter="formatter" />
                            <vxe-column field="t" title="1-3s" align="center" :formatter="formatter" />
                            <vxe-column field="y" title="3-20s" align="center" :formatter="formatter" />
                            <vxe-column field="u" title="20-60s" align="center" :formatter="formatter" />
                            <vxe-column field="i" title="60-180s" align="center" :formatter="formatter" />
                        </vxe-colgroup>
                    </vxe-table>
                </div>
            </div>
            <div class="charts" id="charts">
                <MyEchart :options="options" />
            </div>
        </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 { eventDisdip, getCoords, IEC28, IEC411 } from '@/api/event-boot/monitor'
import { defaultAttribute } from '@/components/table/defaultAttribute'

const datePickerRef = ref()
const loading = ref(true)
const monitoringPoint = useMonitoringPoint()
const formData = reactive({
    lineIndex: monitoringPoint.state.lineId,
    startTime: '',
    endTime: ''
})
const options = ref({})
const firstData = ref([])
const secondData = ref([])
const thirdData = ref([])
const chartsData = ref([])
const formatter = (row: any) => {
    return row.cellValue == 0 ? '/' : row.cellValue
}
const init = () => {
    formData.lineIndex = monitoringPoint.state.lineId
    formData.startTime = datePickerRef.value.timeValue[0]
    formData.endTime = datePickerRef.value.timeValue[1]
    loading.value = true
    Promise.all([eventDisdip(formData), IEC411(formData), IEC28(formData), getCoords(formData)]).then(res => {
        firstData.value = res[0].data
        secondData.value = res[1].data
        thirdData.value = res[2].data
        chartsData.value = res[3].data
        options.value = {
            options: {
                xAxis: null,
                yAxis: null,
                dataZoom: null,
                backgroundColor: '#fff',
                tooltip: {
                    trigger: 'axis'
                },
                title: {
                    text: '暂降密度图',
                    x: 'center'
                },
                toolbox: {
                    show: true,
                    feature: {
                        // dataView: { show: true },
                        // dataZoom: { show: true },
                        //restore: { show: true },
                        // saveAsImage: { show: true },
                        myFull: {
                            show: true,
                            title: '全屏查看',
                            icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
                            onclick: () => {
                                let element = document.getElementById('charts') as HTMLElement
                                // 全屏，如果已经全屏，则退出全屏
                                if (document.fullscreenElement) {
                                    if (document.exitFullscreen) {
                                        document.exitFullscreen()
                                    }
                                } else {
                                    if (element.requestFullscreen) {
                                        element.requestFullscreen()
                                    }
                                }
                            }
                        }
                    }
                },
                visualMap: {
                    max: 20,
                    show: false,
                    inRange: {
                        color: ['#313695', '#00BB00', '#ff8000', '#a50026']
                    }
                },
                xAxis3D: {
                    type: 'category',
                    name: '剩余电压(%)',
                    data: ['0-10', '10-20', '20-30', '30-40', '40-50', '50-60', '60-70', '70-80', '80-90', '90-100'],
                    axisLine: {
                        lineStyle: {
                            color: '#111'
                        }
                    },
                    axisLabel: {
                        color: '#111'
                    }
                },
                yAxis3D: {
                    type: 'category',
                    name: '持续时间(cyc)',
                    data: ['1cyc', '2cyc', '3cyc', '4cyc', '5cyc', '6~10cyc', '10~20cyc', '20~30cyc', '30~60cyc'],
                    nameTextStyle: {
                        color: '#111'
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#111'
                        }
                    },
                    axisLabel: {
                        color: '#111'
                    },
                    splitLine: {
                        lineStyle: {
                            // 使用深浅的间隔色
                            color: ['#111'],
                            type: 'dashed',
                            opacity: 0.5
                        }
                    }
                },
                zAxis3D: {
                    type: 'value',
                    splitNumber: 10,
                    minInterval: 10,
                    name: '次数'
                },
                grid3D: {
                    viewControl: {
                        projection: 'perspective',
                        distance: 250
                    },
                    boxWidth: 200,
                    boxDepth: 80,
                    light: {
                        main: {
                            intensity: 1.2
                        },
                        ambient: {
                            intensity: 0.3
                        }
                    }
                },
                series: [
                    {
                        type: 'bar3D',
                        data: chartsData.value.map(function (item: any) {
                            return {
                                value: [item['x'], item['y'], item['z']]
                            }
                        }),
                        shading: 'realistic',
                        label: {
                            show: false,
                            textStyle: {
                                fontSize: 16,
                                borderWidth: 1
                            }
                        },

                        itemStyle: {
                            opacity: 1
                        },
                        emphasis: {
                            label: {
                                textStyle: {
                                    fontSize: 20,
                                    color: '#900'
                                }
                            },
                            itemStyle: {
                                color: '#900'
                            }
                        }
                    }
                ]
            }
        }
        loading.value = false
    })
}
onMounted(() => {
      datePickerRef.value.setTheDate(1)
    init()
})
</script>
<style lang="scss">
.dianyazanjiangbaojimidu {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: scroll;

    .dianyazanjiang {
        flex: 1;
        min-width: 1200px;
        min-height: 800px;
        display: grid;
        grid-template-areas:
            'first charts'
            'second charts'
            'third third '
            'third third ';
        grid-template-rows: 1fr 1fr 1fr 1fr;
        grid-template-columns: 1fr 1fr;
        grid-gap: 10px;

        .first {
            grid-area: first;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            height: 280px;
        }

        .second {
            grid-area: second;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            height: 210px;
        }

        .third {
            grid-area: third;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            height: 720px;
        }

        .charts {
            grid-area: charts;
            overflow: hidden;
        }
    }
}
</style>
