<template>
    <div>
        <TableHeader date-picker :showReset="false">
            <template #operation>
                <el-button icon="el-icon-Download" type="primary" @click="exportEvent">导出</el-button>
            </template>
        </TableHeader>
        <!-- <Table isGroup ref="tableRef" /> -->
        <vxe-table height="200" ref="tableRef" auto-resize :data="tableStore.table.data" v-bind="defaultAttribute">
            <vxe-table-colgroup title="暂降原因统计表">
                <vxe-table-column field="transientCause" title="暂降原因"></vxe-table-column>
                <vxe-table-column field="fault" title="短路故障"></vxe-table-column>
                <vxe-table-column field="excitation" title="变压器激磁"></vxe-table-column>
                <vxe-table-column field="disturbance" title="电压扰动"></vxe-table-column>
                <vxe-table-column field="largeInduction" title="大型感应电动机启动"></vxe-table-column>
                <vxe-table-column field="other" title="其他"></vxe-table-column>
            </vxe-table-colgroup>
        </vxe-table>
        <div :style="{ height: height }">
            <my-echart :options="options" />
        </div>
    </div>
</template>

<script setup lang="ts">
import TableHeader from '@/components/table/header/index.vue'
import TableStore from '@/utils/tableStore'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import { ref, onMounted, provide, nextTick } from 'vue'
import { mainHeight } from '@/utils/layout'
import { useDictData } from '@/stores/dictData'
import MyEchart from '@/components/echarts/MyEchart.vue'

const dictData = useDictData()
const tableRef = ref()
const options = ref({})
const height = mainHeight(340).height
const tableStore = new TableStore({
    url: '/event-boot/report/getReason',
    publicHeight: 300,
    showPage: false,
    method: 'POST',
    column: [],
    loadCallback: () => {
        let arr = [
            {
                transientCause: '次数',
                fault: '',
                excitation: '',
                disturbance: '',
                largeInduction: '',
                other: ''
            },
            {
                transientCause: '占比(%)',
                fault: '',
                excitation: '',
                disturbance: '',
                largeInduction: '',
                other: ''
            }
        ]
        let pie: any = []
        tableStore.table.data.forEach((item: any) => {
            let obj = { value: item.times, name: item.reason, zb: item.rate - 0 }
            pie.push(obj)
        })
        tableStore.table.data.forEach(item => {
            if (item.reason == '电压扰动') {
                arr[0].disturbance = item.times
                arr[1].disturbance = item.rate
            } else if (item.reason == '短路故障') {
                arr[0].fault = item.times
                arr[1].fault = item.rate
            } else if (item.reason == '变压器激磁') {
                arr[0].excitation = item.times
                arr[1].excitation = item.rate
            } else if (item.reason == '大型感应电动机启动') {
                arr[0].largeInduction = item.times
                arr[1].largeInduction = item.rate
            } else if (item.reason == '其他') {
                arr[0].other = item.times
                arr[1].other = item.rate
            }
        })
        tableStore.table.data = arr
        options.value = {
            title: {
                text: '暂降原因统计',
                top: '20'
            },
            
            legend: {
                type: 'scroll',
                orient: 'vertical',
                left: 10,
                top: '5%',
                tooltip: {
                    show: true
                }
            },
            xAxis: {
                show: false
            },
            yAxis: {
                show: false
            },
            dataZoom: { show: false },
            tooltip: {
                formatter: function (params) {
                    return `暂降原因统计:  <br/>${params.data.name}:${params.data.value}次  <br/>占比:${params.data.zb}%`
                }
            },
            options: {
                series: [
                    {
                        name: '暂降原因统计',
                        type: 'pie',
                        radius: '60%',
                        label: {
                            normal: {
                                show: false
                            }
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '12',
                                formatter: '{b}: {c} (次) 占比:{d}%'
                            }
                        },
                        data: pie
                    }
                ]
            }
        }
    }
})
tableStore.table.params.statisticalType = dictData.getBasicData('Statistical_Type', [
    'Report_Type',
    'Manufacturer',
    'Voltage_Level',
    'Load_Type'
])[0]
tableStore.table.params.deptIndex = dictData.state.area[0].id
tableStore.table.params.monitorFlag = 2
tableStore.table.params.powerFlag = 2
tableStore.table.params.serverName = 'event-boot'
tableStore.table.params.type = 0
provide('tableStore', tableStore)
nextTick(() => {
    tableStore.index()
})
// 导出
const exportEvent = () => {
    tableRef.value.exportData({
        filename: '暂降原因统计', // 文件名字
        sheetName: 'Sheet1',
        type: 'xlsx', //导出文件类型 xlsx 和 csv
        useStyle: true,
        data: tableStore.table.data // 数据源 // 过滤那个字段导出
    })
}
</script>
