<!-- 编辑弹窗 -->
<template>
  <a-drawer
    width="70%"
    :visible="visible"
    :maskClosable="false"
    :maxable="maxable"
    :title="isUpdate ? '编辑商品' : '添加商品'"
    :body-style="{ paddingBottom: '28px' }"
    @update:visible="updateVisible"
    @ok="save"
  >
    <template #extra>
      <a-button type="primary" style="margin-right: 8px" @click="save">保存</a-button>
    </template>
    <a-form
      ref="formRef"
      :model="form"
      :rules="rules"
      :label-col="styleResponsive ? { md: 3, sm: 5, xs: 24 } : { flex: '90px' }"
      :wrapper-col="
        styleResponsive ? { md: 24, sm: 24, xs: 24 } : { flex: '1' }
      "
    >
      <a-tabs type="card" v-model:active-key="active" @change="onChange">
        <a-tab-pane tab="基本信息" key="base">
<!--          <a-form-item label="商品ID" name="goodsId">-->
<!--            {{ form.goodsId }}-->
<!--          </a-form-item>-->
          <a-form-item label="商品分类" name="categoryId">
            <a-tree-select
              allow-clear
              :tree-data="navigationList"
              tree-default-expand-all
              style="width: 320px"
              placeholder="请选择分类"
              :value="form.categoryId || undefined"
              :listHeight="700"
              :dropdown-style="{ overflow: 'auto' }"
              @update:value="(value?: number) => (form.categoryId = value)"
              @change="onCategoryId"
            />
          </a-form-item>
          <a-form-item label="商品名称" name="name">
            <a-input
              allow-clear
              style="width: 558px"
              placeholder="请输入商品名称"
              v-model:value="form.name"
            />
          </a-form-item>
          <a-form-item label="商品卖点" name="comments">
            <a-textarea
              :rows="1"
              :maxlength="100"
              style="width: 558px"
              show-count
              placeholder="此款商品美观大方 性价比较高 不容错过"
              v-model:value="form.comments"
            />
          </a-form-item>
          <a-form-item label="单位名称" name="unitName">
            <a-input
              allow-clear
              style="width: 240px"
              placeholder="单位名称，如(个)"
              v-model:value="form.unitName"
            />
          </a-form-item>
          <a-form-item label="商品价格" name="price">
            <a-space>
              <a-input-number
                :placeholder="`商品价格`"
                style="width: 240px"
                :min="0.01"
                v-model:value="form.price"
              />
            </a-space>
          </a-form-item>
          <a-form-item label="市场价" name="salePrice">
            <a-input-number
              :placeholder="`市场价`"
              style="width: 240px"
              :min="0.01"
              v-model:value="form.salePrice"
            />
          </a-form-item>
          <a-form-item label="会员价" name="originPrice">
            <a-input-number
              :placeholder="`会员价`"
              style="width: 240px"
              :min="0.01"
              v-model:value="form.dealerPrice"
            />
          </a-form-item>
          <a-form-item label="套餐价格" name="originPrice">
            <a-input-number
              :placeholder="`套餐价格`"
              style="width: 240px"
              :min="0.01"
              v-model:value="form.buyingPrice"
            />
          </a-form-item>
          <a-form-item label="运费模板" v-if="!merchantId">
            <a-select
              v-model:value="form.expressTemplateId"
              style="width: 240px"
            >
              <a-select-option
                v-for="(item, index) in expressTemplateList"
                :key="index"
                :value="item.id"
              >{{ item.title }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="商品图片(400x400)" name="image">
            <!--            <SelectFile-->
            <!--              :placeholder="`请选择视频文件`"-->
            <!--              :limit="1"-->
            <!--              :data="images"-->
            <!--              @done="chooseImage"-->
            <!--              @del="onDeleteItem"-->
            <!--            />-->
            <a-image
              width="100px"
              height="100px"
              v-if="form.image"
              :src="form.image"
              style="margin-right: 10px"
            />
            <a-upload
              :show-upload-list="false"
              :customRequest="onUploadImage"
              ref="imageRef"
            >
              <a-button class="ele-btn-icon">
                <template #icon>
                  <UploadOutlined/>
                </template>
                <span>上传图标</span>
              </a-button>
            </a-upload>
            <div class="ele-text-placeholder">
              支持上传视频（mp4格式），视频时长不超过60秒，视频大小不超过200M。
            </div>
          </a-form-item>
          <a-form-item label="轮播图" name="files">
            <div class="flex flex-wrap justify-start items-start">
              <div
                v-for="(item, index) in files"
                :key="index"
                style="margin-right: 10px; margin-bottom: 10px"
                class="relative"
              >
                <img style="width: 100px; height: 100px" :src="item.url"/>
                <div
                  class="absolute right-0 top-0 w-6 h-6 bg-red-400 flex justify-center items-center rounded-bl-lg"
                  @click="onDeleteFile(index)"
                >
                  <delete-outlined style="color: white"/>
                </div>
              </div>
            </div>
            <a-upload
              :show-upload-list="false"
              :customRequest="onUploadSwiper"
              multiple
              :max-count="9"
              ref="swiperRef"
            >
              <a-button class="ele-btn-icon">
                <template #icon>
                  <UploadOutlined/>
                </template>
                <span>上传轮播图</span>
              </a-button>
            </a-upload>
          </a-form-item>
          <a-form-item label="状态" name="status">
            <a-radio-group v-model:value="form.status">
              <a-radio :value="0">上架</a-radio>
              <a-radio :value="1">下架</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-tab-pane>
        <a-tab-pane tab="商品详情" key="content">
          <!-- Markdown 编辑器 -->
          <MdEditor
            v-model="content"
            :disabled="disabled"
            height="650px"
            placeholder="支持 Markdown 语法，可直接粘贴或拖拽图片..."
            :toolbars="markdownToolbars"
            :onUploadImg="onMarkdownUploadImg"
          />
          <div class="file-selector-tip">
            💡 提示：支持 Markdown 语法，可直接拖拽上传图片，也可以使用工具栏按钮从文件库选择图片
          </div>
        </a-tab-pane>
        <a-tab-pane tab="商品规格" key="spec">
          <a-form-item label="规格类型" name="specs">
            <a-space>
              <a-radio-group v-model:value="form.specs">
                <a-radio :value="0">单规格</a-radio>
                <a-radio :value="1">多规格</a-radio>
              </a-radio-group>
            </a-space>
          </a-form-item>
          <a-form-item name="multipleSpec" v-if="form.specs == 1">
            <div class="w-[300px] ml-10 flex items-center">
              <SelectSpec
                placeholder="选择规格"
                :width="130"
                v-model:value="form.specName"
                @done="onSpec"
              />
              <a-button type="link" size="small" @click="openSpecManage">
                <template #icon><SettingOutlined /></template>
                规格管理
              </a-button>
            </div>
          </a-form-item>
          <a-form-item name="specValue" v-if="form.specs == 1">
            <a-space direction="vertical" class="ml-[40px]">
              <template v-for="(item, index) in spec" :key="index">
                <div
                  class="text-left flex items-center leading-10 text-gray-400"
                >
                  <div class="mr-2">{{ item.value }} :</div>
                  <CloseCircleOutlined
                    class="cursor-pointer"
                    @click="onClose(index)"
                  />
                </div>
                <ele-edit-tag
                  v-model:data="item.detail"
                  size="middle"
                  shape="round"
                />
              </template>
              <a-card class="ml-[40px]" v-if="showSpecForm">
                <a-form-item name="name">
                  <a-input
                    allow-clear
                    placeholder="请输入规格，如：颜色"
                    v-model:value="name"
                  />
                </a-form-item>
                <a-form-item name="value">
                  <a-input
                    allow-clear
                    placeholder="请输入规格值，如：红色"
                    v-model:value="value"
                  />
                </a-form-item>
                <a-space>
                  <a-button type="primary" @click="addSpecValue">确定</a-button>
                  <a-button @click="openSpecForm">取消</a-button>
                </a-space>
              </a-card>
              <a-space>
                <a-button type="primary" class="mt-5" @click="openSpecForm"
                >添加新规格
                </a-button>
                <a-button type="primary" class="mt-5" @click="generateSku" v-if="spec.length > 0"
                >生成SKU
                </a-button>
                <a-tooltip title="方案1（推荐）：编辑旧商品时，重新点击此按钮即可自动将规格数据转换为新格式显示">
                  <InfoCircleOutlined class="mt-5 ml-1 text-gray-400 cursor-help" />
                </a-tooltip>
              </a-space>
            </a-space>
          </a-form-item>
          <a-form-item name="oneSpec" v-if="form.specs == 1">
            <div class="w-full">
              <!-- 批量设置 -->
              <div class="batch-set-bar flex items-center gap-3 mb-4 p-3 bg-gray-50 rounded">
                <span class="text-sm font-medium text-gray-600 whitespace-nowrap">批量设置：</span>
                <a-input-number
                  v-model:value="batchPrice"
                  :precision="2"
                  :min="0"
                  style="width: 110px"
                  placeholder="商品价格"
                />
                <a-input-number
                  v-model:value="batchSalePrice"
                  :precision="2"
                  :min="0"
                  style="width: 110px"
                  placeholder="划线价格"
                />
                <a-input-number
                  v-model:value="batchBuyingPrice"
                  :precision="2"
                  :min="0"
                  style="width: 110px"
                  placeholder="会员价"
                />
                <a-input-number
                  v-model:value="batchStock"
                  :min="0"
                  style="width: 100px"
                  placeholder="库存"
                />
                <a-input
                  v-model:value="batchSkuNo"
                  style="width: 120px"
                  placeholder="SKU编码"
                />
                <a-button type="primary" @click="batchApply">立即设置</a-button>
              </div>
              <div class="sku-table">
                <a-table
                  :pagination="false"
                  :dataSource="skuList"
                  :columns="columns"
                  :scroll="{ y: 500 }"
                >
                  <template #bodyCell="{ record, column, index }">
                    <template v-if="column.key === 'line'">
                      {{ index + 1 }}
                    </template>
                    <template v-if="column.key === 'image'">
                      <SelectFile
                        :placeholder="`请选择商品图片`"
                        :limit="1"
                        :data="record.images || []"
                        :index="index"
                        @done="chooseSkuImage"
                        @del="onDeleteSkuItem"
                      />
                    </template>
                    <template v-if="column.key === 'price'">
                      <a-input
                        :placeholder="`成本价`"
                        v-model:value="skuList[index].price"
                      />
                    </template>
                    <template v-if="column.key === 'salePrice'">
                      <a-input
                        :placeholder="`市场价`"
                        v-model:value="record.salePrice"
                      />
                    </template>
                    <template v-if="column.key === 'buyingPrice'">
                      <a-input
                        :placeholder="`会员价`"
                        v-model:value="record.buyingPrice"
                      />
                    </template>
                    <template v-if="column.key === 'stock'">
                      <a-input
                        :placeholder="`库存`"
                        v-model:value="record.stock"
                      />
                    </template>
                    <template v-if="column.key === 'skuNo'">
                      <a-input
                        :placeholder="`编码`"
                        v-model:value="record.skuNo"
                      />
                    </template>
                  </template>
                </a-table>
              </div>
            </div>
          </a-form-item>
        </a-tab-pane>
        <a-tab-pane tab="营销设置" key="coupon">
          <a-form-item label="商品重量" name="goodsWeight">
            <a-input
              allow-clear
              style="width: 250px"
              placeholder="请输入商品重量"
              v-model:value="form.goodsWeight"
            />
          </a-form-item>
          <a-form-item label="销量" name="sales">
            <a-input-number
              allow-clear
              style="width: 250px"
              placeholder="请输入销量"
              v-model:value="form.sales"
            />
          </a-form-item>
          <a-form-item label="库存" name="stock">
            <a-input-number
              allow-clear
              style="width: 250px"
              placeholder="请输入库存"
              v-model:value="form.stock"
            />
          </a-form-item>
          <a-form-item label="获取积分" name="gainIntegral">
            <a-input-number
              :placeholder="`消费获取的积分`"
              style="width: 250px"
              v-model:value="form.gainIntegral"
            />
          </a-form-item>
          <a-form-item label="库存计算方式" name="deductStockType">
            <a-radio-group v-model:value="form.deductStockType">
              <a-radio :value="20">付款减库存</a-radio>
              <a-radio :value="10">下单减库存</a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item label="货架" name="position">
            <a-input
              allow-clear
              style="width: 250px"
              placeholder="请输入货架"
              v-model:value="form.position"
            />
          </a-form-item>
          <a-form-item label="排序号" name="sortNumber">
            <a-input-number
              :min="0"
              :max="9999"
              style="width: 250px"
              placeholder="请输入排序号"
              v-model:value="form.sortNumber"
            />
          </a-form-item>
          <a-form-item label="是否可以快递配送">
            <a-switch
              size="small"
              v-model:checked="form.canExpress"
              :checked-value="1"
              :un-checked-value="0"
            />
          </a-form-item>
          <a-form-item label="是否新品">
            <a-switch
              size="small"
              v-model:checked="form.isNew"
              :checked-value="1"
              :un-checked-value="0"
            />
          </a-form-item>
          <a-form-item label="活动方式" name="activityType">
            <a-radio-group v-model:value="form.activityType">
              <a-radio :value="0">全平台（新老用户均可）</a-radio>
              <a-radio :value="1">新用户专享（仅新用户可购）</a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item label="配送方式" name="deliveryMode">
            <a-radio-group v-model:value="form.deliveryMode">
              <a-radio :value="0">送上门</a-radio>
              <a-radio :value="1">限自提</a-radio>
            </a-radio-group>
          </a-form-item>
<!--          <a-form-item label="是否开启分红功能" v-if="!merchantId">-->
<!--            <a-switch-->
<!--              size="small"-->
<!--              v-model:checked="form.commissionRole"-->
<!--              :checked-value="1"-->
<!--              :un-checked-value="0"-->
<!--            />-->
<!--          </a-form-item>-->
<!--          <a-form-item label="角色分红配置" v-if="form.commissionRole === 1">-->
<!--            <a-space>-->
<!--              <a-input-->
<!--                v-model:value="form.goodsRoleCommission[index].amount"-->
<!--                v-for="(item, index) in form.goodsRoleCommission"-->
<!--                :key="index"-->
<!--              >-->
<!--                <template #addonBefore>{{ item.roleName }}</template>-->
<!--                <template #addonAfter>元</template>-->
<!--              </a-input>-->
<!--            </a-space>-->
<!--          </a-form-item>-->

          <a-divider orientation="left">分销设置</a-divider>
          <a-form-item label="是否开启分销" name="isOpenCommission">
            <a-switch
              size="small"
              v-model:checked="form.isOpenCommission"
              :checked-value="1"
              :un-checked-value="0"
            />
          </a-form-item>
          <template v-if="form.isOpenCommission === 1">
            <a-form-item label="分佣类型" name="commissionType">
              <a-radio-group v-model:value="form.commissionType">
                <a-radio :value="10">固定金额</a-radio>
                <a-radio :value="20">百分比</a-radio>
              </a-radio-group>
            </a-form-item>
            <a-form-item
              :label="form.commissionType === 20 ? '一级佣金(%)' : '一级佣金(元)'"
              name="firstMoney"
            >
              <a-input-number
                v-model:value="form.firstMoney"
                :min="0"
                :max="form.commissionType === 20 ? 100 : undefined"
                :precision="2"
                style="width: 250px"
                :placeholder="
                  form.commissionType === 20
                    ? '请输入一级佣金百分比'
                    : '请输入一级佣金金额'
                "
              >
                <template #addonAfter>{{
                    form.commissionType === 20 ? '%' : '元'
                  }}
                </template>
              </a-input-number>
            </a-form-item>
            <a-form-item
              :label="form.commissionType === 20 ? '二级佣金(%)' : '二级佣金(元)'"
              name="secondMoney"
            >
              <a-input-number
                v-model:value="form.secondMoney"
                :min="0"
                :max="form.commissionType === 20 ? 100 : undefined"
                :precision="2"
                style="width: 250px"
                :placeholder="
                  form.commissionType === 20
                    ? '请输入二级佣金百分比'
                    : '请输入二级佣金金额'
                "
              >
                <template #addonAfter>{{
                    form.commissionType === 20 ? '%' : '元'
                  }}
                </template>
              </a-input-number>
            </a-form-item>
            <!--            <a-form-item-->
            <!--              :label="form.commissionType === 20 ? '三级佣金(%)' : '三级佣金(元)'"-->
            <!--              name="thirdMoney"-->
            <!--            >-->
            <!--              <a-input-number-->
            <!--                v-model:value="form.thirdMoney"-->
            <!--                :min="0"-->
            <!--                :max="form.commissionType === 20 ? 100 : undefined"-->
            <!--                :precision="2"-->
            <!--                style="width: 250px"-->
            <!--                :placeholder="-->
            <!--                  form.commissionType === 20-->
            <!--                    ? '请输入三级佣金百分比'-->
            <!--                    : '请输入三级佣金金额'-->
            <!--                "-->
            <!--              >-->
            <!--                <template #addonAfter>{{-->
            <!--                  form.commissionType === 20 ? '%' : '元'-->
            <!--                }}</template>-->
            <!--              </a-input-number>-->
            <!--            </a-form-item>-->
            <a-form-item label="一级分润" name="firstDividend">
              <a-input-number
                v-model:value="form.firstDividend"
                :min="0"
                :max="form.commissionType === 20 ? 100 : undefined"
                :precision="2"
                style="width: 250px"
                placeholder="请输入一级分润"
              >
                <template #addonAfter>{{
                    form.commissionType === 20 ? '%' : '元'
                  }}
                </template>
              </a-input-number>
            </a-form-item>
            <a-form-item label="二级分润" name="secondDividend">
              <a-input-number
                v-model:value="form.secondDividend"
                :min="0"
                :max="form.commissionType === 20 ? 100 : undefined"
                :precision="2"
                style="width: 250px"
                placeholder="请输入二级分润"
              >
                <template #addonAfter>{{
                    form.commissionType === 20 ? '%' : '元'
                  }}
                </template>
              </a-input-number>
            </a-form-item>
            <a-form-item label="配送费奖金" name="deliveryMoney">
              <a-input-number
                v-model:value="form.deliveryMoney"
                :min="0"
                :max="20"
                :precision="2"
                :step="0.01"
                style="width: 250px"
                placeholder="请输入配送费奖金"
              >
                <template #addonAfter>元</template>
              </a-input-number>
            </a-form-item>
          </template>
          <template v-if="form.type === 1 || merchantId">
            <a-form-item label="可用日期">
              <a-select v-model:value="canUseDate" mode="multiple">
                <a-select-option
                  v-for="(item, index) in dayList"
                  :key="index"
                  :value="index"
                >{{ item }}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="服务保障">
              <div>
                <a-space>
                  <a-tag
                    v-for="item in ensureTag"
                    :key="item"
                    closable
                    @close="onDeleteEnsureTag(item)"
                  >{{ item }}
                  </a-tag>
                  <a-input v-model:value="ensureTagItem"></a-input>
                  <a-button @click="addEnsureTag()" :disabled="!ensureTagItem"
                  >添加
                  </a-button
                  >
                </a-space>
              </div>
              <div class="mt-2">
                <a-space>
                  <span @click="addEnsureTag('免预约')">免预约</span>
                  <span @click="addEnsureTag('随时退')">随时退</span>
                  <span @click="addEnsureTag('过期自动退')">过期自动退</span>
                </a-space>
              </div>
            </a-form-item>
            <a-form-item label="有效期限">
              <a-input-number
                :min="0"
                :max="9999"
                style="width: 250px"
                placeholder="请输入有效期限"
                v-model:value="form.expiredDay"
              />
            </a-form-item>
          </template>
        </a-tab-pane>
      </a-tabs>
    </a-form>
  </a-drawer>
  <!-- 文件库选择弹窗 -->
  <SelectData
    v-model:visible="showFileSelector"
    title="选择图片"
    type="image"
    class="file-selector-modal"
    @done="onFileSelected"
  />

  <!-- 视频库选择弹窗 -->
  <SelectData
    v-model:visible="showVideoSelector"
    title="选择视频"
    type="video"
    class="file-selector-modal"
    @done="onVideoSelected"
  />

</template>

<script lang="ts" setup>
import {
  CloseCircleOutlined,
  DeleteOutlined,
  InfoCircleOutlined,
  SettingOutlined,
  UploadOutlined
} from '@ant-design/icons-vue';
import {ref, reactive, watch, nextTick} from 'vue';
import {useRouter} from 'vue-router';
import {Form, message} from 'ant-design-vue';
import {assignObject, messageLoading, uuid} from 'ele-admin-pro';
import {addShopGoods, updateShopGoods} from '@/api/shop/shopGoods';
import {ShopGoods} from '@/api/shop/shopGoods/model';
import {useThemeStore} from '@/store/modules/theme';
import {storeToRefs} from 'pinia';
import {ItemType} from 'ele-admin-pro/es/ele-image-upload/types';
import {FormInstance, RuleObject} from 'ant-design-vue/es/form';
import {FileRecord} from '@/api/system/file/model';
import {ShopMerchant} from '@/api/shop/shopMerchant/model';
import {uploadFile, uploadOss} from '@/api/system/file';
import { MdEditor } from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';
import 'md-editor-v3/lib/preview.css';
import {ShopSpec} from '@/api/shop/shopSpec/model';
import {ShopGoodsSku} from '@/api/shop/shopGoodsSku/model';
import {ShopGoodsSpec} from '@/api/shop/shopGoodsSpec/model';
import {listShopGoodsSku} from '@/api/shop/shopGoodsSku';
import {listShopGoodsSpec} from '@/api/shop/shopGoodsSpec';
import {getShopSpec} from '@/api/shop/shopSpec';
import {ShopGoodsCategory} from '@/api/shop/shopGoodsCategory/model';
import {getMerchantId} from '@/utils/merchant';
import {ShopExpressTemplate} from '@/api/shop/shopExpressTemplate/model';
import {listShopExpressTemplate} from '@/api/shop/shopExpressTemplate';
import {listShopCommissionRole} from '@/api/shop/shopCommissionRole';
import {listShopGoodsRoleCommission} from '@/api/shop/shopGoodsRoleCommission';
import SelectData from "@/components/SelectFile/components/select-data.vue";

// 是否是修改
const isUpdate = ref(false);
const useForm = Form.useForm;
// 是否开启响应式布局
const themeStore = useThemeStore();
const {styleResponsive} = storeToRefs(themeStore);

const props = defineProps<{
  // 弹窗是否打开
  visible: boolean;
  // 修改回显的数据
  data?: ShopGoods | null;
  // 分类数据
  navigationList?: ShopGoodsCategory[];
}>();

const emit = defineEmits<{
  (e: 'done'): void;
  (e: 'update:visible', visible: boolean): void;
}>();

// 提交状态
const loading = ref(false);
// 是否显示最大化切换按钮
const maxable = ref(true);
// 表格选中数据
const formRef = ref<FormInstance | null>(null);
const images = ref<ItemType[]>([]);
const content = ref('');
const disabled = ref(false);
// 当前选项卡
const active = ref('base');

// 规格数据结构：{ value: 规格名, detail: 规格值数组 }
interface SpecItem {
  value: string;
  detail: string[];
}

/**
 * 统一规范化 detail 为数组
 */
const normalizeDetail = (detail: any): string[] => {
  if (Array.isArray(detail)) {
    return detail.map(String);
  }
  if (typeof detail === 'string') {
    return detail.split(',').map(s => s.trim()).filter(Boolean);
  }
  return [];
};

/**
 * 统一解析规格值，支持多种存储格式
 * @param specValue 规格值（JSON字符串或已解析对象）
 * @returns 统一格式的 SpecItem[]
 */
const parseSpecValue = (specValue: string | any): SpecItem[] => {
  if (!specValue) return [];
  try {
    let parsed: any;
    if (typeof specValue === 'string') {
      parsed = JSON.parse(specValue);
      // 处理双层编码：parse 后仍是字符串（说明原始值是 "=\"...\" 格式）
      if (typeof parsed === 'string') {
        try { parsed = JSON.parse(parsed); } catch (_) { /* ignore */ }
      }
    } else {
      parsed = specValue;
    }

    // 标准数组格式: [{value: "颜色", detail: ["红色"]}]
    if (Array.isArray(parsed)) {
      return parsed
        .filter((item: any) => item && (item.value !== undefined || typeof item === 'string') && (Array.isArray(item.detail) || typeof item.detail === 'string'))
        .map((item: any) => {
          if (typeof item === 'string') {
            return { value: '', detail: [item] };
          }
          return {
            value: item.value !== undefined ? String(item.value) : '',
            detail: normalizeDetail(item.detail)
          };
        })
        .filter((item: SpecItem) => item.detail.length > 0);
    }

    // 对象格式: {"颜色": ["红色", "蓝色"], "尺码": ["S", "M"]}
    if (typeof parsed === 'object' && parsed !== null && !Array.isArray(parsed)) {
      return Object.entries(parsed).map(([key, value]: [string, any]) => ({
        value: key,
        detail: normalizeDetail(value)
      }));
    }

    // 单个字符串规格值（旧格式）：specValue = "\"红色\""
    if (typeof parsed === 'string' && parsed.trim()) {
      return [{ value: '', detail: [parsed.trim()] }];
    }

    return [];
  } catch (e) {
    console.error('解析规格值失败:', e, '原始值:', specValue);
    return [];
  }
};

/**
 * 将后端多条 ShopGoodsSpec 记录合并为前端 spec.value 格式
 * 每条记录 specValue 为简单字符串，按 specName 分组
 */
const mergeGoodsSpecs = (goodsSpecs: ShopGoodsSpec[]): SpecItem[] => {
  if (!goodsSpecs || goodsSpecs.length === 0) return [];
  const map = new Map<string, string[]>();
  goodsSpecs.forEach((gs) => {
    const name = gs.specName || '';
    let val = gs.specValue || '';
    // 去掉 JSON 引号：数据库存的是 "\"红色\""，需要解析成 红色
    try { val = JSON.parse(val); } catch (_) { /* 不是 JSON 格式，保持原样 */ }
    if (!map.has(name)) {
      map.set(name, []);
    }
    if (val) map.get(name)!.push(val);
  });
  return Array.from(map.entries()).map(([value, detail]) => ({ value, detail }));
};

const spec = ref<SpecItem[]>([]);
const showSpecForm = ref(false);
const name = ref();
const value = ref();
const skuList = ref<ShopGoodsSku[]>([]);
const files = ref<ItemType[]>([]);
const goodsSpec = ref<ShopGoodsSpec>();
const category = ref<string[]>([]);

// 批量设置
const batchPrice = ref<number | undefined>(undefined);
const batchSalePrice = ref<number | undefined>(undefined);
const batchBuyingPrice = ref<number | undefined>(undefined);
const batchStock = ref<number | undefined>(undefined);
const batchSkuNo = ref<string>('');
const takeaway = ref<ShopGoodsCategory[]>([]);
const merchantId = getMerchantId();

const router = useRouter();
const openSpecManage = () => {
  router.push('/shop/shopSpec');
};

const columns = [
  {
    title: '图片',
    dataIndex: 'image',
    key: 'image',
    align: 'center'
  },
  {
    title: 'SKU',
    dataIndex: 'sku',
    align: 'center'
  },
  {
    title: '商品价格',
    dataIndex: 'price',
    key: 'price',
    align: 'center'
  },
  {
    title: '会员价',
    dataIndex: 'buyingPrice',
    key: 'buyingPrice',
    align: 'center'
  },
  {
    title: '商品编号',
    dataIndex: 'skuNo',
    key: 'skuNo',
    align: 'center'
  }
];

const dayList = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
const canUseDate = ref([]);
const ensureTag = ref<string[]>([]);
const ensureTagItem = ref('');
const addEnsureTag = (item = '') => {
  const tag = item || ensureTagItem.value;
  if (ensureTag.value.findIndex((item) => item === tag) !== -1)
    return message.error('请勿重复添加');
  ensureTag.value.push(tag);
  ensureTagItem.value = '';
};

// 选择栏目
const onCategoryId = (id: number) => {
  form.categoryId = id;
  // 💾 在新增模式下，用户手动选择栏目时也保存到本地存储
  if (!isUpdate.value && id) {
    saveLastCategory(id);
  }
};

// �💾 保存和恢复分类选择的功能
const LAST_CATEGORY_KEY = 'shop_goods_last_category';

// 保存最后选择的分类到本地存储
const saveLastCategory = (categoryId: number | undefined) => {
  if (categoryId) {
    localStorage.setItem(LAST_CATEGORY_KEY, categoryId.toString());
  }
};

// 从本地存储获取最后选择的分类
const getLastCategory = (): number | undefined => {
  const saved = localStorage.getItem(LAST_CATEGORY_KEY);
  return saved ? parseInt(saved) : undefined;
};

const onDeleteEnsureTag = (tag: string) => {
  const index = ensureTag.value.findIndex((item) => item === tag);
  ensureTag.value.splice(index, 1);
};

// 从文件库选择图片的回调
const onFileSelected = (data: FileRecord) => {
  if (fileSelectCallback.value) {
    // 使用文件的完整URL，确保有值
    const imageUrl = data.url || data.path || '';
    if (imageUrl) {
      fileSelectCallback.value(imageUrl);
      message.success('图片插入成功');
    }
    fileSelectCallback.value = null;
  }
  showFileSelector.value = false;
};

// 从视频库选择视频的回调
const onVideoSelected = (data: FileRecord) => {
  if (videoSelectCallback.value) {
    // 使用文件的完整URL，确保有值
    const videoUrl = data.path || data.downloadUrl || '';
    if (videoUrl) {
      videoSelectCallback.value(videoUrl);
      message.success('视频插入成功');
    }
    videoSelectCallback.value = null;
  }
  showVideoSelector.value = false;
};

// 🎨 智能一键排版 - 人性化设计
const handleAutoFormat = (editor: any) => {
  try {
    // 1. 检查内容
    const content = editor.getContent();
    if (!content || content.trim() === '' || content === '<p><br></p>' || content === '<p></p>') {
      message.warning({
        content: '📝 请先输入一些内容，然后再使用一键排版功能',
        duration: 3
      });
      return;
    }

    // 2. 显示友好的加载提示
    const loadingMsg = message.loading({
      content: '✨ 正在为您的文章进行智能排版优化...',
      duration: 0
    });

    // 3. 延迟执行，让用户看到加载效果
    setTimeout(() => {
      try {
        const optimizedContent = smartFormatContent(content);
        editor.setContent(optimizedContent);

        loadingMsg();

        // 4. 显示成功提示
        message.success({
          content: '🎉 排版优化完成！您的文章现在看起来更专业了',
          duration: 4
        });

        // 5. 可选：显示优化统计
        showOptimizationStats(content, optimizedContent);

      } catch (error) {
        loadingMsg();
        console.error('排版优化失败:', error);
        message.error({
          content: '😅 排版优化遇到了问题，请检查文章内容后重试',
          duration: 4
        });
      }
    }, 800); // 给用户一个良好的反馈体验

  } catch (error) {
    console.error('一键排版功能错误:', error);
    message.error({
      content: '🔧 功能暂时不可用，请刷新页面后重试',
      duration: 4
    });
  }
};

// 📊 显示优化统计信息
const showOptimizationStats = (originalContent: string, optimizedContent: string) => {
  const stats = analyzeOptimization(originalContent, optimizedContent);

  if (stats.optimizations.length > 0) {
    message.info({
      content: `📈 本次优化: ${stats.optimizations.join('、')}`,
      duration: 6
    });
  }
};

// 🔍 分析优化效果
const analyzeOptimization = (original: string, optimized: string) => {
  const optimizations: string[] = [];

  // 检查各种优化项目
  if ((optimized.match(/<h[1-6][^>]*style/g) || []).length > (original.match(/<h[1-6][^>]*style/g) || []).length) {
    optimizations.push('标题样式');
  }

  if ((optimized.match(/<p[^>]*style/g) || []).length > (original.match(/<p[^>]*style/g) || []).length) {
    optimizations.push('段落格式');
  }

  if ((optimized.match(/<img[^>]*style/g) || []).length > (original.match(/<img[^>]*style/g) || []).length) {
    optimizations.push('图片布局');
  }

  if ((optimized.match(/<ul[^>]*style|<ol[^>]*style/g) || []).length > (original.match(/<ul[^>]*style|<ol[^>]*style/g) || []).length) {
    optimizations.push('列表格式');
  }

  return {optimizations};
};

// 🎨 智能排版核心函数 - 简单而强大
const smartFormatContent = (content: string): string => {
  let optimized = content;

  // 1. 🏷️ 标题优化 - 让标题更有层次感
  optimized = optimized.replace(/<h1([^>]*)>/g, '<h1$1 style="font-size: 28px; font-weight: 700; margin: 24px 0 16px 0; line-height: 1.3; color: #1a1a1a; border-bottom: 2px solid #e8e8e8; padding-bottom: 10px;">');
  optimized = optimized.replace(/<h2([^>]*)>/g, '<h2$1 style="font-size: 24px; font-weight: 600; margin: 20px 0 14px 0; line-height: 1.4; color: #2c2c2c;">');
  optimized = optimized.replace(/<h3([^>]*)>/g, '<h3$1 style="font-size: 20px; font-weight: 600; margin: 18px 0 12px 0; line-height: 1.4; color: #3c3c3c;">');
  optimized = optimized.replace(/<h4([^>]*)>/g, '<h4$1 style="font-size: 16px; font-weight: 600; margin: 14px 0 8px 0; line-height: 1.4; color: #4c4c4c;">');
  optimized = optimized.replace(/<h5([^>]*)>/g, '<h5$1 style="font-size: 14px; font-weight: 600; margin: 12px 0 6px 0; line-height: 1.4; color: #5c5c5c;">');
  optimized = optimized.replace(/<h6([^>]*)>/g, '<h6$1 style="font-size: 13px; font-weight: 600; margin: 10px 0 5px 0; line-height: 1.4; color: #6c6c6c;">');

  // 2. 📝 段落优化 - 让阅读更舒适
  optimized = optimized.replace(/<p([^>]*)>/g, (match, attrs) => {
    if (!attrs.includes('style=')) {
      return `<p${attrs} style="line-height: 1.8; margin: 16px 0; text-indent: 2em; color: #333;">`;
    }
    return match;
  });

  // 3. 🖼️ 图片优化 - 让图片更美观
  optimized = optimized.replace(/<img([^>]*?)>/g, (match, attrs) => {
    if (!attrs.includes('style=')) {
      const hasAlt = attrs.includes('alt=');
      return `<img${attrs} style="max-width: 100%; height: auto; margin: 20px auto; display: block; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.1);"${!hasAlt ? ' alt="图片"' : ''}>`;
    }
    return match;
  });

  // 4. 📋 列表优化 - 让列表更清晰
  optimized = optimized.replace(/<ul([^>]*)>/g, '<ul$1 style="margin: 16px 0; padding-left: 24px; line-height: 1.6;">');
  optimized = optimized.replace(/<ol([^>]*)>/g, '<ol$1 style="margin: 16px 0; padding-left: 24px; line-height: 1.6;">');
  optimized = optimized.replace(/<li([^>]*)>/g, '<li$1 style="margin: 8px 0; color: #333;">');

  // 5. 💬 引用优化 - 让引用更突出
  optimized = optimized.replace(/<blockquote([^>]*)>/g, '<blockquote$1 style="margin: 20px 0; padding: 16px 20px; border-left: 4px solid #1890ff; background: linear-gradient(90deg, #f6f8fa 0%, #ffffff 100%); font-style: italic; color: #555;">');

  // 6. 💻 代码优化 - 让代码更专业
  optimized = optimized.replace(/<code([^>]*)>/g, '<code$1 style="background-color: #f1f3f4; padding: 2px 6px; border-radius: 4px; font-family: \'Fira Code\', Consolas, Monaco, monospace; font-size: 0.9em; color: #d73a49;">');
  optimized = optimized.replace(/<pre([^>]*)>/g, '<pre$1 style="margin: 20px 0; padding: 20px; background-color: #f8f9fa; border: 1px solid #e9ecef; border-radius: 8px; overflow-x: auto; font-family: \'Fira Code\', Consolas, Monaco, monospace; font-size: 14px; line-height: 1.5;">');

  // 7. 📊 表格优化 - 让表格更美观
  optimized = optimized.replace(/<table([^>]*)>/g, '<table$1 style="width: 100%; border-collapse: collapse; margin: 20px 0; box-shadow: 0 2px 8px rgba(0,0,0,0.1); border-radius: 8px; overflow: hidden;">');
  optimized = optimized.replace(/<th([^>]*)>/g, '<th$1 style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 12px; text-align: left; font-weight: 600;">');
  optimized = optimized.replace(/<td([^>]*)>/g, '<td$1 style="padding: 12px; border-bottom: 1px solid #eee; color: #333;">');

  // 8. 🔗 链接优化 - 让链接更友好
  optimized = optimized.replace(/<a([^>]*)>/g, '<a$1 style="color: #1890ff; text-decoration: none; border-bottom: 1px solid transparent; transition: border-bottom 0.2s ease;" onmouseover="this.style.borderBottom=\'1px solid #1890ff\'" onmouseout="this.style.borderBottom=\'1px solid transparent\'">');

  // 9. ➖ 分隔线优化 - 让分隔线更优雅
  optimized = optimized.replace(/<hr([^>]*)>/g, '<hr$1 style="border: none; height: 2px; background: linear-gradient(90deg, transparent, #e8e8e8, transparent); margin: 30px 0;">');

  // 10. 🧹 清理多余空白
  optimized = optimized.replace(/\s+/g, ' '); // 清理多余空格
  optimized = optimized.replace(/<p[^>]*>\s*<\/p>/g, ''); // 清理空段落
  optimized = optimized.replace(/(<\/[^>]+>)\s+(<[^>]+>)/g, '$1$2'); // 清理标签间空白

  return optimized;
};

// 🔄 段落首行缩进切换功能
const toggleParagraphIndent = (editor: any) => {
  try {
    const content = editor.getContent();

    if (!content || content.trim() === '' || content === '<p><br></p>' || content === '<p></p>') {
      message.warning({
        content: '📝 请先输入一些段落内容，然后再切换首行缩进',
        duration: 3
      });
      return;
    }

    // 检查当前是否有首行缩进
    const hasIndent = content.includes('text-indent: 2em') || content.includes('text-indent:2em');

    let newContent: string;
    let actionText: string;

    if (hasIndent) {
      // 移除首行缩进
      newContent = removeIndentFromParagraphs(content);
      actionText = '已移除段落首行缩进';
    } else {
      // 添加首行缩进
      newContent = addIndentToParagraphs(content);
      actionText = '已添加段落首行缩进';
    }

    editor.setContent(newContent);

    message.success({
      content: `📐 ${actionText}`,
      duration: 3
    });

  } catch (error) {
    console.error('首行缩进切换失败:', error);
    message.error({
      content: '🔧 首行缩进切换失败，请重试',
      duration: 3
    });
  }
};

// 为段落添加首行缩进
const addIndentToParagraphs = (content: string): string => {
  return content.replace(/<p([^>]*)>/g, (match, attrs) => {
    // 如果已经有 style 属性
    if (attrs.includes('style=')) {
      // 检查是否已经有 text-indent
      if (attrs.includes('text-indent')) {
        // 更新现有的 text-indent
        return match.replace(/text-indent:\s*[^;]+;?/g, 'text-indent: 2em;');
      } else {
        // 在现有 style 中添加 text-indent
        return match.replace(/style="([^"]*)"/, 'style="$1 text-indent: 2em;"');
      }
    } else {
      // 添加新的 style 属性
      return `<p${attrs} style="text-indent: 2em;">`;
    }
  });
};

// 从段落移除首行缩进
const removeIndentFromParagraphs = (content: string): string => {
  return content.replace(/<p([^>]*)>/g, (match, attrs) => {
    if (attrs.includes('text-indent')) {
      // 移除 text-indent 属性
      let newAttrs = attrs.replace(/text-indent:\s*[^;]+;?\s*/g, '');

      // 如果 style 属性变空了，移除整个 style 属性
      newAttrs = newAttrs.replace(/style="\s*"/g, '');
      newAttrs = newAttrs.replace(/style=''\s*/g, '');

      return `<p${newAttrs}>`;
    }
    return match;
  });
};

// 用户信息
const form = reactive<ShopGoods>({
  goodsId: undefined,
  type: 1,
  code: undefined,
  name: undefined,
  goodsName: undefined,
  image: undefined,
  video: undefined,
  content: undefined,
  canExpress: 1,
  unitName: '',
  categoryId: undefined,
  parentName: undefined,
  categoryName: undefined,
  specs: 0,
  commissionRole: 0,
  // 分销佣金（新字段，后端保持 snake_case）
  isOpenCommission: 0,
  commissionType: 10,
  firstMoney: 0,
  secondMoney: 0,
  thirdMoney: 0,
  firstDividend: 0,
  secondDividend: 0,
  deliveryMoney: 0,
  position: undefined,
  price: undefined,
  originPrice: undefined,
  salePrice: undefined,
  buyingPrice: undefined,
  dealerPrice: undefined,
  priceGift: undefined,
  dealerGift: undefined,
  priceGiftNum: undefined,
  priceGiftName: undefined,
  dealerGiftNum: undefined,
  files: undefined,
  sales: 0,
  isNew: 0,
  activityType: 0,
  deliveryMode: 0,
  gainIntegral: 0,
  goodsWeight: undefined,
  recommend: undefined,
  merchantId: undefined,
  merchantName: undefined,
  supplierMerchantId: undefined,
  supplierName: undefined,
  chainStorePrice: undefined,
  memberStorePrice: undefined,
  memberMarketPrice: undefined,
  chainStoreRate: undefined,
  memberStoreRate: undefined,
  memberMarketRate: undefined,
  memberStoreCommission: undefined,
  supplierCommission: undefined,
  coopCommission: undefined,
  expressTemplateId: undefined,
  canUseDate: undefined,
  ensureTag: undefined,
  expiredDay: undefined,
  stock: 1000,
  deductStockType: 20,
  isShow: undefined,
  status: 0,
  comments: '',
  sortNumber: 100,
  specName: '',
  goodsRoleCommission: []
});

/* 更新visible */
const updateVisible = (value: boolean) => {
  emit('update:visible', value);
};

// 表单验证规则
const rules = reactive({
  type: [
    {
      required: true,
      message: '请选择商品类型',
      type: 'number',
      trigger: 'blur'
    }
  ],
  image: [
    {
      required: true,
      message: '请上传图片',
      type: 'string',
      trigger: 'blur'
    }
  ],
  files: [
    {
      required: true,
      message: '请上传轮播图',
      type: 'string',
      trigger: 'blur',
      validator: async (_rule: RuleObject, value: string) => {
        if (form.files?.length == 0) {
          return Promise.reject('选择上传轮播图');
        }
        return Promise.resolve();
      }
    }
  ],
  specs: [
    {
      required: true,
      message: '请选择规格类型',
      type: 'number',
      trigger: 'blur'
    }
  ],
  price: [
    {
      required: true,
      message: '请填写会员价',
      type: 'number',
      trigger: 'blur'
    }
  ],
  salePrice: [
    {
      required: true,
      message: '请填写市场价',
      type: 'number',
      trigger: 'blur'
    }
  ],
  buyingPrice: [
    {
      required: true,
      message: '请填写会员店/总仓批发价',
      type: 'number',
      trigger: 'blur'
    }
  ],
  stock: [
    {
      required: true,
      message: '请填写商品库存',
      type: 'number',
      trigger: 'blur'
    }
  ],
  // supplierMerchantId: [
  //   {
  //     required: true,
  //     message: '请选择供应商',
  //     type: 'number',
  //     trigger: 'blur'
  //   }
  // ],
  // categoryId: [
  //   {
  //     required: true,
  //     type: 'string',
  //     message: '选择商品分类',
  //     trigger: 'blur',
  //     validator: async (_rule: RuleObject, value: string) => {
  //       if (!form.categoryId) {
  //         return Promise.reject('选择商品分类');
  //       }
  //       return Promise.resolve();
  //     }
  //   }
  // ],
  name: [
    {
      required: true,
      message: '请选择商品名称',
      type: 'string',
      trigger: 'blur'
    }
  ],
  goodsName: [
    {
      required: true,
      message: '请选择商品名称',
      type: 'string',
      trigger: 'blur'
    }
  ],
  sortNumber: [
    {
      required: true,
      message: '请输入排序号',
      type: 'number',
      trigger: 'blur'
    }
  ],
  chainStorePrice: [
    {
      required: true,
      message: '请输入供应价',
      type: 'number',
      trigger: 'blur'
    }
  ],
  memberStorePrice: [
    {
      required: true,
      message: '请输入会员店价格',
      type: 'number',
      trigger: 'blur'
    }
  ],
  memberMarketPrice: [
    {
      required: true,
      message: '请输入会员超市价格',
      type: 'number',
      trigger: 'blur'
    }
  ],
  memberStoreCommission: [
    {
      required: true,
      message: '请输入直推收益分配',
      type: 'number',
      trigger: 'blur'
    }
  ],
  supplierCommission: [
    {
      required: true,
      message: '请输入仓储费',
      type: 'number',
      trigger: 'blur'
    }
  ]
});

const onType = (index: number) => {
  form.type = index;
};

/* 搜索 */
const chooseMerchantId = (item: ShopMerchant) => {
  form.merchantName = item.merchantName;
  form.merchantId = item.merchantId;
};

const clearMerchant = () => {
  form.merchantName = '';
  form.merchantId = 0;
};

const chooseSupplier = (item: ShopMerchant) => {
  form.supplierName = item.merchantName;
  form.supplierMerchantId = item.merchantId;
};

const chooseGoodsCategory = (item: ShopGoodsCategory, value: any) => {
  form.categoryId = value[1].value;
  form.parentName = value[0].label;
  form.categoryName = value[1].label;
};
const chooseTakeawayCategory = (item: ShopGoodsCategory, value: any) => {
  form.categoryParent = '店铺分类';
  form.categoryChildren = value[0].label;
  form.categoryId = item[0];
};

const chooseImage = (data: FileRecord) => {
  images.value.push({
    uid: data.id,
    url: data.path,
    status: 'done'
  });
  form.image = data.path;
};

const chooseSkuImage = (data: FileRecord) => {
  const index = data?.index;
  skuList.value[index].images?.push({
    uid: uuid(),
    url: data.path,
    status: 'done'
  });
  skuList.value[index].image = data.path;
};

const onDeleteSkuItem = (index: number) => {
  images.value.splice(index, 1);
};

const videos = ref<ItemType[]>([]);
const chooseVideo = (data: FileRecord) => {
  videos.value = [
    {
      uid: uuid(),
      url: data.path,
      status: 'done'
    }
  ];
  form.video = data.path;
};

const onDeleteVideo = (index: number) => {
  images.value.splice(index, 1);
  form.video = undefined;
};

const onChange = (text: string) => {
  // 加载商品多规格
  if (text == 'spec') {
    const goodsId = props.data?.goodsId;
    if (goodsId) {
      listShopGoodsSpec({goodsId}).then((data) => {
        if (data.length > 0) {
          // 多条记录合并为 spec.value；兼容旧格式
          const merged = mergeGoodsSpecs(data);
          spec.value = merged.length > 0 ? merged : parseSpecValue(data[0].specValue);
          goodsSpec.value = {
            specId: data[0].specId,
            specName: data[0].specName,
            specValue: JSON.stringify(spec.value)
          };
          form.specName = data[0].specName || '';
        }
      });
      listShopGoodsSku({goodsId}).then((data) => {
        skuList.value = data.map((d) => ({
          ...d,
          images: d.image ? [{uid: uuid(), url: d.image, status: 'done' as const}] : []
        }));
      });
    }
  }
};

const onDeleteItem = (index: number) => {
  images.value.splice(index, 1);
  form.image = '';
};

const onClose = (index: number) => {
  spec.value.splice(index, 1);
  // 同步更新 goodsSpec 的 specValue
  if (goodsSpec.value) {
    goodsSpec.value.specValue = JSON.stringify(spec.value);
  }
};

const openSpecForm = () => {
  showSpecForm.value = !showSpecForm.value;
};

const onSpec = (row: any) => {
  form.specName = row.specName;
  const rawSpecValue = row.specValue || row.value;
  // 如果 specValue 为空，则从后端重新拉取完整规格数据
  if (!rawSpecValue && row.specId) {
    getShopSpec(row.specId).then((fullSpec: any) => {
      const v = fullSpec.specValue || fullSpec.value;
      goodsSpec.value = {
        specId: row.specId,
        specName: row.specName,
        specValue: v
      };
      spec.value = parseSpecValue(v);
      console.log('[onSpec] 重新拉取规格值:', v, '解析结果:', spec.value);
    }).catch((e: any) => {
      message.error('获取规格值失败: ' + (e.message || e));
    });
  } else {
    goodsSpec.value = {
      specId: row.specId,
      specName: row.specName,
      specValue: rawSpecValue
    };
    spec.value = parseSpecValue(rawSpecValue);
  }
  console.log('[onSpec] 选择规格模板:', row.specName, '原始值:', rawSpecValue, '解析结果:', spec.value);
  skuList.value = [];
};

// 新增规格
const addSpecValue = () => {
  if (!name.value || !value.value) {
    message.error(`请输入规格和规格值`);
    return false;
  }
  const findIndex = spec.value.findIndex((d) => d.value == name.value);
  if (findIndex !== -1) {
    message.error(`${name.value}已存在`);
    return false;
  }
  spec.value.push({
    value: name.value,
    detail: [value.value]
  });
  // 同步更新 goodsSpec 的 specValue
  if (goodsSpec.value) {
    goodsSpec.value.specValue = JSON.stringify(spec.value);
  }
  name.value = '';
  value.value = '';
  openSpecForm();
};

const chooseFile = (data: FileRecord) => {
  files.value.push({
    uid: data.id,
    url: data.path,
    status: 'done'
  });
};

const onDeleteFile = (index: number) => {
  files.value.splice(index, 1);
};

/**
 * 生成商品SKU列表
 */
const generateSku = () => {
  if (spec.value.length === 0) {
    message.warning('请先添加规格');
    return;
  }
  // 过滤掉没有规格值的项
  const specs = spec.value.filter(s => s.detail.length > 0);
  if (specs.length === 0) {
    message.warning('请先添加规格值');
    return;
  }

  // 前端笛卡尔积生成 SKU 组合
  const cartesian = (lists: string[][]): string[][] => {
    if (lists.length === 0) return [[]];
    if (lists.length === 1) return lists[0].map(v => [v]);
    const [first, ...rest] = lists;
    const sub = cartesian(rest);
    return first.flatMap(v => sub.map(s => [v, ...s]));
  };

  const detailLists = specs.map(s => s.detail);
  const names = specs.map(s => s.value);
  const combos = cartesian(detailLists);

  skuList.value = combos.map((combo, i) => {
    const skuStr = combo.join('|');
    // 保留已有行的价格等数据，避免重复生成时丢失
    const existing = skuList.value[i] || {};
    return {
      sku: skuStr,
      price: existing.price || 0,
      salePrice: existing.salePrice || 0,
      buyingPrice: existing.buyingPrice || 0,
      stock: existing.stock || 0,
      skuNo: existing.skuNo || '',
      images: existing.images || []
    };
  });
  // 同步更新 goodsSpec 的 specValue（每条记录一个值，JSON 格式）
  if (goodsSpec.value) {
    // 把 spec.value 拆成多条记录对应的 specValue 格式
    const firstSpec = spec.value[0];
    goodsSpec.value.specName = firstSpec?.value || '';
    // specValue 在 save 时会被拆成多条记录，这里仅同步 specName
  }
  message.success(`已生成 ${combos.length} 条SKU`);
};

/**
 * 批量设置SKU字段值
 */
const batchApply = () => {
  if (skuList.value.length === 0) {
    message.warning('请先生成SKU');
    return;
  }
  let changed = 0;
  skuList.value.forEach((item) => {
    if (batchPrice.value !== undefined && batchPrice.value !== null) {
      item.price = batchPrice.value;
      changed++;
    }
    if (batchSalePrice.value !== undefined && batchSalePrice.value !== null) {
      item.salePrice = batchSalePrice.value;
      changed++;
    }
    if (batchBuyingPrice.value !== undefined && batchBuyingPrice.value !== null) {
      item.buyingPrice = batchBuyingPrice.value;
      changed++;
    }
    if (batchStock.value !== undefined && batchStock.value !== null) {
      item.stock = batchStock.value;
      changed++;
    }
    if (batchSkuNo.value) {
      item.skuNo = batchSkuNo.value;
      changed++;
    }
  });
  if (changed > 0) {
    message.success(`已批量设置 ${skuList.value.length} 条SKU`);
  } else {
    message.warning('请至少填写一个批量设置值');
  }
};


const editorRef = ref(null);

// 文件库选择弹窗状态
const showFileSelector = ref(false);
const fileSelectCallback = ref<((url: string) => void) | null>(null);

// 视频库选择弹窗状态
const showVideoSelector = ref(false);
const videoSelectCallback = ref<((url: string) => void) | null>(null);

// 编辑器可见性控制
// 删除了 TinyMCE 相关代码，改用 MdEditor
const editorVisible = ref(false);

// 当 Tab 切换到商品详情时，启用编辑器
watch(
  () => active.value,
  (key) => {
    if (key === 'content') {
      // 切换到商品详情 Tab 时，等待 DOM 渲染完成后启用编辑器
      nextTick(() => {
        setTimeout(() => {
          editorVisible.value = true;
          console.log('[shopGoodsEdit] Switched to content tab, editorVisible = true');
        }, 100);
      });
    }
  },
  { immediate: true }
);

const markdownToolbars = [
  'bold',
  'underline',
  'italic',
  '-',
  'title',
  'strikeThrough',
  'quote',
  'unorderedList',
  'orderedList',
  'task',
  '-',
  'codeRow',
  'code',
  'link',
  'image',
  'table',
  '-',
  'revoke',
  'next',
  '=',
  'pageFullscreen',
  'fullscreen',
  'preview',
  'previewOnly'
];

// Markdown 图片上传
const onMarkdownUploadImg = async (
  files: File[],
  callback: (urls: string[]) => void
) => {
  try {
    const uploadPromises = files.map(async (file) => {
      if (file.size > 10 * 1024 * 1024) {
        message.error(`图片 ${file.name} 大小超过10MB`);
        return null;
      }
      const res = await uploadOss(file);
      return res.url || res.path;
    });
    const results = await Promise.all(uploadPromises);
    callback(results.filter(Boolean) as string[]);
  } catch (err: any) {
    message.error(err.message || '图片上传失败');
  }
};

// TinyMCE config 已移除，改用 MdEditor
const config = ref({});

const {resetFields} = useForm(form, rules);

const COMMISSION_PERCENT_FIELDS = [
  'firstMoney',
  'secondMoney',
  'thirdMoney',
  'firstDividend',
  'secondDividend'
] as const;

type CommissionPercentField = (typeof COMMISSION_PERCENT_FIELDS)[number];

const toDbPercent = (val: unknown) => {
  if (val === null || val === undefined) return val as any;
  const num = Number(val);
  if (!Number.isFinite(num)) return val as any;
  return num / 100;
};

// Back-end stores percent as a fraction (e.g. 0.1 = 10%); UI inputs percent (e.g. 10 = 10%).
const toUiPercent = (val: unknown) => {
  if (val === null || val === undefined) return val as any;
  const num = Number(val);
  if (!Number.isFinite(num)) return val as any;
  // If historical data is already stored as 0~1, convert to 0~100 for display.
  if (num <= 1) return Number((num * 100).toFixed(2));
  return num;
};

/* 保存编辑 */
const save = () => {
  if (!formRef.value) {
    return;
  }
  formRef.value
    .validate()
    .then(() => {
      loading.value = true;
      if (form.priceGift && !form.priceGiftNum)
        return message.error('请输入会员赠品数量');
      if (ensureTag.value.length) form.ensureTag = ensureTag.value.join();
      if (canUseDate.value.length) form.canUseDate = canUseDate.value.join();

      // 分销关闭时，避免把历史值一并保存到后端
      if (form.isOpenCommission !== 1) {
        form.commissionType = 10;
        form.firstMoney = 0;
        form.secondMoney = 0;
        form.thirdMoney = 0;
        form.firstDividend = 0;
        form.secondDividend = 0;
        form.deliveryMoney = 0;
      }
      if (form.isOpenCommission === 1 && form.commissionType === 20) {
        // UI 输入：0~100；保存到后端：0~1（例如 10% => 0.1）
        const invalidPercent = COMMISSION_PERCENT_FIELDS.some((k) => {
          const v = (form as any)[k] ?? 0;
          return v < 0 || v > 100;
        });
        if (invalidPercent) {
          return message.error('佣金百分比需在 0~100 之间');
        }
      }

      // if (form.dealerGift && !form.dealerGiftNum) return message.error('请输入经销商赠品数量');
      if (form.commissionRole === 1) {
        for (let i = 0; i < form.goodsRoleCommission.length; i++) {
          if (
            form.goodsRoleCommission[i].amount === undefined ||
            form.goodsRoleCommission[i].amount === '' ||
            form.goodsRoleCommission[i].amount === null
          ) {
            return message.error(
              '请输入' + form.goodsRoleCommission[i].roleName + '的分红金额'
            );
          }
        }
      }
      // 多规格模式下，保存前确保 goodsSpec.specValue 与当前 spec 数组同步
      if (form.specs === 1 && goodsSpec.value && spec.value.length) {
        goodsSpec.value.specValue = JSON.stringify(spec.value);
      }
      const formData: any = {
        ...form,
        content: content.value,
        category: JSON.stringify(category.value),
        files: JSON.stringify(files.value),
        type: getMerchantId() ? 1 : 0
      };

      // 多规格数据： goodsSpecs 为数组（每条记录一个规格值），goodsSkus 为数组
      if (form.specs === 1) {
        // 把 spec.value 拆成多条记录，每条 specValue 存单个字符串值（JSON 格式）
        const goodsSpecs: ShopGoodsSpec[] = [];
        spec.value.forEach((s) => {
          s.detail.forEach((d) => {
            goodsSpecs.push({
              specId: goodsSpec.value?.specId,
              specName: s.value,
              specValue: JSON.stringify(d)  // JSON 格式存单个字符串，如 "\"红色\""
            });
          });
        });
        formData.goodsSpecs = goodsSpecs;
        formData.goodsSkus = skuList.value.map((item) => ({
          ...item,
          // 提取图片URL（images 是前端上传组件格式，转为单图片URL）
          image: item.images?.[0]?.url || ''
        }));
      } else {
        formData.goodsSpecs = [];
        formData.goodsSkus = [];
      }
      if (isUpdate.value) {
        formData.type = props.data.type;
      }
      if (formData.isOpenCommission === 1 && formData.commissionType === 20) {
        // Convert percent fields for persistence: 10 => 0.1
        COMMISSION_PERCENT_FIELDS.forEach((k) => {
          (formData as any)[k as CommissionPercentField] = toDbPercent(
            (formData as any)[k]
          );
        });
      }
      const saveOrUpdate = isUpdate.value ? updateShopGoods : addShopGoods;
      saveOrUpdate(formData)
        .then((msg) => {
          loading.value = false;
          message.success(msg);
          updateVisible(false);
          emit('done');
        })
        .catch((e) => {
          loading.value = false;
          message.error(e.message);
        });
    })
    .catch(() => {
    });
};

const expressTemplateList = ref<ShopExpressTemplate[]>([]);
const getExpressTemplateList = async () => {
  expressTemplateList.value = await listShopExpressTemplate();
};

const getRoleList = async () => {
  const roleList = await listShopCommissionRole();
  form.goodsRoleCommission = [];
  roleList.forEach((d) => {
    form.goodsRoleCommission.push({
      roleId: d.id,
      roleName: d.title,
      amount: 0
    });
  });
  if (props?.data?.goodsId) {
    const commissionList = await listShopGoodsRoleCommission({
      goodsId: props?.data?.goodsId
    });
    form.goodsRoleCommission = form.goodsRoleCommission.map((d) => {
      const find = commissionList.find((c) => c.roleId == d.roleId);
      return {
        ...d,
        amount: find?.amount || 0
      };
    });
  }
};

const onUploadImage = (item) => {
  const {file} = item;
  if (file.size / 1024 / 1024 > 10) {
    message.error('大小不能超过 10MB');
    return;
  }
  const hide = messageLoading({
    content: '上传中..',
    duration: 0,
    mask: true
  });
  uploadOss(file)
    .then((res) => {
      hide();
      form.image = res.path;
    })
    .catch((e) => {
      message.error(e.message);
      hide();
    });
};
const onUploadSwiper = (item) => {
  const {file} = item;
  if (file.size / 1024 / 1024 > 10) {
    message.error('大小不能超过 10MB');
    return;
  }
  const hide = messageLoading({
    content: '上传中..',
    duration: 0,
    mask: true
  });
  uploadOss(file)
    .then((data) => {
      hide();
      files.value.push({
        uid: data.id,
        url: data.path,
        status: 'done'
      });
      setPicker();
    })
    .catch((e) => {
      message.error(e.message);
      hide();
    });
};

const swiperRef = ref();
const imageRef = ref();
const setPicker = () => {
  const swiperEl = swiperRef.value?.$el?.querySelector('input[type="file"]');
  if (swiperEl) {
    swiperEl.removeAttribute('accept'); // 移除 accept 属性
    swiperEl.removeAttribute('capture'); // 移除 capture 属性
    swiperEl.setAttribute('name', 'file'); // 添加 name 属性
  }
  const imageEl = imageRef.value?.$el?.querySelector('input[type="file"]');
  if (imageEl) {
    imageEl.removeAttribute('accept'); // 移除 accept 属性
    imageEl.removeAttribute('capture'); // 移除 capture 属性
    imageEl.setAttribute('name', 'file'); // 添加 name 属性
  }
};
watch(
  () => props.visible,
  async (visible) => {
    if (visible) {
      await getExpressTemplateList();

      images.value = [];
      category.value = [];
      files.value = [];
      videos.value = [];
      canUseDate.value = [];
      ensureTag.value = [];
      ensureTagItem.value = '';
      if (props.data) {
        assignObject(form, props.data);
        if (form.commissionType === undefined || form.commissionType === null) {
          form.commissionType = 10;
        }
        if (form.isOpenCommission === 1 && form.commissionType === 20) {
          // Convert historical DB values (0~1) to UI percent (0~100).
          COMMISSION_PERCENT_FIELDS.forEach((k) => {
            (form as any)[k as CommissionPercentField] = toUiPercent(
              (form as any)[k]
            );
          });
        }
        if (props.data.image) {
          images.value.push({
            uid: uuid(),
            url: props.data.image,
            status: 'done'
          });
        }
        if (props.data.files) {
          files.value = JSON.parse(props.data.files);
        }
        if (props.data.goodsSpecs && props.data.goodsSpecs.length > 0) {
          if (props.data.specs == 1) {
            // 多条记录合并为 spec.value；兼容旧格式（单条存 JSON 数组）
            const merged = mergeGoodsSpecs(props.data.goodsSpecs);
            spec.value = merged.length > 0 ? merged : parseSpecValue(props.data.goodsSpecs[0].specValue);
            goodsSpec.value = {
              specId: props.data.goodsSpecs[0].specId,
              specName: props.data.goodsSpecs[0].specName,
              specValue: JSON.stringify(spec.value)
            };
            form.specName = props.data.goodsSpecs[0].specName || '';
          }
        }
        if (props.data.goodsSkus && props.data.goodsSkus.length > 0) {
          skuList.value = props.data.goodsSkus.map((d) => ({
            ...d,
            images: d.image ? [{uid: uuid(), url: d.image, status: 'done' as const}] : []
          }));
        }
        // 多规格商品（specs == 1）从 API 加载规格和 SKU 数据
        // 注意：列表 API 通常不返回 goodsSpecs/goodsSkus，需要单独查询
        if (props.data.specs == 1 && props.data.goodsId) {
          listShopGoodsSpec({goodsId: props.data.goodsId}).then((data) => {
            if (data.length > 0) {
              // 多条记录合并为 spec.value；兼容旧格式
              const merged = mergeGoodsSpecs(data);
              spec.value = merged.length > 0 ? merged : parseSpecValue(data[0].specValue);
              goodsSpec.value = {
                specId: data[0].specId,
                specName: data[0].specName,
                specValue: JSON.stringify(spec.value)
              };
              form.specName = data[0].specName || '';
            }
          });
          listShopGoodsSku({goodsId: props.data.goodsId}).then((data) => {
            skuList.value = data.map((d) => ({
              ...d,
              images: d.image ? [{uid: uuid(), url: d.image, status: 'done' as const}] : []
            }));
          });
        }
        if (props.data.video) {
          videos.value = [
            {
              uid: uuid(),
              url: props.data.video,
              status: 'done'
            }
          ];
        }
        // 商品分类
        if (props.data.parentName) {
          category.value.push(props.data.parentName);
        }
        if (props.data.category) {
          category.value = JSON.parse(props.data.category);
        }
        if (props.data.content) {
          content.value = props.data.content;
        }

        isUpdate.value = true;
        if (form.ensureTag) {
          ensureTag.value = form.ensureTag.split(',');
        }
        // 🎯 优先级设置栏目：
        // 1. 如果传入了 categoryId（从栏目页面点击添加），使用传入的
        // 2. 否则使用上次保存的栏目
        if (props.data.categoryId) {
          form.categoryId = props.data?.categoryId;
        } else {
          const lastCategory = getLastCategory();
          if (lastCategory) {
            form.categoryId = lastCategory;
          }
        }
        await getRoleList();
      } else {
        await getRoleList();
        spec.value = [];
        goodsSpec.value = undefined;
        skuList.value = [];
        isUpdate.value = false;
      }
      setPicker();
    } else {
      resetFields();
    }
  },
  {immediate: true}
);
</script>

<style scoped>
/* 修复 MdEditor 工具栏图标过大 */
:deep(.md-editor-toolbar-wrapper .md-editor-icon) {
  font-size: 16px !important;
  width: 16px !important;
  height: 16px !important;
}
:deep(.md-editor-toolbar-wrapper svg) {
  width: 16px !important;
  height: 16px !important;
}
:deep(.md-editor-toolbar-item) {
  font-size: 16px !important;
}
</style>
