<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"
                        
                        check-strictly
                        placeholder="请选择"
                        :disabled="treeSelectDisabled"
                        clearable
                        @check="parentGuidCheck"
                        @clear="parentGuidClear"
                        @nodeClick="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="6"/>
                </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="12" style="padding-right:10px;display: inline-flex;" v-if="fieldsTableShow">
                <el-form-item label="排序字段" prop="orderField" style="width: 70%;">
                    <el-select v-model="form.orderField" placeholder="请选择" :disabled="fieldsDisabled">
                        <el-option v-for="item in form.fieldRQVOS?.filter(f => f.fileNameCode != '').map(f => {
                            return {
                                value: f.fileNameCode,
                                label: fieldOptions.find(s => s.value == f.fileNameCode).label
                            }
                        }) || []" :label="item.label" :value="item.value" :key="item.value"></el-option>
                    </el-select>
                </el-form-item>
                 <el-form-item label="" prop="isDisplay" style="margin-left: 12px;margin-top: 26px;">
                    <el-checkbox v-model="form.isDisplay" :true-label="'Y'" :false-label="'N'" :disabled="fieldsDisabled">是否展示</el-checkbox>
                 </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="fieldsTableShow" required>
                    <div class="table-form">
                        <div class="table-form-wrapper" v-for="item,index in form.fieldRQVOS" :key="index">
                            <div :style="{ display: 'inline-flex', width: !fieldsDisabled ? 'calc(100% - 30px)' : '100%' }">

                            <div class="table-form-item">
                                <el-select v-model="item.fileNameCode" style="width:160px" filterable clearable :disabled="fieldsDisabled">
                                    <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">
                                    <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">
                                    <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"
                                    @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">
                                    <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"
                                    placeholder="请输入"
                                ></el-input>
                            </div>
                          </div>
                            <div class="table-form-operation" v-if="!fieldsDisabled">
                                <!-- <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">
                            <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 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,
    orderField: '',//排序字段
    isDisplay: 'Y' //是否显示
}
const form = ref({...formTpl})
const formRules = {
    standardName: { required: true, message: '请填写元数据标准名称' },
    orderNum: { required: true, message: '请填写排序' },
    publishingUnitCode: { required: false, message: '请选择发布的单位' },
    orderField: { 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 treeSelectData = ref([])
const treeCurrentNode = ref({})
const treeSelectDisabled = ref(false)
const fieldsDisabled = ref(false)
const fieldsTableShow = ref(false)
watch(
    () => treeCurrentNode,
    (currentNode:any) => {
        console.log('currentNode', currentNode.value)
        let { level, isHaveData } = currentNode.value
        fieldsTableShow.value = level ? true : false
        fieldsDisabled.value = false
        if (!level) {
             form.value.fieldRQVOS = null
             return
        }
        if (props.type === 'add') {
            if (level == 1) {
                // 所选为一级节点，当前二级节点
                form.value.fieldRQVOS = [{...tableFormTpl}]
            }
            if (level >= 2) {
                // 所选为二级节点，当前三级节点以下，只读
                fieldsDisabled.value = true
            }
        } else if (props.type === 'edit') {
            if (level == 1) {
                // 所选为一级节点，当前二级节点
                form.value.fieldRQVOS = [{...tableFormTpl}]
                fieldsDisabled.value = false
            }
            if (level >= 2) {
                fieldsDisabled.value = true
            }
        }
    },
    { deep: true}
)
function parentGuidCheck (node, {checkedKeys}) {
    console.log('node', node)
    if (node.disabled) {
        return;
    }
    // fieldsControlDisabled.value = false
    treeCurrentNode.value = node
    // if (checkedKeys.length === 0) {
    //     treeCurrentNode.value = {}
    //     return
    // }
    if (node.level == 1) 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.orderField = data.orderField;
            form.value.isDisplay = data.isDisplay;
            form.value.fieldRQVOS = data.fieldRSVOS
        }
    })
}
function parentGuidClear () {
    treeCurrentNode.value = {}
}

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)
    nextTick(() => {
        let scrollBody = document.querySelector('.el-drawer__body')
        scrollBody.scrollTop = scrollBody.scrollHeight
    })
}
function deleteTableItem (index) {
    let item =  form.value.fieldRQVOS[index];
    form.value.fieldRQVOS.splice(index, 1);
    if (form.value.orderField == item.fileNameCode) {
        form.value.orderField = '';
    }
}
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 }
            let { level, isChildHaveData, children } = treeCurrentNode.value
            if (level == 1) {
                // 所选为一级节点，当前二级节点
                fieldsTableShow.value = false
            }
            if (level == 2) {
                fieldsDisabled.value = isChildHaveData === 'Y' ? true : false
            }
            if (level >= 3) {
                fieldsDisabled.value = true
            }
            if ((children && children.length) || isChildHaveData === 'Y') {
                treeSelectDisabled.value = true
            }
        }
    }).finally(() => loading.value = false)
}
const confirmLoading = ref(false)
function confirm () {
    formEl.value.validate(valid => {
        if (!valid) return
        let body = { ...form.value }
        if (!body.parentGuid) {
            body.parentGuid = null
        }
        delete body.fieldRSVOS
        // return
        const request = props.type === 'add' ? saveMetaStandard : updateMetaStandard
        if (!fieldsDisabled.value) {
            if (body.orderField) {
                if (body.fieldRQVOS?.some(f => f.fileNameCode == body.orderField && f.isNotnull != 'Y')) {
                    ElMessage.error('排序字段需设置必填')
                    return;
                }
            }
        }
        confirmLoading.value = true
        request(body).then((res:any) => {
            if (res.code === proxy.$passCode) {
                ElMessage.success('操作成功')
                emit('success', props.type === 'add' ? res.data : body.guid)
                visible.value = false
                return
            }
            ElMessage.error(res.msg)
        }).finally(() => confirmLoading.value = false)
    })
}

function getTreeSelectOptions () {
    return getMetaStandardTree().then((res:any) => {
        loading.value = false 
        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
        // console.log(props.currentNode)
        // 上级标准：不能选自己，有数据的标准不能选
        // treeSelectData.value = JSON.parse(JSON.stringify(props.standardOptions))
        treeSelectDisabled.value = false
        if (props.type === 'edit') {
            // fieldsControlDisabled.value = false
             loading.value = true  
            getTreeSelectOptions().then(() => {
                 loading.value = false 
                let guid = props.currentNode?.guid;
                treeCurrentNode.value = props.currentNode
                if (guid) {
                    let getNode = (object: any) => {
                        for (const select of object) {
                            if (select.guid == guid) {
                                return select;
                            }
                            if (select?.children?.length) {
                                let node = getNode(select.children);
                                if (node) {
                                    return node;
                                }
                            }
                        }
                    }
                    let node = getNode(treeSelectData.value);
                    if (node) {
                        treeCurrentNode.value = node;
                    }
                }
                getDetail().then(() => formatOptions(treeSelectData.value))
            })
            treeCurrentNode.value = props.currentNode
        } else {
            // fieldsControlDisabled.value = true
            form.value = { ...formTpl }
             loading.value = true  
            getTreeSelectOptions().then(() => {
                 loading.value = false 
                formatOptions(treeSelectData.value)
            })
            treeCurrentNode.value = {}
        }
        setTimeout(() => {
            formEl.value.clearValidate()
            
        }, 100)
    }
)
function formatOptions (options, level = 1) {
    options.forEach((item:any) => {
        let disabled = form.value.guid === item.guid ? true : false
        if (item.isHaveData === 'Y') {
            disabled = true
        }
        item.disabled = disabled
        item.level = level
        if (item.children) {
            formatOptions(item.children, level + 1)
        }
    })
}
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>