<template>
    <hc-dialog v-model="isShow" ui="hc-exctab-element-element-lib" title="添加到元素库" widths="400px" @close="dialogClose">
        <el-form ref="formRef" :model="formModel" :rules="formRules" label-position="top" label-width="auto" size="large">
            <el-form-item label="元素表名：" prop="nodeName">
                <el-input v-model="formModel.nodeName" type="textarea" placeholder="请输入元素表名" />
            </el-form-item>
            <el-form-item label="清表类型：" prop="tableType">
                <el-select v-model="formModel.tableType" filterable block placeholder="请选择清表类型">
                    <el-option v-for="item in excelTypeData" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="所属方：" prop="tableOwner">
                <el-select v-model="formModel.tableOwner" filterable block placeholder="请选择所属方">
                    <el-option v-for="item in ownerTypeList" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button hc-btn @click="dialogClose">取消</el-button>
            <el-button hc-btn type="primary" :loading="submitLoading" @click="dialogSubmit">提交</el-button>
        </template>
    </hc-dialog>
</template>

<script setup>
import { ref, watch } from 'vue'
import { getDictionaryData } from '~uti/tools'
import { formValidate, getArrValue, getObjValue } from 'js-fast-way'
import mainApi from '~api/exctab/exceltab'

const props = defineProps({
    info: {
        type: Object,
        default: () => ({}),
    },
    data: {
        type: Array,
        default: () => ([]),
    },
})

//事件
const emit = defineEmits(['finish', 'close'])

//双向绑定
const isShow = defineModel('modelValue', {
    default: false,
})

//监听数据
const dataInfo = ref(props.info)
watch(() => props.info, (data) => {
    dataInfo.value = getObjValue(data)
}, { immediate: true, deep: true })

//监听数据
const datas = ref(props.data)
watch(() => props.data, (data) => {
    datas.value = getArrValue(data)
}, { immediate: true, deep: true })

//监听显示
watch(isShow, (val) => {
    if (val) getInfoData()
})

const excelTypeData = ref([])
const ownerTypeList = ref([])

//获取数据详情
const getInfoData = async () => {
    const form = getObjValue(dataInfo.value)
    const data = getArrValue(datas.value)
    //处理元素字段信息
    for (let i = 0; i < data.length; i++) {
        data[i].eName = data[i].textInfo
        data[i].eType = data[i].textElementType
        data[i].eAllowDeviation = data[i].textDeviation
    }
    //默认表单数据
    formModel.value = {
        nodeName: form.name,
        excelTabId: form.id,
        submitStatus: 3,
        elementList: data,
    }
    //获取下拉数据
    excelTypeData.value = await getDictionaryData('table_type')
    ownerTypeList.value = await getDictionaryData('owner_type')
    //设置默认类型
    if (form.tabType > 0 && form.tabType < 100) {
        formModel.value.tableType = form.tabType
    }
}

//基础表单
const formRef = ref(null)
const formModel = ref({})
const formRules = {
    nodeName: {
        required: true,
        trigger: 'blur',
        message: '请输入元素表名',
    },
    tableType: {
        required: true,
        trigger: 'blur',
        message: '请选择清表类型',
    },
    tableOwner: {
        required: true,
        trigger: 'blur',
        message: '请选择所属方',
    },
}

//提交
const submitLoading = ref(false)
const dialogSubmit = async () => {
    const isForm = await formValidate(formRef.value)
    if (!isForm) return false
    submitLoading.value = true
    const { isRes } = await mainApi.submitExcelElement(formModel.value)
    submitLoading.value = false
    if (!isRes) return
    window.$message.success('操作成功')
    dialogClose()
    emit('finish')
}

//关闭弹窗
const dialogClose = () => {
    isShow.value = false
    submitLoading.value = false
    formModel.value = {}
    emit('close')
}
</script>

<style lang="scss">
.el-overlay-dialog .el-dialog.hc-new-dialog.hc-exctab-element-element-lib .el-dialog__body {
    padding: 12px 0;
}
</style>
