<script setup>
import { ref, reactive, watch, nextTick } from 'vue'
import $icon from '@/utils/icon'
import _ from 'lodash'
const props = defineProps({
    isShow: Boolean,
    type:String,
    nodeInfo:{
        type:Object,
        default:{}
    },
})
const titleMap = [
    {'add':'部门'},//0
    {'add':'分组','edit':'部门'},//1
    {'add':'分组','edit':'分组'},//2
    {'edit':'分组'},//3
]
const emit = defineEmits(["closeDia","submitForm"])
let dialogTitle = ref('')
let node = reactive({
    departName:'',
    groupName:'',
    group:[]
})
watch(()=>props.isShow,(newval)=>{
    if(newval){
        //level为0 增加部门
        //level为1 编辑部门&增加分组
        //level为2 编辑分组&增加分组
        //level为3 编辑分组
        const type = props.type==='add'?'添加':'编辑'
        const title = titleMap[props.nodeInfo.level||0][props.type||'add']
        dialogTitle.value = type+title
        Object.assign(node,{
            departName:props.nodeInfo.data.DepartmentName,
            groupName:props.nodeInfo.data.DepartmentName,
            group:_.cloneDeep(props.nodeInfo.data.Child||[])
        })
    }
})
let saveTagInput = ref(null)
let inputVisible = ref(false)
let inputValue = ref('')
function showInput(){
    inputVisible.value = true;
    nextTick(() => {
        saveTagInput.value?.input.focus();
    });
}
function InputConfirm(){
    if (inputValue.value) {
        node.group.push({
            DepartmentName:inputValue.value
        })
    }
    inputVisible.value = false
    inputValue.value = '';
}

const rules = reactive({
    group:[
        { required: true, message: '请添加分组', trigger: 'blur' },
    ],
    departName:[
        { required: true, message: '请输入部门名称', trigger: 'blur' },
    ],
    groupName:[
        { required: true, message: '请输入分组名称', trigger: 'blur' },
    ]
})
let formRef = ref(null)
async function handleSubmitForm(){
    try{
        await formRef.value?.validate()
    }catch(e){
        console.log(e)
        return
    }
    //通过校验
    emit("submitForm",{
        type:props.type,
        nodeForm:node,
        nodeInfo:props.nodeInfo,
    })
}

</script>

<template>
    <el-dialog
        :model-value="props.isShow"
        :close-on-click-modal="false"
        :modal-append-to-body="false"
        width="30%"
        @close="emit('closeDia')"
    >
        <template #header style="display:flex;align-items:center;">
            <img :src="props.type==='add'?$icon.add:$icon.edit"
                style="color:#fff;width:16px;height:16px;margin-right:5px;">
            <span style="font-size:16px;">{{ dialogTitle }}</span>
        </template>
        <div class="dialog-content">
            <el-form :model="node" :rules="rules" ref="formRef" 
                label-width="100px" class="demo-ruleForm">
                <el-form-item label="部门" prop="departName" v-if="dialogTitle.includes('部门')">
                    <el-input v-model="node.departName" placeholder="请填写部门名称" style="width: 90%"></el-input>
                </el-form-item>
                <el-form-item label="分组" prop="groupName" v-if="dialogTitle==='编辑分组'">
                    <el-input v-model="node.groupName" placeholder="请填写分组名称" style="width: 90%"></el-input>
                </el-form-item>
                <div class="add-group-wrap" v-if="dialogTitle==='添加分组'">
                    <el-form-item label="部门" >
                        <span>{{ node.departName }}</span>
                    </el-form-item>
                    <el-form-item label="分组" prop="group">
                        <el-tag
                            :key="index"
                            v-for="(tag,index) in node.group"
                            closable
                            :disable-transitions="false"
                            @close="node.group.splice(index, 1)">
                            {{tag.DepartmentName}}
                        </el-tag>
                        <el-input
                            class="input-new-tag"
                            v-if="inputVisible"
                            v-model="inputValue"
                            placeholder="分组名"
                            ref="saveTagInput"
                            size="small"
                            style="width:120px"
                            @keyup.enter.native="InputConfirm"
                            @blur="InputConfirm"
                        >
                        </el-input>
                        <el-button v-else class="button-new-tag" size="small" @click="showInput">+添加分组</el-button>
                    </el-form-item>
                </div>
            </el-form>
        </div>
        <template #footer>
            <div class="btn-content">
                <el-button type="primary" style="width:80px;margin-right:24px;" @click="handleSubmitForm">保存</el-button>
                <el-button style="width:80px;" @click="emit('closeDia')">取消</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<style scoped lang="scss">
.el-dialog{
    .dialog-content{
        .add-group-wrap{
            :deep(.el-form-item__content){
                &:last-child{
                    display: flex;
                    gap:10px;
                }
            }
        }
    }
    .btn-content{
        text-align: center;
        margin-bottom: 20px;
    }
}
</style>
