<template>
  <div class="task-manage-page">
    <div class="toolbar-container">
      <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 search-btn" 
          size="small" 
          icon="el-icon-search" 
          @click="handleSearch"
        >搜索</el-button>
      </div>
      <div class="toolbar-actions">
        <el-button class="forest-btn" size="medium" icon="el-icon-plus" @click="addRow()"
        >添加任务</el-button
      >
        <el-button class="forest-btn ghost" size="medium" icon="el-icon-upload" @click="addXml()"
        >导入xml文件</el-button
        >
      </div>
    </div>
    <el-table
      id="tableStyle"
      :data="filteredData"
      :height="720"
      stripe
      border
      highlight-current-row
      header-cell-class-name="sinCl"
      :default-sort = "{prop: 'date', order: 'descending'}"
    >
      <el-table-column type="index" label="序号" width="60" ></el-table-column>
      <el-table-column
        prop="taskName"
        label="任务名称"
        sortable
        min-width="85"
      ></el-table-column>
      <el-table-column
        prop="databaseName"
        label="数据库名称"
        sortable
        min-width="100"
      ></el-table-column>
      <el-table-column
        prop="introduction"
        label="任务备注"
        sortable
        min-width="85"
      ></el-table-column>
      <el-table-column
        prop="operator"
        label="操作人员"
        sortable
        min-width="85"
      ></el-table-column>
      <el-table-column min-width="90" filterable label="是否已创库" sortable>
        <template slot-scope="scope">
          <span v-if="scope.row.hasCreateTables == true">已创库 </span>
          <span v-else>未创库</span>
        </template>
      </el-table-column>
      <el-table-column min-width="110" filterable label="是否及时审核">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.isReviewerRestricted"
            active-color="#4CAF50"
            inactive-color="#E0E0E0"
            @change="
              changeRestricted(scope.row.id, scope.row.isReviewerRestricted)
            "
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        min-width="90"
        sortable
      ></el-table-column>
      <el-table-column
        prop="modifyTime"
        label="修改时间"
        min-width="90"
        sortable
      ></el-table-column>

      <el-table-column width="290" fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.hasCreateTables == true"
            type="text"
            size="small"
            @click.native.prevent="getRow(scope.row.id)"
            >查看任务</el-button
          >
          <el-button
            v-else
            @click.native.prevent="editRow(scope.row.id)"
            type="text"
            size="small"
            >编辑任务</el-button
          >
<!--          <el-button-->
<!--            @click.native.prevent="deleteRow(scope.$index)"-->
<!--            type="text"-->
<!--            size="small"-->
<!--            >删除任务</el-button-->
<!--          >-->
          <el-button
            @click.native.prevent="taskCreat(scope.row.id)"
            type="text"
            size="small"
            >任务创库</el-button
          >
          <el-button
            @click.native.prevent="downloadXml(scope.row.id)"
            type="text"
            size="small"
            >下载xml文件</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="DialogVisible"
      :close-on-click-modal="false"
    >
      <el-form ref="form" :model="form" label-width="138px">
        <el-form-item>
          <span slot="label"
            >任务名称
            <el-tooltip
              class="item"
              effect="dark"
              content="任务的中文名称"
              placement="top-end"
              ><i class="el-icon-info"></i
            ></el-tooltip>
          </span>
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item>
          <span slot="label"
            >数据库名称
            <el-tooltip
              class="item"
              effect="dark"
              content="任务在创建数据库时进行存储的数据库名称(英文)"
              placement="top-end"
              ><i class="el-icon-info"></i
            ></el-tooltip>
          </span>
          <el-input v-model="form.key"></el-input>
        </el-form-item>

        <el-form-item>
          <span slot="label"
            >任务上传时间
            <el-tooltip
              class="item"
              effect="dark"
              content="用于任务每日统计的截止日期，在该时间会统计每个用户的具体上传数量"
              placement="top-end"
              ><i class="el-icon-info"></i
            ></el-tooltip>
          </span>
          <el-time-picker
            v-model="form.taskUploadTime"
            value-format="HH:mm"
            format="HH:mm"
            :picker-options="{
              selectableRange: '00:00:00 - 23:59:59',
            }"
          ></el-time-picker>
        </el-form-item>
        <el-form-item>
          <span slot="label"
            >任务备注
            <el-tooltip
              class="item"
              effect="dark"
              content="任务的描述，将在移动端进行展示"
              placement="top-end"
              ><i class="el-icon-info"></i
            ></el-tooltip>
          </span>
          <el-input v-model="form.introduction"></el-input>
        </el-form-item>
      </el-form>
      <div class="dialog-footer">
        <el-button class="forest-btn" size="medium" @click="Upload()">确认</el-button>
      </div>
    </el-dialog>
    <el-dialog
      v-dialogDrag
      class="taskDialog"
      title="上传xml文件"
      :visible.sync="xmlDialogVisible"
      :close-on-click-modal="false"
    >
      <div style="text-align: left">
        <el-form ref="xmlform" :model="xmlform" label-width="138px">
          <el-form-item label="任务名称">
            <el-input v-model="xmlform.xmlname"></el-input>
          </el-form-item>
          <el-form-item label="数据库名称(英文)">
            <el-input v-model="xmlform.xmlkey"></el-input>
          </el-form-item>
          <el-form-item label="任务上传时间">
            <el-time-picker
              v-model="xmlform.xmltaskUploadTime"
              value-format="HH:mm"
              format="HH:mm"
              :picker-options="{
                selectableRange: '00:00:00 - 23:59:59',
              }"
            ></el-time-picker>
          </el-form-item>
          <el-form-item label="任务备注">
            <el-input v-model="xmlform.introduction"></el-input>
          </el-form-item>
          <el-form-item label="xml文件">
            <el-upload
              accept=".xml"
              class="upload-demo"
              action="xml"
              ref="uploadfile"
              :auto-upload="false"
              :limit="1"
              :before-upload="beforeAvatarUpload"
              :on-change="getFile"
              :on-remove="removeFile"
            >
              <el-button size="small" type="primary" plain>选择文件</el-button>
            </el-upload>
          </el-form-item>
        </el-form>
      </div>
      <div class="dialog-footer">
        <el-button class="forest-btn" size="medium" @click="UploadXml()"
        >确认</el-button
      >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { store } from "@/components/vuex/store.js";
import { ajax as request } from "@/request.js";
import axios from "axios";
export default {
  data: function () {
    return {
      form: {
        name: "",
        key: "",
        taskUploadTime: "23:00",
        introduction: "",
      },
      DialogVisible: false,
      xmlDialogVisible: false,
      xmlform: {
        xmlname: "",
        xmlkey: "",
        xmltaskUploadTime: "23:00",
        introduction: "",
      },
      xmlData: [],
      fileList: [],
      searchKeyword: "", // 搜索关键词
      filteredData: [], // 过滤后的数据
      // 分页相关属性
      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();
    },

    //读取数据库 初始化xml - 使用分页接口获取数据
    init() {
      let that = this;
      // 构建请求参数
      const params = {
        pageNum: that.pageNum,
        pageSize: that.pageSize,
        keyword: that.searchKeyword && that.searchKeyword.trim() ? that.searchKeyword.trim() : ''
      };
      
      request({
        url: "/task/selectAllWithKeywordPaginated",
        method: "get",
        params: params
      }).then(function (response) {
        if (response.data.success === true) {
          // 解析 data 字段（可能是 JSON 字符串）
          let result;
          if (typeof response.data.data === 'string') {
            try {
              result = JSON.parse(response.data.data);
            } catch (e) {
              console.error("解析数据失败:", e);
              that.$message.error("数据格式错误，请稍后重试");
              return;
            }
          } else {
            result = response.data.data;
          }
          
          // 从返回的数据结构中提取数据数组和分页信息
          that.xmlData = 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;
          }
          
          // 处理数据格式转换
          for (var i = 0; i < that.xmlData.length; i++) {
            if (that.xmlData[i].hasCreateTables == 1) {
              that.xmlData[i].hasCreateTables = true;
            } else {
              that.xmlData[i].hasCreateTables = false;
            }
            if (
              that.xmlData[i].isReviewerRestricted == 1 ||
              that.xmlData[i].isReviewerRestricted == true
            ) {
              that.xmlData[i].isReviewerRestricted = true;
            } else {
              that.xmlData[i].isReviewerRestricted = false;
            }
          }
          
          that.filteredData = [...that.xmlData];
        } 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("获取数据失败，请稍后重试");
      });
    },
    // 修改方法参数，从index改为id
    changeRestricted(id, val) {
      let str = val == true ? "确认任务及时审核吗？" : "确认任务不需及时审核吗？";
      let result = val == true ? 1 : 0;
      let that = this;

      this.$confirm(str, "提示", {})
        .then(() => {
          request({
            url: "/task/setReviewerMode",
            method: "get",
            params: {
              taskId: id,
              isReviewerRestricted: result,
            },
          }).then(function (response) {
            if (response.data.success == true) {
              that.$message.success("设置成功");
              // 更新本地数据状态
              let row = that.xmlData.find(item => item.id === id);
              if (row) {
                row.isReviewerRestricted = val;
              }
            } else if (response.data.status == "401") {
              that.$alert(response.data.message);
              that.$router.push({ path: "/login" });
            } else {
              that.$message.error("设置失败");
            }
          });
        })
        .catch(() => {});
    },
    addRow() {
      this.DialogVisible = true;
    },
    deleteRow(id) {
      this.$confirm("确认删除？", "提示", {
        cancelButtonText: "取消",
        confirmButtonText: "确定",
        type: "warning",
      })
        .then(() => {
          let that = this;
          request({
            url: "/task/deleteTask",
            method: "post",
            params: { id: id },
          }).then(function (response) {
            var deleteresult = response.data.success;
            if (deleteresult == true) {
              that.$notify.success({
                title: "提示",
                message: "删除成功",
              });
              that.init();
            } else if (response.data.status == "401") {
              that.$alert(response.data.message);
              that.$router.push({ path: "/login" });
            } else {
              that.$notify.error({
                title: "提示",
                message: "删除失败",
              });
            }
          });
        })
        .catch(() => {});
    },
    Upload() {
      if (this.form.name == "") {
        this.$alert("任务名不可为空", "提示", { confirmButtonText: "确定" });
        return;
      }
      if (this.form.key == "") {
        this.$alert("数据库名称不可为空", "提示", {
          confirmButtonText: "确定",
        });
        return;
      }
      if (this.xmlData.length > 0) {
        for (var i = 0; i < this.xmlData.length; i++) {
          if (this.form.key == this.xmlData[i].databaseName) {
            this.$alert("数据库名称重复!", "提示", {
              confirmButtonText: "确定",
            });
            return;
          }
        }
      }
      //存入time和num

      this.DialogVisible = false;
      // this.$store.dispatch('updateData',{config:''})
      sessionStorage.setItem("taskUploadTime", this.form.taskUploadTime);
      sessionStorage.setItem("introduction", this.form.introduction);

      sessionStorage.removeItem("Data");
      var config1 = {
        meta: {
          drawtool: {},
          position: [],
          basemap: [],
        },
        tables: [],
      };
      this.$store.dispatch("updateData", { config: config1 });
      sessionStorage.setItem("getInfo", "1");
      this.$router.push({
        path:
          "/home/" + this.form.name + "/" + this.form.key + "/-1" + "/drawtool",
      });
    },
    editRow(id) {
      let row = this.xmlData.find(item => item.id === id);
      if (!row) return;
      
      sessionStorage.removeItem("Data");
      sessionStorage.setItem("getInfo", "1");
      var config1 = {
        meta: {
          drawtool: {},
          position: [],
          basemap: [],
        },
        tables: [],
      };
      this.$store.dispatch("updateData", { config: config1 });
      this.$router.push({
        path: "/home/" + row.taskName + "/taskKey/" + id + "/drawtool",
      });
    },
    getRow(id) {
      let row = this.xmlData.find(item => item.id === id);
      if (!row) return;
      
      sessionStorage.removeItem("Data");
      sessionStorage.setItem("getInfo", "0");
      var config1 = {
        meta: {
          drawtool: {},
          position: [],
          basemap: [],
        },
        tables: [],
      };
      this.$store.dispatch("updateData", { config: config1 });
      this.$router.push({
        path: "/home/" + row.taskName + "/taskKey/" + id + "/drawtool",
      });
    },
    taskCreat(id) {
      this.$confirm("确认生成？", "提示", {
        cancelButtonText: "取消",
        confirmButtonText: "确定",
        type: "warning",
      })
        .then(() => {
          let that = this;
          request({
            url: "/table/createTable",
            method: "post",
            params: { id: id },
          }).then(function (response) {
            if (response.data.success) {
              that.$notify.success({
                title: "提示",
                message: "创建成功",
              });
              // 重新加载当前页数据
              that.init();
            } else if (response.data.message == "hasCreated") {
              that.$confirm("该任务已经创库，是否重新创库？", "提示", {
                cancelButtonText: "取消",
                confirmButtonText: "确定",
                type: "warning",
              })
                .then(() => {
                  let that1 = that;
                  request({
                    url: "table/deleteAndCreateTable",
                    method: "post",
                    params: { id: id },
                  }).then(function (response) {
                    if (response.data.success) {
                      that1.$notify.success({
                        title: "提示",
                        message: "创建成功",
                      });
                      that1.init();
                    } else {
                      that1.$notify.error({
                        title: "提示",
                        message: "创建失败",
                      });
                    }
                  });
                })
                .catch(() => {});
            } else if (response.data.status == "401") {
              that.$alert(response.data.message);
              that.$router.push({ path: "/login" });
            } else {
              that.$notify.error({
                title: "提示",
                message: "创建失败",
              });
            }
          });
        })
        .catch(() => {});
    },
    downloadXml(id) {
      let that = this;
      request({
        url: "/xml/downloading",
        method: "post",
        params: { id: id },
      }).then(function (response) {
        if (response.data.status == "401") {
          that.$alert(response.data.message);
          that.$router.push({ path: "/login" });
        } else if (response.status == 200) {
          let row = that.xmlData.find(item => item.id === id);
          if (row) {
            that.download(response.data, row.taskName);
          }
          that.$notify.success({
            title: "提示",
            message: "正在下载",
          });
        } else {
          that.$notify.error({
            title: "提示",
            message: response.data.message,
          });
        }
      });
    },
    download(data, name) {
      let fileName = name + ".xml";
      if ("download" in document.createElement("a")) {
        // 不是IE浏览器
        let blob = new Blob([data]);
        let url = window.URL.createObjectURL(blob);
        let link = document.createElement("a");
        link.style.display = "none";
        link.href = url;
        link.setAttribute("download", fileName);
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link); // 下载完成移除元素
        window.URL.revokeObjectURL(url); // 释放掉blob对象
      } else {
        // IE 10+
        window.navigator.msSaveBlob(blob, fileName);
      }
    },
    addXml() {
      this.xmlDialogVisible = true;
      this.xmlform.xmlname = "";
      this.xmlform.xmlkey = "";
      this.xmlform.xmltaskUploadTime = "23:00";
      this.xmlform.introduction = "";
      this.fileList = [];
      if (this.$refs.uploadfile) {
        this.$refs.uploadfile.clearFiles();
      }
    },
    UploadXml() {
      let fd = new FormData();
      if (!this.xmlform.xmlname) {
        this.$alert("请输入任务名称！", "提示", { confirmButtonText: "确定" });
        return;
      }
      if (!this.xmlform.xmlkey) {
        this.$alert("请输入数据库名称！", "提示", {
          confirmButtonText: "确定",
        });
        return;
      }
      if (this.xmlData.length > 0) {
        for (var i = 0; i < this.xmlData.length; i++) {
          if (this.xmlform.xmlkey == this.xmlData[i].databaseName) {
            this.$alert("数据库名称重复!", "提示", {
              confirmButtonText: "确定",
            });
            return;
          }
        }
      }
      if (!this.fileList[0]) {
        this.$alert("请选择xml文件！", "提示", { confirmButtonText: "确定" });
        return;
      } else {
        fd.append("file", this.fileList[0]);
      }
      var userid = sessionStorage.getItem("access-id");
      var configString = {
        name: this.xmlform.xmlname,
        key: this.xmlform.xmlkey,
        id: userid,
        introduction: this.xmlform.introduction,
        taskUploadTime: this.xmlform.xmltaskUploadTime,
      };
      fd.append("configString", JSON.stringify(configString));
      let that = this;
      axios({
        url: "/task/createTaskByXmlFile",
        method: "post",
        data: fd,
        headers: {
          "Content-Type": "multipart/form-data",
        },
      }).then(function (response) {
        if (response.data.success == true) {
          that.xmlDialogVisible = false;
          that.$notify.success({
            title: "提示",
            message: "任务上传成功！",
          });
          that.init();
        } else {
          if (response.data.status == 400) {
            that.$notify.error({
              title: "提示",
              message: response.data.message,
            });
          } else {
            that.$notify.error({
              title: "提示",
              message: "上传出错",
            });
          }
        }
      });
    },
    beforeAvatarUpload(file) {
      if (file.type != "xml") {
        this.$message.error("只能上传xml格式数据!");
        return false;
      }
      return true;
    },
    getFile(file) {
      this.fileList = [];
      this.fileList.push(file.raw);
    },
    removeFile() {
      this.fileList = [];
    },
  },
  mounted() {
    this.init();
  },
  store,
  watch: {
    "form.key": {
      handler() {
        let reg = /[^\w_]+$/;
        if (reg.test(this.form.key)) {
          this.$alert("数据库名称只可为字母、数字、下划线组合！", "提示", {
            confirmButtonText: "确定",
          });
        }
        this.form.key = this.form.key.replace(/[^\w_]/g, "");
      },
      deep: true,
    },
    "xmlform.xmlkey": {
      handler() {
        let reg = /[^\w_]+$/;
        if (reg.test(this.xmlform.xmlkey)) {
          this.$alert("数据库名称只可为字母、数字、下划线组合！", "提示", {
            confirmButtonText: "确定",
          });
        }
        this.xmlform.xmlkey = this.xmlform.xmlkey.replace(/[^\w_]/g, "");
      },
      deep: true,
    },
  },
};
</script>

<style 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);
}

.toolbar-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

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

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

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

.toolbar-actions {
  display: flex;
  gap: 16px;
  flex: 0 0 auto;
}

.forest-btn {
  background: linear-gradient(135deg, #4caf50 0%, #2e7d32 100%);
  border: none;
  color: #fff;
  border-radius: 12px;
  padding: 0 26px;
  min-height: 38px;
  font-weight: 600;
  letter-spacing: 0.5px;
  font-size: 15px;
  box-shadow: 0 8px 18px rgba(76, 175, 80, 0.35);
}
.forest-btn.ghost {
  background: rgba(255, 255, 255, 0.95);
  color: #2e7d32;
  border: 1px solid #66bb6a;
  box-shadow: 0 5px 14px rgba(76, 175, 80, 0.2);
}
.forest-btn:hover {
  filter: brightness(1.05);
}

#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);
}
: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);
}

/* Element UI 表格默认类名主题化 */
:deep(#tableStyle .el-table) {
  background: transparent !important;
  border: none !important;
}

:deep(#tableStyle .el-table.el-table--fit) {
  border: none !important;
}

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

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

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

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

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

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

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

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

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

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

:deep(#tableStyle .el-table.el-table--striped .el-table__body tr.el-table__row--striped:hover td) {
  background: rgba(200, 230, 201, 0.5) !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-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);
}

: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;
}

.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;
}
.dialog-footer {
  text-align: right;
  margin-top: 12px;
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
  padding: 16px 0;
}
</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--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;
}

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

#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;
}

#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;
}

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

#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;
}

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

#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;
}

#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;
}

#tableStyle.el-table.el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #66bb6a, #4caf50) !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;
  padding: 12px 0 !important;
  text-align: center !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;
}

/* 覆盖自定义表头类名 sinCl */
#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;
  font-size: 14px !important;
  font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif !important;
}

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

/* 更通用的表头选择器 */
#tableStyle.el-table th,
#tableStyle.el-table thead th,
#tableStyle.el-table .el-table__header th,
#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;
}

#tableStyle.el-table th .cell,
#tableStyle.el-table thead th .cell,
#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;
}

/* Switch 组件全局样式 */
#tableStyle .el-switch {
  display: inline-block;
}

#tableStyle .el-switch.is-checked .el-switch__core {
  background-color: #4caf50 !important;
  border-color: #4caf50 !important;
}

#tableStyle .el-switch__core {
  border-color: rgba(129, 199, 132, 0.5) !important;
  background-color: #e0e0e0 !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

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

#tableStyle .el-switch__core::after {
  background-color: #ffffff !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

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

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

#tableStyle .el-switch.is-disabled .el-switch__core {
  background-color: #f5f5f5 !important;
  border-color: #e0e0e0 !important;
  opacity: 0.6 !important;
}

#tableStyle .el-switch.is-disabled.is-checked .el-switch__core {
  background-color: rgba(76, 175, 80, 0.4) !important;
  border-color: rgba(76, 175, 80, 0.4) !important;
}
</style>
