<!-- 后勤模块 - 项目总览查询 - 列表 -->

<template>
    <div class="MainBox">
        <el-form :model="queryForm" class="card-box mb-4" label-position="top">
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-form-item label="项目名称/编号">
                        <el-input v-model="queryForm.projectName" placeholder="请输入项目名称/编号"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="所属层级节点">
                        <el-select v-model="queryForm.nodeType" placeholder="请选择节点类型" clearable>
                            <el-option v-for="item in nodeTypeList" :key="item.value" :label="item.label"
                                :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="施工单位">
                        <el-input v-model="queryForm.constructionUnit" placeholder="请输入施工单位"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="监理单位">
                        <el-input v-model="queryForm.supervisionUnit" placeholder="请输入监理单位"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="作业类型">
                        <el-select v-model="queryForm.workType" placeholder="请选择作业类型" clearable>
                            <el-option v-for="item in workTypeList" :key="item.value" :label="item.label"
                                :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="6">
                    <el-form-item label="风险类型">
                        <el-select v-model="queryForm.riskType" placeholder="请选择风险类型" clearable>
                            <el-option v-for="item in riskTypeList" :key="item.value" :label="item.label"
                                :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="项目状态">
                        <el-select v-model="queryForm.projectStatus" placeholder="请选择项目状态" clearable>
                            <el-option v-for="item in projectStatusList" :key="item.value" :label="item.label"
                                :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="作业时间">
                        <el-date-picker v-model="queryForm.dateRange" type="daterange" value-format="yyyy-MM-dd"
                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item>
                        <el-button size="default">重置</el-button>
                        <el-button type="primary" size="default">查询</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <div class="card-box">
            <el-table :data="tableData" class="mt-2">
                <el-table-column prop="projectNo" label="项目编号" fixed="left" width="200"></el-table-column>
                <el-table-column prop="projectName" label="项目名称" fixed="left" width="200"></el-table-column>
                <el-table-column prop="nodeName" label="所属节点" width="200"></el-table-column>
                <el-table-column prop="constructionUnit" label="单位施工" width="200"></el-table-column>
                <el-table-column prop="supervisionUnit" label="监理单位" width="200"></el-table-column>
                <el-table-column prop="operationLocation" label="作业地点" width="200"></el-table-column>
                <el-table-column prop="operationTime" label="作业起止时间" width="200"></el-table-column>
                <el-table-column prop="workPlanStatus" label="工作计划审批状态" width="200"></el-table-column>
                <el-table-column prop="entrancePermitStatus" label="出入证申请状态" width="200"></el-table-column>
                <el-table-column prop="workTicketStatus" label="工作票状态" width="200"></el-table-column>
                <el-table-column prop="highRiskWorkTicketStatus" label="高风险工作票状态" width="200"></el-table-column>
                <el-table-column prop="allotStatus" label="球机分配状态" width="200"></el-table-column>
                <el-table-column prop="ReviewStatusA" label="监理复核状态" width="200"></el-table-column>
                <el-table-column prop="ReviewStatusB" label="物业复核状态" width="200"></el-table-column>
                <el-table-column prop="TemplateType" label="风险卡模版类型" width="200"></el-table-column>
                <el-table-column prop="progress" label="必选项完成度" width="200">
                    <template #default="scope">
                        <el-progress :percentage="scope.row.progress"
                            :format="(percentage) => `${percentage}%`"></el-progress>
                    </template>
                </el-table-column>
                <el-table-column prop="problemNumAI" label="AI反馈问题数" width="200"></el-table-column>
                <el-table-column prop="problemNumSupervision" label="监理反馈问题数" width="200"></el-table-column>
                <el-table-column prop="rectifyNum" label="整改完成数" width="200"></el-table-column>
                <el-table-column prop="permissionDesc" label="整改通过率" width="200"></el-table-column>
                <el-table-column prop="projectStatus" label="项目状态" width="200">
                    <template #default="scope">
                        <el-tag :type="scope.row.projectStatus === '已完成' ? 'success' : 'danger'">{{
                            scope.row.projectStatus }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="180" fixed="right">
                    <template #default="scope">
                        <el-button size="small" type="primary" link @click="handleDetailClick(scope.row)">查看详情</el-button>
                        <el-button size="small" type="primary" link @click="handleExportClick(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/index.vue";



// 查询表单数据
const queryForm = ref({
    projectName: "",
    nodeType: "",
    constructionUnit: "",
    dateRange: [],
});

// 作业类型列表
const workTypeList = ref([
    {
        label: "正常作业",
        value: "1"
    },
    {
        label: "异常作业",
        value: "2"
    },
]);

// 风险类型列表
const riskTypeList = ref([
    {
        label: "高风险",
        value: "1"
    },
    {
        label: "中风险",
        value: "2"
    },
    {
        label: "低风险",
        value: "3"
    },
]);

// 项目状态列表
const projectStatusList = ref([
    {
        label: "实施中",
        value: "1"
    },
    {
        label: "待审批",
        value: "2"
    },
    {
        label: "已完成",
        value: "3"
    },
]);



// 节点类型列表
const nodeTypeList = ref([
    {
        label: "部门",
        value: "1"
    },
    {
        label: "楼层",
        value: "2"
    },
    {
        label: "班组",
        value: "3"
    },
]);

// 表格数据
const tableData = ref([
    {
        id: 1,
        projectNo: "PM20240610001",
        projectName: "XX输变电工程",
        nodeName: "城东片区",
        constructionUnit: "XX建设有限公司",
        supervisionUnit: "XX监理有限公司",
        operationLocation: "XX市XX区",
        operationTime: "2024-06-10 09:00至2024-06-15 17:00",
        workPlanStatus: "已审批",
        entrancePermitStatus: "已申请",
        workTicketStatus: "已签发",
        highRiskWorkTicketStatus: "已签发",
        allotStatus: "已分配",
        ReviewStatusA: "已复核",
        ReviewStatusB: "已复核",
        TemplateType: "高空作业",
        progress: 75,
        problemNumAI: 2,
        problemNumSupervision: 1,
        rectifyNum: 3,
        permissionDesc: "100%",
        projectStatus: "已完成"
    },
    {
        id: 2,
        projectNo: "PM20240609001",
        projectName: "XX变电站工程",
        nodeName: "城西片区",
        constructionUnit: "XX建设有限公司",
        supervisionUnit: "XX监理有限公司",
        operationLocation: "XX市XX区",
        operationTime: "2024-06-09 10:00至2024-06-14 18:00",
        workPlanStatus: "已审批",
        entrancePermitStatus: "已申请",
        workTicketStatus: "已签发",
        highRiskWorkTicketStatus: "已签发",
        allotStatus: "已分配",
        ReviewStatusA: "已复核",
        ReviewStatusB: "已复核",
        TemplateType: "高空作业",
        progress: 80,
        problemNumAI: 1,
        problemNumSupervision: 0,
        rectifyNum: 1,
        permissionDesc: "100%",
        projectStatus: "已完成"
    },
    {
        id: 3,
        projectNo: "PM20240608001",
        projectName: "XX线路工程",
        nodeName: "城南片区",
        constructionUnit: "XX建设有限公司",
        supervisionUnit: "XX监理有限公司",
        operationLocation: "XX市XX区",
        operationTime: "2024-06-08 08:00至2024-06-13 16:00",
        workPlanStatus: "已审批",
        entrancePermitStatus: "已申请",
        workTicketStatus: "已签发",
        highRiskWorkTicketStatus: "已签发",
        allotStatus: "已分配",
        ReviewStatusA: "已复核",
        ReviewStatusB: "已复核",
        TemplateType: "高空作业",
        progress: 90,
        problemNumAI: 0,
        problemNumSupervision: 0,
        rectifyNum: 0,
        permissionDesc: "100%",
        projectStatus: "已完成"
    }
]);
const dialogShow = ref(false); // 入库审核弹窗-显示状态
const pageNum = ref(1); // 当前页码
const pageSize = ref(5); // 每页显示条数
const total = ref(20); // 总记录数


// 查看详情
const handleDetailClick = (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>
