<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"
        v-loading="loading"
    >
        <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" style="padding-right:10px">
                <el-form-item label="上级标准" prop="parentGuid">
                    <el-tree-select 
                        v-model="form.parentGuid" 
                        :data="treeSelectData" 
                        :props="standardProps"
                        node-key="guid"
                        :highlight-current="true"
                        :expand-on-click-node="true"
                        show-checkbox
                        check-strictly
                        placeholder="请选择"
                        :disabled="parentGuidDisabled"
                        @check="parentGuidCheck"
                    />
                    <!-- <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="12" style="padding-right:10px">
                <el-form-item label="标准编号" prop="standardCode">
                    <el-input v-model="form.standardCode" placeholder="请输入" maxlength="20"/>
                </el-form-item>
            </el-col>
            <el-col :span="12" 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="12" 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="24">
                <el-form-item label="描述" prop="description">
                    <el-input 
                        v-model="form.description" 
                        placeholder="请输入" 
                        type="textarea" maxlength="200"
                        rows="4"
                        show-word-limit
                    />
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item label="自定义字段选择" v-if="form.fieldRQVOS" 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" filterable clearable :disabled="fieldsDisabled || fieldsControlDisabled">
                                    <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 :disabled="fieldsDisabled || fieldsControlDisabled">
                                    <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 :disabled="fieldsDisabled || fieldsControlDisabled">
                                    <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 :disabled="fieldsDisabled || fieldsControlDisabled"
                                    @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 
                                    :disabled="fieldsDisabled || fieldsControlDisabled">
                                    <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" 
                                    :disabled="fieldsDisabled || fieldsControlDisabled"
                                    placeholder="请输入"
                                ></el-input>
                            </div>
                            <div class="table-form-operation" v-if="!fieldsDisabled && !fieldsControlDisabled">
                                <!-- <el-icon color="#4fa1a4" @click="() => addTableItem(index)">
                                    <CirclePlus />
                                </el-icon> -->
                                <el-icon color="#b2b2b2" @click="() => deleteTableItem(index)" :size="22" class="custom-icon" style="margin-top:3px"><Delete /></el-icon>
                            </div>
                        </div>
                        <div class="table-form-add" v-if="!fieldsDisabled && !fieldsControlDisabled">
                            <el-icon color="#4fa1a4" @click="() => addTableItem(index)" :size="20" class="custom-icon">
                                <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 { cloneDeep } from 'lodesh-es'
import { watch } from 'vue'
import { Search, CirclePlus, Delete } from '@element-plus/icons-vue'
import { saveMetaStandard, deleteMetaStandard, 
    updateMetaStandard, getMetaStandardDetail,
    getMetaStandardTree
} 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: ''
    },
    currentNode: {
        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 parentGuidDisabled = computed(() => {
  // 元数据标准有数据，有子集，不可编辑上级标准
  let { currentNode, type } = props
  if (type === 'add') {
    return false
  }
  if (currentNode.isHaveData === 'Y' || currentNode.children) {
    return true
  }
})
const fieldsDisabled = computed(() => {
    // 二级节点： 该节点，所有子节点有字段数据后不可修改
    // 三级节点以下：禁止修改
    let { currentNode, type } = props
    if (type === 'add') {
        return false
    }
    if (currentNode.level == 2) {
        if (currentNode.isHaveData === 'Y' || currentNode.children) {
            return true
        }
        return false
    }
    if (currentNode.level <= 3) {
        return true
    }
})
const fieldsControlDisabled = ref(true)
const treeSelectData = ref([])

/**
 * 配置项列表
 */
const publishUnitOptions = ref([])
const standardProps = {
    label: 'standardName',
    value: 'guid',
    checkStrictly: true,
    emitPath: false
}
const standardTreeProps = {
    label: 'standardName',
    value: 'guid',
}
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: null
}
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}]
    }   
}
function parentGuidCheck (node, {checkedKeys}) {
    fieldsControlDisabled.value = false
    if (node.level == 1) {
        let fieldRQVOS = null
        if (checkedKeys.length) {
            fieldRQVOS = [{...tableFormTpl}]
        }
        form.value.fieldRQVOS = fieldRQVOS
        return
    }
    
    // 上级标准带出标准编号和发布单位
    // loading.value = true
    getMetaStandardDetail(node.guid).then((res:any) => {
        if (res.code === proxy.$passCode) {
            const data = res.data
            if (!form.value.standardCode) {
                form.value.standardCode = data.standardCode
            }
            if (!form.value.publishingUnitCode) {
                form.value.publishingUnitCode = data.publishingUnitCode
            }
            form.value.fieldRQVOS = data.fieldRSVOS
            if (data.fieldRSVOS) {
                fieldsControlDisabled.value = true
            } else {
                fieldsControlDisabled.value = false
            }
        }
    })
}

const tableFormTpl = {
    fileNameCode: '',
    isNotnull: 'N',
    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
    }
}

const loading = ref(false)
function getDetail () {
    loading.value = true
    return getMetaStandardDetail(props.guid).then((res:any) => {
        if (res.code === proxy.$passCode) {
            const data = res.data
            data.fieldRQVOS = data.fieldRSVOS
            form.value = { ...data }
        }
    }).finally(() => loading.value = false)
}
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)
    })
}

function getTreeSelectOptions () {
    return getMetaStandardTree().then((res:any) => {
        if (res.code === proxy.$passCode) {
            let data = res.data || []
            data.forEach(item => {
                item.showEdit = true
                item.level = 1
            })
            treeSelectData.value = data
        }
    })
}

watch(
    () => visible.value,
    (v) => {
        if (!v) return
        // 上级标准：不能选自己，有数据的标准不能选
        // treeSelectData.value = JSON.parse(JSON.stringify(props.standardOptions))
        if (props.type === 'edit') {
            fieldsControlDisabled.value = false
            getTreeSelectOptions().then(() => {
                getDetail().then(() => formatOptions(treeSelectData.value))
            })
        } else {
            fieldsControlDisabled.value = true
            form.value = { ...formTpl }
            getTreeSelectOptions().then(() => formatOptions(treeSelectData.value))
        }
        setTimeout(() => {
            formEl.value.clearValidate()
        }, 100)
    }
)
function formatOptions (options) {
    options.forEach((item:any) => {
        let disabled = form.value.guid === item.guid ? true : false
        if (item.isHaveData === 'Y') {
            disabled = true
        }
        item.disabled = disabled
        if (item.children) {
            formatOptions(item.children)
        }
    })
}
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;
        > span {
            margin-left: 4px;
        }
    }
}
</style>