<template>
    <div class="spec-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="specCode" label="规格编号" width="120"></el-table-column>
        <el-table-column prop="specName" label="规格名称" width="120"></el-table-column>
        <el-table-column prop="specType" label="规格值类型" width="120">
          <template slot-scope="scope">
            <el-tag :type="scope.row.specType === '输入' ? 'primary' : scope.row.specType === '单选' ? 'success' : 'warning'">
              {{ scope.row.specType }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="specValue" label="规格值" width="180"></el-table-column>
        <el-table-column prop="category" label="所属分类"></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="specCode">
            <el-input v-model="form.specCode"></el-input>
          </el-form-item>
          <el-form-item label="规格名称" prop="specName">
            <el-input v-model="form.specName"></el-input>
          </el-form-item>
          <el-form-item label="规格值类型" prop="specType">
            <el-select v-model="form.specType" style="width: 100%">
              <el-option label="输入" value="输入"></el-option>
              <el-option label="单选" value="单选"></el-option>
              <el-option label="复选" value="复选"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="规格值" prop="specValue">
            <el-input v-model="form.specValue" type="textarea" 
              placeholder="多个值请用逗号分隔"></el-input>
          </el-form-item>
          <el-form-item label="所属分类" prop="category">
            <el-select v-model="form.category" style="width: 100%">
              <el-option label="全部" value="全部"></el-option>
              <el-option label="LCD,LED" value="LCD,LED"></el-option>
              <el-option label="DLP" value="DLP"></el-option>
            </el-select>
          </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>
  export default {
    name: 'SpecManagement',
    data() {
      return {
        searchQuery: '',
        tableData: [
          {
            specCode: 'ckb',
            specName: '长宽比',
            specType: '输入',
            specValue: '',
            category: '全部'
          },
          {
            specCode: 'sxl',
            specName: '刷新率',
            specType: '单选',
            specValue: '75, 100, 120',
            category: 'LCD,LED'
          },
          {
            specCode: 'pmcz',
            specName: '屏幕材质',
            specType: '复选',
            specValue: '有机玻璃, 树脂',
            category: 'DLP'
          },
          {
            specCode: 'whfs',
            specName: '维护方式',
            specType: '单选',
            specValue: '前维护, 后维护',
            category: ''
          }
        ],
        pagination: {
          currentPage: 1,
          pageSize: 10,
          total: 4
        },
        dialogVisible: false,
        dialogTitle: '',
        form: {
          specCode: '',
          specName: '',
          specType: '',
          specValue: '',
          category: ''
        },
        rules: {
          specCode: [
            { required: true, message: '请输入规格编号', trigger: 'blur' }
          ],
          specName: [
            { required: true, message: '请输入规格名称', trigger: 'blur' }
          ],
          specType: [
            { required: true, message: '请选择规格值类型', trigger: 'change' }
          ]
        }
      }
    },
    methods: {
      handleSearch() {
        // 实现搜索逻辑
        console.log('搜索关键词:', this.searchQuery)
        this.loadData()
      },
      handleAdd() {
        this.dialogTitle = '新增规格'
        this.form = {
          specCode: '',
          specName: '',
          specType: '',
          specValue: '',
          category: ''
        }
        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) => {
          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>
  .spec-container {
    padding: 20px;
  }
  .operation-area {
    display: flex;
    align-items: center;
  }
  </style>