<template>
  <div class="system-category-container">
    <!-- 顶部操作区 -->
    <div class="operation-area">
      <div class="search-area">
        <div class="search-item">
          <span class="label">类别编号</span>
          <el-input
            v-model="formQuery.sysNo"
            placeholder="请输入工程类别编号"
            clearable
          ></el-input>
        </div>
        <div class="search-item">
          <span class="label">类别名称</span>
          <el-input
            v-model="formQuery.sysName"
            placeholder="请输入工程类别名称"
            clearable
          ></el-input>
        </div>
        <div class="search-buttons">
          <el-button type="primary" icon="el-icon-search" @click="handleSearch"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" @click="handleReset"
            >重置</el-button
          >
        </div>
      </div>

      <div class="action-area">
        <el-button type="primary" @click="handleAdd">新建系统类别</el-button>
      </div>
    </div>

    <!-- 表格区域 -->
    <el-table
      :data="tableData"
      style="width: 100%; margin-top: 20px"
      v-loading="loading"
    >
      <el-table-column
        prop="sysNo"
        label="系统类别编号"
       
      ></el-table-column>
      <el-table-column
        prop="sysName"
        label="系统类别名称"
       
      ></el-table-column>
      <el-table-column prop="sysRemark" label="备注"></el-table-column>
     <!--  <el-table-column
        prop="sysProducts"
        label="产品数"
        width="120"
      ></el-table-column> -->
      <el-table-column label="操作" width="250" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleView(scope.row)">查看</el-button>
          <el-button size="mini" type="primary" @click="handleEdit(scope.row)"
            >编辑</el-button
          >
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pagination.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total"
      style="margin-top: 20px; text-align: right"
    >
    </el-pagination>

    <!-- 新增/编辑对话框 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="500px"
      :close-on-click-modal="false"
    >
      <el-form
        :model="form"
        :rules="rules"
        ref="form"
        label-width="120px"
        :validate-on-rule-change="false"
      >
        <el-form-item label="系统类别编号" prop="sysNo">
          <el-input
            v-model="form.sysNo"
            :disabled="dialogTitle === '编辑系统类别'"
          ></el-input>
        </el-form-item>
        <el-form-item label="系统类别名称" prop="sysName">
          <el-input v-model="form.sysName"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="sysRemark">
          <el-input
            type="textarea"
            v-model="form.sysRemark"
            rows="3"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="cancelForm">取 消</el-button>
        <el-button type="primary" @click="submitForm" :loading="submitLoading"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <!-- 查看详情对话框 -->
    <el-dialog
      title="查看系统类别"
      :visible.sync="viewDialogVisible"
      width="500px"
    >
      <el-descriptions :column="1" border>
        <el-descriptions-item label="系统类别编号">{{
          viewForm.sysNo
        }}</el-descriptions-item>
        <el-descriptions-item label="系统类别名称">{{
          viewForm.sysName
        }}</el-descriptions-item>
        <el-descriptions-item label="备注">{{
          viewForm.sysRemark || "-"
        }}</el-descriptions-item>
       <!--  <el-descriptions-item label="产品数">{{
          viewForm.sysProducts
        }}</el-descriptions-item> -->
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script>
import { add, list, update,deleSys } from "@/api/sysCategory/sysCategory";
import { listWork } from "@/api/worksCategory/worksCategory";

export default {
  name: "SystemCategoryManagement",
  data() {
    return {
      searchQuery: "",
      loading: false,
      submitLoading: false,
      tableData: [],
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 1,
      },
      dialogVisible: false,
      viewDialogVisible: false,
      dialogTitle: "",
      form: {
        sysNo: "",
        sysName: "",
        sysRemark: "",
      },
      formQuery: {
        sysNo: "",
        sysName: ""
      },

      viewForm: {
        sysNo: "",
        sysName: "",
        sysRemark: "",
        sysProducts: 0,
      },
      rules: {
        sysNo: [
          { required: true, message: "请输入系统类别编号", trigger: "blur" },
          {
            min: 2,
            max: 20,
            message: "长度在 2 到 20 个字符",
            trigger: "blur",
          },
        ],
        sysName: [
          { required: true, message: "请输入系统类别名称", trigger: "blur" },
          {
            min: 2,
            max: 50,
            message: "长度在 2 到 50 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    async loadData() {
      this.loading = true;
      try {
        const params = {
          ...this.formQuery,
          pageNum: this.pagination.currentPage,
          pageSize: this.pagination.pageSize
        };
        const res = await list(params);
        if (res.code === 200) {
          this.tableData = res.rows;
          this.pagination.total = res.total;
        } else {
          this.$message.error(res.msg || "获取数据失败");
        }
      } catch (error) {
        console.error('加载数据失败:', error);
        this.$message.error("加载数据失败");
      } finally {
        this.loading = false;
      }
    },
    handleSearch() {
      this.pagination.currentPage = 1;
      this.loadData();
    },
    handleReset() {
      this.formQuery = {
        sysNo: ""
      };
      this.pagination.currentPage = 1;
      this.pagination.pageSize = 10;
      this.loadData();
    },
    async handleAdd() {
      this.dialogTitle = "新建系统类别";
      this.form = {
        sysNo: "",
        sysName: "",
        sysRemark: ""
      };
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs.form.clearValidate();
      });
    },
    async handleEdit(row) {
      this.dialogTitle = "编辑系统类别";
      this.form = {...row};
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs.form.clearValidate();
      });
    },
    handleView(row) {
      this.viewForm = { ...row };
      this.viewDialogVisible = true;
    },
    async handleDelete(row) {
      try {
        await this.$confirm("确认删除该系统类别？删除后不可恢复", "提示", {
          type: "warning"
        });
        
        const res = await deleSys(row.sysId);
        if (res.code === 200) {
          this.$message.success("删除成功");
          this.loadData();
        } else {
          this.$message.error(res.msg || "删除失败");
        }
      } catch (error) {
        if (error === 'cancel') {
          // 用户点击取消按钮，不做处理
          return;
        }
        console.error('删除失败:', error);
        this.$message.error("删除失败");
      }
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val;
      this.loadData();
    },
    handleCurrentChange(val) {
      this.pagination.currentPage = val;
      this.loadData();
    },
    cancelForm() {
      this.dialogVisible = false;
      this.$refs.form.clearValidate();
    },
    async submitForm() {
      this.$refs.form.validate(async valid => {
        if (valid) {
          this.submitLoading = true;
          try {
            const api = this.dialogTitle === "新建系统类别" ? add : update;
            const res = await api(this.form);
            if (res.code === 200) {
              this.$message.success(this.dialogTitle === "新建系统类别" ? "添加成功" : "更新成功");
              this.dialogVisible = false;
              this.loadData();
            } else {
              this.$message.error(res.msg || "操作失败");
            }
          } catch (error) {
            this.$message.error("操作失败");
          } finally {
            this.submitLoading = false;
          }
        }
      });
    }
  },
  created() {
    this.loadData();
  },
};
</script>

<style scoped>
.system-category-container {
  padding: 20px;
}
.operation-area {
  background-color: #fff;
  margin-bottom: 16px;
}

.search-area {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
}

.search-item {
  display: flex;
  align-items: center;
}

.search-item .label {
  width: 70px;
  text-align: right;
  margin-right: 8px;
  color: #606266;
}

.search-item .el-input {
  width: 200px;
}

.search-buttons {
  margin-left: 8px;
}

.action-area {
  margin-top: 16px;

}

/* 响应式布局 */
@media screen and (max-width: 768px) {
  .search-area {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .search-item {
    width: 100%;
  }
  
  .search-item .el-input {
    width: 100%;
  }
  
  .search-buttons {
    margin-left: 0;
    margin-top: 16px;
  }
}
</style>
