<!--元器件的新增编辑弹出框-->
<template>
    <el-dialog
        draggable
        class='cn-operate-dialog'
        v-model='unitVisible'
        :title='title'
        style='width: 415px; height: 500px'
        top='20vh'
    >
        <el-scrollbar>
            <el-form :inline='false' :model='form' label-width='135px' :rules='rules' ref='formRef'>
                <el-form-item label='元器件名' prop='name'>
                    <el-input v-model='form.name' placeholder='请输入元器件名' clearable />
                </el-form-item>
                <el-form-item label='灵敏度' prop='sensitivity'>
                    <el-select v-model='form.sensitivity'>
                        <el-option
                            v-for='item in sensitivityList'
                            :key='item.value'
                            :label='item.name'
                            :value='item.value'
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label='耐受能力是否标准' prop='standardFlag'>
                    <el-radio-group v-model='form.standardFlag'>
                        <el-radio border label='1'>是</el-radio>
                        <el-radio border label='0'>否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label='上限-持续时间' prop='vtcTimeUpper'>
                    <el-input v-model='form.vtcTimeUpper' placeholder='请输入持续时间' clearable>
                        <template #append>ms</template>
                    </el-input>
                </el-form-item>

                <el-form-item label='上限-暂降幅值' prop='vtcAmpUpper'>
                    <el-input v-model='form.vtcAmpUpper' placeholder='请输入暂降幅值' clearable>
                        <template #append>p.u.</template>
                    </el-input>
                </el-form-item>

                <el-form-item label='下限-持续时间' prop='vtcTimeLower'>
                    <el-input v-model='form.vtcTimeLower' placeholder='请输入持续时间' clearable>
                        <template #append>ms</template>
                    </el-input>
                </el-form-item>

                <el-form-item label='下限-暂降幅值' prop='vtcAmpLower'>
                    <el-input v-model='form.vtcAmpLower' placeholder='请输入暂降幅值' clearable>
                        <template #append>p.u.</template>
                    </el-input>
                </el-form-item>
            </el-form>
        </el-scrollbar>
        <template #footer>
            <span class='dialog-footer'>
                <el-button @click='unitVisible = false'>取消</el-button>
                <el-button type='primary' @click='submit'>确认</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script lang='ts' setup>
import { ref, reactive, inject } from 'vue'
import { ElMessage } from 'element-plus'
import TableStore from '@/utils/tableStore'
import { addSgSensitiveUnit, updateSgSensitiveUnit } from '@/api/advance-boot/sgGroven/sgSensitiveUnit'

const tableStore = inject('tableStore') as TableStore
const unitVisible = ref(false)
const title = ref('')
const formRef = ref()
const sensitivityList = ref([
    {
        name: '平均',
        value: '0'
    },
    {
        name: '高',
        value: '1'
    },
    {
        name: '中',
        value: '2'
    },
    {
        name: '低',
        value: '3'
    }
])
const regex = /^[+]?(\d+(\.\d*)?|\.\d+)([eE][+-]?\d+)?$/

// 注意不要和表单ref的命名冲突
const form = reactive({
    id: '',
    machineId: '',
    name: '',
    sensitivity: '',
    standardFlag: '',
    vtcTimeUpper: 0,
    vtcAmpUpper: 0,
    vtcTimeLower: 0,
    vtcAmpLower: 0
})

//校验持续时间
const checkTime = (rule: any, value: any, callback: any) => {
    if (!value) {
        return callback(new Error('持续时间不能为空'))
    }
    if (isNaN(value)) {
        callback(new Error('请输入有效的数值'))
    } else {
        if (value < 0) {
            callback(new Error('持续时间不能小于0'))
        } else {
            callback()
        }
    }
}

//校验幅值
const checkAmp = (rule: any, value: any, callback: any) => {
    if (!value) {
        return callback(new Error('暂降幅值不能为空'))
    }
    if (isNaN(value)) {
        callback(new Error('请输入有效的数值'))
    } else {
        if (value < 0 || value > 1.5) {
            callback(new Error('请确保暂降幅值范围0p.u.~1.5p.u.'))
        } else {
            callback()
        }
    }
}

//form表单校验规则
const rules = {
    name: [{ required: true, message: '终端名不能为空', trigger: 'blur' }],
    sensitivity: [{ required: true, message: '灵敏度不能为空', trigger: 'change' }],
    standardFlag: [{ required: true, message: '耐受能力不能为空', trigger: 'change' }],
    vtcTimeUpper: [
        { required: true, message: '持续时间不能为空', trigger: 'blur' },
        { validator: checkTime, trigger: 'blur' }
    ],
    vtcAmpUpper: [
        { required: true, message: '暂降幅值不能为空', trigger: 'blur' },
        { validator: checkAmp, trigger: 'blur' }
    ],
    vtcTimeLower: [
        { required: true, message: '持续时间不能为空', trigger: 'blur' },
        { validator: checkTime, trigger: 'blur' }
    ],
    vtcAmpLower: [
        { required: true, message: '暂降幅值不能为空', trigger: 'blur' },
        { validator: checkAmp, trigger: 'blur' }
    ]
}

const open = (text: string, data?: any) => {
    title.value = text
    if (data.name) {
        // 表单赋值
        for (let key in form) {
            form[key] = data[key]
        }
        form.sensitivity = String(data.sensitivity)
        form.standardFlag = String(data.standardFlag)
    } else {
        resetForm()
        // 在此处恢复默认表单
        for (let key in form) {
            form[key] = ''
        }
        form.sensitivity = '0'
        form.standardFlag = '1'
    }
    form.machineId = data.machineId
    unitVisible.value = true
}

//重置表单内容
const resetForm = () => {
    if (formRef.value) {
        formRef.value.resetFields()
    }
}

/**
 * 提交用户表单数据
 */
const submit = () => {
    formRef.value.validate(async (valid: any) => {
        if (valid) {
            if (form.id) {
                await updateSgSensitiveUnit(form)
            } else {
                await addSgSensitiveUnit(form)
            }
            ElMessage.success('保存成功')
            tableStore.index()
            unitVisible.value = false
        }
    })
}


defineExpose({ open })
</script>

<style scoped>
.cn-operate-dialog .el-form {
    width: calc(100% - 10px);
}
</style>
