<!-- 业主模块-签发人管理-列表 -->
<template>
    <div class="MainBox">
        <el-form :model="queryForm" inline class="card-box mb-4">

            <div class="FlexBox" style="margin-bottom: 12px;">
                <el-button type="primary" size="default" @click="handleAdd">新增签发人</el-button>
                <el-button size="default">批量启用</el-button>
                <el-button size="default">批量禁用</el-button>
                <el-button size="default">导出清单</el-button>
            </div>

            <el-form-item label="姓名">
                <el-input v-model="queryForm.userName" placeholder="请输入姓名"></el-input>
            </el-form-item>
            <el-form-item label="所属部门">
                <el-select v-model="queryForm.departmentId" placeholder="请选择部门" clearable>
                    <el-option v-for="item in departmentList" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="角色">
                <el-select v-model="queryForm.roleId" placeholder="请选择角色" clearable>
                    <el-option v-for="item in roleList" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="状态">
                <el-select v-model="queryForm.status" placeholder="请选择状态" clearable>
                    <el-option v-for="item in StatusList" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button size="default">重置</el-button>
                <el-button type="primary" size="default">查询</el-button>
            </el-form-item>
        </el-form>

        <div class="card-box">
            <el-table :data="tableData" class="mt-2" :loading="loading">
                <el-table-column prop="userName" label="姓名"></el-table-column>
                <el-table-column prop="departmentName" label="所属部门"></el-table-column>
                <el-table-column prop="roleName" label="角色"></el-table-column>
                <el-table-column prop="projectScope" label="负责项目范围"></el-table-column>
                <el-table-column prop="phone" label="联系电话"></el-table-column>
                <el-table-column prop="permissionDesc" label="权限说明"></el-table-column>
                <el-table-column prop="status" label="状态">
                    <template #default="scope">
                        <el-tag :type="scope.row.status === '1' ? 'success' : 'danger'">
                            {{ scope.row.status === '1' ? '启用' : '禁用' }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="180">
                    <template #default="scope">
                        <el-button size="small" type="primary" link @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button size="small" type="primary" link v-if="scope.row.status === '2'">启用</el-button>
                        <el-button size="small" type="primary" link v-else>禁用</el-button>
                        <el-button size="small" type="primary" link @click="handleDetail(scope.row)">查看详情</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="pagination-container">
                <span class="total-count">显示第 {{ (pageNum - 1) * pageSize + 1 }} 到 {{ pageNum * pageSize }} 条记录，共 {{
                    total }}
                    条</span>
                <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[5, 10, 20]"
                    :total="total" layout="prev, pager, next"></el-pagination>
            </div>
        </div>
        <!-- 签证人编辑详情弹窗 -->
        <DialogBox v-if="dialogShow" ref="dialogRef" :show="dialogShow" :CloseDialog="handleCancel" />
    </div>
</template>
<script setup name="Index">
import { ref } from "vue";
import DialogBox from "./DialogBox.vue";

// 加载状态
const loading = ref(false);

// 查询表单数据
const queryForm = ref({
    dateRange: [],
    userName: "",
    departmentId: "",
    roleId: "",
    status: ""
});

// 部门列表
const departmentList = ref([
    {
        label: "工程部",
        value: "1"
    },
    {
        label: "安全监督部",
        value: "2"
    },
    {
        label: "后勤管理部",
        value: "3"
    },
]);

// 角色列表
const roleList = ref([
    {
        label: "工作票签发人",
        value: "1"
    },
    {
        label: "危险作业票签发人",
        value: "2"
    },
    {
        label: "双签发人",
        value: "3"
    },
]);


// 状态列表
const StatusList = ref([

    {
        label: "启用",
        value: "1"
    },
    {
        label: "禁用",
        value: "2"
    },
]);

// 表格数据
const tableData = ref([
    {
        id: 1,
        needBallheadNum: "1001",
        projectName: "项目1",
        returnStatus: "待审核",
        returnUserName: "用户1",
        submitEndTime: "2023-08-01 10:00:00",
        userName: "张三",
        departmentName: "工程部",
        roleName: "工作票签发人",
        projectScope: "项目1",
        phone: "13800000000",
        permissionDesc: "对项目1的工作票进行签发",
        status: "1"
    },
    {
        id: 2,
        needBallheadNum: "1002",
        projectName: "项目2",
        returnStatus: "待审核",
        returnUserName: "用户2",
        submitEndTime: "2023-08-02 10:00:00",
        userName: "李四",
        departmentName: "安全监督部",
        roleName: "危险作业票签发人",
        projectScope: "项目2",
        phone: "13900000000",
        permissionDesc: "对项目2的危险作业票进行签发",
        status: "2"
    },


]);
const dialogShow = ref(false); // 入库审核弹窗-显示状态
const pageNum = ref(1); // 当前页码
const pageSize = ref(5); // 每页显示条数
const total = ref(20); // 总记录数


// 新增签发人
const handleAdd = (row) => {
    dialogShow.value = true
}

// 编辑签发人
const handleEdit = (row) => {
    dialogShow.value = true
}

// 查看详情
const handleDetail = (row) => {
    dialogShow.value = true
}

// 关闭弹窗
const handleCancel = () => {
    console.log('关闭弹窗')
    dialogShow.value = false
}

</script>
<style scoped lang="scss">
.MainBox {
    padding: 20px;
    height: 100%;
    background: #F9FAFB;
}

.FlexBox {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

.TitleBox {
    font-size: 16px;
    font-weight: bold;
    color: #303133;
}


.mt-2 {
    margin-top: 20px;
}


.card-box {
    background: #fff;
    padding: 16px;
    border-radius: 4px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.pagination-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
}

.total-count {
    color: #606266;
}
</style>
