<template>
    <div >
        <TableHeader showCustomColumn ref="TableHeaderRef">
            <template #select>
                <el-form-item label="数据来源">
                    <el-select v-model="tableStore.table.params.dataSource" clearable placeholder="请选择数据来源">
                        <el-option v-for="item in dataSourceOptions" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="系统类型">
                    <el-select v-model="tableStore.table.params.systemType" clearable placeholder="请选择系统类型">
                        <el-option v-for="item in systemTypeOptions" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="表名">
                    <el-input maxlength="32" show-word-limit v-model.trim="tableStore.table.params.tableName"
                        placeholder="请输入表名" clearable />
                </el-form-item>
            </template>
            <template #operation>
                <el-button icon="el-icon-Plus" type="primary" @click="add">新增</el-button>
            </template>
        </TableHeader>
        <Table ref="tableRef" />
        <Form ref="formRef" @Cancels="tableStore.index()" />
    </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 } from 'element-plus'
import { pqDelete } from '@/api/algorithm-boot/scopeConfig'
import Form from './form.vue'
defineOptions({
    name: 'govern/scopeConfig'
})
const dataSourceOptions = [
    { label: 'InfluxDB', value: 'InfluxDB' },
    // { label: 'oracle', value: 'oracle' },
    { label: 'MySql', value: 'MySql' }
]
const systemTypeOptions = [
    { label: 'pqs', value: 'pqs' },
    { label: 'govern', value: 'govern' }
]
const yesNo = (v: number) => (v === 1 ? '是' : v === 0 ? '否' : '/')
const stateMap: Record<number, string> = { 0: '删除', 1: '正常' }
const formRef = ref()
const tableStore: any = new TableStore({
    url: '/algorithm-boot/pqReasonableRange/getData',
    method: 'POST',
    showPage: false,
    publicHeight: 60,
    column: [
        {
            field: 'index',
            title: '序号',
            width: '80',
            formatter: (row: any) => {
                return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
            }
        },
        { field: 'indexName', title: '指标名称', minWidth: 200 },
        { field: 'indexCode', title: '指标Code', minWidth: 150 },

        { field: 'influxdbTableName', title: '表名', minWidth: 150 },
        { field: 'influxdbColumnName', title: '列属性', minWidth: 150 },
        {
            field: 'harmStart', title: '谐波次数', minWidth: 90,
            formatter: (row: any) => {
                return row.cellValue == null ? '/' : row.cellValue + '-' + row.row.harmEnd
            }
        },
        {
            field: 'phaseType', title: '相别', minWidth: 100, formatter: (row: any) => {
                return row.cellValue == 'T' ? '/' : row.cellValue


            }
        },
        {
            field: 'unit', title: '单位', minWidth: 80,
            formatter: (row: any) => {
                return row.cellValue || '/'
            }
        },
        { field: 'minValue', title: '指标下限', minWidth: 100 },
        { field: 'maxValue', title: '指标上限', minWidth: 100 },

        {
            field: 'isVoltage',
            title: '电压等级参与',
            minWidth: 110,
            formatter: (row: any) => yesNo(row.cellValue)
        },
        {
            field: 'ctAttendFlag',
            title: 'CT变比参与',
            minWidth: 100,
            formatter: (row: any) => yesNo(row.cellValue)
        },
        { field: 'dataSource', title: '数据来源', minWidth: 100 },
        { field: 'belongingSystem', title: '所属系统', minWidth: 100 },




        {
            field: 'otherAlgorithm', title: '条件描述', minWidth: 200,
            formatter: (row: any) => {
                return row.cellValue || '/'
            }
        },
        {
            field: 'remark', title: '备注', minWidth: 200,
            formatter: (row: any) => {
                return row.cellValue || '/'
            }
        }, { field: 'sort', title: '排序', minWidth: 70 },

        {
            title: '操作',
            fixed: 'right',
            width: '180',
            render: 'buttons',
            buttons: [

                {
                    name: 'edit',
                    title: '修改 ',
                    type: 'primary',
                    icon: 'el-icon-Plus',
                    render: 'basicButton',
                    click: row => {
                        setTimeout(() => {
                            formRef.value.open({
                                text: '修改配置',
                                row: row
                            })
                        }, 10)
                    }
                },
                {
                    name: 'edit',
                    title: '删除',
                    type: 'danger',
                    icon: 'el-icon-Delete',
                    render: 'confirmButton',
                    disabled: row => {
                        return row.active == 1
                    },
                    popconfirm: {
                        confirmButtonText: '确认',
                        cancelButtonText: '取消',
                        confirmButtonType: 'danger',
                        title: '确定删除吗？'
                    },
                    click: row => {
                        pqDelete({ id: row.id }).then(res => {
                            ElMessage({
                                message: '删除成功!',
                                type: 'success'
                            })
                            tableStore.index()
                        })
                    }
                }
            ]
        }
    ],

    loadCallback: () => {


    }
})
tableStore.table.params.dataSource = ''
tableStore.table.params.tableName = ''
tableStore.table.params.systemType = ''
provide('tableStore', tableStore)
// 新增主题
const add = () => {
    setTimeout(() => {
        formRef.value.open({
            text: '新增配置'
        })
    }, 10)
}
onMounted(() => {
    tableStore.index()
})
</script>
