<script setup>
import { ref, reactive, watch } from 'vue'
import{checkPassWord} from '@/utils/commonOptions'
const props = defineProps({
    isShow:Boolean,
    userInfo:Object,
    departArr:Array
})
const emit = defineEmits(["closeDia","submitForm"])


let form = reactive({
    depart:[]
})
watch(()=>props.isShow,(newval)=>{
    if(newval){
        const {DepartmentId,GroupId,TeamId} = props.userInfo
        let departArr = [];
        DepartmentId?departArr.push(DepartmentId):''
        GroupId?departArr.push(GroupId):''
        TeamId ?departArr.push(TeamId):''
        form.depart = departArr
    }
})
let formRef = ref(null) 
async function handleSubmitForm(){
    emit("submitForm",{user:props.userInfo,form})
}
</script>

<template>
    <el-dialog
        :model-value="props.isShow"
        :close-on-click-modal="false"
        :modal-append-to-body="false"
        width="30%"
        title="重置密码"
        @close="emit('closeDia')"
    >
        <div class="dialog-content">
            <el-form ref="formRef" :model="form" label-width="100px">
                <el-form-item label="账号">
                    <span>{{userInfo.RealName}}</span>
                </el-form-item>
                <el-form-item label="选择分组" prop="depart">
                    <el-cascader 
                        v-model="form.depart" 
                        :options="props.departArr"
                        :props="{
                            value:'DepartmentId',
                            label:'DepartmentName',
                            children:'Child',
                            checkStrictly:true
                        }" 
                        style="width:100%"
                        placeholder="请选择部门分组">
                    </el-cascader>
                </el-form-item>
            </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{
    .btn-content{
        text-align: center;
        margin-bottom: 20px;
    }
}
</style>
