<!--生产线的新增编辑弹出框-->
<template>
    <el-dialog
        draggable
        class='cn-operate-dialog'
        v-model='productLineVisible'
        :title='title'
        style='width: 415px;'
        top='30vh'
    >
        <el-scrollbar>
            <el-form :inline='false' :model='form' label-width='120px' :rules='rules' ref='formRef'>
                <el-form-item label='生产线名' prop='name'>
                    <el-input v-model='form.name' placeholder='请输入生产线名' clearable @input='handleInput' maxlength="32" show-word-limit/>
                </el-form-item>
                <el-form-item label='关联进线' prop='incomingLineId'>
                    <el-select v-model='form.incomingLineId'>
                        <el-option
                            v-for='item in incomingLineList'
                            :key='item.id'
                            :label='item.name'
                            :value='item.id'
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label='计算模式' prop='calcMode'>
                    <el-radio-group v-model='form.calcMode'>
                        <el-tooltip
                            class='box-item'
                            effect='light'
                            content='单次中断不计算终端、原料损失'
                            placement='bottom-start'
                        >
                            <el-radio border label='0'>模式一</el-radio>
                        </el-tooltip>
                        <el-tooltip
                            class='box-item'
                            effect='light'
                            content='单次中断计算终端、原料损失'
                            placement='bottom-start'
                        >
                            <el-radio border label='1'>模式二</el-radio>
                        </el-tooltip>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label='产能损失' prop='capacityLoss'>
                    <el-input v-model='form.capacityLoss' placeholder='请输入产能损失' clearable @input='handleInputCapacityLoss'>
                        <template #append>万元</template>
                    </el-input>
                </el-form-item>
            </el-form>
        </el-scrollbar>
        <template #footer>
            <span class='dialog-footer'>
                <el-button @click='productLineVisible = 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 { querySgIncomingLineByUserId } from '@/api/advance-boot/sgGroven/incomingLine'
import { addSgProductLine, updateSgProductLine } from '@/api/advance-boot/sgGroven/sgProductLine'
import TableStore from '@/utils/tableStore'

const tableStore = inject('tableStore') as TableStore
const productLineVisible = ref(false)
const title = ref('')
const formRef = ref()
const regex = /^[+]?(\d+(\.\d*)?|\.\d+)([eE][+-]?\d+)?$/
let incomingLineList: any = reactive([])


// 注意不要和表单ref的命名冲突
const form = reactive({
    id: '',
    userId: '',
    incomingLineId: '',
    name: '',
    calcMode: '',
    capacityLoss: 0
})

//form表单校验规则
const rules = {
    name: [{ required: true, message: '生产线名不能为空', trigger: 'blur' }],
    incomingLineId: [{ required: true, message: '请关联进线', trigger: 'change' }],
    calcMode: [{ required: true, message: '请选择计算模式', trigger: 'change' }],
    capacityLoss: [
        { required: true, message: '产能损失不能为空', trigger: 'blur' },
        { pattern: regex, message: '请输入有效的数值', trigger: 'blur' }
    ]
}

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

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

const handleInput = (value: string) => {
    form.name = value.trim()
}


const handleInputCapacityLoss = (value: string) => {
    form.capacityLoss = Number(value.trim())
}

//初始化进线下拉框
const initIncomingLine = async () => {
    //根据业务用户id去查找
    await querySgIncomingLineByUserId(form.userId).then(res => {
        //将进线数据赋值到下来框中
        incomingLineList = res.data
    })
}

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

/************针对tab切换*************/

defineExpose({ open })
</script>

<style scoped>
.el-upload-list__item {
    transition: none !important;
}

.el-select {
    min-width: 180px;
}
</style>
