<!-- Dialog.vue -->
<template>
    <el-dialog :visible.sync="visible" @update:visible="handleUpdateVisible" :title="title + '职责目录'" :width="width"
        :before-close="beforeClose" :append-to-body="true" custom-class="inner-dialog">
        <el-tree default-expand-all :data="treeData" node-key="id" highlight-current :props="defaultProps"
            @node-click="handleNodeClick" :expand-on-click-node="false" ref="treeRef"></el-tree>

        <div slot="footer" class="dialog-footer">
            <el-button @click="handleCancel">取 消</el-button>
            <el-button type="primary" @click="handleConfirm">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { queryMisList, getDirectoryAllLevel } from '@/api/unified-resources/information-system/index.js'
import { getResponsibilityMsg, addResponsibility, updateResponsibility } from '@/api/unified-resources/job-directory/index.js'
import MyForm from "@/components/MyForm";
export default {
    name: "StandardDialog",
    components: {
        MyForm,
    },
    props: {
        value: {
            type: Boolean,
            default: false,
        },
        title: {
            type: String,
            default: "弹窗标题",
        },
        mainClassId: {
            type: String,
            default: ''
        },
        // rowObj: {
        //     type: Object,
        //     default: {},
        // },
        width: {
            type: String,
            default: "50%",
        },
    },
    data() {
        return {
            visible: this.value,
            dialogTitle: '',
            itemView: {},
            // 这是传递给表单组件的数据
            treeData: [],
            defaultProps: {
                children: 'list',
                label: 'directoryName'
            },
            formData: {},

        };
    },
    watch: {
        value(newVal) {
            this.visible = newVal;
        },
        visible(newVal) {
            this.$emit("input", newVal);
        },
        title: {
            handler(newVal) {
                this.dialogTitle = newVal;
            },
            deep: true, // 深入监听
            immediate: true,
        },
        // rowObj: {
        //     handler(newVal) {
        //         this.itemView = newVal;
        //     },
        //     deep: true, // 深入监听
        //     immediate: true,
        // },
        mainClassId(val) {
            if (val) {
                this.mainClassId = val;
                this.$nextTick(() => {
                    this.$refs.treeRef.setCurrentKey(this.mainClassId);
                });
            }
        }
    },

    mounted() {
        this.getTrees()

    },
    methods: {
        getTrees() {
            getDirectoryAllLevel({
                type: '目录'
            }).then(res => {
                if (+res.code === 200) {
                    this.treeData = res.data
                }
            })
        },
        handleNodeClick(value) {
            this.formData.levelDirectoryName = value.directoryName
            this.formData.levelDirectory = value.id
        },

        handleUpdateVisible(val) {
            this.visible = val;
        },
        beforeClose(done) {
            this.visible = false;
            this.$emit("before-close", done);
        },
        // 取消按钮处理方法
        handleCancel() {
            this.visible = false;
            this.$emit("cancel"); // 可以在父组件监听 'cancel' 事件
        },

        // 确定按钮处理方法
        async handleConfirm() {
            const obj = this.$refs.treeRef.getCurrentNode();
            this.formData.levelDirectoryName = obj.directoryName;
            this.formData.levelDirectory = obj.id;
            this.$emit('saveHandle', { ...this.formData });
            this.handleCancel();

        },



    },
};
</script>

<style scoped lang="scss">
/* 你可以根据需要为弹窗添加样式 */
.inner-dialog {
  z-index: 2002 !important; /* 设置一个比外层更高的值 */
}
</style>