<template>
    <div class="default-main">
        <TableHeader date-picker area showCustomColumn>
            <template v-slot:select>
                <el-form-item label="统计类型">
                    <el-radio-group v-model="tableStore.table.params.comFlag">
                        <el-radio-button label="1">在线</el-radio-button>
                        <el-radio-button label="0">离线</el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="触发类型">
                    <el-select v-model.trim="tableStore.table.params.waveType" placeholder="请选择" clearable filterable>
                        <el-option
                            v-for="item in triggerType"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="电网标志">
                    <el-select v-model="tableStore.table.params.powerFlag" placeholder="请选择电网标志" filterable>
                        <el-option v-for="item in sign" :key="item.id" :label="item.name" :value="item.algoDescribe" />
                    </el-select>
                </el-form-item>
                <el-form-item label="网公司标志">
                    <el-select
                        v-model="tableStore.table.params.monitorFlag"
                        collapse-tags
                        placeholder="请选择网公司标志"
                        filterable
                    >
                        <el-option
                            v-for="item in monitorList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select> 
                </el-form-item>
                <el-form-item label="筛选数据">
                    <el-input
                        v-model="tableStore.table.params.searchValue"
                        placeholder="供电公司,变电站或监测点"
                        maxlength="32"
                        show-word-limit
                        clearable
                    />
                </el-form-item>
            </template>
            <template #operation>
                <el-button icon="el-icon-Download" type="primary" @click="exportEvent" :loading="loading">
                    报告生成
                </el-button>
            </template>
        </TableHeader>
        <Table ref="tableRef"  :checkboxConfig="checkboxConfig" />
    </div>
</template>
<script setup lang="tsx">
import { ref, onMounted, provide, reactive } from 'vue'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import { useDictData } from '@/stores/dictData'
import { getEventReport } from '@/api/event-boot/report'
import { ElMessage } from 'element-plus'

defineOptions({
    name: 'TransientReport/eventreports'
})
const dictData = useDictData()
const triggerType = dictData.getBasicData('Event_Statis')
const sign: any = dictData.getBasicData('power_flag')
const tableRef = ref()

const loading = ref(false)
const monitorList = [
    { value: 0, label: '非网公司' },
    { value: 1, label: '网公司' },
    { value: 2, label: '全部数据' }
]

const tableStore = new TableStore({
    url: '/event-boot/report/getEventReport',
    method: 'POST',
    column: [
        { width: '60', type: 'checkbox' },
        {
            title: '序号',

            align: 'center',
            width: 80,
            formatter: (row: any) => {
                return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
            }
        },
        {
            field: 'startTime',
            title: '暂降发生时刻',
            width: '180',
            sortable: true,
            formatter: (row: any) => {
                return row.cellValue ? row.cellValue.replace('T', ' ') : '/'
            }
        },
        {
            field: 'featureAmplitude',
            title: '暂降(骤升)幅值(%)',
            width: '160',
            sortable: true,
            formatter: (row: any) => {
                // return (row.cellValue * 100).toFixed(0)

                return Math.floor(row.cellValue * 10000) / 100
            }
        },
        {
            field: 'duration',
            title: '持续时间(s)',
            width: '120',
            sortable: true
        },
        {
            field: 'eventType',
            title: '触发类型',
            minWidth: '100',
            formatter: (row: any) => {
                return triggerType.filter(item => item.id === row.cellValue)[0].name
            }
        },
        {
            field: 'advanceType',
            title: '暂态类型',
            minWidth: '100',
            formatter: (row: any) => {
                return row.cellValue ? row.cellValue : '/'
            }
        },
        {
            field: 'advanceReason',
            title: '暂态原因',
            minWidth: '100',
            formatter: (row: any) => {
                return row.cellValue ? row.cellValue : '/'
            }
        },
        { field: 'gdName', title: '供电公司', minWidth: '120' },
        { field: 'subName', title: '变电站', minWidth: '120' },
        { field: 'lineName', title: '监测点', minWidth: '120' },
        { field: 'ip', title: '网络参数', width: '120px' },

        {
            field: 'voltageScale',
            title: '电压等级',
            minWidth: '100'
        }

        // { field: 'severity', title: '严重度' }
    ]
})
tableStore.table.params.comFlag = '1'
tableStore.table.params.monitorFlag = 0
tableStore.table.params.powerFlag = sign[0]?.algoDescribe || 0
tableStore.table.params.serverName = 'event-boot'
tableStore.table.params.waveType = ''
tableStore.table.params.searchValue = ''
tableStore.table.params.monitorFlag = monitorList[2].value
tableStore.table.params.statisticalType = dictData.getBasicData('Statistical_Type', [
    'Report_Type',
    'Manufacturer',
    'Voltage_Level',
    'Load_Type'
])[0]
const checkboxConfig = reactive<VxeTablePropTypes.CheckboxConfig<any>>({
    checkMethod: ({ row }) => {
        return row.fileFlag === 1
    }
})
provide('tableStore', tableStore)

onMounted(() => {
    tableStore.index()
})
const exportEvent = () => {
    // let form: any = JSON.parse(JSON.stringify(tableStore.table.params))
    // form.pageNum = 1
    // form.pageSize = tableStore.table.total
    // getEventReport(form).then(res => {
    //     tableRef.value.getRef().exportData({
    //         filename: '事件报告', // 文件名字
    //         sheetName: 'Sheet1',
    //         type: 'xlsx', //导出文件类型 xlsx 和 csv
    //         useStyle: true,
    //         data: res.data.records, // 数据源 // 过滤那个字段导出
    //         columnFilterMethod: function (column, $columnIndex) {
    //             return !(column.$columnIndex === 0)
    //         }
    //     })
    // })
    if (!tableStore.table.selection.length) {
        ElMessage.warning('请选择数据')
        return
    }
    const ids = tableStore.table.selection.map((item: any) => item.eventId)
    loading.value = true

    ElMessage('生成报告中,请稍等!')
    getEventReport(ids)
        .then((res: any) => {
            if (res == undefined) {
                loading.value = false
                return
            }
            let blob = new Blob([res], {
                type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=UTF-8'
            })

            const url = window.URL.createObjectURL(blob)
            const link = document.createElement('a') // 创建a标签
            link.href = url
            link.download = '事件报告' // 设置下载的文件名
            document.body.appendChild(link)
            link.click() //执行下载
            document.body.removeChild(link)
            loading.value = false
        })
        .catch(() => {
            loading.value = false
        })
}
</script>
