<template>
  <div class="construction-department-page">
    <!-- 左侧树形菜单 -->
    <div class="left-sidebar">
      <el-tree
        :data="treeData"
        :props="defaultProps"
        node-key="id"
        default-expand-all
        highlight-current
        @node-click="handleNodeClick"
        class="department-tree"
      >
        <template #default="{ node, data }">
          <span class="tree-node">
            <el-icon v-if="data.children && data.children.length" class="tree-icon">
              <FolderOpened v-if="node.expanded" />
              <Folder v-else />
            </el-icon>
            <el-icon v-else class="tree-icon"><Document /></el-icon>
            <span class="tree-label">{{ node.label }}</span>
          </span>
        </template>
      </el-tree>
    </div>

    <!-- 右侧内容区域 -->
    <div class="right-content">
      <!-- 搜索筛选区域 -->
      <div class="search-area">
        <div class="search-row">
          <div class="search-item">
            <span class="search-label">项目名称</span>
            <el-input v-model="searchForm.projectName" placeholder="" clearable style="width: 140px" />
          </div>
          <div class="search-item">
            <span class="search-label">驻地名称</span>
            <el-input v-model="searchForm.stationName" placeholder="" clearable style="width: 140px" />
          </div>
          <div class="search-item">
            <span class="search-label">建设单位</span>
            <el-input v-model="searchForm.constructionUnit" placeholder="" clearable style="width: 140px" />
          </div>
          <div class="search-item">
            <span class="search-label">施工单位</span>
            <el-input v-model="searchForm.builderUnit" placeholder="" clearable style="width: 140px" />
          </div>
          <div class="search-item">
            <span class="search-label">项目类型</span>
            <el-select v-model="searchForm.projectType" placeholder="全部" clearable style="width: 100px">
              <el-option label="全部" value="" />
              <el-option label="新建" value="new" />
              <el-option label="改扩建" value="rebuild" />
            </el-select>
          </div>
        </div>
        <div class="search-row">
          <div class="search-item">
            <span class="search-label">驻地类型</span>
            <el-select v-model="searchForm.stationType" placeholder="全部" clearable style="width: 100px">
              <el-option label="全部" value="" />
              <el-option label="类型1" value="type1" />
              <el-option label="类型2" value="type2" />
            </el-select>
          </div>
          <div class="search-item">
            <span class="search-label">驻地风险等级</span>
            <el-select v-model="searchForm.riskLevel" placeholder="全部" clearable style="width: 100px">
              <el-option label="全部" value="" />
              <el-option label="高" value="high" />
              <el-option label="中" value="medium" />
              <el-option label="低" value="low" />
            </el-select>
          </div>
          <div class="search-item">
            <span class="search-label">所属区县</span>
            <el-select v-model="searchForm.district" placeholder="全部" clearable style="width: 100px">
              <el-option label="全部" value="" />
              <el-option label="万州区" value="wanzhou" />
              <el-option label="沙坪坝区" value="shapingba" />
              <el-option label="涪陵区" value="fuling" />
            </el-select>
          </div>
          <div class="search-item">
            <span class="search-label">吹哨人姓名</span>
            <el-input v-model="searchForm.whistleblowerName" placeholder="" clearable style="width: 100px" />
          </div>
          <div class="search-item">
            <span class="search-label">建设单位责任人姓名</span>
            <el-input v-model="searchForm.constructorResponsible" placeholder="" clearable style="width: 100px" />
          </div>
        </div>
        <div class="search-row">
          <div class="search-item">
            <span class="search-label">区县级责任人姓名</span>
            <el-input v-model="searchForm.countyResponsible" placeholder="" clearable style="width: 100px" />
          </div>
          <div class="search-item">
            <span class="search-label">市级责任人姓名</span>
            <el-input v-model="searchForm.cityResponsible" placeholder="" clearable style="width: 100px" />
          </div>
          <div class="search-item">
            <span class="search-label">施工单位责任人姓名</span>
            <el-input v-model="searchForm.builderResponsible" placeholder="" clearable style="width: 100px" />
          </div>
          <div class="search-item">
            <span class="search-label">驻地责任人姓名</span>
            <el-input v-model="searchForm.stationResponsible" placeholder="" clearable style="width: 100px" />
          </div>
          <div class="search-item search-buttons">
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <!-- <el-button link type="primary" @click="handleReset">收起</el-button> -->
          </div>
        </div>
      </div>

      <!-- 操作按钮 -->
      <div class="action-area">
        <el-button type="primary" class="export-btn" @click="handleExport">
          <el-icon><Download /></el-icon>
          导出
        </el-button>
        <el-button type="primary" class="import-btn" @click="handleImport">
          <el-icon><Upload /></el-icon>
          导入
        </el-button>
      </div>

      <!-- 数据表格 -->
      <div class="table-area">
        <el-table
          :data="filteredTableData"
          stripe
          style="width: 100%"
          :header-cell-style="headerCellStyle"
          :row-class-name="rowClassName"
        >
          <el-table-column type="index" label="序号" width="60" align="center" />
          <el-table-column prop="district" label="所属区县" width="100" align="center" />
          <el-table-column prop="projectName" label="项目名称" min-width="200" show-overflow-tooltip />
          <el-table-column prop="stationName" label="驻地名称" min-width="180" show-overflow-tooltip />
          <el-table-column prop="stationType" label="驻地类型" width="100" align="center" />
          <el-table-column prop="coordinate" label="坐标点位" width="150" align="center" show-overflow-tooltip />
          <el-table-column prop="parentProject" label="所属项目名称" min-width="180" show-overflow-tooltip />
          <el-table-column prop="projectType" label="项目类型" width="120" align="center" />
          <el-table-column prop="constructionUnit" label="建设单位" min-width="150" show-overflow-tooltip />
          <el-table-column prop="builderUnit" label="施工单位" min-width="150" show-overflow-tooltip />
          <el-table-column prop="stationAddress" label="驻地地址" min-width="200" show-overflow-tooltip />
          <el-table-column prop="adminArea" label="行政区域" width="100" align="center" />
          <el-table-column prop="stationPeople" label="驻地人数" width="90" align="center" />
          <el-table-column prop="riskLevel" label="驻地风险等级" width="110" align="center" />
          <el-table-column prop="buildingType" label="房建类型" width="100" align="center" />
          <el-table-column prop="relocationStatus" label="搬迁状态" width="90" align="center" />
          <el-table-column label="操作" width="120" align="center" fixed="right">
            <template #default="{ row }">
              <el-button link type="primary" size="small" @click="handleEdit(row)">编辑</el-button>
              <el-button link type="danger" size="small" @click="handleDelete(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页 -->
      <div class="pagination-area">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="total"
          :page-sizes="[10, 20, 50, 100]"
          layout="prev, pager, next, jumper"
          prev-text="上一个"
          next-text="下一个"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Folder, FolderOpened, Document, Download, Upload } from "@element-plus/icons-vue";

// 树形菜单数据
const treeData = ref([
  {
    id: 1,
    label: "2026",
    children: [
      { id: 11, label: "2026.3" },
      { id: 12, label: "2026.2" },
      { id: 13, label: "2026.1" },
    ],
  },
  {
    id: 2,
    label: "2025",
    children: [
      { id: 21, label: "2025.12" },
      { id: 22, label: "2025.11" },
      { id: 23, label: "2025.10" },
    ],
  },
]);

const defaultProps = {
  children: "children",
  label: "label",
};

// 搜索表单
const searchForm = reactive({
  projectName: "",
  stationName: "",
  constructionUnit: "",
  builderUnit: "",
  projectType: "",
  stationType: "",
  riskLevel: "",
  district: "",
  whistleblowerName: "",
  constructorResponsible: "",
  countyResponsible: "",
  cityResponsible: "",
  builderResponsible: "",
  stationResponsible: "",
});

// 表格数据
const tableData = ref([
  {
    district: "沙坪坝区",
    projectName: "沙坪坝区S545茅山峡公路桥新建工程（渝黔铁路扩能改造工程）",
    stationName: "沙坪坝区S545茅山峡公路桥新建工程（渝黔铁路扩能改造工程）项目经理部",
    stationType: "项目部驻地",
    coordinate: "经度：106.44E；纬度29.62N",
    parentProject: "中铁十七局集团第五工程有限公司",
    projectType: "普通国省干线（新建/改扩建）",
    constructionUnit: "成渝铁路客运专线有限公司",
    builderUnit: "中铁十七局集团",
    stationAddress: "沙坪坝区井口街道南溪村茅山峡公路跨线桥处",
    adminArea: "沙坪坝区",
    stationPeople: "16",
    riskLevel: "高",
    buildingType: "板房",
    relocationStatus: "否",
  },
  {
    district: "沙坪坝区",
    projectName: "沙坪坝区S545茅山峡公路桥新建工程（渝黔铁路扩能改造工程）",
    stationName: "沙坪坝区S545茅山峡公路桥新建工程（渝黔铁路扩能改造工程）项目经理部",
    stationType: "项目部驻地",
    coordinate: "经度：106.44E；纬度29.62N",
    parentProject: "中铁十七局集团第五工程有限公司",
    projectType: "普通国省干线（新建/改扩建）",
    constructionUnit: "成渝铁路客运专线有限公司",
    builderUnit: "中铁十七局集团",
    stationAddress: "沙坪坝区井口街道南溪村茅山峡公路跨线桥处",
    adminArea: "沙坪坝区",
    stationPeople: "16",
    riskLevel: "高",
    buildingType: "板房",
    relocationStatus: "否",
  },
]);

// 过滤后的表格数据
const filteredTableData = computed(() => {
  return tableData.value.filter((item) => {
    const matchProjectName = !searchForm.projectName || item.projectName.includes(searchForm.projectName);
    const matchStationName = !searchForm.stationName || item.stationName.includes(searchForm.stationName);
    const matchConstructionUnit = !searchForm.constructionUnit || item.constructionUnit.includes(searchForm.constructionUnit);
    const matchBuilderUnit = !searchForm.builderUnit || item.builderUnit.includes(searchForm.builderUnit);
    const matchDistrict = !searchForm.district || item.district.includes(searchForm.district === 'wanzhou' ? '万州' : searchForm.district === 'shapingba' ? '沙坪坝' : '涪陵');
    return matchProjectName && matchStationName && matchConstructionUnit && matchBuilderUnit && matchDistrict;
  });
});

// 分页
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(2);

// 表头样式
const headerCellStyle = () => ({
  background: "#e6f0ff",
  color: "#303133",
  fontWeight: "bold",
  fontSize: "13px",
  padding: "10px 0",
});

// 行样式
const rowClassName = ({ rowIndex }) => {
  return rowIndex % 2 === 0 ? "even-row" : "odd-row";
};

// 树节点点击
const handleNodeClick = (data) => {
  console.log("点击节点:", data);
};

// 查询
const handleSearch = () => {
  currentPage.value = 1;
  ElMessage.success("查询成功");
};

// 重置
const handleReset = () => {
  Object.keys(searchForm).forEach((key) => {
    searchForm[key] = "";
  });
  currentPage.value = 1;
  ElMessage.success("已重置");
};

// 导出
const handleExport = () => {
  ElMessage.success("导出成功");
};

// 导入
const handleImport = () => {
  ElMessage.info("请选择要导入的文件");
};

// 编辑
const handleEdit = (row) => {
  ElMessage.info(`编辑 ${row.projectName}`);
};

// 删除
const handleDelete = (row) => {
  ElMessageBox.confirm(`确定删除 ${row.projectName} 吗？`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      ElMessage.success("删除成功");
    })
    .catch(() => {});
};

// 分页变化
const handleCurrentChange = (val) => {
  currentPage.value = val;
};

const handleSizeChange = (val) => {
  pageSize.value = val;
};
</script>

<style lang="scss" scoped>
.construction-department-page {
  display: flex;
  height: 100vh;
  background: #f5f7fa;

  // 左侧树形菜单
  .left-sidebar {
    width: 200px;
    background: #fff;
    border-right: 1px solid #e4e7ed;
    padding: 15px;
    overflow-y: auto;

    .department-tree {
      .tree-node {
        display: flex;
        align-items: center;
        font-size: 14px;

        .tree-icon {
          margin-right: 8px;
          font-size: 16px;
          color: #909399;
        }

        .tree-label {
          color: #606266;
        }
      }

      :deep(.el-tree-node__content) {
        height: 32px;
        padding-left: 8px !important;
      }

      :deep(.el-tree-node__children) {
        .el-tree-node__content {
          padding-left: 24px !important;
        }
      }
    }
  }

  // 右侧内容区域
  .right-content {
    flex: 1;
    padding: 20px;
    overflow-y: auto;

    // 搜索区域
    .search-area {
      background: #fff;
      padding: 15px 20px;
      border-radius: 4px;
      margin-bottom: 15px;

      .search-row {
        display: flex;
        gap: 15px;
        margin-bottom: 12px;
        flex-wrap: wrap;

        &:last-child {
          margin-bottom: 0;
        }

        .search-item {
          display: flex;
          align-items: center;
          gap: 8px;

          .search-label {
            font-size: 13px;
            color: #606266;
            white-space: nowrap;
          }
        }

        .search-buttons {
          margin-left: auto;
        }
      }
    }

    // 操作区域
    .action-area {
      display: flex;
      gap: 10px;
      margin-bottom: 15px;

      .export-btn,
      .import-btn {
        display: flex;
        align-items: center;
        gap: 5px;
      }
    }

    // 表格区域
    .table-area {
      background: #fff;
      padding: 15px;
      border-radius: 4px;
      margin-bottom: 15px;

      :deep(.el-table) {
        border: 1px solid #ebeef5;
        border-radius: 4px;

        .el-table__header-wrapper {
          th {
            background: #e6f0ff !important;
          }
        }

        .even-row {
          background: #f5f9ff;
        }

        .odd-row {
          background: #fff;
        }
      }
    }

    // 分页区域
    .pagination-area {
      display: flex;
      justify-content: flex-end;
      background: #fff;
      padding: 15px;
      border-radius: 4px;

      :deep(.el-pagination) {
        .btn-prev,
        .btn-next {
          padding: 0 15px;
          border: 1px solid #dcdfe6;
          border-radius: 4px;
          background: #fff;
          color: #606266;

          &:hover {
            color: #409eff;
            border-color: #409eff;
          }

          &.disabled {
            color: #c0c4cc;
            border-color: #e4e7ed;
          }
        }

        .el-pager {
          li {
            min-width: 32px;
            height: 32px;
            line-height: 32px;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            margin: 0 4px;
            background: #fff;
            color: #606266;

            &.active {
              background: #409eff;
              border-color: #409eff;
              color: #fff;
            }

            &:hover {
              color: #409eff;
              border-color: #409eff;
            }

            &.active:hover {
              color: #fff;
            }
          }
        }

        .el-pagination__jump {
          margin-left: 15px;
          color: #606266;
        }
      }
    }
  }
}
</style>