wxapp_shuibei/pages/merchantCenters/releaseProduct.vue

<template>
  <view class="container">
    <view class="form-container">
      <up-form
          labelPosition="left"
          :model="formData"
          :rules="rules"
          ref="formRef"
          :labelWidth="100"
      >
        <!-- 商品分类 -->
        <view class="card-title" v-if="!isProductCenter">商品分类</view>
        <up-form-item
            class="form-item"
            label="商品分类"
            prop="categoryIds"
            :borderBottom="false"
            @click="showCategory = true"
            :required="true"
            v-if="!isProductCenter"
        >
          <up-input
              v-model="formData.categoryDisplayName"
              disabled
              disabledColor="#ffffff"
              placeholder="请选择商品分类"
              inputAlign="right"
              border="none"
          ></up-input>
          <template #right>
            <up-icon name="arrow-right"></up-icon>
          </template>
        </up-form-item>

        <!-- 商家类目 -->
        <up-form-item
            class="form-item"
            label="商家类目"
            prop="merchantCategoryId"
            :borderBottom="false"
            @click="showMerchantCategory = true"
            :required="true"
            v-if="!isProductCenter"
        >
          <up-input
              v-model="formData.merchantCategoryDisplayName"
              disabled
              disabledColor="#ffffff"
              placeholder="请选择商家类目"
              inputAlign="right"
              border="none"
          ></up-input>
          <template #right>
            <up-icon name="arrow-right"></up-icon>
          </template>
        </up-form-item>

        <!-- 商品信息 -->
        <view class="card-title">商品信息</view>
        <up-form-item
            label="商品名称"
            prop="storeName"
            :borderBottom="false"
            :required="true"
        >
          <up-input
              v-model="formData.storeName"
              placeholder="请输入商品名称"
              inputAlign="right"
              border="none"
          ></up-input>
        </up-form-item>
        <up-form-item
            label="商品关键字"
            prop="keyword"
            :borderBottom="false"
            :required="true"
            v-if="!isProductCenter"
        >
          <up-input
              v-model="formData.keyword"
              placeholder="请输入商品关键字"
              inputAlign="right"
              border="none"
          ></up-input>
        </up-form-item>
        <up-form-item
            label="商品简介"
            prop="storeInfo"
            :borderBottom="false"
            :required="true"
            v-if="!isProductCenter"
        >
          <up-textarea
              v-model="formData.storeInfo"
              placeholder="请输入商品简介"
              inputAlign="right"
              border="none"
          ></up-textarea>
        </up-form-item>
        <up-form-item
            label="单位"
            prop="unitName"
            :borderBottom="false"
            :required="true"
            v-if="!isProductCenter"
        >
          <up-input
              v-model="formData.unitName"
              placeholder="请输入单位"
              inputAlign="right"
              border="none"
          ></up-input>
        </up-form-item>

        <!-- 图片上传 -->
        <view class="upload-section" v-if="!isProductCenter">
          <view class="upload-item">
            <view class="upload-label"><text class="required">*</text>商品封面图</view>
            <up-upload
                @afterRead="async (e) => {
                  await afterRead(e);
                  getImage();
                }"
                @delete="onPreviewImageDelete"
                name="preview"
                max-count="1"
                :fileList="previewImages"
            >
              <view class="upload-btn">
                <up-icon name="plus" size="20" color="#ccc"></up-icon>
                <text class="upload-tip">点击上传</text>
              </view>
            </up-upload>
            <text class="format-tip">支持上传PNG、JPG格式的图片，每张不超过5MB。</text>
          </view>
        </view>

        <view class="upload-section" v-if="!isProductCenter">
          <view class="upload-item">
            <view class="upload-label"><text class="required">*</text>商品图片</view>
            <up-upload
                @afterRead="async (e) => {
                  await afterRead(e);
                  getImageProduct();
                }"
                @delete="onProductImageDelete"
                name="product"
                multiple
                :maxCount="10"
                :fileList="productImages"
            >
              <view class="upload-btn">
                <up-icon name="plus" size="20" color="#ccc"></up-icon>
                <text class="upload-tip">点击上传</text>
              </view>
            </up-upload>
            <text class="format-tip">支持上传PNG、JPG格式图片，每张不超过5MB，最多可上传10张。</text>
          </view>
        </view>

        <!-- 商品属性 -->
        <view class="card-title">商品属性</view>
        <up-form-item
            label="材质"
            prop="metalType"
            :borderBottom="false"
            :required="true"
            v-if="!isProductCenter"
        >
          <up-radio-group
              v-model="formData.metalType"
              placement="row"
          >
            <up-radio
                :customStyle="{marginRight: '20rpx'}"
                v-for="(item, index) in materialList"
                :key="index"
                :label="item.name"
                :name="item.code"
                activeColor="#F8C008"
            >
            </up-radio>
          </up-radio-group>
        </up-form-item>

        <up-form-item
            label="重量"
            prop="weight"
            :borderBottom="false"
            :required="true"
        >
          <up-input
              v-model="formData.weight"
              placeholder="请输入重量"
              inputAlign="right"
              border="none"
              type="digit"
          ></up-input>
          <template #right>
            <text class="unit">g</text>
          </template>
        </up-form-item>

        <!-- 商品描述 -->
        <view class="card-title" v-if="!isProductCenter">商品描述</view>
        <view class="editor-section" v-if="!isProductCenter">
          <view class="editor-header">
            <text class="editor-label">商品描述</text>
            <text class="word-count">{{ descriptionText.length }}/500</text>
          </view>
          <sp-editor
              editorId="editor"
              :toolbar-config="toolbarConfig"
              :readOnly="readOnly"
              @input="onEditorInput"
              @upinImage="onUpinImage"
              @init="onEditorInit"
              @overMax="onOverMax"
          ></sp-editor>
        </view>

        <!-- 价格设置 -->
        <view class="card-title">价格设置</view>
        <up-form-item
            label="工费"
            prop="laborCost"
            :borderBottom="false"
            :required="true"
        >
          <up-input
              v-model="formData.laborCost"
              placeholder="请输入工费"
              inputAlign="right"
              border="none"
              type="digit"
          ></up-input>
          <template #right>
            <text class="unit">元/g</text>
          </template>
        </up-form-item>

        <up-form-item
            label="附加费"
            prop="additionalFee"
            :borderBottom="false"
            :required="true"
        >
          <up-input
              v-model="formData.additionalFee"
              placeholder="请输入附加费"
              inputAlign="right"
              border="none"
              type="digit"
          ></up-input>
          <template #right>
            <text class="unit">元</text>
          </template>
        </up-form-item>
        <up-form-item
            class="form-item"
            label="运费模板"
            prop="tempIds"
            :borderBottom="false"
            @click="showTemp = true"
            :required="true"
        >
          <up-input
              v-model="formData.tempName"
              disabled
              disabledColor="#ffffff"
              placeholder="请选择运费模板"
              inputAlign="right"
              border="none"
          ></up-input>
          <template #right>
            <up-icon name="arrow-right"></up-icon>
          </template>
        </up-form-item>
        <up-form-item
            label="库存"
            prop="stock"
            :borderBottom="false"
            :required="true"
        >
          <up-input
              v-model="formData.stock"
              placeholder="请输入库存"
              inputAlign="right"
              border="none"
              type="number"
          ></up-input>
        </up-form-item>
        <up-form-item
            label="商品编号"
            prop="barCode"
            :borderBottom="false"
            :required="true"
        >
          <up-input
              v-model="formData.barCode"
              placeholder="请输入商品编号"
              inputAlign="right"
              border="none"
              type="number"
          ></up-input>
        </up-form-item>
        <view class="upload-section">
          <view class="upload-item">
            <view class="upload-label"><text class="required">*</text>规格图片</view>
            <up-upload
                :fileList="productImagesGg"
                @afterRead="async (e) => {
                  await afterRead(e);
                  getImageProductGg();
                }"
                @delete="onProductImageGgDelete"
                name="productGg"
                :maxCount="1"
            >
              <view class="upload-btn">
                <up-icon name="plus" size="20" color="#ccc"></up-icon>
                <text class="upload-tip">点击上传</text>
              </view>
            </up-upload>
            <text class="format-tip">支持上传PNG、JPG格式图片，每张不超过5MB，最多可上传1张。</text>
          </view>
        </view>
        <up-form-item
            label="商品排序"
            prop="sort"
            :borderBottom="false"
        >
          <up-input
              v-model="formData.sort"
              placeholder="请输入排序号"
              inputAlign="right"
              border="none"
              type="number"
          ></up-input>
        </up-form-item>
      </up-form>
    </view>

    <!-- 发布按钮 -->
    <view class="btn-view">
      <button class="submit" @click="submitForm">立即发布</button>
    </view>

    <!-- 商品分类选择弹窗 -->
    <up-popup
        :show="showCategory"
        @close="showCategory = false"
        mode="bottom"
        round="20"
        :closeable="true"
    >
      <view class="popup-content">
        <view class="popup-header">
          <text class="popup-title">选择商品分类</text>
        </view>

        <category-selector
            :categoryList="categoryData"
            :selectedIds="formData.categoryIds"
            @change="onCategoryChange"
            ref="categoryRef"
        />

        <view class="popup-actions">
          <button class="action-btn cancel" @click="showCategory = false">取消</button>
          <button class="action-btn confirm" @click="confirmCategory">确定</button>
        </view>
      </view>
    </up-popup>

    <!-- 商家类目选择弹窗 -->
    <up-popup
        :show="showMerchantCategory"
        @close="showMerchantCategory = false"
        mode="bottom"
        round="20"
        :closeable="true"
    >
      <view class="popup-content">
        <view class="popup-header">
          <text class="popup-title">选择商家类目</text>
        </view>

        <category-selector
            :categoryList="merchantCategoryData"
            :selectedIds="formData.merchantCategoryId"
            @change="onMerchantCategoryChange"
            ref="merchantCategoryRef"
            :multiple="false"
        />

        <view class="popup-actions">
          <button class="action-btn cancel" @click="showMerchantCategory = false">取消</button>
          <button class="action-btn confirm" @click="confirmMerchantCategory">确定</button>
        </view>
      </view>
    </up-popup>

    <!-- 运费模板 -->
    <up-picker :show="showTemp" v-model="formData.tempIds"  :columns="tempColumns" keyName="name" valueName ="id"
               confirmColor="#F8C008"
               @close="showTemp = false" @confirm="tempConfirm" @cancel="showTemp = false"></up-picker>
  </view>
</template>

<script setup>
import { ref, computed, watch,nextTick } from 'vue';
import { onShow,onLoad } from "@dcloudio/uni-app";
import { productCategory,productSave,productUpdate,templatesList,productInfo,getMerchantCategory } from "@/api/merchant";
import CategorySelector from '@/components/CategorySelector';
import { useAppStore } from "@/stores/app";
import { useImageUpload } from "@/hooks/useImageUpload";
import { useToast } from "@/hooks/useToast";
const { Toast } = useToast();
const { imageList, afterRead, deletePic, uploadLoading } = useImageUpload({
  pid: 1,
  model: "product",
});
const appStore = useAppStore();
const merchantInfo = appStore.userInfo.merchant

// 表单验证和提交
const formRef = ref(null);

// 表单数据
const formData = ref({
  categoryIds: [], // 选中的商品分类ID数组
  categoryDisplayName: '', // 显示的商品分类名称
  merchantCategoryId: [], // 选中的商家类目ID数组（单选：数组长度始终为1）
  merchantCategoryDisplayName: '', // 显示的商家类目名称
  tempName: '', // 显示的运费模板名称
  tempIds: [],
  storeName: '',
  keyword: '',
  storeInfo: '',
  unitName: '',
  metalType: '',
  weight: '',
  laborCost: '',
  additionalFee: '',
  sort: '',
  content: '',
  stock: '',
  barCode: ''
});

// 编辑器相关
const editorIns = ref(null);
const readOnly = ref(false);
const descriptionText = ref('');
const toolbarConfig = ref({
  iconSize: '20px',
  iconColumns: 10,
  excludeKeys: ['direction', 'date', 'lineHeight', 'letterSpacing', 'listCheck']
});

// 分类相关
const showCategory = ref(false);
const categoryData = ref([]);
const categoryRef = ref();

// 商家类目相关变量
const showMerchantCategory = ref(false);
const merchantCategoryData = ref([]);
const merchantCategoryRef = ref();

const showTemp = ref(false);
const tempColumns = ref([])
// 图片列表
const previewImages = ref([]);
const productImages = ref([]);
const productImagesGg = ref([]);

const productId = ref(null);
const isProductCenter = ref(null);

// 材质列表
const materialList = ref([
  { name: '黄金',code:'au' },
  { name: '铂金' ,code:'pt'},
  { name: '白银',code:'ag' }
]);

// 验证规则
const rules = ref({
  categoryIds: {
    type: 'array',
    required: true,
    message: '请选择商品分类',
    trigger: ['blur','change']
  },
  // 商家类目验证规则：改为单选（数组长度必须为1）
  merchantCategoryId: {
    type: 'array',
    required: true,
    len: 1, // 新增：限制数组长度为1，确保单选
    message: '请选择一个商家类目', // 文案优化：强调“一个”
    trigger: ['blur','change']
  },
  storeName: {
    type: 'string',
    required: true,
    message: '请输入商品名称',
    trigger: ['blur', 'change']
  },
  keyword: {
    type: 'string',
    required: true,
    message: '请输入商品关键字',
    trigger: ['blur', 'change']
  },
  storeInfo: {
    type: 'string',
    required: true,
    message: '请输入商品简介', 
    trigger: ['blur', 'change']
  },
  unitName: {
    type: 'string',
    required: true,
    message: '请输入单位',
    trigger: ['blur', 'change']
  },
  tempIds: {
    type: 'array',
    required: true,
    message: '请选择运费模板',
    trigger: ['blur', 'change']
  },
  metalType: {
    type: 'string',
    required: true,
    message: '请选择材质',
    trigger: ['blur','change']
  },
  weight: {
    type: 'string',
    required: true,
    pattern: /^\d+(\.\d+)?$/,
    message: '重量必须是数字，可以是小数',
    trigger: ['blur', 'change']
  },
  laborCost: {
    type: 'string',
    required: true,
    pattern: /^\d+(\.\d+)?$/,
    message: '工费必须是数字，可以是小数',
    trigger: ['blur', 'change']
  },
  additionalFee: {
    type: 'string',
    required: true,
    pattern: /^\d+(\.\d+)?$/,
    message: '附加费必须是数字，可以是小数',
    trigger: ['blur', 'change']
  },
  sort: {
    type: 'string',
    pattern: /^\d*$/,
    message: '排序号必须是整数',
    trigger: ['blur', 'change'],
    validator: (rule, value) => {
      if (!value || value.trim().length === 0) return true; // 可选字段，为空时通过
      return /^\d+$/.test(value);
    }
  },
  stock: {
    type: 'string',
    required: true,
    pattern: /^\d*$/,
    message: '库存必须是整数',
    trigger: ['blur', 'change'],
    validator: (rule, value) => {
      if (!value || value.trim().length === 0) return false;
      return /^\d+$/.test(value);
    }
  },
  barCode: {
    type: 'string',
    required: true,
    pattern: /^\d*$/,
    message: '商品编号必须是整数',
    trigger: ['blur', 'change'],
    validator: (rule, value) => {
      if (!value || value.trim().length === 0) return false;
      return /^\d+$/.test(value);
    }
  },
});

// 页面加载
onShow(() => {

})
onLoad(async (options)=>{
  await getProductCategory();
  await getMerchantCategoryList();
  await getTempData();
  console.log(options)
  if(options.id){
    productId.value = options.id;
    isProductCenter.value = options.isProductCenter || null;
    await getProductDetail(options.id);
  }else {
    resetForm();
  }
})

// 获取商品分类
async function getProductCategory(){
  let obj = {
    type: 1,
    status: 1
  }
  try {
    const { data } = await productCategory(obj)
    console.log('原始分类数据:', data);

    const newArr = []
    data.forEach((value, index) => {
      newArr[index] = value
      if (value.child) newArr[index].child = value.child.filter(item => item.status === true)
    })
    // 过滤商品分类设置为隐藏的子分类不出现在树形列表里
    categoryData.value = newArr.filter(item => item.code !== 'bb_mall')
    console.log('转换后的分类数据:', categoryData.value);

  } catch (error) {
    console.error('获取商品分类失败:', error);
    uni.showToast({ title: '获取分类失败', icon: 'none' });
  }
}

// 取商家类目列表
async function getMerchantCategoryList(){
  try {
    const { data } = await getMerchantCategory();
    console.log('原始商家类目数据:', data);
    
    merchantCategoryData.value = data.map(item => ({
      id: item.id,
      name: item.categoryName, 
      child: [] 
    }));
    console.log('适配后的商家类目数据:', merchantCategoryData.value);

  } catch (error) {
    console.error('获取商家类目失败:', error);
    uni.showToast({ title: '获取商家类目失败', icon: 'none' });
  }
}

// 获取运费模板
async function getTempData(){
  let obj = {
    page:1,
    limit:9999
  }
  try {
    const { data } = await templatesList()
    tempColumns.value[0] = data.list;

  } catch (error) {
    console.error('获取运费模板失败:', error); 
    uni.showToast({ title: '获取运费模板失败', icon: 'none' });
  }
}

const initFormValidation = async () => {
  await nextTick();

  if (!formRef.value) {
    console.error('表单引用不存在');
    return;
  }

  try {
    // 方法1：清除所有验证状态，然后重新验证
    formRef.value.clearValidate();

    // 方法2：延迟触发字段验证
    setTimeout(async () => {
      // 逐个触发必填字段的验证
      const requiredFields = ['categoryIds', 'merchantCategoryId', 'storeName', 'keyword', 'storeInfo', 'unitName',
        'tempIds', 'metalType', 'weight', 'laborCost', 'additionalFee',
        'stock', 'barCode'];

      for (const field of requiredFields) {
        try {
          await formRef.value.validateField(field);
        } catch (error) {
          console.log(`⚠️ 字段 ${field} 验证状态:`, error);
        }
      }
    }, 300);

  } catch (error) {
    console.error('初始化表单验证状态失败:', error);
  }
};

// 获取商品详情
async function getProductDetail(id){
  try {
    const { data } = await productInfo(id)
    console.log('获取商品详情:',data);

    // 使用Object.assign确保响应式更新
    Object.assign(formData.value, {
      ...data,
      categoryIds: data.cateId ? (Array.isArray(data.cateId) ? data.cateId : data.cateId.split(',')) : [],
      merchantCategoryId: data.merchantCategoryId ? (Array.isArray(data.merchantCategoryId) ? data.merchantCategoryId : [data.merchantCategoryId]) : [],
      // 确保tempIds是数组格式
      tempIds: data.tempId ? [data.tempId] : []
    });

    productImages.value = [];

    console.log('商品分类IDs:', formData.value.categoryIds);
    console.log('商家类目IDs:', formData.value.merchantCategoryId); 
    console.log('运费模板IDs:', formData.value.tempIds);

    // 等待DOM更新
    await nextTick();

    // 更新显示名称
    formData.value.categoryDisplayName = getCategoryDisplayName(formData.value.categoryIds);
    formData.value.merchantCategoryDisplayName = getMerchantCategoryDisplayName(formData.value.merchantCategoryId);
    formData.value.tempName = formatterTemp(data.tempId);
    console.log('商品分类显示名称:', formData.value.categoryDisplayName);
    console.log('商家类目显示名称:', formData.value.merchantCategoryDisplayName); 

    // 图片处理
    previewImages.value = data.image ? [{ url: data.image }] : [];

    // 商品轮播图
    if(data.sliderImage){
      try {
        const urlArr = typeof data.sliderImage === 'string' ? JSON.parse(data.sliderImage) : data.sliderImage;
        if(urlArr && urlArr.length > 0){
          productImages.value = urlArr.map(url => ({ url }));
        }
      } catch (error) {
        console.error('解析轮播图失败:', error);
        productImages.value = [];
      }
    }

    // 商品属性
    if (data.attrValue && data.attrValue.length > 0) {
      formData.value.additionalFee = data.attrValue[0].additionalAmount;
      formData.value.laborCost = data.attrValue[0].price;
      formData.value.barCode = data.attrValue[0].barCode;
      formData.value.stock = data.attrValue[0].stock;
      formData.value.weight = data.attrValue[0].weight;

      // 规格图片
      productImagesGg.value = data.attrValue[0].image ? [{ url: data.attrValue[0].image }] : [];
    }

    // 商品描述
    descriptionText.value = data.content ? data.content.replace(/<[^>]*>/g, '').substring(0, 500) : '';
    formData.value.content = data.content || '';

    // 设置商品分类选择器
    if (categoryRef.value && formData.value.categoryIds.length > 0) {
      await nextTick();
      if (categoryRef.value.setSelectedIds) {
        categoryRef.value.setSelectedIds(formData.value.categoryIds);
      }
    }

    // 设置商家类目选择器
    if (merchantCategoryRef.value && formData.value.merchantCategoryId.length > 0) {
      await nextTick();
      if (merchantCategoryRef.value.setSelectedIds) {
        merchantCategoryRef.value.setSelectedIds(formData.value.merchantCategoryId);
      }
    }

    // 重要：手动初始化表单验证状态
    await initFormValidation();

  } catch (error) {
    console.error('获取商品详情失败:', error);
    uni.showToast({ title: '获取商品详情失败', icon: 'none' });
  }
}

// 运费模板id获取中文名
function formatterTemp(id) {
  const foundItem = tempColumns.value[0]?.find(item => item.id == id);
  return foundItem ? foundItem.name : '';
}

function tempConfirm(obj){
  formData.value.tempId = obj.value[0].id;
  formData.value.tempName = obj.value[0].name;
  showTemp.value = false;
  setTimeout(() => {
    if (formRef.value) {
      formRef.value.validateField('tempIds');
    }
  }, 100);
}

// 商品分类选择变化
const onCategoryChange = (result) => {
  console.log('商品分类选择变化:', result);
}

// 商家类目选择变化
const onMerchantCategoryChange = (result) => {
  console.log('商家类目选择变化:', result);
}

// 确认商品分类选择
const confirmCategory = () => {
  if (categoryRef.value) {
    const selectedIds = categoryRef.value.getSelectedIds()

    if (selectedIds.length === 0) {
      uni.showToast({ title: '请至少选择一个商品分类', icon: 'none' })
      return
    }

    // 更新表单数据
    formData.value.categoryIds = selectedIds
    formData.value.categoryDisplayName = getCategoryDisplayName(selectedIds)

    showCategory.value = false
    console.log('最终选中的商品分类ID:', selectedIds)
    // 触发校验
    setTimeout(() => {
      if (formRef.value) {
        formRef.value.validateField('categoryIds');
      }
    }, 100);
  }
}

// 确认商家类目选择（核心修改：限制单选）
const confirmMerchantCategory = () => {
  if (merchantCategoryRef.value) {
    let selectedIds = merchantCategoryRef.value.getSelectedIds()

    // 核心修改1：限制只能选择一个商家类目
    if (selectedIds.length === 0) {
      uni.showToast({ title: '请选择一个商家类目', icon: 'none' })
      return
    }
    // 如果选中多个，只保留第一个（强制单选）
    if (selectedIds.length > 1) {
      selectedIds = [selectedIds[0]]
      uni.showToast({ title: '商家类目仅支持选择一个', icon: 'none' })
    }

    // 更新表单数据（数组长度始终为1）
    formData.value.merchantCategoryId = selectedIds
    formData.value.merchantCategoryDisplayName = getMerchantCategoryDisplayName(selectedIds)

    showMerchantCategory.value = false
    console.log('最终选中的商家类目ID（单选）:', selectedIds)
    // 触发校验
    setTimeout(() => {
      if (formRef.value) {
        formRef.value.validateField('merchantCategoryId');
      }
    }, 100);
  }
}

// 根据选中的ID生成商品分类显示名称
const getCategoryDisplayName = (selectedIds) => {
  if (!selectedIds || selectedIds.length === 0) return ''

  const names = []

  selectedIds.forEach(id => {
    // 检查是否是一级分类（表示全选）
    const firstLevel = categoryData.value.find(item => item.id == id)
    if (firstLevel) {
      // 如果是一级分类，显示"分类名称(全部)"
      names.push(`${firstLevel.name}`)
    } else {
      // 查找二级分类
      for (const parent of categoryData.value) {
        if (parent.child) {
          const secondLevel = parent.child.find(child => child.id == id)
          if (secondLevel) {
            names.push(`${parent.name}-${secondLevel.name}`)
            break
          }
        }
      }

      // 如果没有子分类的一级分类
      const singleLevel = categoryData.value.find(item =>
          !item.child && item.id == id
      )
      if (singleLevel) {
        names.push(singleLevel.name)
      }
    }
  })

  return names.join('、')
}

// 根据选中的ID生成商家类目显示名称（优化：单选场景只取第一个名称）
const getMerchantCategoryDisplayName = (selectedIds) => {
  if (!selectedIds || selectedIds.length === 0) return ''

  // 核心修改2：单选场景直接取第一个选中项的名称
  const firstId = selectedIds[0]
  const category = merchantCategoryData.value.find(item => item.id == firstId)
  return category ? category.name : ''
}

async function getImage() {
  console.log(imageList.value)
  if (imageList.value.length > 0) {
    if (imageList.value[0].status == "success") {
      previewImages.value = imageList.value;
      console.log('previewImages.value',previewImages.value)
    } else {
      Toast({ title: "上传失败" });
    }
  }
  imageList.value = [];
}

async function getImageProduct() {
  if (imageList.value.length > 0) {
    if (imageList.value[0].status == "success") {
      productImages.value = [...productImages.value,...imageList.value];
    } else {
      Toast({ title: "上传失败" });
    }
  }
  imageList.value = [];
}

async function getImageProductGg() {
  if (imageList.value.length > 0) {
    if (imageList.value[0].status == "success") {
      productImagesGg.value = imageList.value;
    } else {
      Toast({ title: "上传失败" });
    }
  }
  imageList.value = [];
}

const onPreviewImageDelete =(e) => {
  previewImages.value.splice(e.index, 1);
};

const onProductImageDelete = (e) => {
  productImages.value.splice(e.index, 1);
};

const onProductImageGgDelete = (e) => {
  productImagesGg.value.splice(e.index, 1);
};

// 编辑器相关方法
const onEditorInput = (e) => {
  descriptionText.value = e.text || '';
  formData.value.content = e.html || '';
};

const onEditorInit = (editor) => {
  editorIns.value = editor;
};

const onOverMax = (e) => {
  uni.showToast({ title: '内容长度超出限制', icon: 'none' });
};

const onUpinImage = (tempFiles, editorCtx) => {
  const filePath = tempFiles[0].tempFilePath || tempFiles[0].path;
  editorCtx.insertImage({
    src: filePath,
    width: '80%',
    success: () => {
      uni.showToast({ title: '图片插入成功', icon: 'success' });
    }
  });
};

const validateForm = () => {
  try {
    if(!isProductCenter.value){
      // 检查图片上传
      if (previewImages.value.length === 0) {
        uni.showToast({ title: '请上传商品预览图', icon: 'none' });
        return;
      }

      if (productImages.value.length === 0) {
        uni.showToast({ title: '请上传商品图片', icon: 'none' });
        return;
      }

      if (formData.value.sort && !/^\d+$/.test(formData.value.sort)) {
        uni.showToast({ title: '排序号必须是整数', icon: 'none' });
        return;
      }
    }

    if (productImagesGg.value.length === 0) {
      uni.showToast({ title: '请上传商品规格图片', icon: 'none' });
      return;
    }

    // 验证数字字段
    if (!/^\d+(\.\d+)?$/.test(formData.value.weight)) {
      uni.showToast({ title: '重量格式不正确', icon: 'none' });
      return;
    }

    if (!/^\d+(\.\d+)?$/.test(formData.value.laborCost)) {
      uni.showToast({ title: '工费格式不正确', icon: 'none' });
      return;
    }

    if (!/^\d+(\.\d+)?$/.test(formData.value.additionalFee)) {
      uni.showToast({ title: '附加费格式不正确', icon: 'none' });
      return;
    }

    if (!/^\d+$/.test(formData.value.stock)) {
      uni.showToast({ title: '库存必须是整数', icon: 'none' });
      return;
    }
    if (!/^\d+$/.test(formData.value.barCode)) {
      uni.showToast({ title: '商品编号必须是整数', icon: 'none' });
      return;
    }

    const valid = formRef.value.validate();
    return valid;
  } catch (error) {
    console.error('表单验证失败:', error);
    return false;
  }
};

const submitForm = async () => {
  const valid = validateForm();

  if (valid) {
    const submitData = {
      ...formData.value
    };
    let urlString = '';
    if(isProductCenter.value){
      submitData.image =previewImages.value[0].url;
      urlString = JSON.stringify(productImages.value.map(item => item.url));
    }else{
      submitData.image =previewImages.value[0].url;
      urlString = JSON.stringify(productImages.value.map(item => item.url));
    }
    submitData.sliderImage =urlString;
    submitData.cateId =formData.value.categoryIds.join(',');
    
    // 核心修改3：merchantCateId改为数组格式（不再拼接字符串）
    submitData.merchantCategoryId = formData.value.merchantCategoryId; // 直接赋值数组（长度为1）

    submitData.merchantId =parseInt(merchantInfo.id);
    submitData.specType = 0;
    submitData.isSub = false;
    submitData.attr =[
      {
        "attrName":"规格",
        "attrValues": "默认",
        "id": 0
      }
    ];
    submitData.attrValue =[
      {
        additionalAmount :formData.value.additionalFee,
        attrValue:"{\"规格\":\"默认\"}",
        barCode : formData.value.barCode,
        image : productImagesGg.value[0]?.info?.url || productImagesGg.value[0].url,
        price : formData.value.laborCost,
        stock : formData.value.stock,
        weight :formData.value.weight
      }
    ];

    if(productId.value && !isProductCenter.value){
      const {data} = await productUpdate(submitData);
      uni.showToast({ title: '修改成功', icon: 'success' });
    }else{
      const {data} = await productSave(submitData);
      uni.showToast({ title: '发布成功', icon: 'success' });
    }

    uni.navigateTo({
      url: '/pages/merchantCenters/productManagement'
    })
  }
}

// 重置表单（用于新建场景）
const resetForm = () => {
  formData.value = {
    categoryIds: [],
    categoryDisplayName: '',
    merchantCategoryId: [], 
    merchantCategoryDisplayName: '', 
    tempName: '',
    tempIds: [],
    storeName: '',
    keyword: '',
    storeInfo: '',
    unitName: '',
    metalType: '',
    weight: '',
    laborCost: '',
    additionalFee: '',
    sort: '',
    content: '',
    stock: '',
    barCode: ''
  };

  previewImages.value = [];
  productImages.value = [];
  productImagesGg.value = [];
  descriptionText.value = '';

  // 清除校验状态
  if (formRef.value) {
    formRef.value.clearValidate();
  }
}
</script>

<style scoped lang="scss">
.container {
  background-color: #f8f8f8;
  min-height: 100vh;
  padding-bottom: 140rpx;
}

.form-container {
  padding: 30rpx;
}

.upload-section {
  margin-top: 20rpx;
  margin-bottom: 20rpx;
  background: white;
  border-radius: 16rpx;
  padding: 30rpx;
}

.upload-item {
  margin-bottom: 40rpx;

  &:last-child {
    margin-bottom: 0;
  }
}

.upload-label {
  display: block;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 20rpx;
  position: relative;
}

.required {
  position: absolute;
  left: -9px;
  color: #f56c6c;
  line-height: 20px;
  font-size: 20px;
  top: 3px;
}

.upload-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 200rpx;
  height: 200rpx;
  border: 2rpx dashed #ccc;
  border-radius: 12rpx;
  background: #fafafa;
}

.upload-tip {
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
}

.format-tip {
  display: block;
  font-size: 24rpx;
  color: #999;
  margin-top: 15rpx;
}

.card-title {
  font-size: 36rpx;
  color: #333;
  line-height: 60rpx;
  margin-bottom: 20rpx;
}

:deep(.u-form-item) {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 8rpx 30rpx;
  box-sizing: border-box;
  margin-bottom: 20rpx;
}

:deep(.u-form-item__body__left__content__label) {
  font-size: 28rpx !important;
  color: #333 !important;
}

:deep(.u-radio-group--row) {
  justify-content: flex-end;
}

.btn-view {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #FFF;
  padding: 20rpx 30rpx;
  box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.1);
  z-index: 5;
}

.submit {
  height: 88rpx;
  line-height: 88rpx;
  background: #F8C008;
  border-radius: 16rpx;
  font-size: 32rpx;
  color: #333333;
  border: none;
  width: 100%;

  &:active {
    opacity: 0.8;
  }
}

.unit {
  color: #999;
  font-size: 28rpx;
  margin-left: 10rpx;
}

/* 编辑器样式 */
.editor-section {
  background: white;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
}

.editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.editor-label {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.word-count {
  font-size: 24rpx;
  color: #999;
}

:deep(.sp-editor) {
  min-height: 400rpx;
}

/* 弹窗样式 */
.popup-content {
  background: #fff;
  border-radius: 20rpx 20rpx 0 0;
  padding-bottom: env(safe-area-inset-bottom);
}

.popup-header {
  padding: 30rpx;
  text-align: center;
  border-bottom: 1rpx solid #f0f0f0;
  position: relative;
}

.popup-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

.popup-actions {
  display: flex;
  padding: 30rpx;
  gap: 20rpx;
}

.action-btn {
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 12rpx;
  font-size: 28rpx;
  border: none;

  &.cancel {
    background: #f0f0f0;
    color: #666;
  }

  &.confirm {
    background: #F8C008;
    color: #333;
  }
}

:deep(.u-tabs__wrapper__nav__line){
  background-color: #F8C008 !important;
}
:deep(.u-form-item__body__right__message){
  text-align: right;
}
:deep(.u-textarea__field){
  text-align: right;
}
</style>