<!-- 变压器策略 -->
<template>
    <div class="default-main">
        <TableHeader showExport :showSearch="false" ref="TableHeaderRef">
            <template v-slot:select></template>
            <template #operation>
                <el-button
                    type="primary"
                    class="ml10"
                    @click="push('/admin/BusinessAdministrator/TerminalManagement/addLedger')"
                    :icon="Setting"
                >
                    变压器台账配置
                </el-button>
                <el-button type="primary" class="ml10" @click="add" :icon="Plus">新增策略</el-button>
            </template>
        </TableHeader>
        <Table ref="tableRef" :row-config="{ isCurrent: true, isHover: true }"></Table>
        <el-dialog
            draggable
            :title="dialogTitle"
            v-model="dialogFormVisible"
            :close-on-click-modal="false"
            width="700px"
            :before-close="resetForm"
            v-if="dialogFormVisible"
        >
            <el-row :gutter="20" v-loading="isLoading1" element-loading-text="数据加载中">
                <el-col :span="10">
                    <div style="margin: 10px; overflow-y: auto; border-right: 1px solid" class="xiaoshou">
                        <el-tree
                            style="cursor: pointer; height: 380px"
                            :data="treeMenuData"
                            v-loading="loading"
                            element-loading-text="数据加载中"
                            show-checkbox
                            node-key="id"
                            ref="menuTree"
                            highlight-current
                            :expand-on-click-node="true"
                            default-expand-all
                            :props="{ children: 'children', label: 'name' }"
                            @check="check"
                        >
                            <template #default="{ node, data }">
                                <span class="span-ellipsis">
                                    <i :class="data.icon"></i>
                                    <span class="title" :title="node.label">{{ node.label }}</span>
                                </span>
                            </template>
                        </el-tree>
                    </div>
                </el-col>
                <el-col :span="14">
                    <div class="box">
                        <el-form :model="form" label-width="100px" ref="ruleFormRef" :rules="rules">
                            <el-form-item label="名称:" prop="tpName">
                                <el-input v-model="form.tpName" placeholder="请输入" maxlength="32" show-word-limit clearable></el-input>
                            </el-form-item>
                            <el-form-item label="描述:" class="mt20">
                                <el-input v-model="form.tfDescribe" placeholder="请输入" ></el-input>
                            </el-form-item>
                            <el-form-item class="mt20 ml20">
                                <el-button @click="dialogFormVisible = false">取消</el-button>
                                <el-button type="primary" @click="onSubmit">确 定</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-col>
            </el-row>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted, provide, reactive, nextTick } from 'vue'
import { Plus, Setting } from '@element-plus/icons-vue'
import {
    getFlgPloyInfo,
    insertFlgPloy,
    updateFlgPloy,
    delFlgPloy,
    getTransformerTree
} from '@/api/device-boot/transformerStrategy'
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 { ElButton } from 'element-plus'
import { mainHeight } from '@/utils/layout'
import { useRouter } from 'vue-router'
defineOptions({
    name: '/BusinessAdministrator/TerminalManagement/transformerStrategy'
})
const { push } = useRouter()
const fontdveoption: any = ref([
    { id: 0, name: '极重要' },
    { id: 1, name: '普通' },
    { id: 2, name: '备用' }
])
const statusoption: any = ref([
    { id: 0, name: '未启用' },
    { id: 1, name: '启用' }
])
const height = mainHeight(70)

const loading = ref(false)

const tableRef = ref()

const ruleFormRef = ref()

const form: any = ref({
    tpName: '',
    tfDescribe: '',
    tpIndex: '',
    tfIndexs: []
})

const isLoading1 = ref(false)
const treeMenuData = ref([])
const menuTree = ref()
const TableHeaderRef = ref()

const rules = reactive({
    tpName: [{ required: true, message: '名称不可为空', trigger: 'blur' }],
   
})

const dialogFormVisible = ref(false)

const dialogTitle = ref('新增前置机')
const processId = ref('')
const tableStore = new TableStore({
    url: '/device-boot/pqsTflgploy/flgployPage',
    method: 'POST',
    column: [
        { title: '变压器策略名称', field: 'tpName' },
        { title: '更新时间', field: 'updateTime' },
        // {
        //     title: '等级',
        //     field: 'nodeGrade',
        //     render: 'tag',
        //     custom: {
        //         0: 'success',
        //         1: 'warning',
        //         2: 'info'
        //     },
        //     replaceValue: {
        //         0: '极重要',
        //         1: '普通',
        //         2: '备用'
        //     }
        // },
        {
            title: '变压器策略描述',
            field: 'tfDescribe'
        },
        {
             title: '操作',fixed: 'right',
            align: 'center',
            width: '180',
            render: 'buttons',
            buttons: [
                {
                    name: 'edit',
                    title: '编辑',
                    type: 'primary',
                    icon: 'el-icon-EditPen',
                    render: 'basicButton',

                    click: async row => {
                        dialogFormVisible.value = true
                        dialogTitle.value = '修改策略信息'
                        form.value = JSON.parse(JSON.stringify(row))
                        getFlgPloyInfo({ id: row.tpIndex }).then(res => {
                            menuTree.value.setCheckedKeys(res.data.tfIndexs)
                            form.value.tfIndexs = res.data.tfIndexs
                        })
                    }
                },
                // {
                //     name: 'edit',
                //     title: '重启',
                //     type: 'warning',
                //     icon: 'el-icon-Delete',
                //     render: 'confirmButton',
                //     popconfirm: {
                //         confirmButtonText: '确认',
                //         cancelButtonText: '取消',
                //         confirmButtonType: 'warning',
                //         title: '确定重启吗？'
                //     },
                //     click: row => {
                //         askRestartProcess({
                //             deviceRebootType: null,
                //             nodeId: row.id,
                //             processNo: 1
                //         }).then(res => {
                //             ElMessage.success('重启成功')
                //             tableStore.index()
                //         })
                //     }
                // },

                {
                    name: 'del',
                    title: '删除',
                    type: 'danger',
                    icon: 'el-icon-Delete',
                    render: 'confirmButton',
                    popconfirm: {
                        confirmButtonText: '确认',
                        cancelButtonText: '取消',
                        confirmButtonType: 'danger',
                        title: '确定删除吗？'
                    },
                    click: row => {
                        delFlgPloy({ ids: row.tpIndex }).then(res => {
                            ElMessage.success('删除成功')
                            tableStore.index()
                        })
                    }
                }
            ]
        }
    ],
    // beforeSearchFun: () => {
    //     for (let key in tableStore.table.params) {
    //         if (tableStore.table.params[key] === '' && key !== 'nodeGrade' && key !== 'searchState') {
    //             delete tableStore.table.params[key]
    //         }
    //     }
    // },
    loadCallback: () => {}
})
const nodeId = ref('')

const treeRef = ref()

// tableStore.table.params.orderBy = 'desc'
// tableStore.table.params.nodeGrade = ''
// tableStore.table.params.searchState = ''
provide('tableStore', tableStore)

// 变压器台账配置
const set = () => {
    push({
        path: 'addLedger',
        query: {}
    })
}

// 新增
const add = () => {
    dialogFormVisible.value = true
    dialogTitle.value = '新增策略信息'
    form.value = {}
}

const resetForm = () => {
    dialogFormVisible.value = false
    form.value = {}
}

const getTree = () => {
    isLoading1.value = true
    getTransformerTree().then(res => {
        treeMenuData.value = res.data
        isLoading1.value = false
    })
}

// 确认
const onSubmit = () => {
    ruleFormRef.value.validate((valid: any) => {
        if (valid) {
            if (dialogTitle.value == '新增策略信息') {
                insertFlgPloy(form.value).then(res => {
                    ElMessage.success('新增策略信息成功')
                    resetForm()
                    tableStore.onTableAction('search', {})
                })
            } else {
                ElMessageBox.confirm('是否确认修改?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    updateFlgPloy(form.value).then(res => {
                        ElMessage.success('修改成功')
                        resetForm()
                        tableStore.onTableAction('search', {})
                    })
                })
            }
        }
    })
}

//树多选
const check = (currentNode: any, checkedInfo: any) => {
    form.value.tfIndexs = checkedInfo.checkedNodes
        .filter((item: any) => !item.children || item.children.length === 0)
        .map((item: any) => item.id)
}

onMounted(() => {
    getTree()
    setTimeout(() => {
        tableStore.index()
    }, 100)
})
</script>
<style lang="scss" scoped>
.box {
    position: absolute;
    top: 100px;
    right: 60px;
    bottom: 0;
    left: 300px;
    z-index: 1;
}

.xiaoshou {
    cursor: pointer !important;
}

// ::-webkit-scrollbar {
//     width: 8px !important;
//     height: 14px;
// }
</style>
