<template>
    <el-dialog
        class="cn-operate-dialog device-manage-popup"
        v-model="dialogVisible"
        :title="title"
        draggable
        :style="{ width: activeFormIndex == 0 || activeFormIndex == 1 ? '500px' : '1300px' }"
    >
        <el-form
            :model="form"
            scroll-to-error
            class="form-one"
            label-width="140px"
            :rules="rules1"
            ref="ruleFormRef1"
            v-if="activeFormIndex == 0 || activeFormIndex == 1"
        >
            <!-- 新增方案数据 -->
            <div class="form-one">
                <el-form-item label="方案名称：" prop="itemName">
                    <el-input v-model="form.itemName" placeholder="请输入方案名称" />
                </el-form-item>
                <el-form-item label="方案描述：" prop="describe">
                    <el-input type="textarea" v-model="form.describe" placeholder="请输入方案描述" />
                </el-form-item>
            </div>
        </el-form>
        <!-- <el-collapse accordion v-model="activeTab" v-show="activeFormIndex != 0" style="width: 100%"> -->
        <!-- <el-collapse-item title="测试项信息" :name="0">
                <div v-if="activeFormIndex != 0">
                    <div class="form-two monitor" v-for="(item, index) in form?.records" :key="index">
                        <el-form :model="form" scroll-to-error class="form-one" label-width="120px">
                            <el-form-item label="测试项名称：">
                                <el-input v-model="item.itemName" placeholder="请输入测试项名称" />
                            </el-form-item>
                            <el-form-item label="测量间隔：">
                                <el-select
                                    v-model="item.statisticalInterval"
                                    placeholder="请选择测量间隔"
                                    clearable
                                    style="width: 100%"
                                >
                                    <el-option
                                        v-for="(item, index) in statisticalIntervalList"
                                        :key="index"
                                        :label="item.name"
                                        :value="item.id"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="电压等级：">
                                <el-select
                                    v-model="item.voltageLevel"
                                    placeholder="请选择电压等级"
                                    clearable
                                    style="width: 100%"
                                >
                                    <el-option
                                        v-for="(item, index) in voltageLevelList"
                                        :key="index"
                                        :label="item.name"
                                        :value="item.id"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="接线方式：">
                                <el-select
                                    v-model="item.volConType"
                                    placeholder="请选择接线方式"
                                    clearable
                                    style="width: 100%"
                                >
                                    <el-option
                                        v-for="(item, index) in volConTypeList"
                                        :key="index"
                                        :label="item.name"
                                        :value="item.id"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="最小短路容量：">
                                <el-input
                                    v-model="item.capacitySscmin"
                                    oninput="value=value.replace(/[^\-?\d.]/g,'')
.replace(/^\./g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.')
.replace('-','$#$').replace(/\-/g,'').replace('$#$','-')"
                                    autocomplete="off"
                                    placeholder="请选择最小短路容量"
                                >
                                    <template #append>MVA</template>
                                </el-input>
                            </el-form-item>

                            <el-form-item label="用户协议容量：">
                                <el-input
                                    v-model="item.capacitySi"
                                    autocomplete="off"
                                    oninput="value=value.replace(/[^\-?\d.]/g,'')
.replace(/^\./g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.')
.replace('-','$#$').replace(/\-/g,'').replace('$#$','-')"
                                    placeholder="请输入用户协议容量"
                                >
                                    <template #append>MVA</template>
                                </el-input>
                            </el-form-item>

                            <el-form-item label="基准短路容量：">
                                <el-input
                                    v-model="item.capacitySscb"
                                    oninput="value=value.replace(/[^\-?\d.]/g,'')
.replace(/^\./g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.')
.replace('-','$#$').replace(/\-/g,'').replace('$#$','-')"
                                    placeholder="请输入基准短路容量"
                                >
                                    <template #append>MVA</template>
                                </el-input>
                            </el-form-item>

                            <el-form-item label="供电设备容量：">
                                <el-input
                                    v-model="item.capacitySt"
                                    oninput="value=value.replace(/[^\-?\d.]/g,'')
.replace(/^\./g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.')
.replace('-','$#$').replace(/\-/g,'').replace('$#$','-')"
                                    placeholder="请输入供电设备容量"
                                >
                                    <template #append>MVA</template>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="PT变比：" prop="pt">
                                <el-input
                                    style="width: 48%"
                                    v-model="item.pt"
                                    autocomplete="off"
                                    placeholder="请输入PT变比"
                                    oninput="value=value.replace(/[^0-9.]/g,'')"
                                />
                                <el-input
                                    style="width: 48%"
                                    v-model="item.pt1"
                                    autocomplete="off"
                                    placeholder="请输入PT变比"
                                    oninput="value=value.replace(/[^0-9.]/g,'')"
                                />
                            </el-form-item>
                            <el-form-item label="CT变比：" prop="ct">
                                <el-input
                                    v-model="item.ct"
                                    style="width: 48%"
                                    autocomplete="off"
                                    oninput="value=value.replace(/[^0-9.]/g,'')"
                                    placeholder="请输入CT变比"
                                />
                                <el-input
                                    v-model="item.ct1"
                                    style="width: 48%"
                                    autocomplete="off"
                                    oninput="value=value.replace(/[^0-9.]/g,'')"
                                    placeholder="请输入CT变比"
                                />
                            </el-form-item>
                            <el-form-item label="监测位置：" style="width: 100%">
                                <el-input type="textarea" v-model="item.location" placeholder="请输入监测位置" />
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
            </el-collapse-item> -->
        <!-- <el-collapse-item title="数据绑定" :name="1"> -->
        <el-tabs type="border-card" v-model="activeName" v-if="activeFormIndex != 0 && activeFormIndex != 1">
            <el-tab-pane label="测试项信息" :name="0">
                <!-- <div class="form-two monitor" v-for="(item, index) in form?.records" :key="index"> -->
                <el-form
                    :model="form1"
                    ref="ruleFormRef2"
                    scroll-to-error
                    class="form-two"
                    label-width="140px"
                    :rules="rules2"
                >
                    <el-form-item label="测试项名称：" prop="itemName">
                        <el-input v-model="form1.itemName" placeholder="请输入测试项名称" />
                    </el-form-item>
                    <el-form-item label="测量间隔：" prop="statisticalInterval">
                        <el-select
                            v-model="form1.statisticalInterval"
                            placeholder="请选择测量间隔"
                            clearable
                            style="width: 100%"
                        >
                            <el-option
                                v-for="(item, index) in statisticalIntervalList"
                                :key="index"
                                :label="item.name"
                                :value="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="电压等级：" prop="voltageLevel">
                        <el-select
                            v-model="form1.voltageLevel"
                            placeholder="请选择电压等级"
                            clearable
                            style="width: 100%"
                        >
                            <el-option
                                v-for="(item, index) in voltageLevelList"
                                :key="index"
                                :label="item.name"
                                :value="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="接线方式：" prop="volConType">
                        <el-select
                            v-model="form1.volConType"
                            placeholder="请选择接线方式"
                            clearable
                            style="width: 100%"
                        >
                            <el-option
                                v-for="(item, index) in volConTypeList"
                                :key="index"
                                :label="item.name"
                                :value="item.id"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="最小短路容量：" prop="capacitySscmin">
                        <el-input
                            v-model="form1.capacitySscmin"
                            oninput="value=value.replace(/[^\-?\d.]/g,'')
.replace(/^\./g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.')
.replace('-','$#$').replace(/\-/g,'').replace('$#$','-')"
                            autocomplete="off"
                            placeholder="请选择最小短路容量"
                        >
                            <template #append>MVA</template>
                        </el-input>
                    </el-form-item>

                    <el-form-item label="用户协议容量：" prop="capacitySi">
                        <el-input
                            v-model="form1.capacitySi"
                            autocomplete="off"
                            oninput="value=value.replace(/[^\-?\d.]/g,'')
.replace(/^\./g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.')
.replace('-','$#$').replace(/\-/g,'').replace('$#$','-')"
                            placeholder="请输入用户协议容量"
                        >
                            <template #append>MVA</template>
                        </el-input>
                    </el-form-item>

                    <el-form-item label="基准短路容量：" prop="capacitySscb">
                        <el-input
                            v-model="form1.capacitySscb"
                            oninput="value=value.replace(/[^\-?\d.]/g,'')
.replace(/^\./g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.')
.replace('-','$#$').replace(/\-/g,'').replace('$#$','-')"
                            placeholder="请输入基准短路容量"
                        >
                            <template #append>MVA</template>
                        </el-input>
                    </el-form-item>

                    <el-form-item label="供电设备容量：" prop="capacitySt">
                        <el-input
                            v-model="form1.capacitySt"
                            oninput="value=value.replace(/[^\-?\d.]/g,'')
.replace(/^\./g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.')
.replace('-','$#$').replace(/\-/g,'').replace('$#$','-')"
                            placeholder="请输入供电设备容量"
                        >
                            <template #append>MVA</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="PT变比：" prop="pt">
                        <el-input
                            style="width: 48%"
                            v-model="form1.pt"
                            autocomplete="off"
                            placeholder="请输入PT变比"
                            oninput="value=value.replace(/[^0-9.]/g,'')"
                        />
                        <el-input
                            style="width: 48%"
                            v-model="form1.pt1"
                            autocomplete="off"
                            placeholder="请输入PT变比"
                            oninput="value=value.replace(/[^0-9.]/g,'')"
                        />
                    </el-form-item>
                    <el-form-item label="CT变比：" prop="ct">
                        <el-input
                            v-model="form1.ct"
                            style="width: 48%"
                            autocomplete="off"
                            oninput="value=value.replace(/[^0-9.]/g,'')"
                            placeholder="请输入CT变比"
                        />
                        <el-input
                            v-model="form1.ct1"
                            style="width: 48%"
                            autocomplete="off"
                            oninput="value=value.replace(/[^0-9.]/g,'')"
                            placeholder="请输入CT变比"
                        />
                    </el-form-item>
                    <el-form-item label="监测位置：" prop="location" style="width: 100%">
                        <el-input type="textarea" v-model="form1.location" placeholder="请输入监测位置" />
                    </el-form-item>
                </el-form>
                <!-- </div> -->
            </el-tab-pane>
            <el-tab-pane label="已绑定数据" :name="1" v-if="tableData && tableData.length != 0">
                <div class="device_info" style="width: 100%">
                    <!-- <el-button type="primary" @click="addFlag = true" v-if="!addFlag">新增</el-button> -->
                    <div class="button_info">
                        <el-popconfirm
                            confirm-button-text="是"
                            cancel-button-text="否"
                            icon-color="#626AEF"
                            width="200"
                            title="是否确认移除所选数据？"
                            @confirm="handleDelete('')"
                            @cancel="cancelDelete"
                        >
                            <template #reference>
                                <el-button type="danger" :disabled="checkedList.length == 0" v-if="!addFlag">
                                    移除
                                </el-button>
                            </template>
                        </el-popconfirm>
                    </div>
                    <div class="device-manage" v-loading="loading">
                        <vxe-table
                            v-bind="defaultAttribute"
                            :data="tableData"
                            height="420"
                            style="width: 100%; margin-top: 10px"
                            ref="checkedTableRef"
                            @checkbox-all="selectChangeEvent"
                            @checkbox-change="selectChangeEvent"
                        >
                            <vxe-column type="checkbox" width="60"></vxe-column>
                            <vxe-column type="seq" width="40"></vxe-column>
                            <vxe-column field="itemName" title="名称"></vxe-column>
                            <vxe-column field="devName" title="设备名称"></vxe-column>
                            <vxe-column field="devMac" title="设备MAC"></vxe-column>
                            <vxe-column field="devNdId" title="网络识别码"></vxe-column>
                            <vxe-column field="lineName" title="线路号"></vxe-column>
                            <vxe-column field="startTime" title="开始时间"></vxe-column>
                            <vxe-column field="endTime" title="结束时间"></vxe-column>
                            <vxe-column title="操作" width="120" fixed="right">
                                <template #default="{ row }">
                                    <el-popconfirm
                                        width="150"
                                        confirm-button-text="是"
                                        cancel-button-text="否"
                                        icon-color="#626AEF"
                                        title="是否确认移除？"
                                        @confirm="handleDelete(row)"
                                        @cancel="cancelDelete"
                                    >
                                        <template #reference>
                                            <el-button type="danger" text size="small">移除</el-button>
                                        </template>
                                    </el-popconfirm>
                                </template>
                            </vxe-column>
                        </vxe-table>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="数据绑定" :name="2">
                <div class="button_info">
                    <el-popconfirm
                        confirm-button-text="是"
                        cancel-button-text="否"
                        icon-color="#626AEF"
                        width="200"
                        title="是否确认绑定所选数据？"
                        @confirm="addDeviceData"
                        @cancel="cancelDelete"
                    >
                        <template #reference>
                            <el-button type="primary" :disabled="tableStore.table.selection.length == 0">
                                数据绑定
                            </el-button>
                        </template>
                    </el-popconfirm>
                </div>

                <div class="device_info add_device" style="width: 100%">
                    <div class="device-manage" v-loading="loading">
                        <deviceInfoTree
                            :showCheckbox="true"
                            :default-checked-keys="defaultCheckedKeys"
                            @checkChange="checkChange"
                            ref="deviceInfoTreeRef"
                        ></deviceInfoTree>
                        <div class="device-manage-right">
                            <TableHeader datePicker ref="TableHeaderRef"></TableHeader>
                            <Table ref="tableRef" />
                        </div>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>
        <!-- </el-collapse-item> -->
        <!-- </el-collapse> -->
        <template #footer="">
            <el-button @click="close">取 消</el-button>
            <el-button type="primary" @click="submit">确 定</el-button>
        </template>
    </el-dialog>
</template>
<script lang="ts" setup>
import { ref, inject, defineEmits, provide, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus, Minus, Message } from '@element-plus/icons-vue'
import { addPlan, addRecord, updateRecord, getDeviceList, addDevice, delDevice } from '@/api/cs-device-boot/planData'
import { useDictData } from '@/stores/dictData'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import deviceInfoTree from '@/components/tree/govern/deviceInfoTree.vue'
import { mainHeight } from '@/utils/layout'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
const dictData = useDictData()
const dialogVisible = ref(false)
const voltageLevelList = dictData.getBasicData('Dev_Voltage')
const volConTypeList = dictData.getBasicData('Dev_Connect')
const emit = defineEmits(['onSubmit'])
//表单数据
const form = ref({})
//测试项数据
const form1 = ref({})
//折叠面板初始值
const activeTab = ref(0)
//tab初始值
const activeName = ref(0)
//测量间隔数据
const statisticalIntervalList = [
    {
        id: 1,
        name: '1分钟'
    },
    {
        id: 3,
        name: '3分钟'
    },
    {
        id: 5,
        name: '5分钟'
    },
    {
        id: 10,
        name: '10分钟'
    }
]
//初始化form
const initForm = () => {
    //方案数据
    form.value = {
        itemName: '', //方案名称
        describe: '' //方案描述
        //测试项数据
        // records: [
        // ]
    }
    //测试项数据
    form1.value = {
        itemName: '', //测试项名称
        statisticalInterval: statisticalIntervalList[1].id, //测量间隔
        voltageLevel: voltageLevelList[0].id, //电压等级
        volConType: volConTypeList[0].id, //接线方式
        capacitySscmin: 10, //最小短路容量
        capacitySi: 10, //用户协议容量
        capacitySscb: 10, //基准短路容量
        capacitySt: 10, //供电设备容量
        pt: 1, //pt变比1
        pt1: 1, //pt变比2
        ct: 300, //ct变比1
        ct1: 5, //ct变比2
        location: '' //监测位置
    }
}
initForm()
//方案校验规则
const rules1 = ref({
    //方案名称
    itemName: [
        {
            required: true,
            message: '请输入方案名称',
            trigger: 'blur'
        }
    ],
    //方案名称
    describe: [
        {
            required: true,
            message: '请输入方案描述',
            trigger: 'blur'
        }
    ]
})
//测试项校验规则
const rules2 = ref({
    //测试项名称
    itemName: [
        {
            required: true,
            message: '请输入测试项名称',
            trigger: 'blur'
        }
    ],
    describe: [
        {
            required: true,
            message: '请选择测量间隔',
            trigger: 'change'
        }
    ],
    voltageLevel: [
        {
            required: true,
            message: '请选择电压等级',
            trigger: 'change'
        }
    ],
    volConType: [
        {
            required: true,
            message: '请选择接线方式',
            trigger: 'change'
        }
    ],
    capacitySscmin: [
        {
            required: true,
            message: '请输入最小短路容量',
            trigger: 'blur'
        }
    ],
    capacitySi: [
        {
            required: true,
            message: '请输入用户协议容量',
            trigger: 'blur'
        }
    ],
    capacitySscb: [
        {
            required: true,
            message: '请输入基准短路容量',
            trigger: 'blur'
        }
    ],
    capacitySt: [
        {
            required: true,
            message: '请输入供电设备容量',
            trigger: 'blur'
        }
    ],
    pt: [
        {
            required: true,
            message: '请输入PT变比',
            trigger: 'blur'
        }
    ],
    ct: [
        {
            required: true,
            message: '请输入CT变比',
            trigger: 'blur'
        }
    ],
    location: [
        {
            required: true,
            message: '请输入监测位置',
            trigger: 'blur'
        }
    ]
})
//弹框标题
const title: any = ref('')
//判断页面显示条件
const activeFormIndex: any = ref(null)
//方案/测试项id
const planId: any = ref('')
//回显方案、测试项操作
const details = (val: any) => {
    //修改方案回显
    if (activeFormIndex.value == 1) {
        form.value = JSON.parse(JSON.stringify(val))
    }
    //修改测试项回显
    if (activeFormIndex.value == 3) {
        if(val.records[0]&& val.records.length != 0 ){
            form1.value = JSON.parse(JSON.stringify(val.records[0]))
        }else{
            initForm()
        }
    }
    if (activeFormIndex.value != 1 && activeFormIndex.value != 3) {
        initForm()
    }
}
//0 新增方案 1 修改方案 2 新增测试项 3 修改测试项 4 设备信息
const open = async (val: any, id: any) => {
    activeFormIndex.value = val
    title.value = val == 0 ? '新增方案' : val == 1 ? '修改方案' : val == 2 ? '新增测试项' : '修改测试项'
    dialogVisible.value = true
    planId.value = id
    //新增方案或者测试项数据
    if (val == 0 || val == 2) {
        initForm()
    }
    if (val != 0 && val != 1) {
        //1 列表  0树
        // getDeviceList({ id: id, isTrueFlag: 0, pageNum: 1, pageSize: 200 }).then(res => {})
        dialogVisible.value = true
        selectId.value = id
        //1 列表  0树
        //获取树形数据
        getDeviceList({ id: id, isTrueFlag: 0 }).then(res => {
            deviceInfoTreeRef.value.getTreeList(res.data)
        })
        //查绑定测试项列表
        getSelectedTable(id)
        //查新增列表
        await tableStore.index()
        activeName.value = 0
    }
}

const loading = ref(false)
const defaultCheckedKeys: any = ref([])
const tableData = ref([])
defineOptions({
    name: 'govern/tourist/index'
})
const treeIds: any = ref([])
const pids: any = ref([])
//树节点选择变化的时候处理树节点选中数据
const checkChange = async (data: any) => {
    treeIds.value = []
    pids.value = []
    // if (data.checked) {
    //     defaultCheckedKeys.value.push(data.data.id)
    //     data.data.children?.map((item: any) => {
    //         treeIds.value.push(item.id)
    //         pids.value.push(item.pid)
    //     })
    // } else {
    //     defaultCheckedKeys.value.splice(defaultCheckedKeys.value.indexOf(data.data.id), 1)
    //     data.data.children?.map((item: any) => {
    //         treeIds.value.splice(defaultCheckedKeys.value.indexOf(item.id), 1)
    //     })
    // }
    if (data.data && data.data.length != 0) {
        data.data?.map((item: any) => {
            if (item.pid) {
                treeIds.value.push(item.id)
                pids.value.push(item.pid)
            }
        })
    } else {
        treeIds.value = []
        pids.value.push = []
    }
    treeIds.value = [...new Set(treeIds.value)]
    pids.value = [...new Set(pids.value)]
    await tableStore.index()
}
const deviceInfoTreeRef = ref()
//判断是否显示新增页面 false显示详情页面和删除按钮隐藏确定按钮 true显示新增页面与确定按钮隐藏删除按钮
const addFlag = ref(false)
const selectId: any = ref('')
//查绑定测试项列表
const getSelectedTable = async (id: any) => {
    //新增传0已绑定传1
    await getDeviceList({ id: id, isTrueFlag: 1, pageNum: 1, pageSize: 1000 }).then(res => {
        tableData.value = res.data.records
    })
}
//新增设备列表
const tableStore = new TableStore({
    url: '/cs-device-boot/wlRecord/queryPage',
    publicHeight: 260,
    method: 'POST',
    column: [
        { width: '40', type: 'checkbox', fixed: 'left' },
        { title: '序号', type: 'seq', width: 60 },
        { field: 'itemName', title: '名称', minWidth: 170 },
        { field: 'devName', title: '设备名称', minWidth: 170 },
        { field: 'lineName', title: '线路号', minWidth: 170 },
        { field: 'startTime', title: '开始时间', minWidth: 170 },
        { field: 'endTime', title: '结束时间', minWidth: 170 }
    ],

    beforeSearchFun: () => {
        tableStore.table.params.id = selectId.value
        //新增传0已绑定传1
        tableStore.table.params.isTrueFlag = 0
        tableStore.table.params.treeIds = treeIds.value
        tableStore.table.params.pids = pids.value
    }
})
tableStore.table.params.treeIds = []
tableStore.table.params.pids = []
provide('tableStore', tableStore)
const tableRef = ref()
//删除设备
const checkedTableRef = ref()
//判断是否选择了设备数据
const checkedList: any = ref([])
/*
 * 记录选择的项
 */
const selectChangeEvent = (checked: any) => {
    checkedList.value = checkedTableRef.value.getCheckboxRecords()
}
//添加绑定设备
const addDeviceData = async () => {
    //选择的数据
    let deviceIds = []
    if (tableStore.table.selection.length != 0) {
        tableStore.table.selection.map(item => {
            deviceIds.push(item.id)
        })
        const addForm = {
            id: selectId.value,
            list: deviceIds
        }
        await addDevice(addForm).then(res => {
            if (res.code == 'A0000') {
                ElMessage.success('绑定成功')
                getSelectedTable(selectId.value)
                //清除树节点选择状态
                defaultCheckedKeys.value = []
                //刷新新增列表状态
                tableStore.index()
                addFlag.value = false
            }
        })
    } else {
        ElMessage.warning('请选择设备信息')
    }
}
//移除绑定的设备
const handleDelete = (row: any) => {
    let list = []
    //单选删除
    if (row) {
        list.push(row.id)
    }
    //批量删除
    else {
        checkedTableRef.value.getCheckboxRecords().length != 0
            ? checkedTableRef.value.getCheckboxRecords().map((item: any) => {
                  list.push(item.id)
              })
            : (list = [])
    }
    if (list.length != 0) {
        delDevice({ id: selectId.value, list: list }).then(res => {
            if (res.code == 'A0000') {
                ElMessage.success('移除成功')
                activeName.value = tableData.value.length == 0 ? 0 : 2
                getSelectedTable(selectId.value)
            }
        })
    }
}
const cancelDelete = () => {
    console.log('取消')
}
//关闭
const ruleFormRef1 = ref()
const ruleFormRef2 = ref()
const close = () => {
    dialogVisible.value = false
    //折叠面板
    activeTab.value = 0
    if (addFlag.value) {
        addFlag.value = false
        checkedList.value = []
        checkedTableRef.value.clearCheckboxRow()
    } else {
        dialogVisible.value = false
    }

    //取消表单校验状态
    if (activeFormIndex.value == 0 || activeFormIndex.value == 1) {
        ruleFormRef1.value && ruleFormRef1.value.resetFields()
    } else {
        ruleFormRef2.value && ruleFormRef2.value?.resetFields()
    }
    //tabs
    activeName.value = 0
    initForm()
}
//提交
const submit = () => {
    //新增方案
    if (activeFormIndex.value == 0) {
        ruleFormRef1.value.validate(valid => {
            if (valid) {
                const subForm = {
                    itemName: form.value.itemName,
                    describe: form.value.describe
                }
                addPlan(subForm).then(res => {
                    ElMessage.success('新增方案成功')
                    initForm()
                    emit('onSubmit')
                    close()
                })
            } else {
                console.log('表单验证失败')
                return false
            }
        })
    }
    //修改方案
    if (activeFormIndex.value == 1) {
        ruleFormRef1.value.validate(valid => {
            if (valid) {
                const subForm = {
                    id: planId.value,
                    itemName: form.value.itemName,
                    describe: form.value.describe
                }
                addPlan(subForm).then(res => {
                    ElMessage.success('修改方案成功')
                    emit('onSubmit')
                    close()
                })
            }
        })
    }
    //新增测试项
    if (activeFormIndex.value == 2) {
        ruleFormRef2.value.validate(valid => {
            if (valid) {
                const subForm = {
                    id: planId.value,
                    records: [form1.value]
                }
                subForm.list = tableData.value.map(item => {
                    return item.id
                })
                addRecord(subForm).then(res => {
                    ElMessage.success('新增测试项成功')
                    initForm()
                    emit('onSubmit')
                    close()
                })
            }
        })
    }
    //修改测试项
    if (activeFormIndex.value == 3) {
        ruleFormRef2.value.validate((valid: any) => {
            if (valid) {
                // const subForm = {
                //     id: planId.value,
                //     ...form1.value
                // }
                let subForm = JSON.parse(JSON.stringify(form1.value))
                subForm.list = tableData.value.map(item => {
                    return item.id
                })
                updateRecord(subForm).then(res => {
                    ElMessage.success('修改测试项成功')
                    initForm()
                    emit('onSubmit')
                    close()
                })
            } else {
                console.log('校验不通过')
            }
        })
    }
}
defineExpose({ open, details })
</script>
<style lang="scss" scoped>
::v-deep .el-form-item__content {
    display: flex !important;
    justify-content: space-between !important;
}
::v-deep .form-two {
    .el-select {
        width: 100% !important;
    }
}
.monitor {
    position: relative;
    padding: 10px 50px;
    .monitor_add {
        position: absolute;
        right: 5px;
        top: 10px;
    }
}
.button_info {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin: 10px 0;
}
.add_device {
    // display: flex;
    // justify-content: space-between;
    // align-items: center;
}
.device-manage {
    width: 100%;
    height: 100%;
    display: flex;
    .device-manage-right {
        flex: 1;
    }
}
</style>
