<!-- 工作票证签发人-弹窗详情 -->
<template>
    <el-dialog title="工作票证签发人" v-model="props.show" @close="handleClose" width="600px">
        <div class="Cneter-box">
            <el-form :model="formData" label-width="100px" label-position="top">
                <el-form-item label="姓名">
                    <el-input v-model="formData.name" placeholder="请输入姓名" />
                    <span class="TipsBox">关联业主单位内部账号</span>
                </el-form-item>

                <el-form-item label="所属部门">
                    <el-select v-model="formData.department" placeholder="请选择部门">
                        <el-option label="部门1" value="dept1" />
                        <el-option label="部门2" value="dept2" />
                    </el-select>
                </el-form-item>
                <el-form-item label="签发角色">
                    <el-checkbox-group v-model="formData.roles">
                        <el-checkbox label="工作票签发人" value="role1" />
                        <el-checkbox label="危险作业票签发人" value="role2" />
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="负责项目范围">
                    <div style="width: 100%; border: 1px solid #ccc; padding: 10px;">
                    <el-tree
                        :data="projectTreeData"
                        :props="treeProps"
                        ref="projectTreeRef"
                        show-checkbox
                        node-key="id"
                        default-expanded-keys="[1]"
                        @check-change="handleCheckChange"
                    />
                    </div>
                    <div class="TipsBox">已选择 {{ formData.selectedProjects.length }} 个项目</div>
                </el-form-item>
                <el-form-item label="联系电话">
                    <el-input v-model="formData.phone" placeholder="请输入手机号码" />
                </el-form-item>
                <el-form-item label="权限有效期">
                    <el-date-picker v-model="formData.expireDate" type="date" placeholder="请选择有效期" />
                    <div class="TipsBox" style="margin-left: 5px;">默认永久有效</div>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="formData.remark" type="textarea" placeholder="请输入备注" />
                </el-form-item>
            </el-form>
        </div>

        <!-- 底部按钮 -->
        <template #footer>
            <el-button @click="handleClose">取消</el-button>
            <el-button type="primary" @click="handleSubmit">确认配置</el-button>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    CloseDialog: {
        type: Function,
        default: () => { }
    }
})



// 项目树形结构数据
const projectTreeData = ref([
    {
        id: 1,
        label: '北京市',
        children: [
            {
                id: 2,
                label: '朝阳区',
                children: [
                    { id: 3, label: 'CBD大厦项目' },
                    { id: 4, label: '国贸三期项目' }
                ]
            },
            { id:5, label: '海淀区' }
        ]
    }
])

// 树形结构配置
const treeProps = ref({
    children: 'children',
    label: 'label'
})

// 表单数据
const formData = ref({
    name: '',
    account: '',
    department: '',
    roles: [],
    selectedProjects: [],
    phone: '',
    expireDate: null,
    forever: false,
    remark: ''
})

// 处理项目选择变化
const handleCheckChange = (checkedNodes) => {
    console.log('选中的项目节点:', checkedNodes)
}

// 关闭弹窗
const handleClose = () => {
    props.CloseDialog()
}

const handleSubmit = () => {
    // 提交逻辑
    console.log('提交分配信息', formData.value)
    props.CloseDialog()
}

</script>

<style scoped lang="scss">
    .TipsBox{
        font-size: 12px;
        color: #999;
        margin-top: 10px;
    }
</style>
