<template>
<el-drawer 
    v-model="visible" 
    :title="title" 
    size="520px" 
    class="standard-meta-modal"
    :close-on-click-modal="false"
>
    <el-form 
        :model="form" 
        :rules="formRules" 
        ref="formEl" 
        style="min-height: 200px;" 
        require-asterisk-position="right"
        v-loading="loading"
    >
        <el-row>
            <el-col v-for="item,index in fields" :key="index" :span="12" style="padding-right:10px;">
                <el-form-item :label="item.fileNameCodeName" :prop="item.fileNameCode">
                    <el-input 
                        v-if="item.inputTypeCode == '1' || item.inputTypeCode == '3'" 
                        v-model="form[item.fileNameCode]" 
                        placeholder="请输入"
                    />
                    <el-select 
                        v-else-if="item.inputTypeCode == '2'" 
                        v-model="form[item.fileNameCode]" 
                        filterable
                        clearable
                        placeholder="请选择"
                    >
                        <el-option v-for="op in formOptions[item.fileNameCode]" :label="op.label" :value="op.value" :key="op.value"></el-option>
                    </el-select>
                    <el-tree-select
                        v-else-if="item.inputTypeCode == '4'"
                        v-model="form[item.fileNameCode]"
                        :data="standardCodeTree"
                        :props="treeSelectProps"
                        placeholder="请选择"
                    />
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
    <template #footer>
        <div style="text-align:right">
            <el-button @click="visible = false" :disabled="confirmLoading">取消</el-button>
            <el-button type="primary" @click="confirm" :loading="confirmLoading">确认</el-button>
        </div>
    </template>
</el-drawer>
</template>

<script setup lang="ts">
import { watch } from 'vue'
import { ElMessage } from "element-plus";
import { getParamsList } from '@/api/modules/dataAsset'
import { saveMetaStandardDataFields, getMetaStandardFieldsDetail, getStandardCodeTree } from '@/api/modules/dataMetaService'

const { proxy } = getCurrentInstance() as any;
const props = defineProps({
    modelValue: Boolean,
    fields: {
        type: Array,
        default: () => ([])
    },
    metaStandardGuid: {
        type: String,
        default: ''
    },
    type: {
        type: String,
        default: 'add'
    },
    data: {
        type: Object,
        default: () => ({})
    }
})
const emit = defineEmits(['update:modelValue', 'success', 'confirm'])
const visible = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    emit('update:modelValue', val);
  }
})
const title = computed(() => {
    return props.type === 'add' ? '新增字段标准' : '编辑字段标准'
})

const formEl = ref()
const form = ref({})
const formRules = ref({})
const formOptions = ref({})
const detail = ref({})

async function initForm () {
    const { fields, type, data } = props
    console.log(data)
    if (!fields) return
    let formData = {}
    let formRuleData = {}
    let formOptionData = {}
    let detailData:any = {}
    if (type === 'edit') {
        detailData = await getDetail()
        detail.value = detailData
    }
    fields.forEach(async (item:any) => {
        formData[item.fileNameCode] = type === 'add' ? '' : detailData.metaStandardValue[item.fileNameCode]
        formRuleData[item.fileNameCode] = {
            required: item.isNotnull === 'Y' ? true : false,
            message: `缺少${item.fileNameCodeName}`
        }
        // formOptionData[item.fileNameCode] = await getOptions(item.dataTypeCode)
        if (item.inputTypeCode == '2') {
            formOptions.value[item.fileNameCode] = await getOptions(item.dataTypeCode)
        }
    })
    // formOptions.value = formOptionData
    form.value = formData
    formRules.value = formRuleData
    nextTick(() => formEl.value.clearValidate())
    setTimeout(() => {
        formEl.value.clearValidate()
    }, 100)
}
function getOptions (dictType) {
    return new Promise((resolve, reject) => {
        getParamsList({ dictType }).then((res:any) => {
            if (res.code === proxy.$passCode) {
                resolve(res.data)
            }
        })
    })
}
const loading = ref(false)
function getDetail () {
    return new Promise((resolve) => {
        loading.value = true
        getMetaStandardFieldsDetail(props.data.guid).then((res:any) => {
            if (res.code === proxy.$passCode) {
                resolve(res.data)
            }
        }).finally(() => loading.value = false)
    })
}

const confirmLoading = ref(false)
function confirm () {
    console.log(form.value)
    formEl.value.validate(valid => {
        if (!valid) return
        let body = {
            metaStandardGuid: props.type === 'edit' ? detail.value.metaStandardGuid : props.metaStandardGuid,
            metaStandardValue: { ...form.value }
        }
        if (props.type === 'edit') {
            body.guid = props.data.guid
        }
        confirmLoading.value = true
        saveMetaStandardDataFields(body).then((res:any) => {
            if (res.code === proxy.$passCode) {
                ElMessage.success('操作成功')
                emit('success')
                visible.value = false
            } else {
                ElMessage.error(res.msg)
            }
        }).finally(() => confirmLoading.value = false)
    })
}

const standardCodeTree = ref([])
const treeSelectProps = {
    label: 'name',
    value: 'guid',
    isLeaf: 'isCode'
}
function getStandardCodeTreeList () {
    getStandardCodeTree().then((res:any) => {
        if (res.code === proxy.$passCode) {
            const data = res.data
            data.forEach(item => {
                if (item.children) {
                    item.children.forEach(subItem => {
                        // 二级的标准名字作为key
                        subItem.guid = subItem.name
                        // subItem.value = subItem.name
                    })
                }
            })
            standardCodeTree.value = data
        }
    })
}

watch(
    () => visible.value,
    (v) => {
        if (!v) return
        initForm()
    }
)

onBeforeMount(() => {
    getStandardCodeTreeList()
})
</script>

<style lang="scss">
.standard-meta-modal {
    .el-form-item {
        flex-direction: column;
        .el-form-item__label {
        justify-content: flex-start;
        }
    }
    .el-drawer__footer {
        padding: 10px;
        justify-content: flex-end;
    }
    
    .table-form-wrapper {
        display: flex;
        margin-bottom: 5px;
        .table-form-item {
            padding-right: 10px;
        }
        .table-form-operation {
            flex: 0 0 70px;
            padding-left: 6px;
        }
    }
}
</style>