<template>
  <div class="product-container">
    <!-- 产品基本信息表单 -->
    <el-form
      :model="productForm"
      :rules="rules"
      ref="productForm"
      label-width="100px"
    >
      <el-tabs v-model="activeTab">
        <el-tab-pane label="产品基本信息" name="basic">
          <el-form-item label="工程类别" prop="projectType">
            <el-select v-model="productForm.projectType" placeholder="请选择">
              <el-option
                v-for="item in projectTypes"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="系统类别" prop="systemType">
            <el-select v-model="productForm.systemType" placeholder="请选择">
              <el-option
                v-for="item in systemTypes"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="产品类别">
            <el-select v-model="productForm.productType" placeholder="请选择">
              <el-option
                v-for="item in productTypes"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="产品名称">
            <el-input v-model="productForm.productName" placeholder="请输入" />
          </el-form-item>
          <!-- 新增规格表单部分 -->
          <div class="specs-form">
            <div class="specs-header">
              <span>产品规格及型号</span>
              <div class="spec-tags">
                <el-button-group>
                  <el-button
                    size="small"
                    :type="activeSpecs.aspectRatio ? 'primary' : ''"
                    @click="toggleSpec('aspectRatio')"
                    >长宽比</el-button
                  >
                  <el-button
                    size="small"
                    :type="activeSpecs.refreshRate ? 'primary' : ''"
                    @click="toggleSpec('refreshRate')"
                    >刷新率</el-button
                  >
                  <el-button
                    size="small"
                    :type="activeSpecs.resolution ? 'primary' : ''"
                    @click="toggleSpec('resolution')"
                    >分辨率</el-button
                  >
                  <el-button
                    size="small"
                    :type="activeSpecs.material ? 'primary' : ''"
                    @click="toggleSpec('material')"
                    >屏幕材质</el-button
                  >
                  <el-button
                    size="small"
                    icon="el-icon-plus"
                    @click="addNewSpec"
                  ></el-button>
                </el-button-group>
              </div>
            </div>

            <!-- 长宽比输入 -->
            <el-form-item label="长宽比：" v-if="activeSpecs.aspectRatio">
              <el-input
                v-model="specForm.aspectRatio.width"
                style="width: 100px"
              ></el-input>
              <span class="ratio-separator">:</span>
              <el-input
                v-model="specForm.aspectRatio.height"
                style="width: 100px"
              ></el-input>
              <el-button
                type="text"
                icon="el-icon-plus"
                @click="addAspectRatio"
              ></el-button>
              <el-button
                type="text"
                icon="el-icon-minus"
                @click="removeAspectRatio"
              ></el-button>
            </el-form-item>

            <!-- 刷新率选择 -->
            <el-form-item label="刷新率：" v-if="activeSpecs.refreshRate">
              <el-select v-model="specForm.refreshRate" placeholder="复选等级">
                <el-option
                  v-for="item in refreshRateOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <el-button
                type="text"
                icon="el-icon-minus"
                @click="removeRefreshRate"
              ></el-button>
            </el-form-item>

            <!-- 分辨率选择 -->
            <el-form-item label="分辨率：" v-if="activeSpecs.resolution">
              <el-select v-model="specForm.resolution" placeholder="复选等级">
                <el-option
                  v-for="item in resolutionOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <el-button
                type="text"
                icon="el-icon-minus"
                @click="removeResolution"
              ></el-button>
            </el-form-item>

            <!-- 屏幕材质选择 -->
            <el-form-item label="屏幕材质：" v-if="activeSpecs.material">
              <el-select v-model="specForm.material" placeholder="复选等级">
                <el-option
                  v-for="item in materialOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <el-button
                type="text"
                icon="el-icon-minus"
                @click="removeMaterial"
              ></el-button>
            </el-form-item>

            <el-button type="primary" @click="generateSpec">生成</el-button>
          </div>

          <!-- 规格列表表格 -->
          <el-table
            :data="specsList"
            border
            style="width: 100%; margin-top: 20px"
          >
            <el-table-column prop="oaNumber" label="OA编号" />
            <el-table-column prop="productCode" label="产品编号" />
            <el-table-column prop="productName" label="产品名称" />
            <el-table-column prop="description" label="产品描述" />
            <el-table-column prop="model" label="产品型号" />
            <el-table-column prop="aspectRatio" label="长宽比" />
            <el-table-column prop="refreshRate" label="刷新率" />
            <el-table-column prop="material" label="屏幕材质" />
            <el-table-column label="操作" width="150">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="handleAdd(scope.row)"
                  >添加</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="handleDelete(scope.$index)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>

          <div class="button-group">
            <el-button type="primary" @click="batchAdd">批量添加</el-button>
          </div>
        </el-tab-pane>

        <!-- 规格及型号标签页 -->
        <el-tab-pane label="规格及型号" name="specs"> </el-tab-pane>
      </el-tabs>
    </el-form>
  </div>
</template>
  
  <script>
export default {
  name: "NewProduct",
  data() {
    return {
      activeTab: "basic",
      productForm: {
        projectType: "",
        systemType: "",
        productType: "",
        productName: "",
      },
      // 规格相关数据
      specs: {
        aspectRatio: { width: "", height: "" },
        refreshRate: "",
        resolution: "",
        material: "",
      },
      specsList: [], // 规格列表
      rules: {
        projectType: [
          { required: true, message: "请选择工程类别", trigger: "change" },
        ],
        systemType: [
          { required: true, message: "请选择系统类别", trigger: "change" },
        ],
      },
      // 新增数据
      activeSpecs: {
        aspectRatio: false,
        refreshRate: false,
        resolution: false,
        material: false,
      },
      specForm: {
        aspectRatio: {
          width: "19",
          height: "6",
        },
        refreshRate: "",
        resolution: "",
        material: "",
      },
      refreshRateOptions: [
        { value: "60Hz", label: "60Hz" },
        { value: "120Hz", label: "120Hz" },
        { value: "144Hz", label: "144Hz" },
      ],
      resolutionOptions: [
        { value: "1080p", label: "1080p" },
        { value: "2K", label: "2K" },
        { value: "4K", label: "4K" },
      ],
      materialOptions: [
        { value: "LED", label: "LED" },
        { value: "LCD", label: "LCD" },
        { value: "OLED", label: "OLED" },
      ],
    };
  },
  computed: {
    hasAspectRatio() {
      return this.specs.aspectRatio.width || this.specs.aspectRatio.height;
    },
  },
  methods: {
    // 添加规格
    addSpec(type) {
      if (type === "aspectRatio") {
        this.specs.aspectRatio = { width: "19", height: "6" };
      }
      // 其他规格类型处理...
    },

    // 移除规格
    removeSpec(type) {
      if (type === "aspectRatio") {
        this.specs.aspectRatio = { width: "", height: "" };
      }
    },

    // 添加到列表
    addToList(row) {
      this.specsList.push({
        oaNumber: "12345668",
        productCode: "DLP11443",
        productName: "DLP高级拼接屏",
        ...row,
      });
    },

    // 从列表中移除
    removeFromList(index) {
      this.specsList.splice(index, 1);
    },

    // 批量添加
    batchAdd() {
      // 实现批量添加逻辑
    },

    // 保存所有数据
    saveAll() {
      this.$refs.productForm.validate((valid) => {
        if (valid) {
          // 实现保存逻辑
          console.log("保存数据", this.productForm, this.specsList);
        }
      });
    },
    // 切换规格显示状态
    toggleSpec(type) {
      this.activeSpecs[type] = !this.activeSpecs[type];
    },

    // 添加新规格
    addNewSpec() {
      // 实现添加新规格的逻辑
    },

    // 生成规格
    generateSpec() {
      const newSpec = {
        oaNumber: "12345668",
        productCode: "DLP11443",
        productName: "DLP高级拼接屏",
        aspectRatio: `${this.specForm.aspectRatio.width}:${this.specForm.aspectRatio.height}`,
        refreshRate: this.specForm.refreshRate,
        resolution: this.specForm.resolution,
        material: this.specForm.material,
      };
      this.specsList.push(newSpec);
    },

    // 处理添加操作
    handleAdd(row) {
      // 实现添加逻辑
    },

    // 处理删除操作
    handleDelete(index) {
      this.specsList.splice(index, 1);
    },
  },
};
</script>
  
  <style scoped>
.product-container {
  padding: 20px;
}

.specs-container {
  margin-top: 20px;
}

.specs-header {
  margin-bottom: 20px;
}

.button-container {
  margin-top: 20px;
  text-align: center;
}
.specs-form {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid #EBEEF5;
  border-radius: 4px;
}

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

.ratio-separator {
  margin: 0 10px;
}

.button-group {
  margin-top: 20px;
  text-align: right;
}

.spec-tags {
  margin-bottom: 15px;
}
</style>