<template>
    <el-dialog draggable class="cn-operate-dialog" v-model="dialogVisible" title="设备">
        <div class="formBox mb10"><el-button icon="el-icon-Plus" type="primary" @click="add">新增</el-button></div>

        <vxe-table v-bind="defaultAttribute" v-loading="loading" height="500px" ref="xTable" :data="userData">
            <vxe-column field="devName" title="设备名称"></vxe-column>
            <vxe-column field="devScale" title="电压等级" :formatter="formatter"></vxe-column>
            <vxe-column field="protocolCapacity" title="设备容量(MVA)"></vxe-column>
            <vxe-column title="操作" width="120px">
                <template #default="{ row }">
                    <el-button type="primary" size="small" link @click="revise(row)">修改</el-button>

                    <el-popconfirm @confirm="deleteD(row)" title="确认删除设备?">
                        <template #reference>
                            <el-button type="danger" size="small" link>删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </vxe-column>
        </vxe-table>
    </el-dialog>
    <el-dialog draggable v-model="addShow" width="400px" :title="title" :before-close="handleClose">
        <el-form :model="form" ref="formRef" :rules="rules" label-width="auto">
            <el-form-item label="设备名称" prop="devName">
                <el-input
                    v-model.trim="form.devName"
                    placeholder="请输入设备名称"
                    maxlength="32"
                    show-word-limit
                    clearable
                />
            </el-form-item>
            <el-form-item label="电压等级" prop="devScale">
                <el-select v-model="form.devScale" clearable placeholder="请选择电压等级" filterable>
                    <el-option v-for="item in levelList" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="设备容量(MVA)" prop="protocolCapacity">
                <el-input-number
                    v-model="form.protocolCapacity"
                    style="width: 100%"
                    :min="0"
                    :max="10000000"
                    placeholder="请选择设备容量"
                />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="handleClose">取消</el-button>
                <el-button type="primary" @click="submitForm">确定</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { queyDeviceList, addDev, updateDev, removeDev } from '@/api/advance-boot/bearingCapacity'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import { useDictData } from '@/stores/dictData'
import { ElMessage } from 'element-plus'
const dictData = useDictData()
const levelList = dictData.getBasicData('Dev_Voltage_Stand')
const dialogVisible = ref(false)
const addShow = ref(false)
const loading = ref(false)
const userData = ref([])
const rowList = ref([])
const title = ref('')
const formRef = ref()

const form: any = ref({
    devName: '',
    devScale: '',
    protocolCapacity: 0,
    userId: ''
})
const rules = {
    devName: [{ required: true, message: '请输入设备名称', trigger: 'blur' }],
    devScale: [{ required: true, message: '请输入设备名称', trigger: 'change' }],
    protocolCapacity: [{ required: true, message: '请输入设备名称', trigger: 'blur' }]
}
const open = (row: any) => {
    dialogVisible.value = true
    loading.value = true
    rowList.value = row
    queyDeviceList({
        userId: row.userId
    }).then(res => {
        loading.value = false
        userData.value = res.data
    })
}
// 新增
const add = () => {
    addShow.value = true
    title.value = '新增设备'
}

// 过滤数据
const formatter = (row: any) => {
    if (row.column.field == 'devScale') {
        return levelList.filter(item => item.id == row.cellValue)[0].name
    } else {
        return row.cellValue
    }
}
// 修改
const revise = (row: any) => {
    form.value = JSON.parse(JSON.stringify(row))
    title.value = '修改设备'
    addShow.value = true
}
// 关闭弹框
const handleClose = () => {
    addShow.value = false
    form.value = {
        devName: '',
        devScale: '',
        protocolCapacity: 0,
        userId: ''
    }
    formRef.value.resetFields()
}
// 新增设备
const submitForm = async () => {
    await formRef.value.validate(valid => {
        if (valid) {
            if (title.value == '新增设备') {
                form.value.userId = rowList.value.userId
                addDev(form.value).then(res => {
                    ElMessage.success('新增成功!')
                    open(rowList.value)
                    handleClose()
                })
            } else {
                updateDev(form.value).then(res => {
                    ElMessage.success('修改成功!')
                    open(rowList.value)
                    handleClose()
                })
            }
        }
    })
}
// 删除设备
const deleteD = row => {
    removeDev({ devIds: row.devId }).then(res => {
        ElMessage.success('删除设备成功!')
        open(rowList.value)
    })
}

defineExpose({ open })
</script>

<style lang="scss" scoped>
.formBox{
    display: flex;
    justify-content: flex-end;
}

</style>
