<template>
    <el-dialog
        draggable
        class="cn-operate-dialog"
        v-model="incomingDialogVisible"
        :title="title"
        style="width: 415px;"
    >
        <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="请输入进线名称" />
                </el-form-item>
                <el-form-item label="关联监测点" prop="lineId">
                    <el-select v-model="form.lineId" placeholder="请选择关联监测点" :filterable="true" filterable>
                        <el-option v-for="line in lineList" :key="line.id" :label="line.name" :value="line.id" />
                    </el-select>
                </el-form-item>
            </el-form>
        </el-scrollbar>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="incomingDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="submit">确认</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script lang="ts" setup>
import { ref, inject, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import TableStore from '@/utils/tableStore'
import { addSgIncomingLine, lineOptionList, updateSgIncomingLine } from '@/api/advance-boot/sgGroven/incomingLine'
import { sgUserList } from '@/api/advance-boot/sgGroven/sgUser' // 若不是列表页面弹框可删除
const incomingDialogVisible = ref(false)
const title = ref('')
const tableStore = inject('tableStore') as TableStore
const formRef = ref()


const lineList = ref([
    {
        id: '123456',
        name: '测试1号线'
    },
    {
        id: '01e796a4ffbd8de00c4ee9f34b49d7cb',
        name: '测试2号线'
    },
    {
        id: '1223456',
        name: '测试3号线'
    }
])

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

//form表单校验规则
const rules = {
    name: [{ required: true, message: '进线名不能为空', trigger: 'blur' }],
    lineId: [{ required: true, message: '监测点不能为空', trigger: 'change' }]
}
const resetForm = () => {
    if (formRef.value) {
        formRef.value.resetFields()
    }
}

const open =async (text: string, data: any) => {
    title.value = text
    //默认选中第一个tab
    incomingDialogVisible.value = true
    if (data.id) {
        // 表单赋值
        for (let key in form) {
            form[key] = data[key]
        }
    } else {
        resetForm()
        // 在此处恢复默认表单
        for (let key in form) {
            form[key] = ''
        }
    }
    form.userId = data.userId
    await lineOptionList().then(res => {
        lineList.value = res.data
    })
}

const submit = () => {
    formRef.value.validate(async (valid: any) => {
        if (valid) {
            if (form.id) {
                await updateSgIncomingLine(form)
            } else {
                await addSgIncomingLine(form)
            }
            ElMessage.success('保存进线成功')
            tableStore.index()
            incomingDialogVisible.value = false
        }
    })
}

defineExpose({ open })
</script>

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