<template>
    <div>
        <TableHeader datePicker area nextFlag theCurrentTime ref="TableHeaderRef" showExport showCustomColumn>
            <template #select>
                <el-form-item label="数据筛选">
                    <el-input
                        style="width: 230px"
                        placeholder="请输入变电站/监测点名称"
                        v-model="tableStore.table.params.searchValue"
                        clearable
                        maxlength="32"
                        show-word-limit
                    ></el-input>
                </el-form-item>
            </template>
            <template #operation></template>
        </TableHeader>
        <Table ref="tableRef" :showOverflow="false" />
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted, provide, nextTick } from 'vue'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { mainHeight } from '@/utils/layout'
import { useDictData } from '@/stores/dictData'

const TableHeaderRef = ref()
const tableStore = new TableStore({
    url: '/harmonic-boot/PollutionSubstation/substationInfo',
    publicHeight: 65,
    method: 'POST',
    isWebPaging: true,
    paramsPOST: true,
    filename: '变电站台账',
    column: [
        { title: '序号', field: 'index', width: 80, formatter: (row: any) => {
            return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
        }
        },
        { field: 'deptName', title: '所在地市', minWidth: 100 },
        { field: 'substationName', title: '变电站名称', minWidth: 100 },

        {
            field: 'dwLineList',
            title: '电网侧监测点名称',
            minWidth: 150,
            formatter: (obj: any) => {
                return obj.cellValue.length == 0 ? '/' : obj.cellValue.join('\n ')
            }
        },
        {
            field: 'yhLineList',
            title: '非电网侧监测点名称',
            minWidth: 150,
            formatter: (obj: any) => {
                return obj.cellValue.length == 0 ? '/' : obj.cellValue.join('\n ')
            }
        },
        { field: 'alarmFreq', title: '告警频次', minWidth: 80 },
        { field: 'vpollutionData', title: '谐波电压污染值', minWidth: 80 },
        { field: 'ipollutionData', title: '谐波电流污染值', minWidth: 80 }
    ]
})

tableStore.table.params.searchValue = ''

provide('tableStore', tableStore)
onMounted(() => { 
     TableHeaderRef.value.setDatePicker([
        { label: '月份', value: 3 },
        { label: '周', value: 4 },
        { label: '自定义', value: 5 }
    ])
    tableStore.index()
   
})
</script>
