<template>
  <el-container>
    <el-header>
      <el-tabs class="sa-tabs bg-#fff sa-m-t-10 z-999" v-model="activeTab" @tab-change="handleTabChange">
        <el-tab-pane name="basic">
          <template #label>
            <div class="sa-flex" :class="basicFormErrors ? 'is-error' : ''">
              基本信息
              <el-icon v-if="basicFormErrors" class="sa-m-l-5">
                <WarningFilled />
              </el-icon>
              <el-icon v-if="basicSaved" class="sa-m-l-5 text-success">
                <CircleCheckFilled />
              </el-icon>
            </div>
          </template>
        </el-tab-pane>
        <el-tab-pane name="attributes" :disabled="!goodsId && !isEdit">
          <template #label>
            <div class="sa-flex" :class="attributesFormErrors ? 'is-error' : ''">
              商品属性
              <el-icon v-if="attributesFormErrors" class="sa-m-l-5">
                <WarningFilled />
              </el-icon>
              <el-icon v-if="attributesSaved" class="sa-m-l-5 text-success">
                <CircleCheckFilled />
              </el-icon>
              <span v-if="!goodsId && !isEdit" class="tab-disabled-tip">（需先保存基本信息）</span>
            </div>
          </template>
        </el-tab-pane>
      </el-tabs>
    </el-header>

    <el-main class="sa-p-t-30">
      <!-- 基本信息Tab -->
      <div v-show="activeTab === 'basic'">
        <el-form ref="basicFormRef" :model="basicFormData" :rules="basicRules" label-width="120px">
          <el-row :gutter="40">
            <!-- 左侧表单 -->
            <el-col :span="14">
              <el-form-item label="商品分类" prop="cateId" required>
                <el-select v-model="basicFormData.cateId" placeholder="请选择商品分类" clearable style="width: 100%">
                  <el-option v-for="category in categoryOptions" :key="category.id" :label="category.name"
                    :value="category.id" />
                </el-select>
              </el-form-item>

              <el-form-item label="商品名称" prop="storeName" required>
                <el-input v-model="basicFormData.storeName" placeholder="请填写商品名称（限100字符）" maxlength="100"
                  show-word-limit />
              </el-form-item>

              <el-form-item label="副标题" prop="keyword">
                <el-input v-model="basicFormData.keyword" placeholder="请填写副标题（限50字符）" maxlength="50" show-word-limit />
              </el-form-item>

              <el-form-item label="商品品牌" prop="itemBrand" required>
                <el-input v-model="basicFormData.itemBrand" placeholder="请填写商品品牌" />
              </el-form-item>

              <el-form-item label="商品介绍" prop="storeInfo">
                <el-input v-model="basicFormData.storeInfo" type="textarea" :rows="4" placeholder="请填写商品介绍（限500字符）"
                  maxlength="500" show-word-limit />
              </el-form-item>

              <el-form-item label="运费模板" prop="tempId">
                <div class="mt-1px">包邮</div>
              </el-form-item>

              <el-form-item label="商品货号" prop="itemNumber" required>
                <el-input v-model="basicFormData.itemNumber" placeholder="请填写商品货号" />
                <div class="form-tip ml-10px">如果您不输入商品货号，系统将自动生成一个唯一的货号</div>
              </el-form-item>

              <el-form-item label="商品售价" prop="price" required>
                <el-select v-model="basicFormData.price" placeholder="请选择商品售价" clearable>
                  <el-option :value="300" label="300৳" />
                  <el-option :value="500" label="500৳" />
                  <el-option :value="1000" label="1000৳" />
                  <el-option :value="2000" label="2000৳" />
                  <el-option :value="3000" label="3000৳" />
                </el-select>
              </el-form-item>

              <el-form-item label="市场价" prop="otPrice">
                <el-select v-model="basicFormData.otPrice" placeholder="请选择市场价" clearable>
                  <el-option :value="300" label="300৳" />
                  <el-option :value="500" label="500৳" />
                  <el-option :value="1000" label="1000৳" />
                  <el-option :value="2000" label="2000৳" />
                  <el-option :value="3000" label="3000৳" />
                </el-select>
              </el-form-item>

              <el-form-item label="商品库存" prop="stock" required>
                <el-input v-model="basicFormData.stock" placeholder="请输入商品库存" type="number" min="0" />
                <div class="form-tip ml-10px">该设置只对单品有效，当商品存在多规格货品时为不可编辑状态，库存数值取决于货品数量</div>
              </el-form-item>

              <el-form-item label="库存预警值" prop="stockThreshold">
                <el-input v-model="basicFormData.stockThreshold" placeholder="请输入库存预警值" type="number" min="0" />
              </el-form-item>

              <el-form-item label="商品状态" prop="isShow" required>
                <el-radio-group v-model="basicFormData.isShow">
                  <el-radio :label="1">上架</el-radio>
                  <el-radio :label="0">下架</el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item label="商品供应商" prop="itemSupplier" required>
                <el-input v-model="basicFormData.itemSupplier" placeholder="请输入商品供应商" />
              </el-form-item>
            </el-col>

            <!-- 右侧图片上传 -->
            <el-col :span="10">
              <el-form-item label="商品主图" prop="image" required>
                <sa-upload-image v-model="basicFormData.image" :max-count="5" :accept="['jpg', 'jpeg', 'png']"
                  :max-size="5" :direct-upload="true" :size="100" placeholder="上传商品主图" />
                <div class="form-tip">作用于商城列表、分享图片；建议尺寸：750*750 px</div>
              </el-form-item>

              <el-form-item label="轮播图" prop="sliderImage">
                <sa-upload-image v-model="basicFormData.sliderImage" :max-count="5" :accept="['jpg', 'jpeg', 'png']"
                  :max-size="5" :direct-upload="true" :size="100" placeholder="上传轮播图" />
                <div class="form-tip">作用于商品详情顶部轮播显示，轮播图可以拖拽调整顺序</div>
              </el-form-item>

              <el-form-item label="详情图" prop="flatPattern" required>
                <sa-upload-image v-model="basicFormData.flatPattern" :max-count="10" :accept="['jpg', 'jpeg', 'png']"
                  :max-size="5" :direct-upload="true" :size="100" placeholder="上传详情图" />
                <div class="form-tip">详情图片，用于商品详情页展示</div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <!-- 商品属性Tab -->
      <div v-show="activeTab === 'attributes'">
        <!-- 如果没有商品ID，显示提示 -->
        <div v-if="!goodsId && !isEdit" class="tab-placeholder">
          <el-empty description="请先保存基本信息后再编辑商品属性">
            <el-button type="primary" @click="activeTab = 'basic'"> 去保存基本信息 </el-button>
          </el-empty>
        </div>

        <!-- 有商品ID时显示属性表单 -->
        <div>
          <el-form ref="attributesFormRef" :model="attributesFormData" :rules="attributesRules" label-width="120px">
            <!-- 多规格设置 -->
            <el-card class="spec-card">
              <template #header>
                <div class="card-header">
                  <span>商品规格设置</span>
                </div>
              </template>

              <!-- 操作 -->
              <div class="sku-wrap">
                <div class="sku" v-for="(s, k) in attributesFormData.skus" :key="k">
                  <div class="sku-key sa-flex sa-row-between">
                    <div class="sa-flex">
                      <div class="sa-m-r-16">规格名称</div>
                      <el-input v-model="s.name" placeholder="请输入规格名称" class="sku-key-input"
                        @input="buildSkuPriceTable"></el-input>
                    </div>
                    <el-icon @click="deleteMainSku(k)" class="sku-key-icon">
                      <CircleCloseFilled />
                    </el-icon>
                  </div>
                  <div class="sku-value sa-flex sa-flex-wrap">
                    <div class="sku-value-title sa-m-r-16 sa-m-b-16 sa-flex"> 规格值 </div>
                    <div v-for="(sc, c) in s.children" :key="c" class="sku-value-box sa-m-b-16">
                      <el-input v-model="sc.name" placeholder="请输入规格值" class="sku-value-input"
                        @input="buildSkuPriceTable"></el-input>
                      <el-icon @click="deleteChildrenSku(k, c)" class="sku-value-icon">
                        <CircleCloseFilled />
                      </el-icon>
                    </div>
                    <div @click="addChildrenSku(k)" class="sku-value-add sa-m-r-24 sa-m-b-16 sa-flex cursor-pointer">
                      添加规格值
                    </div>
                  </div>
                </div>
                <div class="sku-tools sa-flex">
                  <el-button type="primary" class="add" @click="addMainSku">+ 添加规格</el-button>
                </div>
              </div>

              <!-- 批量设置 -->
              <div class="sa-m-t-20" v-if="attributesFormData.sku_prices.length > 0">
                <el-form-item label="批量设置" label-width="80px">
                  <div class="sku sa-m-r-20" v-for="(item, index) in attributesFormData.skus" :key="index">
                    <el-select v-model="item.batchId" placeholder="请选择规格" class="sa-w-150" clearable>
                      <template v-for="(citem, cindex) in item.children">
                        <el-option :key="cindex" :label="citem.name" :value="citem.temp_id"
                          v-if="citem.temp_id && citem.name"></el-option>
                      </template>
                    </el-select>
                  </div>
                  <div class="warning-title" style="margin-left: 8px">
                    未选择规格默认为全选批量设置
                  </div>
                </el-form-item>
                <div class="sa-flex sa-flex-wrap">
                  <el-select v-model="allEditObj.price" placeholder="请选择售价(৳)" class="sa-w-200 sa-m-r-10 sa-m-b-10"
                    clearable>
                    <el-option :value="300" label="300৳" />
                    <el-option :value="500" label="500৳" />
                    <el-option :value="1000" label="1000৳" />
                    <el-option :value="2000" label="2000৳" />
                    <el-option :value="3000" label="3000৳" />
                  </el-select>
                  <el-input v-model="allEditObj.stock" placeholder="请输入库存(件)" class="sa-w-200 sa-m-r-10 sa-m-b-10">
                    <template #prepend>库存(件)</template>
                  </el-input>
                  <el-input v-model="allEditObj.stock_warning" placeholder="请输入库存预警值(件)"
                    class="sa-w-200 sa-m-r-10 sa-m-b-10">
                    <template #prepend>库存预警值(件)</template>
                  </el-input>
                  <el-button type="primary" @click="batchEdit" class="sa-m-b-10">批量设置</el-button>
                </div>
              </div>

              <!-- 表格 -->
              <div class="sku-table-wrap sa-m-b-20">
                <table class="sku-table" rules="all">
                  <thead>
                    <tr>
                      <template v-for="(item, i) in attributesFormData.skus" :key="i">
                        <th v-if="item.children.length">{{ item.name }}</th>
                      </template>
                      <th>图片</th>
                      <th><span class="required">*</span>销售价格(৳)</th>
                      <th><span class="required">*</span>商品库存</th>
                      <th>库存预警值</th>
                      <th>SKU编码</th>
                      <th>操作</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="(item, i) in attributesFormData.sku_prices" :key="i">
                      <template v-for="(v, j) in item.goods_sku_text" :key="j">
                        <td>
                          <span class="th-center">{{ v }}</span>
                        </td>
                      </template>
                      <td class="image">
                        <sa-upload-image v-model="item.imageList" :max-count="1" :accept="['jpg', 'jpeg', 'png']"
                          :max-size="5" :direct-upload="true" :size="30" :show-tip="false" :compact="true"
                          placeholder="" />
                      </td>
                      <td>
                        <el-select v-model="item.price" placeholder="选择价格" size="small"
                          :class="{ 'is-error': !item.price || item.price <= 0 }">
                          <el-option :value="300" label="300" />
                          <el-option :value="500" label="500" />
                          <el-option :value="1000" label="1000" />
                          <el-option :value="2000" label="2000" />
                          <el-option :value="3000" label="3000" />
                        </el-select>
                      </td>
                      <td class="stock">
                        <el-input v-model="item.stock" placeholder="请输入库存" size="small" type="number" :step="1" :min="0"
                          :class="{ 'is-error': !item.stock || item.stock < 0 }"></el-input>
                      </td>
                      <td class="stock_warning">
                        <el-input v-model="item.stock_warning" placeholder="请输入预警值" size="small" type="number" :step="1"
                          :min="0"></el-input>
                      </td>
                      <td class="sn">
                        <el-input v-model="item.sn" placeholder="请输入SKU编码" size="small"></el-input>
                      </td>
                      <td>
                        <el-button type="danger" size="small" text @click="deleteSkuPrice(i)">删除</el-button>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </el-card>
          </el-form>
        </div>
      </div>
    </el-main>

    <!-- 统一操作按钮 -->
    <el-footer class="sa-footer--submit">
      <el-button @click="closeDialog" size="large">关闭</el-button>

      <!-- 基本信息Tab的按钮 -->
      <template v-if="activeTab === 'basic'">
        <el-button type="primary" @click="saveBasicInfo" :loading="savingStates.basic" size="large">
          保存基本信息
        </el-button>
      </template>

      <!-- 商品属性Tab的按钮 -->
      <template v-else-if="activeTab === 'attributes'">
        <el-button type="primary" @click="saveAttributes" :loading="savingStates.attributes" size="large">
          保存商品属性
        </el-button>
      </template>

      <!-- 保存全部按钮（始终显示） -->
      <el-button type="primary" plain @click="saveAll" :loading="savingStates.all" size="large">
        保存全部
      </el-button>
    </el-footer>
  </el-container>
</template>

<script setup>
import { onMounted, reactive, ref, computed, nextTick } from 'vue';
import { WarningFilled, CircleCheckFilled, CircleCloseFilled } from '@element-plus/icons-vue';
import { api } from '../goods.service';
const emit = defineEmits(['modalCallBack']);
const props = defineProps({
  modal: {
    type: Object,
    required: true,
  },
});

// 从modal参数中获取类型和ID
const type = computed(() => props.modal?.params?.type || 'add');
const goodsIdFromProps = computed(() => props.modal?.params?.id || null);

// 响应式数据
const activeTab = ref('basic');
const goodsId = ref(goodsIdFromProps.value);
const isEdit = computed(() => type.value === 'edit');

// 保存状态
const savingStates = reactive({
  basic: false,
  attributes: false,
  all: false,
});

// 保存成功状态
const basicSaved = ref(false);
const attributesSaved = ref(false);

// 表单错误状态
const basicFormErrors = ref(false);
const attributesFormErrors = ref(false);

// 表单引用
const basicFormRef = ref(null);
const attributesFormRef = ref(null);

// 分类选项
const categoryOptions = ref([]);

// 基本信息表单数据
const basicFormData = reactive({
  id: '',
  cateId: '',
  storeName: '',
  keyword: '',
  itemBrand: '',
  storeInfo: '',
  tempId: 1,
  itemNumber: '',
  price: '',
  otPrice: '',
  stock: '',
  stockThreshold: '',
  isShow: 1,
  itemSupplier: '',
  sort: 0,
  isHot: 0,
  isNew: 0,
  isBest: 0,
  isGood: 0,
  isBenefit: 0,
  isPostage: 1,
  cost: '',
  vipPrice: '',
  image: [],
  sliderImage: [],
  flatPattern: [],
});

// 商品属性表单数据
const attributesFormData = reactive({
  specType: 1, // 规格 0单 1多，默认多规格
  skus: [
    {
      id: 0,
      temp_id: 1,
      name: '',
      batchId: '',
      pid: 0,
      children: [],
    },
  ],
  sku_prices: [],
});

// 基本信息验证规则
const basicRules = {
  cateId: [{ required: true, message: '请选择商品分类', trigger: 'change' }],
  storeName: [{ required: true, message: '请填写商品名称', trigger: 'blur' }],
  itemBrand: [{ required: true, message: '请填写商品品牌', trigger: 'blur' }],
  itemNumber: [{ required: true, message: '请填写商品货号', trigger: 'blur' }],
  price: [{ required: true, message: '请填写商品售价', trigger: 'blur' }],
  stock: [{ required: true, message: '请填写商品库存', trigger: 'blur' }],
  isShow: [{ required: true, message: '请选择商品状态', trigger: 'change' }],
  itemSupplier: [{ required: true, message: '请填写商品供应商', trigger: 'blur' }],
  image: [{ required: true, message: '请上传商品主图', trigger: 'change' }],
  flatPattern: [{ required: true, message: '请上传商品详情图', trigger: 'change' }],
};

// 商品属性验证规则
const attributesRules = {
  specType: [{ required: true, message: '请选择规格类型', trigger: 'change' }],
};

// 图片数组转换为逗号分隔字符串的函数
const convertImagesToString = (imageArray) => {
  return Array.isArray(imageArray) ? imageArray.join(',') : '';
};

// 图片字符串转换为数组的函数
const convertStringToImages = (imageString) => {
  if (!imageString) return [];
  return imageString.split(',').filter((img) => img.trim());
};

// Tab切换处理
const handleTabChange = (tabName) => {
  if (tabName === 'attributes' && !goodsId.value && !isEdit.value) {
    nextTick(() => {
      ElMessage.info('提示：保存商品属性需要先保存基本信息');
    });
  }
};

// 保存基本信息
const saveBasicInfo = async () => {
  savingStates.basic = true;
  basicFormErrors.value = false;

  const valid = await basicFormRef.value?.validate().catch(() => false);
  if (!valid) {
    basicFormErrors.value = true;
    savingStates.basic = false;
    return false;
  }

  const submitData = {
    ...basicFormData,
    image: convertImagesToString(basicFormData.image),
    sliderImage: convertImagesToString(basicFormData.sliderImage),
    flatPattern: convertImagesToString(basicFormData.flatPattern),
  };

  const { code, data } = isEdit.value
    ? await api.goods.edit(goodsId.value, submitData)
    : await api.goods.add(submitData);

  if (code === '200') {
    if (!isEdit.value) {
      goodsId.value = data.id;
      basicFormData.id = data.id;
    }
    basicSaved.value = true;
    savingStates.basic = false;
    return true;
  }

  basicFormErrors.value = true;
  savingStates.basic = false;
  return false;
};

// 保存商品属性（内部方法）
const saveAttributesInternal = async () => {
  try {
    // 验证属性表单
    const valid = await attributesFormRef.value?.validate().catch(() => false);
    if (!valid) {
      attributesFormErrors.value = true;
      ElMessage.error('请完善商品属性');
      return false;
    }

    // 验证SKU
    if (!validateSku()) {
      attributesFormErrors.value = true;
      return false;
    }

    // 准备属性数据 - 转换为后端需要的格式
    const submitData = {
      goodsId: goodsId.value,
      specType: attributesFormData.specType,
      attrValue: generateAttrValueData(),
      attr: generateAttrData(),
    };

    // 这里调用属性保存接口（待实现）
    const { code, data } = await api.rule.add(submitData);
    console.log(code, data);

    // 临时模拟成功
    attributesSaved.value = true;
    ElMessage.success(t('message.goodsAttributeSaveSuccess'));
    return true;
  } catch (error) {
    attributesFormErrors.value = true;
    ElMessage.error('保存失败：' + error.message);
    return false;
  }
};

// 保存商品属性（对外方法）
const saveAttributes = async () => {
  try {
    savingStates.attributes = true;
    attributesFormErrors.value = false;

    // 检查依赖
    if (!goodsId.value && !isEdit.value) {
      const result = await ElMessageBox.confirm(
        '保存商品属性需要先保存基本信息，是否现在保存基本信息？',
        '提示',
        {
          confirmButtonText: '保存基本信息并继续',
          cancelButtonText: '取消',
          type: 'warning',
        },
      );

      if (result === 'confirm') {
        // 先保存基本信息
        const basicSaved = await saveBasicInfo();

        if (basicSaved) {
          // 基本信息保存成功后，保存属性
          await saveAttributesInternal();
        }
      }
      return;
    }

    // 直接保存属性
    await saveAttributesInternal();
  } finally {
    savingStates.attributes = false;
  }
};

// 保存全部
const saveAll = async () => {
  try {
    savingStates.all = true;

    // 1. 如果没有商品ID，先保存基本信息
    if (!goodsId.value && !isEdit.value) {
      const basicSaved = await saveBasicInfo();
      if (!basicSaved) return;
    }

    // 2. 如果属性有修改，保存属性
    await saveAttributesInternal();

    ElMessage.success(t('message.saveSuccess'));
    emit('modalCallBack', { event: 'confirm' });
  } catch (error) {
    ElMessage.error(t('message.saveFailed') + '：' + error.message);
  } finally {
    savingStates.all = false;
  }
};

// 关闭对话框
const closeDialog = () => {
  emit('modalCallBack', { event: 'close' });
};

// SKU相关方法
const countId = ref(2);
const childrenModal = [];
const isResetSku = ref(0);

// 批量操作相关变量
const allEditObj = ref({
  price: 0,
  stock: 0,
  stock_warning: 0,
});

// 添加主规格
const addMainSku = () => {
  attributesFormData.skus.push({
    id: 0,
    temp_id: countId.value++,
    name: '',
    batchId: '',
    pid: 0,
    children: [],
  });
  buildSkuPriceTable();
};

// 删除主规格
const deleteMainSku = (k) => {
  let data = attributesFormData.skus[k];

  // 删除主规格
  attributesFormData.skus.splice(k, 1);

  // 如果当前删除的主规格存在子规格，则清空 skuPrice
  if (data.children.length > 0) {
    attributesFormData.sku_prices = [];
    isResetSku.value = 1;
  }
  buildSkuPriceTable();
};

// 添加子规格
const addChildrenSku = (k) => {
  let isExist = false;
  attributesFormData.skus[k].children.forEach((e) => {
    if (e.name == childrenModal[k] && e.name != '') {
      isExist = true;
    }
  });
  if (isExist) {
    ElMessage.warning('子规格已存在');
    return false;
  }

  attributesFormData.skus[k].children.push({
    id: 0,
    temp_id: countId.value++,
    name: childrenModal[k] || '',
    pid: attributesFormData.skus[k].id,
  });
  childrenModal[k] = '';

  // 如果是添加的第一个子规格，清空 skuPrice
  if (attributesFormData.skus[k].children.length == 1) {
    attributesFormData.sku_prices = [];
    isResetSku.value = 1;
  }
  buildSkuPriceTable();
};

// 删除子规格
const deleteChildrenSku = (k, i) => {
  let data = attributesFormData.skus[k].children[i];
  attributesFormData.skus[k].children.splice(i, 1);

  // 查询 sku_prices 中包含被删除的子规格的项，然后移除
  let deleteArr = [];
  attributesFormData.sku_prices.forEach((item, index) => {
    item.goods_sku_text.forEach((e) => {
      if (e == data.name) {
        deleteArr.push(index);
      }
    });
  });
  deleteArr.sort(function (a, b) {
    return b - a;
  });
  // 移除有相关子规格的项
  deleteArr.forEach((idx) => {
    attributesFormData.sku_prices.splice(idx, 1);
  });

  // 当前规格项，所有子规格都被删除，清空 sku_prices
  if (attributesFormData.skus[k].children.length <= 0) {
    attributesFormData.sku_prices = [];
    isResetSku.value = 1;
  }
  buildSkuPriceTable();
};

// 组成新的规格
const buildSkuPriceTable = () => {
  let arr = [];
  // 遍历sku子规格生成新数组，然后执行递归笛卡尔积
  attributesFormData.skus.forEach((s1) => {
    let children = s1.children;
    let childrenIdArray = [];
    if (children.length > 0) {
      children.forEach((s2) => {
        childrenIdArray.push(s2.temp_id);
      });
      // 如果 children 子规格数量为 0,则不渲染当前规格
      arr.push(childrenIdArray);
    }
  });
  recursionSku(arr, 0, []);
};

// 递归找笛卡尔规格集合
const recursionSku = (arr, k, temp) => {
  if (k == arr.length && k != 0) {
    let tempDetail = [];
    let tempDetailIds = [];
    temp.forEach((item) => {
      for (let sku of attributesFormData.skus) {
        for (let child of sku.children) {
          if (item == child.temp_id) {
            tempDetail.push(child.name);
            tempDetailIds.push(child.temp_id);
          }
        }
      }
    });
    let flag = false; // 默认添加新的
    for (let i = 0; i < attributesFormData.sku_prices.length; i++) {
      if (
        attributesFormData.sku_prices[i].goods_sku_temp_ids.join(',') == tempDetailIds.join(',')
      ) {
        flag = i;
        break;
      }
    }

    if (flag === false) {
      attributesFormData.sku_prices.push({
        id: 0,
        temp_id: attributesFormData.sku_prices.length + 1,
        goods_sku_ids: '',
        goods_id: 0,
        image: '',
        imageList: [],
        price: 0,
        stock: 0,
        stock_warning: 0,
        sn: '',
        goods_sku_text: tempDetail,
        goods_sku_temp_ids: tempDetailIds,
      });
    } else {
      attributesFormData.sku_prices[flag].goods_sku_text = tempDetail;
      attributesFormData.sku_prices[flag].goods_sku_temp_ids = tempDetailIds;
    }
    return;
  }
  if (arr.length) {
    for (let i = 0; i < arr[k].length; i++) {
      temp[k] = arr[k][i];
      recursionSku(arr, k + 1, temp);
    }
  }
};

// 批量操作
const batchEdit = () => {
  const batchIds = attributesFormData.skus
    .map((item) => item.batchId)
    .filter((item) => Boolean(item));
  attributesFormData.sku_prices.forEach((item) => {
    if (
      batchIds.length ? batchIds.every((citem) => item.goods_sku_temp_ids.includes(citem)) : true
    ) {
      const { price, stock, stock_warning } = allEditObj.value;
      if (price) item.price = price;
      if (stock) item.stock = stock;
      if (stock_warning) item.stock_warning = stock_warning;
    }
  });

  // 清空输入框
  allEditObj.value = {
    price: 0,
    stock: 0,
    stock_warning: 0,
  };

  // 清空选择的规格
  attributesFormData.skus.forEach((item) => {
    item.batchId = '';
  });

  ElMessage.success('批量设置成功');
};

// 删除规格组合
const deleteSkuPrice = (index) => {
  attributesFormData.sku_prices.splice(index, 1);
  ElMessage.success(t('message.deleteSuccess'));
};

// SKU校验
const validateSku = () => {
  if (attributesFormData.sku_prices.length === 0) {
    ElMessage.error('请先添加商品规格');
    return false;
  }

  for (let i = 0; i < attributesFormData.sku_prices.length; i++) {
    const item = attributesFormData.sku_prices[i];
    if (!item.price || item.price <= 0) {
      ElMessage.error(`第${i + 1}个规格的销售价格不能为空且必须大于0`);
      return false;
    }
    if (item.stock === null || item.stock === undefined || item.stock < 0) {
      ElMessage.error(`第${i + 1}个规格的商品库存不能为空且不能小于0`);
      return false;
    }
  }
  return true;
};

// 生成后端需要的 attrValue 数据格式
const generateAttrValueData = () => {
  return attributesFormData.sku_prices.map((item) => {
    // 构建规格属性对象，如 {"颜色": "红色", "尺寸": "S"}
    const attrObj = {};
    const attrValueObj = {};

    // 根据 goods_sku_text 和对应的规格名称构建属性对象
    item.goods_sku_text.forEach((value, index) => {
      const specName = attributesFormData.skus[index]?.name;
      if (specName) {
        attrObj[specName] = value;
        attrValueObj[specName] = value;
      }
    });

    return {
      image: item.imageList && item.imageList.length > 0 ? item.imageList[0] : '',
      price: item.price || '0',
      stock: item.stock || 0,
      barCode: item.sn || '',
      stock_warning: item.stock_warning || 0,
      attrValue: JSON.stringify(attrValueObj),
      ...attrObj, // 展开规格属性，如 "颜色": "红色", "尺寸": "S"
      id: 0,
      productId: 0,
    };
  });
};

// 生成后端需要的 attr 数据格式
const generateAttrData = () => {
  return attributesFormData.skus
    .filter((sku) => sku.name && sku.children.length > 0)
    .map((sku) => ({
      attrName: sku.name,
      attrValues: sku.children.map((child) => child.name).join(','),
    }));
};

// 获取分类数据
const getCategoryData = async () => {
  const { code, data } = await api.category.list({ size: 100 });
  code === '200' &&
    (categoryOptions.value = data.list.map((cat) => ({
      label: cat.name,
      value: cat.id,
      id: cat.id,
      name: cat.name,
    })));
};

// 加载商品详情
const loadGoodsDetail = async () => {
  if (!goodsId.value) return;

  const { code, data } = await api.goods.detail(goodsId.value);
  if (code === '200') {
    // 转换图片字段
    data.image = convertStringToImages(data.image);
    data.sliderImage = convertStringToImages(data.sliderImage);
    data.flatPattern = convertStringToImages(data.flatPattern);

    Object.assign(basicFormData, data);
    basicSaved.value = true;
  }
};

// 初始化
const init = async () => {
  await getCategoryData();

  if (isEdit.value && goodsId.value) {
    await loadGoodsDetail();
  }
};

// 组件挂载
onMounted(() => {
  init();
});
</script>

<style scoped lang="scss">
.goods-edit {
  height: 100%;

  .el-header {
    height: auto;
    padding: 0;
  }

  .el-main {
    padding: 20px;
  }
}

.tab-placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
}

.tab-disabled-tip {
  font-size: 12px;
  color: var(--el-color-info);
  margin-left: 4px;
}

.is-error {
  color: var(--el-color-danger);
}

.text-success {
  color: var(--el-color-success);
}

.spec-card {
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
  }
}

.sku-wrap {
  width: 100%;
  border: 1px solid #d9d9d9;
  padding: 8px;
  box-sizing: border-box;

  .sku {
    width: 100%;
    min-height: 100px;

    .sku-key {
      width: 100%;
      height: 40px;
      color: var(--sa-subtitle);
      padding: 0 16px;
      background: var(--sa-table-header-bg);
      font-size: 14px;

      .sku-key-input {
        width: 120px;
      }

      .sku-key-icon {
        color: var(--el-color-primary);
      }
    }

    .sku-value {
      padding: 12px 0 0 30px;
      font-size: 14px;
      color: var(--sa-subtitle);

      .sku-value-title {
        height: 32px;
      }

      .sku-value-box {
        position: relative;
        margin-right: 24px;

        .sku-value-input {
          width: 104px;
        }

        .sku-value-icon {
          position: absolute;
          right: -8px;
          top: -8px;
          width: 16px;
          height: 16px;
          color: var(--el-color-primary);
        }
      }

      .sku-value-add {
        width: 104px;
        height: 32px;
        font-size: 14px;
        color: var(--el-color-primary);
      }
    }
  }

  .sku-tools {
    width: 100%;
    height: 40px;
    color: #434343;
    padding-left: 16px;
    background: var(--sa-table-header-bg);
    font-size: 12px;
  }
}

.sku-table-wrap {
  width: 100%;
  overflow: auto;
  margin-top: 16px;

  .sku-table {
    width: 100%;
    border: 1px solid var(--sa-border);

    tbody {
      font-size: 12px;
    }

    th {
      font-size: 12px;
      color: var(--subtitle);
      height: 32px;
      line-height: 1;
      padding-left: 12px;
      box-sizing: border-box;
      text-align: left;
    }

    td {
      min-width: 88px;
      padding: 0 10px;
      height: 40px;
      box-sizing: border-box;

      &.image {
        min-width: 48px;
      }

      &.stock {
        min-width: 138px;
      }

      &.stock_warning {
        min-width: 168px;
      }

      &.sn {
        min-width: 116px;
      }
    }
  }
}

:deep(.el-tabs__header) {
  margin: 0;
}

:deep(.el-tabs__nav-wrap::after) {
  height: 1px;
}

:deep(.el-tabs__item) {
  padding: 0 20px;
  font-size: 14px;
}

:deep(.el-tabs__nav) {
  border: none;
}

.form-tip {
  font-size: 12px;
  color: var(--el-color-info);
  margin-top: 4px;
  line-height: 1.4;
}

.mt-1px {
  margin-top: 1px;
}

/* 必填项样式 */
.required {
  color: #f56c6c;
  margin-right: 4px;
}

/* 错误状态样式 */
.is-error .el-input__wrapper {
  border-color: #f56c6c !important;
  box-shadow: 0 0 0 1px #f56c6c inset !important;
}

.warning-title {
  font-size: 12px;
  color: #909399;
}

.th-center {
  text-align: center;
}
</style>
