<template>
<el-drawer 
    v-model="visible" 
    :title="title" 
    size="760px" 
    class="standard-modal"
    :close-on-click-modal="false"
>
    <el-form :rules="formRules" :model="form" ref="formEl" require-asterisk-position="right">
        <el-row>
            <el-col :span="12" style="padding-right:10px">
                <el-form-item label="元数据标准名称" prop="standardName">
                    <el-input v-model="form.standardName" placeholder="请输入" maxlength="50"/>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="标准编号" prop="standardCode">
                    <el-input v-model="form.standardCode" placeholder="请输入" maxlength="20"/>
                </el-form-item>
            </el-col>
            <el-col :span="4" style="padding-right:10px">
                <el-form-item label="排序" prop="orderNum">
                    <el-input v-model="form.orderNum" placeholder="请输入" type="number" maxlength="2"/>
                </el-form-item>
            </el-col>
            <el-col :span="8" style="padding-right:10px">
                <el-form-item label="发布单位" prop="publishingUnitCode">
                    <el-select v-model="form.publishingUnitCode" placeholder="请选择">
                        <el-option v-for="item in publishUnitOptions" :label="item.label" :value="item.value" :key="item.value"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="上级标准" prop="parentGuid">
                    <!-- <el-tree-select 
                        v-model="form.parentGuid" 
                        :data="standardOptions" 
                        :props="standardProps"
                        node-key="guid"
                        :expandOnNodeClick="false"
                        placeholder="请选择"
                    /> -->
                    <el-cascader 
                        v-model="form.parentGuid"
                        :options="standardOptions"
                        :props="standardProps"
                        :show-all-levels="false"
                        style="width:100%"
                        clearable
                        @change="parentGuidChange"
                    />
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item label="描述" prop="description">
                    <el-input v-model="form.description" placeholder="请输入" type="textarea"/>
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item label="自定义字段选择" v-if="form.fieldRQVOS && form.fieldRQVOS.length" required>
                    <div class="table-form">
                        <div class="table-form-wrapper" v-for="item,index in form.fieldRQVOS" :key="index">
                            <div class="table-form-item">
                                <el-select v-model="item.fileNameCode" style="width:160px" clearable>
                                    <el-option v-for="item in fieldOptions" :label="item.label" :value="item.value" :key="item.value"></el-option>
                                </el-select>
                            </div>
                            <div class="table-form-item">
                                <el-select v-model="item.isNotnull" style="width: 96px" placeholder="是否必填" clearable>
                                    <el-option v-for="item in isBooleanOptions" :label="item.label" :value="item.value" :key="item.value"></el-option>
                                </el-select>
                            </div>
                            <div class="table-form-item">
                                <el-select v-model="item.isDisplay" style="width:96px" placeholder="是否展示" clearable>
                                    <el-option v-for="item in isBooleanOptions" :label="item.label" :value="item.value" :key="item.value"></el-option>
                                </el-select>
                            </div>
                            <div class="table-form-item">
                                <el-select v-model="item.inputTypeCode" style="width:130px" clearable @change="v => inputTypeChange(v, item)">
                                    <el-option v-for="item in inputOptions" :label="item.label" :value="item.value" :key="item.value"></el-option>
                                </el-select>
                            </div>
                            <div class="table-form-item">
                                <el-select v-if="item.inputTypeCode == 2" v-model="item.dataTypeCode" style="width:160px" filterable clearable>
                                    <el-option v-for="item in allDictOptions" :label="item.dictTypeName" :value="item.dictTypeName" :key="item.guid"></el-option>
                                </el-select>
                                <el-input v-else-if="item.inputTypeCode == 3" v-model="item.validateExpression" placeholder="请输入"></el-input>
                            </div>
                            <div class="table-form-operation">
                                <!-- <el-icon color="#4fa1a4" @click="() => addTableItem(index)">
                                    <CirclePlus />
                                </el-icon> -->
                                <el-icon color="#b2b2b2" @click="() => deleteTableItem(index)" :size="25"><Delete /></el-icon>
                            </div>
                        </div>
                        <div class="table-form-add">
                            <el-icon color="#4fa1a4" @click="() => addTableItem(index)" :size="25">
                                <CirclePlus />
                            </el-icon>
                            <span @click="() => addTableItem(index)" style="cursor: pointer;">添加字段</span>
                        </div>
                    </div>
                </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 { Search, CirclePlus, Delete } from '@element-plus/icons-vue'
import { saveMetaStandard, deleteMetaStandard, updateMetaStandard, getMetaStandardDetail } from '@/api/modules/dataMetaService'
import { 
    getParamsList, getDictAllList
} from '@/api/modules/dataAsset'
import { ElMessage } from "element-plus";

const { proxy } = getCurrentInstance() as any;

const props = defineProps({
    modelValue: Boolean,
    standardOptions: {
        type: Array,
        default: () => ([])
    },
    type: {
        type: String,
        default: 'add'
    },
    guid: {
        type: String,
        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 publishUnitOptions = ref([])
const standardProps = {
    label: 'standardName',
    value: 'guid',
    checkStrictly: true,
    emitPath: false
}
const fieldOptions = ref([])
const isBooleanOptions = [
    { label: '是', value: 'Y' },
    { label: '否', value: 'N' },
]
const inputOptions = ref([])
const allDictOptions = ref([])
/**表单 */
const formEl = ref()
const formTpl = {
    standardName: '',
    standardCode: '',
    orderNum: '',
    publishingUnitCode: '',
    parentGuid: '',
    description: '',
    fieldRQVOS: []
}
const form = ref({...formTpl})
const formRules = {
    standardName: { required: true, message: '请填写元数据标准名称' },
    orderNum: { required: true, message: '请填写排序' },
    publishingUnitCode: { required: true, message: '请选择发布的单位' }
}

function parentGuidChange (val) {
    console.log(val)
    if (!val) {
        form.value.fieldRQVOS = []
        return
    }
    const isFirst = props.standardOptions.find(item => item.guid === val)
    if (isFirst) {
        form.value.fieldRQVOS = [{...tableFormTpl}]
    }
}

const tableFormTpl = {
    fileNameCode: '',
    isNotnull: 'Y',
    isDisplay: 'N',
    inputTypeCode: '',
    dataTypeCode: null,
    validateExpression: null
}
function addTableItem (index) {
    const tableObj = { ...tableFormTpl }
    // form.value.fieldRQVOS.splice(index + 1, 0, tableObj)
    form.value.fieldRQVOS.push(tableObj)
}
function deleteTableItem (index) {
    form.value.fieldRQVOS.splice(index, 1)
}
function inputTypeChange (val, item) {
    console.log(val)
    if (val == 2) {
        // 下拉框
        item.validateExpression = null
    } else if (val == 3) {
        item.dataTypeCode = null
    } else {
        item.validateExpression = null
        item.dataTypeCode = null
    }
}

function getDetail () {
    getMetaStandardDetail(props.guid).then((res:any) => {
        if (res.code === proxy.$passCode) {
            const data = res.data
            data.fieldRQVOS = data.fieldRSVOS
            form.value = { ...data }
        }
    })
}
const confirmLoading = ref(false)
function confirm () {
    formEl.value.validate(valid => {
        if (!valid) return
        let body = { ...form.value }
        console.log(body)
        delete body.fieldRSVOS
        // return
        const request = props.type === 'add' ? saveMetaStandard : updateMetaStandard
        confirmLoading.value = true
        request(body).then((res:any) => {
            if (res.code === proxy.$passCode) {
                ElMessage.success('操作成功')
                emit('success')
                visible.value = false
                return
            }
            ElMessage.error(res.msg)
        }).finally(() => confirmLoading.value = false)
    })
}

watch(
    () => visible.value,
    (v) => {
        if (!v) return
        
        if (props.type === 'edit') {
            getDetail()
        } else {
            form.value = { ...formTpl }
        }
        setTimeout(() => {
            formEl.value.clearValidate()
        }, 100)
    }
)
onBeforeMount(() => {
    getParamsList({ dictType: '发布单位' }).then((res:any) => {
        if (res.code === proxy.$passCode) {
            const data = res.data || []
            publishUnitOptions.value = data
        }
    })
    getParamsList({ dictType: '字段名代码' }).then((res:any) => {
        if (res.code === proxy.$passCode) {
            const data = res.data || []
            fieldOptions.value = data
        }
    })
    getParamsList({ dictType: '输入框类型' }).then((res:any) => {
        if (res.code === proxy.$passCode) {
            const data = res.data || []
            inputOptions.value = data
        }
    })
    getDictAllList().then((res:any) => {
        if (res.code === proxy.$passCode) {
            const data = res.data || []
            allDictOptions.value = data
        }
    })
})
</script>

<style lang="scss">
.standard-modal {
    .el-form-item {
        flex-direction: column;
        .el-form-item__label {
            justify-content: flex-start;
        }
    }
    .el-drawer__footer {
        padding: 10px;
        justify-content: flex-end;
    }
    .el-dialog__body {
        height: 500px;
        overflow: auto;
    }
    .table-form-wrapper {
        display: flex;
        margin-bottom: 5px;
        .table-form-item {
            padding-right: 10px;
        }
        .table-form-operation {
            flex: 0 0 30px;
            // padding-left: 6px;
        }
    }
    .table-form-add {
        display: flex;
        align-items: center;
        color: #4fa1a4;
    }
}
</style>