<template>
  <div class="task-manage-page">
    <!-- 添加搜索区域 -->
    <div class="search-box">
      <el-input
        v-model="searchKeyword"
        placeholder="请输入关键词进行搜索"
        prefix-icon="el-icon-search"
        clearable
        size="small"
        @keyup.enter.native="handleSearch"
      ></el-input>
      <el-button 
        class="forest-btn-small search-btn" 
        size="small" 
        icon="el-icon-search" 
        @click="handleSearch"
      >搜索</el-button>
    </div>
    
    <el-table
      id="tableStyle"
      :data="filteredData"
      max-height="720"
      stripe
      border
      highlight-current-row
      :header-cell-class-name="sinClo"
    >
      <el-table-column
        prop="taskName"
        label="任务名称"
        min-width="100"
        sortable
      ></el-table-column>
      <el-table-column min-width="110" filterable label="是否需要分配" sortable>
        <template slot="header" slot-scope="scope">
          <span>是否需要分配</span>
          <el-dropdown @command="handleFilter" style="margin-left: 5px;">
            <span class="el-dropdown-link">
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="all">全部</el-dropdown-item>
              <el-dropdown-item command="need">需要分配</el-dropdown-item>
              <el-dropdown-item command="notNeed">不需分配</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.isAllocationOptional"
            active-color="#4CAF50"
            inactive-color="#E0E0E0"
            @change="changeisAllocationOptional(scope.row.id, scope.row)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column min-width="95" filterable label="是否已分配" sortable>
        <template slot-scope="scope">
          <el-checkbox
            label="已分配"
            v-model="scope.row.allocated"
            disabled
          ></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column
        header-align="center"
        class-name="comClo"
        label="自动分配"
      >
        <el-table-column min-width="120" label="工作区域">
          <template slot-scope="scope">
            <el-upload
              accept=".shp"
              class="upload-demo"
              action="shp"
              :auto-upload="false"
              :limit="1"
              :before-upload="beforeAvatarUpload"
              :on-change="
                (file, fileList) => {
                  getFile(file, fileList, scope.row.id);
                }
              "
              :on-remove="
                (file, fileList) => {
                  removeFile(file, fileList, scope.row.id);
                }
              "
            >
              <el-button
                size="small"
                class="forest-btn-small"
                :disabled="!scope.row.isAllocationOptional"
                >上传shp数据</el-button
              >
            </el-upload>
          </template>
        </el-table-column>
        <el-table-column min-width="120" filterable label="任务人员">
          <template slot-scope="scope">
            <el-button
              class="forest-btn-small ghost"
              size="small"
              @click.native="selectWorkers(scope.row.id)"
              :disabled="!scope.row.isAllocationOptional"
              >选择任务人员</el-button
            >
          </template>
        </el-table-column>
        <el-table-column min-width="100" label="划分等级">
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.precision"
              size="small"
              placeholder="请选择"
              :disabled="!scope.row.isAllocationOptional"
            >
              <el-option
                v-for="item in precisionOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column min-width="100" label="操作">
          <template slot-scope="scope">
            <el-button
              class="forest-btn-small"
              size="small"
              @click.native="submitUploadShp(scope.row.id)"
              :disabled="!scope.row.isAllocationOptional"
              >自动分配</el-button
            >
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column min-width="100" label="手动分配">
        <template slot-scope="scope">
          <el-button
            class="forest-btn-small ghost"
            size="small"
            @click.native="manualAllocate(scope.row.id, false)"
            :disabled="!scope.row.isAllocationOptional"
            >手动分配</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <div class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

    <el-dialog
      v-dialogDrag
      class="taskDialog"
      title="选择任务人员"
      :visible.sync="WorkersVisible"
      :close-on-click-modal="false"
      style="position: absolute !important"
    >
      <el-table
        :data="workers"
        :height="400"
        stripe
        highlight-current-row
        class="tb-edit"
        style="width: 100%"
      >
        <el-table-column type="index" min-width="40"></el-table-column>
        <el-table-column prop="username" label="工作人员" min-width="100">
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.username"
              filterable
              placeholder="请选择"
              @focus="makeuername(scope.$index)"
              @change="makeId(scope.$index)"
            >
              <el-option
                v-for="item in selectworkersdata"
                :key="item.value"
                :label="item.label"
                :value="item.label"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="role" label="工作角色" min-width="100">
          <template slot-scope="scope">
            <el-select v-model="scope.row.role" placeholder="请选择">
              <el-option
                v-for="item in roleOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column fixed="right" min-width="80">
          <template slot="header">
            <el-button @click="addWorker()" class="forest-btn-small"
              >添加人员</el-button
            >
          </template>
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="deleteWorker(scope.$index)"
              type="text"
              size="small"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-button class="forest-btn-small" @click="UploadWorkers()"
        >确认</el-button
      >
    </el-dialog>
  </div>
</template>
<script>
import { ajax as request } from "@/request.js";
import axios from "axios";
export default {
  data() {
    return {
      WorkersVisible: false,
      DialogVisible: false,
      workersIndex: -1,
      tasksData: [],
      filteredData: [], // 过滤后的数据
      currentFilter: 'all', // 当前筛选状态
      workers: [],
      selectworkersdata: [],
      options: [],
      roleOptions: [
        {
          value: "0",
          label: "采集人员",
        },
        {
          value: "1",
          label: "巡查人员",
        },
      ],
      precisionOptions: [
        {
          value: "0",
          label: "默认",
        },
        {
          value: "1",
          label: "1(2500km)",
        },
        {
          value: "2",
          label: "2(630km)",
        },
        {
          value: "3",
          label: "3(78km)",
        },
        {
          value: "4",
          label: "4(20km)",
        },
        {
          value: "5",
          label: "5(2.4km)",
        },
        {
          value: "6",
          label: "6(610m)",
        },
        {
          value: "7",
          label: "7(76m)",
        },
        {
          value: "8",
          label: "8(19.11m)",
        },
        {
          value: "9",
          label: "9(4.78m)",
        },
        {
          value: "10",
          label: "10(0.5971m)",
        },
        {
          value: "11",
          label: "11(0.1492m)",
        },
        {
          value: "12",
          label: "12(0.0186m)",
        },
      ],
      searchKeyword: "", // 搜索关键词
      // 分页相关属性
      pageNum: 1,
      pageSize: 10,
      total: 0,
      totalPages: 0
    };
  },
  methods: {
    // 搜索处理方法 - 搜索时重置到第一页并重新加载数据
    handleSearch() {
      this.pageNum = 1;
      this.init();
    },
    // 分页大小改变处理
    handleSizeChange(val) {
      this.pageSize = val;
      this.pageNum = 1;
      this.init();
    },
    // 当前页改变处理
    handleCurrentChange(val) {
      this.pageNum = val;
      this.init();
    },

    // 筛选处理方法 - 筛选时重置到第一页并重新加载数据
    handleFilter(command) {
      this.currentFilter = command;
      this.pageNum = 1;
      // 筛选是在前端进行的，因为后端接口不支持分配状态筛选
      // 所以需要重新获取数据后应用筛选
      this.init();
    },

    // 修改方法参数，从index改为taskId
    changeisAllocationOptional(taskId, row) {
      if (!row) return;
      
      // 保存原始状态，用于请求失败时恢复
      const originalValue = !row.isAllocationOptional;
      const newValue = row.isAllocationOptional;
      
      let that = this;
      let str = newValue === true
        ? "确认任务需要分配吗？"
        : "确认任务无需分配吗？";
      let res = newValue === true ? 0 : 1;

      this.$confirm(str, "提示", {})
        .then(() => {
          request({
            url: "/allocation/optional",
            method: "get",
            params: {
              taskId: taskId,
              optional: res,
            },
          }).then(function (response) {
            if (response.data.success == true) {
              that.$message.success("设置成功");
              // 请求成功，状态已经改变，不需要额外操作
            } else if (response.data.status == "401") {
              // 请求失败，恢复原始状态
              row.isAllocationOptional = originalValue;
              that.$alert(response.data.message);
              that.$router.push({ path: "/login" });
            } else {
              // 请求失败，恢复原始状态
              row.isAllocationOptional = originalValue;
              that.$message.error("设置失败");
            }
          }).catch(function (error) {
            // 请求异常，恢复原始状态
            row.isAllocationOptional = originalValue;
            console.error("设置失败:", error);
            that.$message.error("设置失败，请稍后重试");
          });
        })
        .catch(() => {
          // 用户取消操作，恢复原始状态
          row.isAllocationOptional = originalValue;
        });
    },
    init() {
      let that = this;
      // 构建请求参数
      const params = {
        pageNum: that.pageNum,
        pageSize: that.pageSize,
        keyword: that.searchKeyword && that.searchKeyword.trim() ? that.searchKeyword.trim() : ''
      };
      
      request({
        url: "/task/selectTaskHasCreatedPaginated",
        method: "get",
        params: params
      }).then(function (response) {
        if (response.data.success === true) {
          const result = response.data.data;
          
          // 从返回的数据结构中提取数据数组和分页信息
          that.tasksData = result.data || [];
          
          // 分页信息在 pageInfo 对象中
          if (result.pageInfo) {
            that.total = result.pageInfo.total || 0;
            that.totalPages = result.pageInfo.totalPages || 0;
            that.pageNum = result.pageInfo.pageNum || 1;
            that.pageSize = result.pageInfo.pageSize || 10;
          } else {
            // 兼容旧格式（如果 pageInfo 不存在）
            that.total = result.total || 0;
            that.totalPages = result.totalPages || 0;
            that.pageNum = result.pageNum || 1;
            that.pageSize = result.pageSize || 10;
          }
          
          //0表示需要分配
          for (var i = 0; i < that.tasksData.length; i++) {
            if (that.tasksData[i].isAllocationOptional == 0) {
              that.tasksData[i].isAllocationOptional = true;
            } else {
              that.tasksData[i].isAllocationOptional = false;
            }
            if (that.tasksData[i].allocated == "true") {
              that.tasksData[i].allocated = true;
            } else {
              that.tasksData[i].allocated = false;
            }
          }
          
          // 应用当前筛选（只应用分配状态筛选，搜索已由后端处理）
          let filtered = [...that.tasksData];
          if (that.currentFilter === 'need') {
            filtered = filtered.filter(item => item.isAllocationOptional === true);
          } else if (that.currentFilter === 'notNeed') {
            filtered = filtered.filter(item => item.isAllocationOptional === false);
          }
          that.filteredData = filtered;
        } else if (response.data.status === "401") {
          that.$alert(response.data.message);
          that.$router.push({ path: "/login" });
        } else {
          that.$message.error(response.data.message || "获取数据失败");
        }
      }).catch(function (error) {
        console.error("获取数据失败:", error);
        that.$message.error("获取数据失败，请稍后重试");
      });
      
      // 获取工作人员列表
      request({
        url: "/user/all_worker",
        method: "get",
      }).then(function (response) {
        if (response.data.success == true) {
          var worksdata = response.data.data;
          that.options = [];
          for (var i = 0; i < worksdata.length; i++) {
            that.options.push({
              value: worksdata[i].id,
              label: worksdata[i].username,
            });
          }
        } else if (response.data.status == "401") {
          that.$alert(response.data.message);
          that.$router.push({ path: "/login" });
        }
      });
    },
    // onchange文件改变时的钩子 可以通过参数file找到文件 filr.raw获取文件流
    getFile(file, fileList, taskId) {
      let row = this.tasksData.find(item => item.id === taskId);
      if (!row) return;
      
      let fileList1 = [];
      fileList1.push(file.raw);
      row.fileList = fileList1;
    },
    submitUploadShp(taskId) {
      let row = this.tasksData.find(item => item.id === taskId);
      if (!row) return;
      
      if (row.allocated) {
        let that = this;
        this.$confirm("任务已经完成自动分配，是否重新分配？", "提示", {
          cancelButtonText: "取消",
          confirmButtonText: "确定",
          type: "warning",
        })
          .then(() => {
            that.AutoTask(taskId);
          })
          .catch(() => {});
      } else {
        this.AutoTask(taskId);
      }
    },
    AutoTask(taskId) {
      let row = this.tasksData.find(item => item.id === taskId);
      if (!row) return;
      
      let that = this;
      let fd = new FormData();
      if (row.fileList && row.fileList[0]) {
        fd.append("shp", row.fileList[0]);
      } else {
        that.$alert("请上传shp文件！", "提示", { confirmButtonText: "确定" });
        return;
      }
      if (!row.workers) {
        that.$alert("请选择任务人员！", "提示", { confirmButtonText: "确定" });
        return;
      }
      fd.append("taskId", taskId);
      fd.append("workers", JSON.stringify(row.workers));
      if (row.precision) {
        fd.append("precision", row.precision);
      }
      axios({
        url: "/allocation/assignment",
        method: "post",
        data: fd,
        headers: {
          "Content-Type": "multipart/form-data",
        },
      }).then(function (response) {
        if (response.data.success == true) {
          that.$notify.success({
            title: "提示",
            message: "自动分配完成！",
          });
          that.manualAllocate(taskId, true);
        } else if (response.data.status == "401") {
          that.$alert(response.data.message);
          that.$router.push({ path: "/login" });
        } else {
          that.$notify.error({
            title: "提示",
            message: response.data.message,
          });
        }
      });
    },
    beforeAvatarUpload(file) {
      if (file.type != "shp") {
        this.$message.error("只能上传shp格式数据!");
        return false;
      }
      return true;
    },
    selectWorkers(taskId) {
      let row = this.tasksData.find(item => item.id === taskId);
      if (!row) return;
      
      this.workersIndex = taskId; // 存储任务ID而不是索引
      if (row.workers) {
        this.workers = row.workers;
      } else {
        this.workers = [];
      }
      this.WorkersVisible = true;
    },
    addWorker() {
      let row = this.tasksData.find(item => item.id === this.workersIndex);
      if (!row) return;
      
      if (row.taskType === "0") {
        this.workers.push({
          username: "",
          role: "0",
        });
      } else {
        this.workers.push({
          username: "",
          role: "1",
        });
      }
    },
    removeFile(file, fileList, taskId) {
      let row = this.tasksData.find(item => item.id === taskId);
      if (!row) return;
      
      row.fileList = [];
    },
    deleteWorker(index) {
      this.workers.splice(index, 1);
    },
    UploadWorkers() {
      for (var i = 0; i < this.workers.length; i++) {
        if (this.workers[i].username == "") {
          this.$alert("任务人员不可为空！", "提示", {
            confirmButtonText: "确定",
          });
          return;
        }
      }
      let row = this.tasksData.find(item => item.id === this.workersIndex);
      if (row) {
        row.workers = this.workers;
      }
      this.WorkersVisible = false;
      //            this.$alert(this.tasksData[this.workersIndex].workers, '提示', {confirmButtonText: '确定'})
    },
    makeuername() {
      this.selectworkersdata = this.options.slice();
      for (var i = 0; i < this.workers.length; i++) {
        for (var j = 0; j < this.selectworkersdata.length; j++) {
          if (this.selectworkersdata[j].label == this.workers[i].username) {
            this.selectworkersdata.splice(j, 1);
          }
        }
      }
    },
    makeId(index) {
      for (var j = 0; j < this.options.length; j++) {
        if (this.options[j].label == this.workers[index].username) {
          this.workers[index].id = this.options[j].value;
        }
      }
    },
    manualAllocate(taskId, isRequest) {
      let row = this.tasksData.find(item => item.id === taskId);
      if (!row) return;
      
      if (isRequest) {
        this.$router.push({
          path: "/manualallocate/" + taskId + "/" + row.taskName,
        });
      } else {
        request({
          url: "/allocation/is_assigned?taskId=" + Number(taskId),
          method: "get",
        }).then((response) => {
          if (response.data.data) {
            this.$router.push({
              path: "/manualallocate/" + taskId + "/" + row.taskName,
            });
          } else if (response.data.status == "401") {
            this.$alert(response.data.message);
            this.$router.push({ path: "/login" });
          } else {
            this.$notify.error({
              title: "提示",
              message: response.data.message + "，" + "请先进行自动分配",
            });
          }
        });
      }
    },
    sinClo({ row, column, rowIndex, columnIndex }) {
      if (!(columnIndex == 3 && rowIndex == 0)) {
        return "sinCl";
      }
    },
  },
  mounted() {
    this.init();
  },
};
</script>
<style lang="scss" scoped>
.task-manage-page {
  padding: 24px 28px 40px;
  background: linear-gradient(135deg, #edf7ef 0%, #fdfefe 100%);
  min-height: calc(100vh - 120px);
  box-sizing: border-box;
  border-radius: 20px;
  box-shadow: 0 14px 32px rgba(76, 175, 80, 0.12);
  border: 1px solid rgba(129, 199, 132, 0.25);
}

.search-box {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 450px;
  margin-bottom: 20px;
}

:deep(.search-box .el-input) {
  flex: 1;
}

.search-btn {
  flex-shrink: 0;
  padding: 0 20px;
  min-width: 80px;
}

.forest-btn-small {
  background: linear-gradient(135deg, #4caf50 0%, #2e7d32 100%);
  border: none;
  color: #fff;
  border-radius: 10px;
  padding: 8px 20px;
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
  transition: all 0.3s ease;
}

.forest-btn-small.ghost {
  background: rgba(255, 255, 255, 0.95);
  color: #2e7d32;
  border: 1px solid #66bb6a;
  box-shadow: 0 3px 10px rgba(76, 175, 80, 0.2);
}

.forest-btn-small:hover:not(:disabled) {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.forest-btn-small:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

#tableStyle {
  margin-bottom: 30px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(129, 199, 132, 0.3);
  box-shadow: 0 14px 28px rgba(76, 175, 80, 0.12);
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
  padding: 16px 0;
}

:deep(#tableStyle .el-table__header-wrapper th) {
  background: linear-gradient(90deg, #e0f0e2, #f2fbf3) !important;
  color: #1b5e20 !important;
  font-weight: 600 !important;
  border-bottom: 1px solid rgba(129, 199, 132, 0.35) !important;
  font-size: 14px !important;
  font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif !important;
}

:deep(#tableStyle .el-table__body-wrapper td) {
  color: #2e4b31;
  border-bottom: 1px solid rgba(76, 175, 80, 0.08);
}

:deep(#tableStyle .el-table__body tr:hover > td) {
  background: rgba(129, 199, 132, 0.15) !important;
  color: #1b5e20;
}

:deep(#tableStyle .el-table__row--striped td) {
  background: rgba(233, 247, 235, 0.65);
}

:deep(#tableStyle .el-table__row.current-row > td) {
  background: rgba(76, 175, 80, 0.18) !important;
  color: #1b5e20;
}

:deep(#tableStyle .el-table__body tr) {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

:deep(#tableStyle .el-table__body tr:hover) {
  transform: translateY(-1px);
  box-shadow: inset 0 2px 0 rgba(76, 175, 80, 0.15);
}

:deep(#tableStyle .el-button--text) {
  color: #2e7d32;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

:deep(#tableStyle .el-button--text:hover) {
  color: #1b5e20;
  background: rgba(129, 199, 132, 0.2);
  transform: translateY(-1px);
}

/* Switch 组件样式 */
:deep(#tableStyle .el-switch.is-checked .el-switch__core) {
  background-color: #4caf50 !important;
  border-color: #4caf50 !important;
}

:deep(#tableStyle .el-switch__core) {
  border-color: rgba(129, 199, 132, 0.5) !important;
  background-color: #e0e0e0 !important;
  transition: all 0.3s ease !important;
}

:deep(#tableStyle .el-switch.is-checked .el-switch__core::after) {
  background-color: #ffffff !important;
}

:deep(#tableStyle .el-switch__core::after) {
  background-color: #ffffff !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
}

:deep(#tableStyle .el-switch:hover .el-switch__core) {
  border-color: rgba(76, 175, 80, 0.8) !important;
}

:deep(#tableStyle .el-switch.is-checked:hover .el-switch__core) {
  background-color: #66bb6a !important;
  border-color: #66bb6a !important;
}

.el-dropdown-link {
  cursor: pointer;
  color: #4caf50;
  transition: color 0.3s ease;
}

.el-dropdown-link:hover {
  color: #2e7d32;
}

.taskDialog :deep(.el-dialog) {
  border-radius: 18px;
  border: 1px solid rgba(129, 199, 132, 0.35);
  box-shadow: 0 12px 30px rgba(76, 175, 80, 0.18);
}

.taskDialog :deep(.el-dialog__header) {
  background: linear-gradient(135deg, #4caf50, #2e7d32);
  color: #fff;
  border-radius: 18px 18px 0 0;
}

.taskDialog :deep(.el-form-item__label) {
  color: #1b5e20;
  font-weight: 600;
}

.taskDialog :deep(.el-button--primary) {
  background-color: #4caf50 !important;
  border-color: #4caf50 !important;
}

.taskDialog :deep(.el-button--primary:hover) {
  background-color: #66bb6a !important;
  border-color: #66bb6a !important;
}

:deep(.tb-edit .el-table__header-wrapper th) {
  background: linear-gradient(90deg, #e0f0e2, #f2fbf3) !important;
  color: #1b5e20 !important;
  font-weight: 600 !important;
}

:deep(.tb-edit .el-table__body-wrapper td) {
  color: #2e4b31;
  border-bottom: 1px solid rgba(76, 175, 80, 0.08);
}

:deep(.tb-edit .el-table__body tr:hover > td) {
  background: rgba(129, 199, 132, 0.15) !important;
}

/* 滚动条样式 */
:deep(#tableStyle .el-table.el-table--scrollable-x .el-table__body-wrapper) {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(76, 175, 80, 0.4) rgba(232, 245, 233, 0.5) !important;
}

:deep(#tableStyle .el-table.el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar) {
  height: 8px !important;
}

:deep(#tableStyle .el-table.el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-track) {
  background: rgba(232, 245, 233, 0.5) !important;
  border-radius: 4px !important;
}

:deep(#tableStyle .el-table.el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-thumb) {
  background: linear-gradient(90deg, #81c784, #66bb6a) !important;
  border-radius: 4px !important;
}

:deep(#tableStyle .el-table.el-table--scrollable-x .el-table__body-wrapper::-webkit-scrollbar-thumb:hover) {
  background: linear-gradient(90deg, #66bb6a, #4caf50) !important;
}

:deep(#tableStyle .el-table.el-table--scrollable-y .el-table__body-wrapper) {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(76, 175, 80, 0.4) rgba(232, 245, 233, 0.5) !important;
}

:deep(#tableStyle .el-table.el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar) {
  width: 8px !important;
}

:deep(#tableStyle .el-table.el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar-track) {
  background: rgba(232, 245, 233, 0.5) !important;
  border-radius: 4px !important;
}

:deep(#tableStyle .el-table.el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar-thumb) {
  background: linear-gradient(180deg, #81c784, #66bb6a) !important;
  border-radius: 4px !important;
}

:deep(#tableStyle .el-table.el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar-thumb:hover) {
  background: linear-gradient(180deg, #66bb6a, #4caf50) !important;
}

/* 下拉选择框样式 */
:deep(#tableStyle .el-select .el-input__inner) {
  border-color: rgba(129, 199, 132, 0.4) !important;
  color: #1b5e20 !important;
}

:deep(#tableStyle .el-select .el-input__inner:focus) {
  border-color: #4caf50 !important;
}

:deep(#tableStyle .el-select .el-input__suffix .el-input__suffix-inner .el-select__caret) {
  color: #4caf50 !important;
}

:deep(.el-select-dropdown) {
  border: 1px solid rgba(129, 199, 132, 0.3) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 20px rgba(76, 175, 80, 0.15) !important;
}

:deep(.el-select-dropdown .el-select-dropdown__item) {
  color: #2e4b31 !important;
}

:deep(.el-select-dropdown .el-select-dropdown__item:hover) {
  background: rgba(129, 199, 132, 0.2) !important;
  color: #1b5e20 !important;
}

:deep(.el-select-dropdown .el-select-dropdown__item.selected) {
  background: rgba(76, 175, 80, 0.25) !important;
  color: #1b5e20 !important;
  font-weight: 600 !important;
}
</style>

<style>
/* 全局表格样式覆盖 */
#tableStyle.el-table {
  border: 1px solid rgba(129, 199, 132, 0.3) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

#tableStyle.el-table.el-table--border {
  border: 1px solid rgba(129, 199, 132, 0.3) !important;
}

#tableStyle.el-table.el-table--border::after,
#tableStyle.el-table.el-table--border::before {
  background-color: rgba(129, 199, 132, 0.3) !important;
}

#tableStyle.el-table.el-table--border th {
  border-right: 1px solid rgba(129, 199, 132, 0.25) !important;
}

#tableStyle.el-table.el-table--border th:last-child {
  border-right: none !important;
}

#tableStyle.el-table.el-table--border td {
  border-right: 1px solid rgba(76, 175, 80, 0.08) !important;
}

#tableStyle.el-table.el-table--border td:last-child {
  border-right: none !important;
}

#tableStyle.el-table.el-table--striped .el-table__body tr.el-table__row--striped td {
  background: rgba(233, 247, 235, 0.65) !important;
}

#tableStyle.el-table.el-table--striped .el-table__body tr.el-table__row--striped:hover td {
  background: rgba(200, 230, 201, 0.5) !important;
}

/* 表头样式全局覆盖 */
#tableStyle.el-table .el-table__header-wrapper th {
  background: linear-gradient(90deg, #e0f0e2, #f2fbf3) !important;
  color: #1b5e20 !important;
  font-weight: 600 !important;
  border-bottom: 1px solid rgba(129, 199, 132, 0.35) !important;
  font-size: 14px !important;
  font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif !important;
}

#tableStyle.el-table .el-table__header-wrapper thead th {
  background: linear-gradient(90deg, #e0f0e2, #f2fbf3) !important;
  color: #1b5e20 !important;
}

#tableStyle.el-table .el-table__header th {
  background: linear-gradient(90deg, #e0f0e2, #f2fbf3) !important;
  color: #1b5e20 !important;
  font-weight: 600 !important;
  border-bottom: 1px solid rgba(129, 199, 132, 0.35) !important;
}

#tableStyle.el-table .el-table__header th .cell {
  color: #1b5e20 !important;
  font-weight: 600 !important;
  font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif !important;
}

#tableStyle.el-table .el-table__header th.sinCl {
  background: linear-gradient(90deg, #e0f0e2, #f2fbf3) !important;
  color: #1b5e20 !important;
  font-weight: 600 !important;
  border-bottom: 1px solid rgba(129, 199, 132, 0.35) !important;
}

#tableStyle.el-table .el-table__header th.sinCl .cell {
  color: #1b5e20 !important;
  font-weight: 600 !important;
}
</style>
