<template>
    <div class="default-main">
        <div v-show="view">
            <TableHeader datePicker area showExport showCustomColumn>
                <template #select>
                    <el-form-item label="筛选数据">
                        <el-input
                            v-model="tableStore.table.params.searchValue"
                            placeholder="输入关键字筛选"
                            clearable
                            maxlength="32"
                            show-word-limit
                        />
                    </el-form-item>
                    <el-form-item label="统计类型">
                        <el-select
                            v-model="tableStore.table.params.statisticalType"
                            value-key="id"
                            placeholder="请选择统计类型"
                            filterable
                        >
                            <el-option
                                v-for="item in classificationData"
                                :key="item.id"
                                :label="item.name"
                                :value="item"
                            ></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="电压等级">
                        <el-select
                            v-model="tableStore.table.params.scale"
                            multiple
                            collapse-tags
                            clearable
                            value-key="id"
                            placeholder="请选择电压等级"
                            filterable
                        >
                            <el-option
                                v-for="item in voltageleveloption"
                                :key="item.id"
                                :label="item.name"
                                :value="item"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="终端厂家">
                        <el-select
                            v-model="tableStore.table.params.manufacturer"
                            multiple
                            collapse-tags
                            clearable
                            value-key="id"
                            placeholder="请选择终端厂家"
                            filterable
                        >
                            <el-option
                                v-for="item in terminaloption"
                                :key="item.id"
                                :label="item.name"
                                :value="item"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="干扰源类型">
                        <el-select
                            v-model="tableStore.table.params.loadType"
                            multiple
                            collapse-tags
                            clearable
                            value-key="id"
                            placeholder="请选择干扰源类型"
                            filterable
                        >
                            <el-option
                                v-for="item in interfereoption"
                                :key="item.id"
                                :label="item.name"
                                :value="item"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </template>
                <template v-slot:operation>
                    <el-button :icon="Download" type="primary" @click="download">下载波形</el-button>
                </template>
            </TableHeader>
            <Table ref="tableRef" :checkboxConfig="checkboxConfig" />
        </div>
        <div :style="{ height: pageHeight.height }" style="padding: 10px; overflow: hidden" v-if="!view">
            <waveForm ref="waveFormRef" senior :boxoList="boxoList" :wp="wp" @backbxlb="backbxlb" />
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted, provide } from 'vue'
import TableStore from '@/utils/tableStore'
import { Download } from '@element-plus/icons-vue'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import { mainHeight } from '@/utils/layout'
import waveForm from '@/components/echarts/waveForm.vue'
import { getMonitorEventAnalyseWave } from '@/api/event-boot/transient'
import { useDictData } from '@/stores/dictData'
import { ElMessageBox, ElMessage } from 'element-plus'
import { VxeTablePropTypes } from 'vxe-table'
import { downloadWaveFile } from '@/api/event-boot/transient'
const dictData = useDictData()
defineOptions({
    name: 'harmonic-boot/area/TransientEventList'
})
const pageHeight = mainHeight(20)
const classificationData = dictData.getBasicData('Statistical_Type', ['Report_Type'])
const voltageleveloption = dictData.getBasicData('Dev_Voltage_Stand')
const terminaloption = dictData.getBasicData('Dev_Manufacturers')
const interfereoption = dictData.getBasicData('Interference_Source')
const eventList = dictData.getBasicData('Event_Statis')
const view = ref(true)
const view2 = ref(false)
const waveFormRef = ref()
const tableStore = new TableStore({
    url: '/event-boot/transient/getTransientValue',
    method: 'POST',
    column: [
        { width: '60', type: 'checkbox' },
        {
            field: 'index',
            title: '序号',
            width: '60',
            formatter: (row: any) => {
                return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
            }
        },
        { field: 'startTime', title: '暂降发生时刻', minWidth: '180' },
        { field: 'lineName', title: '监测点名称', minWidth: '180' },
        { field: 'gdName', title: '供电公司', minWidth: '120' },
        { field: 'subName', title: '变电站', minWidth: '150' },
        { field: 'ip', title: '网络参数', width: '120px' },
        { field: 'scale', title: '电压等级', minWidth: '110' },
        {
            field: 'advanceType',
            title: '暂降类型',
            minWidth: '90',
            formatter: (row: any) => {
                return row.cellValue || '其他'
            }
        },
        {
            field: 'eventType',
            title: '触发类型',
            minWidth: '120',
            formatter: (row: any) => {
                return eventList.filter(item => item.id === row.cellValue)[0]?.name
            }
        },
        {
            field: 'advanceReason',
            title: '暂降原因',
            minWidth: '90',
            formatter: (row: any) => {
                return row.cellValue || '其他'
            }
        },

        // {
        //     field: 'severity', title: '严重度', minWidth: "80", formatter: (row: any) => {
        //         return row.cellValue.toFixed(2)
        //     }
        // },
        {
            field: 'featureAmplitude',
            title: '暂降幅值(%)',
            minWidth: '110',
            formatter: (row: any) => {
                return (row.cellValue * 100).toFixed(2)
            }
        },
        {
            field: 'eventDescribe',
            title: '暂降深度(%)',
            minWidth: '110',
            formatter: (row: any) => {
                let data: any = (100 - row.row.featureAmplitude * 100).toFixed(2)

                return data >= 0 ? data : '/'
            }
        },
        { field: 'duration', title: '持续时间(s)', minWidth: '100' },

        {
            title: '操作',
            fixed: 'right',
            width: '120',
            render: 'buttons',
            buttons: [
                {
                    name: 'edit',
                    title: '波形分析',
                    type: 'primary',
                    disabled: row => {
                        return row.fileFlag == 0
                    },
                    icon: 'el-icon-Plus',
                    render: 'basicButton',
                    click: async row => {
                        view.value = false
                        setTimeout(() => {
                            waveFormRef.value.open(row)
                        }, 100)
                        // row.loading = true
                        // boxoList.value = row
                        // await getMonitorEventAnalyseWave({ id: row.eventId, systemType: 0 })
                        //     .then(res => {
                        //         row.loading = false
                        //         if (res != undefined) {
                        //             wp.value = res.data
                        //             view.value = false
                        //             view2.value = true
                        //         }
                        //     })
                        //     .catch(() => {
                        //         row.loading = false
                        //     })
                    }
                },
                {
                    name: 'edit',
                    title: '暂无波形',
                    type: '',
                    disabled: row => {
                        return row.fileFlag != 0
                    },
                    icon: 'el-icon-Plus',
                    render: 'basicButton'
                }
            ]
        }
    ],

    loadCallback: () => {}
})
tableStore.table.params.searchValue = ''
tableStore.table.params.statisticalType = classificationData.filter(item => item.name == '电网拓扑')[0]
tableStore.table.params.scale = []
tableStore.table.params.manufacturer = []
tableStore.table.params.loadType = []

tableStore.table.params.monitorFlag = 2
tableStore.table.params.powerFlag = 2
tableStore.table.params.statFlag = true
tableStore.table.params.isType = 0
const boxoList = ref({})
const wp = ref({})

provide('tableStore', tableStore)
onMounted(() => {
    tableStore.index()
})
const checkboxConfig = reactive<VxeTablePropTypes.CheckboxConfig<any>>({
    checkMethod: ({ row }) => {
        return row.fileFlag === 1
    }
})
const backbxlb = () => {
    view.value = true
    view2.value = false
}
// 下载波形
const download = () => {
    if (!tableStore.table.selection.length) {
        ElMessage.warning('请选择数据')
        return
    }
    downloadWaveFile({
        lineId: tableStore.table.selection.map((item: any) => item.eventId)
    }).then((res: any) => {
        if (res.type == 'application/json') {
            ElMessage.warning('暂无可下载的波形文件!')
            return
        }
        ElMessage.info('下载中......')
        let blob = new Blob([res], { type: 'application/zip' }) // console.log(blob) // var href = window.URL.createObjectURL(blob); //创建下载的链接
        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) //释放标签
        ElMessage.success('波形下载成功')
    })
}
</script>
