<template>
    <div class="project-category-container">
      <!-- 顶部操作区 -->
      <div class="operation-area">
        <el-button type="primary" @click="handleAdd">新建工程类别</el-button>

        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
          <el-form-item label="用户名称" prop="userName">
            <el-input
                v-model="queryParams.wkNo"
                placeholder="请输入工程类别编号或名称"
                style="width: 200px; margin-left: 16px"
                @keyup.enter.native="handleSearch"
            >
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
          </el-form-item>
        </el-form>



      </div>

      <!-- 表格区域 -->
      <el-table :data="tableData"  style="width: 100%; margin-top: 20px" id="worksCategoryList">
        <el-table-column prop="wkNo" label="工程类别编号" width="180"></el-table-column>
        <el-table-column prop="wkName" label="工程类别名称" width="180"></el-table-column>
        <el-table-column prop="wkRemark" label="备注"></el-table-column>
        <el-table-column prop="productCount" label="产品数" width="120"></el-table-column>
        <el-table-column label="操作" width="250">
          <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">
        <el-form :model="form" :rules="rules" ref="form" label-width="120px">
          <el-form-item label="工程类别编号" prop="wkNo">
            <el-input v-model="form.wkNo"></el-input>
          </el-form-item>
          <el-form-item label="工程类别名称" prop="wkName">
            <el-input v-model="form.wkName"></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="wkRemark">
            <el-input type="textarea" v-model="form.wkRemark"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </template>

  <script>

  import { addWork, addWorkCategory, listWork } from '@/api/worksCategory/worksCategory'
  import { listNotice } from '@/api/system/notice'


  export default {
    name: 'ProjectCategoryManagement',
    data() {
      return {
        searchQuery: '',
        userList: null,
        tableData: [], // 表格数据
        pagination: {
          currentPage: 1,
          pageSize: 10,
          total: 1
        },
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          userName: undefined,
          phonenumber: undefined,
          status: undefined,
          deptId: undefined
        },


        dialogVisible: false,
        dialogTitle: '',
        form: {
          wkNo: '',
          wkName: '',
          wkRemark: ''
        },
        rules: {
          wkNo: [
            { required: true, message: '请输入工程类别编号', trigger: 'blur' }
          ],
          wkName: [
            { required: true, message: '请输入工程类别名称', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      handleSearch() {
        // 实现搜索逻辑
        console.log('搜索关键词:', this.searchQuery)
        this.loadData()
      },
      handleAdd() {
        this.dialogTitle = '新增工程类别'
        this.form = {
          wkNo: '',
          wkName: '',
          wkRemark: ''
        }
        this.dialogVisible = true
      },
      handleEdit(row) {
        this.dialogTitle = '编辑工程类别'
        this.form = { ...row }
        this.dialogVisible = true
      },
      handleDelete(row) {
        this.$confirm('确认删除该工程类别?', '提示', {
          type: 'warning'
        }).then(() => {
          // 实现删除逻辑
          console.log('删除:', row)
          this.$message.success('删除成功')
          this.loadData()
        }).catch(() => {})
      },
      handleView(row) {
        // 实现查看逻辑
        console.log('查看:', row)
      },
      handleSizeChange(val) {
        this.pagination.pageSize = val
        this.loadData()
      },
      handleCurrentChange(val) {
        this.pagination.currentPage = val
        this.loadData()
      },
      submitForm() {
        this.$refs.form.validate((valid) => {
          debugger;
          if (valid) {
            // 实现表单提交逻辑
            console.log('表单数据:', this.form)
            if (this.form.userId != undefined) {
            }else{

              addWork(this.form).then(response => {
              debugger;
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
              });


            }

            this.dialogVisible = false
            this.$message.success('保存成功')
            this.loadData()
          }
        })
      },
      loadData() {
        // 实现数据加载逻辑
        this.loading = true;
        listWork(this.searchQuery).then(response => {
          debugger;
          this.tableData = response.rows;
          this.total = response.total;
          this.loading = false;
        });

      }
    },
    created() {
      this.loadData()
    }
  }
  </script>

  <style scoped>
  .project-category-container {
    padding: 20px;
  }
  .operation-area {
    display: flex;
    align-items: center;
  }
  </style>
