<template>
  <!-- 整个表单容器 -->
  <div style="margin-top: 50px">
    <!-- 表单内容区域 -->
    <el-form :model="value" ref="productAttrForm" label-width="120px" class="form-inner-container" size="small">

      <!-- 属性类型选择 -->
      <el-form-item label="属性类型：">
        <el-select
          v-model="value.productAttributeCategoryId"
          placeholder="请选择属性类型"
          @change="handleProductAttrChange">
          <el-option
            v-for="item in productAttributeCategoryOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <!-- 商品规格 -->
      <el-form-item label="商品规格：">
        <el-card shadow="never" class="cardBg">
          <div v-for="(productAttr, idx) in selectProductAttr" :key="idx">
            <!-- 显示属性名称 -->
            {{ productAttr.name }}：

            <!-- 当 handAddStatus=0 时，显示多选框 -->
            <el-checkbox-group v-if="productAttr.handAddStatus === 0" v-model="selectProductAttr[idx].values">
              <el-checkbox
                v-for="item in getInputListArr(productAttr.inputList)"
                :label="item"
                :key="item"
                class="littleMarginLeft"></el-checkbox>
            </el-checkbox-group>

            <!-- 手动添加的属性值 -->
            <div v-else>
              <el-checkbox-group v-model="selectProductAttr[idx].values">
                <div
                  v-for="(item, index) in selectProductAttr[idx].options"
                  :key="index"
                  style="display: inline-block" class="littleMarginLeft">
                  <el-checkbox :label="item"></el-checkbox>
                  <el-button type="text" class="littleMarginLeft" @click="handleRemoveProductAttrValue(idx, index)">删除</el-button>
                </div>
              </el-checkbox-group>
              <!-- 添加新属性值 -->
              <el-input v-model="addProductAttrValue" style="width: 160px; margin-left: 10px" clearable></el-input>
              <el-button class="littleMarginLeft" @click="handleAddProductAttrValue(idx)">增加</el-button>
            </div>
          </div>
        </el-card>

        <!-- SKU 列表表格 -->
        <el-table style="width: 100%; margin-top: 20px" :data="value.skuStockList" border>
          <el-table-column
            v-for="(item, index) in selectProductAttr"
            :label="item.name"
            :key="item.id"
            align="center">
            <template slot-scope="scope">
              {{ getProductSkuSp(scope.row, index) }}
            </template>
          </el-table-column>

          <!-- 其他表格列：销售价格、促销价格、库存等 -->
          <el-table-column label="销售价格" width="100" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.price"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="促销价格" width="100" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.promotionPrice"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="商品库存" width="80" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.stock"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="库存预警值" width="80" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.lowStock"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="SKU编号" width="160" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.skuCode"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="80" align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="handleRemoveProductSku(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 操作按钮：刷新、同步价格、同步库存 -->
        <el-button type="primary" style="margin-top: 20px" @click="handleRefreshProductSkuList">刷新列表</el-button>
        <el-button type="primary" style="margin-top: 20px" @click="handleSyncProductSkuPrice">同步价格</el-button>
        <el-button type="primary" style="margin-top: 20px" @click="handleSyncProductSkuStock">同步库存</el-button>
      </el-form-item>

      <!-- 商品相册 -->
      <el-form-item label="商品相册：">
        <multi-upload v-model="selectProductPics"></multi-upload>
      </el-form-item>

      <!-- 商品详情编辑器 -->
      <el-form-item label="商品详情：">
        <el-tabs v-model="activeHtmlName" type="card">
          <el-tab-pane label="电脑端详情" name="pc">
            <tinymce :width="595" :height="300" v-model="value.detailHtml"></tinymce>
          </el-tab-pane>
          <el-tab-pane label="移动端详情" name="mobile">
            <tinymce :width="595" :height="300" v-model="value.detailMobileHtml"></tinymce>
          </el-tab-pane>
        </el-tabs>
      </el-form-item>

      <!-- 表单操作按钮 -->
      <el-form-item style="text-align: center">
        <el-button size="medium" @click="handlePrev">上一步，填写商品促销</el-button>
        <el-button type="primary" size="medium" @click="handleNext">下一步，选择商品关联</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { fetchList as fetchProductAttrCateList } from '@/api/productAttrCate';
import { fetchList as fetchProductAttrList } from '@/api/productAttr';
import SingleUpload from '@/components/Upload/singleUpload';
import MultiUpload from '@/components/Upload/multiUpload';
import Tinymce from '@/components/Tinymce';

export default {
  name: 'ProductAttrDetail', // 组件名称
  components: { SingleUpload, MultiUpload, Tinymce }, // 注册组件
  props: {
    value: Object, // 父组件传入的表单数据对象
    isEdit: { type: Boolean, default: false } // 编辑模式标志
  },
  data() {
    return {
      productAttributeCategoryOptions: [], // 商品属性分类选项
      selectProductAttr: [], // 选中的商品属性
      addProductAttrValue: '', // 手动添加的属性值
      activeHtmlName: 'pc' // 激活的商品详情编辑器
    };
  },
  created() {
    this.getProductAttrCateList(); // 获取商品属性分类数据
  },
  methods: {
    // 获取商品属性分类列表
    getProductAttrCateList() {
      fetchProductAttrCateList({ pageNum: 1, pageSize: 100 }).then(response => {
        this.productAttributeCategoryOptions = response.data.list.map(item => ({
          label: item.name,
          value: item.id
        }));
      });
    },
    // 处理属性类型变化，加载对应的属性和参数
    handleProductAttrChange(value) {
      this.getProductAttrList(0, value); // 商品规格
      this.getProductAttrList(1, value); // 商品参数
    },
    // 处理添加手动属性值
    handleAddProductAttrValue(idx) {
      if (this.addProductAttrValue) {
        this.selectProductAttr[idx].options.push(this.addProductAttrValue);
        this.addProductAttrValue = '';
      }
    },
    // 删除 SKU 列表中的某一项
    handleRemoveProductSku(index) {
      this.value.skuStockList.splice(index, 1);
    },
    // 上一步
    handlePrev() {
      this.$emit('prevStep');
    },
    // 下一步
    handleNext() {
      this.$emit('nextStep');
    }
  }
};
</script>

<style scoped>
.littleMarginLeft {
  margin-left: 10px;
}

.cardBg {
  background: #f8f9fc;
}
</style>
