<template>
    <section class='page'>
        <el-dialog v-model="dialogTableVisible" title="师资列表" width="800px" :before-close="closeDialog">
            <el-form ref="ruleFormRef" :model="formObj" style="padding: 0;width: 80%;" :rules="rules" label-width="80px"
                :inline="true">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="选择师资" prop="name" style="margin: 9px 0 !important;width: 100%;">
                            <el-input v-model="formObj.name" readonly clearable style="width: 100%;">
                                <template #append>
                                    <el-button class='cursor' @click="ChooesDdld">选择</el-button></template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="时间" prop="time" style="margin: 9px 0 !important;width: 100%;">
                            <el-date-picker v-model="formObj.time" type="date" style="width: 100%;" placeholder="时间"
                                format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row style="width: 100%;">
                    <el-col :span="24">
                        <el-form-item label="内容" prop="content" style="margin: 9px 0 !important;width: 100%;">
                            <el-input v-model="formObj.content" placeholder="请输入内容" style="width: 100%;"
                                type="textarea" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>

                <el-button type="primary" @click="handleSave(ruleFormRef)"> <el-icon>
                        <DocumentChecked />
                    </el-icon>
                    <span>保存</span></el-button>
                <el-button @click="closeDialog"> <el-icon>
                        <DocumentDelete />
                    </el-icon>
                    <span>关闭</span></el-button>
            </template>
            <ChooseUser v-if="chooseUserVisible" @choosedUsers="getSonValue" @close="handleClose"></ChooseUser>
        </el-dialog>
    </section>
</template>

<script setup>
import { ref, reactive, getCurrentInstance } from 'vue'
import { ElMessage } from "element-plus";
import ChooseUser from "@/components/MyComponents/ChooseUser/Leader2.vue";
const dialogTableVisible = ref(true)
const { proxy } = getCurrentInstance();
const chooseUserVisible = ref(false)
const emit = defineEmits(['close', 'handleUser']);
const formObj = ref({})
const ruleFormRef = ref()
const rules = reactive({
    name: [{ required: true, message: "选择师资", trigger: "blur" }],
    time: [{ required: true, message: "选择时间", trigger: "blur" }],
    content: [{ required: true, message: "填写内容", trigger: "blur" }],
});
const ChooesDdld = () => {
    chooseUserVisible.value = true
}
const getSonValue = val => {
    formObj.value.name = val.name
    formObj.value.teacherId = val.id
}
const handleClose = (val) => {
    chooseUserVisible.value = false
    if (val) {
        getData()
    }
}

const closeDialog = () => {
    proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？').then(() => {
        dialogTableVisible.value = false
        emit('close')
    })
};
// 保存
const handleSave = async (ruleFormRef) => {
    if (!ruleFormRef) return;
    await ruleFormRef.validate((valid) => {
        if (valid) {
            ElMessage.success("添加成功");
            emit('handleUser', formObj.value)
        } else {
            ElMessage.error("请输入必填项!");
        }
    });
};
const getData = () => {

}
</script>
<style scoped lang="scss"></style>