<template>
    <div class="category-container">
      <!-- 顶部操作区 -->
      <div class="operation-area">
        <el-button type="primary" @click="handleAdd">新建产品类别</el-button>
        <el-input
          v-model="searchQuery"
          placeholder="请输入搜索内容"
          style="width: 200px; margin-left: 16px"
          @keyup.enter.native="handleSearch"
        >
          <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
        </el-input>
      </div>

      <!-- 表格区域 -->
      <el-table :data="tableData"  style="width: 100%; margin-top: 20px">
        <el-table-column prop="categoryId" label="产品类别编号" width="180"></el-table-column>
        <el-table-column prop="categoryName" label="产品类别" width="180"></el-table-column>
        <el-table-column prop="remark" label="备注"></el-table-column>
        <el-table-column prop="skuCount" label="关联sku数"></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="100px">
          <el-form-item label="类别编号" prop="categoryId">
            <el-input v-model="form.categoryId"></el-input>
          </el-form-item>
          <el-form-item label="类别名称" prop="categoryName">
            <el-input v-model="form.categoryName"></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input type="textarea" v-model="form.remark"></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 { add, list } from '@/api/category/category'


  export default {
    name: 'CategoryManagement',
    data() {
      return {
        searchQuery: '',
        tableData: [
          {
            categoryId: 'ysp',
            categoryName: '音视频',
            remark: '',
            skuCount: 5
          }
        ],
        pagination: {
          currentPage: 1,
          pageSize: 10,
          total: 0
        },
        dialogVisible: false,
        dialogTitle: '',
        form: {
          categoryId: '',
          categoryName: '',
          remark: ''
        },
        rules: {
          categoryId: [
            { required: true, message: '请输入类别编号', trigger: 'blur' }
          ],
          categoryName: [
            { required: true, message: '请输入类别名称', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      handleSearch() {
        // 实现搜索逻辑
        console.log('搜索关键词:', this.searchQuery)
        this.loadData()
      },
      handleAdd() {
        this.dialogTitle = '新增产品类别'
        this.form = {
          categoryId: '',
          categoryName: '',
          remark: ''
        }
        this.dialogVisible = true
      },
      handleEdit(row) {
        this.dialogTitle = '编辑产品类别'
        this.form = { ...row }
      },
      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) => {
          if (valid) {
            // 实现表单提交逻辑
            console.log('表单数据:', this.form)
            this.dialogVisible = false
            this.$message.success('保存成功')
            this.loadData()
          }
        })
      },
      loadData() {
        // 实现数据加载逻辑
        console.log('加载数据，当前页:', this.pagination.currentPage, '每页数量:', this.pagination.pageSize)
      }
    },
    created() {
      this.loadData()
    }
  }
  </script>

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