<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">

      <el-form-item label="商品分类" prop="cateId">
        <treeselect  v-model="queryParams.cateId"  style="width:205.4px" :options="categoryOptions" :normalizer="normalizer" placeholder="请选择分类" />
      </el-form-item>

      <el-form-item label="商品名称" prop="productName">
        <el-inputa
          v-model="queryParams.productName"
          placeholder="请输入商品名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="商品编号" prop="barCode">
        <el-input
          v-model="queryParams.barCode"
          placeholder="请输入商品编号"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>


      <el-form-item label="商品类型" prop="productTypes">
        <el-select v-model="queryParams.productTypes" multiple placeholder="请选择商品类型" clearable size="small" >
          <el-option
            v-for="item in productTypeOptions"
            :key="item.dictValue"
            :label="item.dictLabel"
            :value="Number(item.dictValue)"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="所属公司">
          <el-select style="width: 240px" v-model="companyId" multiple placeholder="请选择企业" clearable size="small" >
          <el-option
            v-for="item in companyOptions"
            :key="item.companyId"
            :label="item.companyName"
            :value="item.companyId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="" v-if="this.isStores">
        <el-select style="width: 240px" v-model="queryParams.storeIds" placeholder="请选择店铺" clearable size="small" >
          <el-option
            v-for="item in storeOptions"
            :key="item.storeId"
            :label="item.storeName"
            :value="item.storeId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="所属小程序" prop="appId">
        <el-select style="width: 240px" v-model="queryParams.appId" placeholder="请选择所属小程序" clearable size="small">
          <el-option
            v-for="dict in appMallOptions"
            :key="dict.appid"
            :label="dict.name + '(' + dict.appid + ')'"
            :value="dict.appid"
          />
        </el-select>
      </el-form-item>
      <div v-if="this.isMedicalMall">
      <el-form-item label="审核状态">
        <el-select style="width: 240px" v-model="queryParams.isAudit" placeholder="请选择审核状态" size="small" >
          <el-option value="0" label="待审核" key="isAudit0">待审核</el-option>
          <el-option value="1" label="审核通过" key="isAudit1">审核通过</el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="药品注册证书编号" prop="drugRegCertNo">
        <el-input
          v-model="queryParams.drugRegCertNo"
          placeholder="请输入药品注册证书编号"
          clearable
          size="small"

        />
      </el-form-item>

      <el-form-item label="通用名称" prop="commonName">
        <el-input
          v-model="queryParams.commonName"
          placeholder="请输入通用名称"
          clearable
          size="small"

        />
      </el-form-item>

      <el-form-item label="剂型" prop="dosageForm">
        <el-input
          v-model="queryParams.dosageForm"
          placeholder="请输入剂型"
          clearable
          size="small"

        />
      </el-form-item>

      <el-form-item label="单价" prop="unitPrice">
        <el-input
          v-model="queryParams.unitPrice"
          placeholder="请输入单价"
          clearable
          size="small"

        />
      </el-form-item>

      <el-form-item label="批号" prop="batchNumber">
        <el-input
          v-model="queryParams.batchNumber"
          placeholder="请输入批号"
          clearable
          size="small"

        />
      </el-form-item>

      <el-form-item label="上市许可持有人" prop="mah">
        <el-input
          v-model="queryParams.mah"
          placeholder="请输入上市许可持有人"
          clearable
          size="small"

        />
      </el-form-item>

      <el-form-item label="持有人地址" prop="mahAddress">
        <el-input
          v-model="queryParams.mahAddress"
          placeholder="请输入持有人地址"
          clearable
          size="small"

        />
      </el-form-item>

      <el-form-item label="生产企业" prop="manufacturer">
        <el-input
          v-model="queryParams.manufacturer"
          placeholder="请输入生产企业"
          clearable
          size="small"

        />
      </el-form-item>

      <el-form-item label="生产企业地址" prop="manufacturerAddress">
        <el-input
          v-model="queryParams.manufacturerAddress"
          placeholder="请输入生产企业地址"
          clearable
          size="small"

        />
      </el-form-item>

      <el-form-item label="功能主治" prop="indications">
        <el-input
          v-model="queryParams.indications"
          placeholder="请输入功能主治"
          clearable
          size="small"

        />
      </el-form-item>

      <el-form-item label="用法用量" prop="dosage">
        <el-input
          v-model="queryParams.dosage"
          placeholder="请输入用法用量"
          clearable
          size="small"

        />
      </el-form-item>

      <el-form-item label="不良反应" prop="adverseReactions">
        <el-input
          v-model="queryParams.adverseReactions"
          placeholder="请输入不良反应"
          clearable
          size="small"

        />
      </el-form-item>

      <el-form-item label="禁忌" prop="contraindications">
        <el-input
          v-model="queryParams.contraindications"
          placeholder="请输入禁忌"
          clearable
          size="small"

        />
      </el-form-item>

      <el-form-item label="注意事项" prop="precautions">
        <el-input
          v-model="queryParams.precautions"
          placeholder="请输入注意事项"
          clearable
          size="small"

        />
      </el-form-item>
      </div>
      <!-- <el-form-item label="状态" prop="isShow">
         <el-select style="width: 240px" v-model="queryParams.isShow" placeholder="请选择状态" clearable size="small" >
         <el-option
                v-for="item in isShowOptions"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              />
        </el-select>
      </el-form-item> -->

      <el-form-item>
        <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['store:storeProduct:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          icon="el-icon-edit"
          size="mini"
          :disabled="multiple"
          @click="handleUpdate"
          v-hasPermi="['store:storeProduct:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['store:storeProduct:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="info"
          plain
          icon="el-icon-upload2"
          size="mini"
          @click="handleImport"
          v-hasPermi="['store:storeProduct:import']"
        >导入</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['store:storePayment:export']"
        >导出</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          icon="el-icon-edit"
          size="mini"
          :disabled="multiple"
          @click="bulkCopy"
          v-hasPermi="['store:storeProduct:bulkCopy']"
        >批量复制</el-button>
      </el-col>

      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-tabs type="card" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="出售中" name="1"></el-tab-pane>
      <el-tab-pane label="待上架" name="0"></el-tab-pane>
    </el-tabs>

    <el-table  height="500" border v-loading="loading" :data="storeProductList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="ID" align="center" prop="productId" />
      <el-table-column label="商品图片" align="center" width="120">
        <template slot-scope="scope">
          <el-popover
            placement="right"
            title=""
            trigger="hover">
            <img slot="reference" :src="scope.row.image" width="100">
            <img :src="scope.row.image" style="max-width: 150px;">
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="商品名称" show-overflow-tooltip align="center" prop="productName" />
      <el-table-column label="分类" align="center" prop="cateName" />
      <el-table-column label="所属公司" align="center" min-width="160">
        <template slot-scope="scope">
          <div class="company-name-list">
            <div
              v-for="(name, idx) in getDisplayCompanyNameList(scope.row)"
              :key="idx"
              class="company-name-item"
            >{{ name }}</div>
            <el-button
              v-if="getCompanyNameList(scope.row.companyName).length > 3"
              type="text"
              size="mini"
              @click="toggleCompanyNameExpand(scope.row)"
            >
              {{ isCompanyNameExpanded(scope.row) ? '收起' : `展开(${getCompanyNameList(scope.row.companyName).length})` }}
            </el-button>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="所属店铺" align="center" prop="storeName" v-if="this.isStores"/>
      <el-table-column label="售价" align="center" prop="price" >
        <template slot-scope="scope" >
          <span v-if="scope.row.price!=null">{{scope.row.price.toFixed(2)}}</span>
        </template>
      </el-table-column>
      <el-table-column label="原价" align="center" prop="otPrice" >
        <template slot-scope="scope" >
          <span v-if="scope.row.otPrice!=null">{{scope.row.otPrice.toFixed(2)}}</span>
        </template>
      </el-table-column>
      <el-table-column label="销量" align="center" prop="sales" />
      <el-table-column label="库存" align="center" prop="stock" />
      <el-table-column label="活动类型" align="center" prop="activityType" width="100">
        <template slot-scope="scope">
          <!-- 活动已过期（end_time < now）就当“无活动”展示，
               避免列表里长期显示一个实际已结束的秒杀/团购 tag 误导运营 -->
          <template v-if="isActivityExpired(scope.row)">
            <el-tag type="info" size="small">无</el-tag>
          </template>
          <template v-else>
            <el-tag v-if="scope.row.activityType === 6" type="danger" size="small">秒杀</el-tag>
            <el-tag v-else-if="scope.row.activityType === 7" type="warning" size="small">限时折扣</el-tag>
            <el-tag v-else-if="scope.row.activityType === 8" type="success" size="small">限时团购</el-tag>
            <el-tag v-else type="info" size="small">无</el-tag>
          </template>
        </template>
      </el-table-column>
      <el-table-column label="类型" align="center" prop="productType" >
        <template slot-scope="scope">
          <el-tag prop="productType" v-for="(item, index) in productTypeOptions"    v-if="scope.row.productType==item.dictValue">{{item.dictLabel}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="isShow" >
        <template slot-scope="scope">
          <el-tag :type="getStatusType(scope.row)" prop="status">
            {{ getStatusText(scope.row) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-s-flag"
            @click="handleSetActivity(scope.row)"
            v-hasPermi="['store:storeProduct:edit']"
            v-if="scope.row.isAudit === '1'"
          >设置活动</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['store:storeProduct:edit']"
            v-if="!isProductInActivity(scope.row)"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="showOperLog(scope.row)"
            v-hasPermi="['store:storeProduct:list']"
            v-if="scope.row.isAudit===1"
          >审核记录</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['store:storeProduct:remove']"
            v-if="!isProductInActivity(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <el-dialog :title="title" :visible.sync="open1" width="580px" append-to-body>
      <el-form ref="form1" :model="form1" :rules="rules" label-width="80px">
        <el-form-item label="商品状态" prop="status">
          <el-radio-group v-model="form1.isShow">
            <el-radio :label="item.dictValue" v-for="item in isShowOptions" >{{item.dictLabel}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="商城展示" prop="isDisplay">
          <el-radio-group v-model="form1.isDisplay">
            <el-radio :label="item.dictValue" v-for="item in isDisplayOptions" >{{item.dictLabel}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="所属公司" prop="companyId">
          <el-select style="width: 220px" filterable multiple v-model="form1.companyId" placeholder="请选择公司名" clearable size="small">
            <el-option
              v-for="item in companyOptions"
              :key="item.companyId"
              :label="item.companyName"
              :value="item.companyId"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm1">确 定</el-button>
        <el-button @click="cancel1">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 添加或修改商品对话框 -->
    <el-dialog :title="title" v-if="open" :fullscreen="isFullscreen" :visible.sync="open" width="1000px" append-to-body :show-close="false">
      <template v-slot:title>
        <div style="display: flex; justify-content: space-between; align-items: center;">
          <span>{{ title }}</span>
          <div>
            <!-- 全屏按钮 -->
            <el-button type="text" @click="handleFullScreen" size="middle">
              <i class="el-icon-full-screen"></i>
            </el-button>
            <!--关闭按钮-->
            <el-button type="text" @click="open = false">
              <i class="el-icon-close"></i>
            </el-button>
          </div>
        </div>
      </template>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row >
          <el-col :span="12">
            <el-form-item label="商品名称" prop="productName">
              <el-input v-model="form.productName" placeholder="请输入商品名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商品分类" prop="cateId">
              <treeselect v-model="form.cateId" :options="categoryOptions" :normalizer="normalizer" placeholder="请选择上级分类" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="关键字" prop="keyword">
              <el-input v-model="form.keyword" placeholder="请输入关键字" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单位名" prop="unitName">
              <el-input v-model="form.unitName" placeholder="请输入单位名" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="品牌" prop="brand">
              <el-input v-model="form.brand" placeholder="请输入品牌" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="食品生产许可证编码" prop="unitName">
              <el-input v-model="form.foodProductionLicenseCode" placeholder="请输入食品生产许可证编码" />
            </el-form-item>
          </el-col>

        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="是否药品" prop="isDrug">
              <el-radio-group v-model="form.isDrug">
                <el-radio
                  v-for="item in isDrugOptions"
                  :key="item.dictValue"
                  :label="item.dictValue"
                >{{ item.dictLabel }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <div v-if="form.isDrug === '1' ">
          <el-form-item label="药品展示图" prop="drugImage">
            <Material v-model="drugImageArr" type="image" :num="1" :width="150" :height="150" />
          </el-form-item>
          <div v-if="this.isMedicalMall">
          <el-row>
            <el-col :span="12">
              <el-form-item label="药品注册证书编号" prop="drugRegCertNo">
                <el-input v-model="form.drugRegCertNo" placeholder="请输入药品注册证书编号" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="通用名称" prop="commonName">
                <el-input v-model="form.commonName" placeholder="请输入通用名称" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="剂型" prop="dosageForm">
                <el-input v-model="form.dosageForm" placeholder="请输入剂型" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="单价" prop="unitPrice">
                <el-input v-model="form.unitPrice" placeholder="请输入单价" type="number" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="批号" prop="batchNumber">
                <el-input v-model="form.batchNumber" placeholder="请输入批号" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="规格" prop="prescribeSpec">
                <el-input v-model="form.prescribeSpec" placeholder="请输入规格" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="上市许可持有人" prop="mah">
                <el-input v-model="form.mah" placeholder="请输入上市许可持有人" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="持有人地址" prop="mahAddress">
                <el-input v-model="form.mahAddress" placeholder="请输入上市许可持有人地址" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="生产企业" prop="manufacturer">
                <el-input v-model="form.manufacturer" placeholder="请输入生产企业" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="企业地址" prop="manufacturerAddress">
                <el-input v-model="form.manufacturerAddress" placeholder="请输入生产企业地址" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="功能主治" prop="indications">
            <el-input v-model="form.indications" type="textarea" placeholder="请输入功能主治" />
          </el-form-item>

          <el-form-item label="用法用量" prop="dosage">
            <el-input v-model="form.dosage" type="textarea" placeholder="请输入用法用量" />
          </el-form-item>

          <el-form-item label="不良反应" prop="adverseReactions">
            <el-input v-model="form.adverseReactions" type="textarea" placeholder="请输入不良反应" />
          </el-form-item>

          <el-form-item label="禁忌" prop="contraindications">
            <el-input v-model="form.contraindications" type="textarea" placeholder="请输入禁忌" />
          </el-form-item>

          <el-form-item label="注意事项" prop="precautions">
            <el-input v-model="form.precautions" type="textarea" placeholder="请输入注意事项" />
          </el-form-item>
        </div>
        </div>
        <el-row>
          <el-col :span="24">
            <el-form-item label="商品简介" prop="productInfo">
              <el-input v-model="form.productInfo" type="textarea" :rows="2" placeholder="请输入商品简介" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="标签类型" prop="tagType">
          <el-select v-model="tagType" multiple placeholder="请选择标签类型" clearable style="width: 100%" @change="onTagTypeChange">
            <el-option label="不分润商品" value="no_commission" />
            <el-option label="预售商品" value="presale" />
          </el-select>
        </el-form-item>
        <el-form-item label="最晚发货时间" prop="presaleShippingTime" v-if="tagType && tagType.includes('presale')">
          <el-date-picker
            v-model="presaleShippingTime"
            type="datetime"
            placeholder="请选择最晚发货时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="商品图片" prop="image">
          <Material v-model="imageArr" type="image" :num="1" :width="150" :height="150" />
        </el-form-item>
        <!--        <el-form-item label="商品视频" prop="video">
                  <div>
                    <el-upload
                      ref="upload"
                      class="upload-demo"
                      :action="uploadUrl"
                      :on-success="handleSuccess"
                      :before-upload="beforeUpload"
                      :limit="1"
                      :accept="videoAccept"
                    >
                      <el-button size="small" type="primary">点击上传视频</el-button>
                    </el-upload>
                    <video v-if="form.video" :src="form.video" controls style="max-width: 300px; max-height: 300px; margin-top: 10px"></video>
                  </div>
                </el-form-item>-->
        <el-form-item label="轮播图" prop="sliderImage">
          <Material v-model="photoArr" type="image" :num="10" :width="150" :height="150" />
        </el-form-item>
        <el-row>
          <el-col :span="24">
            <el-form-item label="商品规格：" props="specType">
              <el-radio-group v-model="form.specType" >
                <el-radio :label="0" class="radio">单规格</el-radio>
                <el-radio :label="1">多规格</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <!-- 多规格添加-->
          <el-col :span="24" v-if="form.specType === 1" class="noForm" >
            <el-col :span="24">
              <el-form-item label="选择规格：" prop="">
                <div  class="acea-row row-middle">
                  <el-select v-model="form.selectRule" style="width: 23%;">
                    <el-option v-for="(item, index) in ruleList" :value="item.ruleName" :key="index">{{ item.ruleName }}</el-option>
                  </el-select>
                  <el-button style="margin-left:10px;" type="primary" class="mr20" @click="confirm">确认</el-button>
                </div>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item v-if="attrs!=null&&attrs.length!==0">
                <div  v-for="(item, index) in attrs" :key="index">
                  <div class="acea-row row-middle"><span class="mr5">{{item.value}}</span>
                    <i class="el-icon-circle-close"  @click="handleRemoveRole(index)"></i>
                  </div>
                  <div class="rulesBox">
                    <el-tag type="dot" closable color="primary" v-for="(j, indexn) in item.detail" :key="indexn" :name="j" class="mr20" @close="handleRemove2(item.detail,indexn)">{{j}}</el-tag>
                    <el-input placeholder="请输入属性名称" v-model="item.detail.attrsVal"
                              style="width: 200px">
                      <el-button slot="append" type="primary" @click="createAttr(item.detail.attrsVal,index)">添加</el-button>
                    </el-input>
                  </div>
                </div>
              </el-form-item>
            </el-col>

            <el-col :span="24" v-if="createBnt">
              <el-form-item>
                <el-button type="primary" size="small" icon="md-add" @click="addBtn" class="mr15">添加新规格</el-button>
                <el-button type="success" size="small"  @click="generate">立即生成</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="24" v-if="showIput">
              <el-col  :xl="6" :lg="9" :md="10" :sm="24" :xs="24" >
                <el-form-item label="规格：">
                  <el-input  placeholder="请输入规格" v-model="formDynamic.attrsName"  />
                </el-form-item>
              </el-col>
              <el-col  :xl="6" :lg="9" :md="10" :sm="24" :xs="24">
                <el-form-item label="规格值：">
                  <el-input v-model="formDynamic.attrsVal" placeholder="请输入规格值"  />
                </el-form-item>
              </el-col>
              <el-col :xl="6" :lg="5" :md="10" :sm="24" :xs="24" >
                <el-button type="primary"    @click="createAttrName">确定</el-button>
                <el-button type="danger" @click="closeAttrName" >取消</el-button>
              </el-col>
            </el-col>
            <!-- 多规格设置-->
            <el-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24" v-if="manyFormValidate!=null&&manyFormValidate.length">
              <!-- 多规格表格-->
              <el-col :span="24">
                <el-form-item label="商品属性：" class="labeltop">

                  <el-table :data="manyFormValidate" size="small" style="width: 90%;" border>
                    <el-table-column type="myindex" v-for="(item,index) in form.header" :key="index"  :width="item.minWidth" :label="item.title" :property="item.slot" align="center">
                      <template slot-scope="scope">
                        <div v-if="scope.column.property == 'image'" align="center">
                          <single-img v-model="scope.row[scope.column.property]" type="image" :num="1" :width="60" :height="60" />
                        </div>
                        <div v-else-if="scope.column.property.indexOf('value') != -1" align="center">
                          {{ scope.row[scope.column.property] }}
                        </div>
                        <div v-else-if="scope.column.property == 'action'" align="center" >
                          <a @click="delAttrTable(scope.$index)" align="center">删除</a>
                        </div>
                        <div v-else align="center">
                          <el-input  v-model="scope.row[scope.column.property]" align="center" />
                        </div>
                      </template>
                    </el-table-column>
                  </el-table>

                </el-form-item>
              </el-col>
            </el-col>
          </el-col>

          <!-- 单规格表格-->
          <el-col :xl="23" :lg="24" :md="24" :sm="24" :xs="24" v-if="form.specType === 0" style="">
            <el-form-item >
              <el-table :data="oneFormValidate"  size="small" border>
                <el-table-column prop="image" label="图片" align="center">
                  <template slot-scope="scope">
                    <single-img v-model="scope.row.image" type="image" :num="1" :width="60" :height="60" />
                  </template>
                </el-table-column>
                <el-table-column prop="price" label="售价" align="center">
                  <template slot-scope="scope">
                    <el-input type="text" v-model="scope.row.price"/>
                  </template>
                </el-table-column>
                <el-table-column prop="agentPrice" label="代理价" align="center">
                  <template slot-scope="scope">
                    <el-input type="text" v-model="scope.row.agentPrice"/>
                  </template>
                </el-table-column>
                <el-table-column prop="cost" label="成本价" align="center">
                  <template slot-scope="scope">
                    <el-input type="text" v-model="scope.row.cost"/>
                  </template>
                </el-table-column>
                <el-table-column prop="otPrice" label="原价" align="center">
                  <template slot-scope="scope">
                    <el-input type="text" v-model="scope.row.otPrice"/>
                  </template>
                </el-table-column>
                <el-table-column prop="stock" label="库存" align="center">
                  <template slot-scope="scope">
                    <el-input type="text" v-model="scope.row.stock" maxlength="7"/>
                  </template>
                </el-table-column>
                <el-table-column prop="barCode" label="商品编号" width="130px" align="center">
                  <template slot-scope="scope">
                    <el-input type="text" v-model="scope.row.barCode"/>
                  </template>
                </el-table-column>
                <el-table-column prop="barCode" label="组合编号" width="130px" align="center">
                  <template slot-scope="scope">
                    <el-input type="text" v-model="scope.row.groupBarCode"/>
                  </template>
                </el-table-column>
                <el-table-column prop="weight" label="重量（KG）" align="center">
                  <template slot-scope="scope">
                    <el-input type="text" v-model="scope.row.weight"/>
                  </template>
                </el-table-column>
                <el-table-column prop="volume" label="体积(m³)" align="center">
                  <template slot-scope="scope">
                    <el-input type="text" v-model="scope.row.volume"/>
                  </template>
                </el-table-column>
                <el-table-column prop="volume" label="所需积分" align="center">
                  <template slot-scope="scope">
                    <el-input type="text" v-model="scope.row.integral"/>
                  </template>
                </el-table-column>
                <el-table-column prop="volume" label="一级返佣" align="center">
                  <template slot-scope="scope">
                    <el-input type="text" v-model="scope.row.brokerage"/>
                  </template>
                </el-table-column>
                <el-table-column prop="volume" label="二级返佣" align="center">
                  <template slot-scope="scope">
                    <el-input type="text" v-model="scope.row.brokerageTwo"/>
                  </template>
                </el-table-column>
                <el-table-column prop="volume" label="三级返佣" align="center">
                  <template slot-scope="scope">
                    <el-input type="text" v-model="scope.row.brokerageThree"/>
                  </template>
                </el-table-column>
              </el-table>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="运费模板：" prop="tempId">
              <div class="acea-row">
                <el-select
                  v-model="form.tempId"
                  class="mr20"
                  filterable
                  placeholder="可以输入文字进行过滤匹配"
                >
                  <el-option
                    v-for="(item, index) in templateList"
                    :value="item.id"
                    :key="index"
                    :label="item.name"
                  >
                  </el-option>
                </el-select>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="商品详情" prop="description">
          <editor ref="myeditor"   @on-text-change="updateText" />
        </el-form-item>
        <el-row>
          <el-col :span="8">
            <el-form-item label="商品状态" prop="isShow">
              <el-radio-group v-model="form.isShow">
                <el-radio :label="item.dictValue" v-for="item in isShowOptions" >{{item.dictLabel}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否热卖" prop="isHot">
              <el-radio-group v-model="form.isHot">
                <el-radio :label="item.dictValue" v-for="item in isHotOptions" >{{item.dictLabel}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="猜你喜欢" prop="isGood">
              <el-radio-group v-model="form.isGood">
                <el-radio :label="item.dictValue" v-for="item in isGoodOptions" >{{item.dictLabel}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="精品推荐" prop="isBest">
              <el-radio-group v-model="form.isBest">
                <el-radio :label="item.dictValue" v-for="item in isBestOptions" >{{item.dictLabel}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="新品首发" prop="isNew">
              <el-radio-group v-model="form.isNew">
                <el-radio :label="item.dictValue" v-for="item in isNewOptions" >{{item.dictLabel}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="返还积分">
              <el-input-number  v-model="form.giveIntegral" :min="0" placeholder="请输入积分" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="商城展示" prop="isDisplay">
              <el-radio-group v-model="form.isDisplay">
                <el-radio :label="item.dictValue" v-for="item in isDisplayOptions" >{{item.dictLabel}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">

            <el-form-item label="排序" prop="sort">
              <el-input-number :min="0"  v-model="form.sort" placeholder="请输入排序" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="销量" prop="sales">
              <el-input-number :min="0"  v-model="form.sales" placeholder="请输入销量" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="限购数量" prop="purchaseLimit">
              <el-input-number
                :min="0"
                v-model="form.purchaseLimit"
                placeholder="请输入限购数量"
                :controls="true"
                @input="handlePurchaseLimitInput"
              />
            </el-form-item>
          </el-col>

        </el-row>
        <el-form-item label="推广分类" prop="tuiCateId">
          <el-select style="width: 240px" v-model="form.tuiCateId" placeholder="请选择推广分类" clearable size="small" >
            <el-option
              v-for="item in productTuiCateOptions"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="商品类型" prop="productType">
          <el-select style="width: 240px" v-model="form.productType" placeholder="请选择商品类型" clearable size="small">
            <el-option
              v-for="item in productTypeOptions"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="所属公司">
          <el-select style="width: 240px" v-model="form.companyIds" multiple placeholder="请选择企业" clearable size="small" >
            <div style="padding: 0 20px; display: flex; justify-content: space-between; line-height: 34px;">
              <el-button type="text" size="mini" @click="form.companyIds = companyOptions.map(item => item.companyId)">全选</el-button>
              <el-button type="text" size="mini" @click="form.companyIds = companyOptions.map(item => item.companyId).filter(id => !form.companyIds.includes(id))">反选</el-button>
              <el-button type="text" size="mini" @click="form.companyIds = []">清空</el-button>
            </div>
            <el-option
              v-for="item in companyOptions"
              :key="item.companyId"
              :label="item.companyName"
              :value="item.companyId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="所属店铺" v-if="this.isStores">
          <el-select style="width: 240px" v-model="form.storeId" placeholder="请选择店铺" clearable size="small" >
            <el-option
              v-for="item in storeOptions"
              :key="item.storeId"
              :label="item.storeName"
              :value="item.storeId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="所属小程序" prop="appIds">
          <el-select style="width: 240px" v-model="appIds" placeholder="请选择所属小程序" clearable size="small" multiple>
            <el-option
              v-for="dict in appMallOptions"
              :key="dict.appid"
              :label="dict.name + '(' + dict.appid + ')'"
              :value="dict.appid"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="退货地址" prop="returnAddress">
          <el-input v-model="form.returnAddress" type="textarea" :rows="1" placeholder="请输入退货地址" />
        </el-form-item>
        <el-form-item label="国药准字" v-if="form.productType==2" prop="prescribeCode">
          <el-input v-model="form.prescribeCode" placeholder="请输入国药准字" />
        </el-form-item>
        <el-form-item label="规格" v-if="form.productType==2" prop="prescribeSpec">
          <el-input v-model="form.prescribeSpec" placeholder="请输入规格" />
        </el-form-item>
        <el-form-item label="生产厂家" v-if="form.productType==2" prop="prescribeFactory">
          <el-input v-model="form.prescribeFactory" placeholder="请输入生产厂家" />
        </el-form-item>
        <el-form-item label="处方名" v-if="form.productType==2" prop="prescribeName">
          <el-input v-model="form.prescribeName" placeholder="请输入处方名" />
        </el-form-item>
        <el-form-item label="分账(百分比)" prop="shareRate">
            <el-input-number v-model="form.shareRate"  :min="0" :max="100" label="分账比例"></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
      <el-upload
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <div class="el-upload__tip" slot="tip">
            <!--     <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的数据 -->
          </div>
          <span>仅允许导入xls、xlsx格式文件。</span>
          <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="importTemplate">下载模板</el-link>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 设置活动弹窗 -->
    <el-dialog title="设置活动" :visible.sync="activityDialogVisible" width="780px" append-to-body :close-on-click-modal="false">
      <!-- 活动进行中提示 -->
      <el-alert
        v-if="activityIsOngoing"
        :title="'当前商品正在' + (activityOngoingType === 6 ? '秒杀' : (activityOngoingType === 8 ? '限时团购' : '限时折扣')) + '活动中，活动进行期间无法修改活动设置'"
        type="error"
        :closable="false"
        show-icon
        style="margin-bottom:15px;"
      />

      <el-form ref="activityForm" :model="activityForm" :rules="activityRules" label-width="100px" :disabled="activityIsOngoing">
        <!-- 活动类型 -->
        <el-form-item label="活动类型" prop="activityType">
          <el-radio-group v-model="activityForm.activityType">
            <el-radio :label="0">不参与活动</el-radio>
            <el-radio :label="6">
              <i class="el-icon-lightning" style="color:#F56C6C;margin-right:2px;"></i>秒杀
            </el-radio>
            <el-radio :label="7">
              <i class="el-icon-time" style="color:#E6A23C;margin-right:2px;"></i>限时折扣
            </el-radio>
            <el-radio :label="8">
              <i class="el-icon-user-solid" style="color:#67C23A;margin-right:2px;"></i>限时团购
            </el-radio>
          </el-radio-group>
        </el-form-item>

        <!-- 统一活动时间（所有规格共用） -->
        <template v-if="activityForm.activityType === 6 || activityForm.activityType === 7 || activityForm.activityType === 8">
          <el-form-item label="活动时间" prop="startTime">
            <el-date-picker v-model="activityForm.startTime" type="datetime" placeholder="开始时间" value-format="yyyy-MM-dd HH:mm:ss" style="width:200px" size="small"/>
            <span style="margin:0 8px;color:#909399;">至</span>
            <el-date-picker v-model="activityForm.endTime" type="datetime" placeholder="结束时间" value-format="yyyy-MM-dd HH:mm:ss" style="width:200px" size="small"/>
          </el-form-item>
        </template>

        <!-- 团购人数（仅限时团购）：2~5 人，默认 5；参团并付款的人数达到该值时自动成团并触发发货 -->
        <template v-if="activityForm.activityType === 8">
          <el-form-item label="团购人数" prop="groupNum">
            <el-input-number v-model="activityForm.groupNum" :min="2" :max="5" :step="1" :precision="0" size="small" controls-position="right" style="width:200px"/>
            <span style="margin-left:8px;color:#909399;font-size:12px;">（限 2~5 人，默认 5 人；达到该人数并全部付款后自动成团发货）</span>
          </el-form-item>
        </template>

        <template v-if="activityForm.activityType === 6 || activityForm.activityType === 7 || activityForm.activityType === 8">
          <!-- 选择参与规格 -->
          <el-divider content-position="left">
            <span style="font-size:14px;font-weight:500;">选择参与规格</span>
          </el-divider>
          <div class="spec-select-list">
            <div
              v-for="(spec, idx) in activityAllSpecs"
              :key="idx"
              :class="['spec-select-item', spec.selected ? 'spec-select-active' : '', activityForm.activityType === 8 ? 'spec-select-disabled' : '']"
              @click="toggleSpecSelect(spec)"
            >
              <el-popover placement="right" trigger="hover" v-if="spec.image">
                <img slot="reference" :src="spec.image" class="spec-thumb" />
                <img :src="spec.image" style="max-width:200px;max-height:200px;" />
              </el-popover>
              <div class="spec-select-info">
                <span class="spec-select-name">{{ spec.specName }}</span>
                <span class="spec-select-detail">¥{{ spec.price }} · 库存{{ spec.specStock }}</span>
              </div>
              <i :class="spec.selected ? 'el-icon-circle-check' : 'el-icon-circle-plus-outline'" :style="{color: spec.selected ? '#409EFF' : '#C0C4CC', fontSize: '20px'}"></i>
            </div>
          </div>

          <!-- 已选规格活动设置 -->
          <template v-if="selectedSpecList.length > 0">
            <el-divider content-position="left">
              <span style="font-size:14px;font-weight:500;">规格活动设置</span>
              <span style="font-size:12px;color:#909399;margin-left:8px;">已选 {{ selectedSpecList.length }} 项</span>
            </el-divider>
            <div class="activity-spec-list">
              <div v-for="(spec, idx) in selectedSpecList" :key="idx" class="activity-spec-card">
                <div class="spec-card-header">
                  <div class="spec-header-left">
                    <el-popover placement="right" trigger="hover" v-if="spec.image">
                      <img slot="reference" :src="spec.image" class="spec-thumb" />
                      <img :src="spec.image" style="max-width:200px;max-height:200px;" />
                    </el-popover>
                    <span class="spec-name">{{ spec.specName }}</span>
                    <i v-if="activityForm.activityType !== 8" class="el-icon-remove-outline" style="color:#F56C6C;font-size:16px;cursor:pointer;margin-left:8px;" title="移除" @click="toggleSpecSelect(spec)"></i>
                  </div>
                </div>
                <div class="spec-detail-row">
                  <span class="spec-detail-item">售价 <b>¥{{ spec.price }}</b></span>
                  <span class="spec-detail-item">代理价 <b>¥{{ spec.agentPrice }}</b></span>
                  <span class="spec-detail-item">成本价 <b>¥{{ spec.cost }}</b></span>
                  <span class="spec-detail-item">原价 <b>¥{{ spec.otPrice }}</b></span>
                  <span class="spec-detail-item">库存 <b>{{ spec.specStock }}</b></span>
                  <span class="spec-detail-item" v-if="spec.barCode">编号 <b>{{ spec.barCode }}</b></span>
                </div>
                <el-row :gutter="16" class="spec-card-body">
                  <!-- 秒杀价 -->
                  <el-col :span="12" v-if="activityForm.activityType === 6">
                    <div class="spec-field">
                      <label>秒杀价</label>
                      <el-input-number v-model="spec.flashPrice" :precision="2" :min="0" :max="spec.originalPrice" size="small" placeholder="秒杀价" style="width:100%" controls-position="right"/>
                    </div>
                  </el-col>
                  <!-- 折扣设置 -->
                  <el-col :span="8" v-if="activityForm.activityType === 7">
                    <div class="spec-field">
                      <label>折扣 <span style="color:#E6A23C;font-weight:500;">{{ spec.discountValue ? spec.discountValue.toFixed(1) : '10.0' }}折</span></label>
                      <el-slider v-model="spec.discountValue" :min="1" :max="10" :step="0.1" :show-tooltip="false" @change="handleSpecDiscountChange(spec)"/>
                    </div>
                  </el-col>
                  <el-col :span="8" v-if="activityForm.activityType === 7">
                    <div class="spec-field">
                      <label>折扣价</label>
                      <el-input-number v-model="spec.discountPrice" :precision="2" :min="0" size="small" placeholder="折扣价" style="width:100%" controls-position="right" @change="handleSpecDiscountPriceChange(spec)"/>
                    </div>
                  </el-col>
                  <!-- 团购价（activityType=8 时必填） -->
                  <el-col :span="12" v-if="activityForm.activityType === 8">
                    <div class="spec-field">
                      <label>团购价 <span style="color:#F56C6C;">*</span></label>
                      <el-input-number v-model="spec.groupPrice" :precision="2" :min="0" :max="spec.originalPrice" size="small" placeholder="团购价" style="width:100%" controls-position="right"/>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </template>
          <div v-else style="text-align:center;padding:20px 0;color:#C0C4CC;font-size:13px;">
            请在上方选择需要参与活动的规格
          </div>
        </template>

        <el-form-item label="备注" style="margin-top:15px;">
          <el-input v-model="activityForm.remark" type="textarea" :rows="2" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" v-if="!activityIsOngoing">
        <el-button @click="activityDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitActivityForm" :loading="activitySubmitLoading">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {
  genFormatAttr,
  listStoreProduct,
  getStoreProduct,
  delStoreProduct,
  addOrEdit,
  exportStoreProduct,
  importTemplate,
  batchModify,bulkCopy
} from "@/api/hisStore/storeProduct";
import { getAllStoreProductCategory } from "@/api/hisStore/storeProductCategory";
import { getAllStoreProductRule } from "@/api/hisStore/storeProductRule";
import { getAllShippingTemplates } from "@/api/hisStore/shippingTemplates";
import { getToken } from "@/utils/auth";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import Editor from '@/components/Editor/wang';
import Material from '@/components/Material'
import singleImg from '@/components/Material/single'
import { getCompanyList } from "@/api/company/company";
import { listStore } from '@/api/hisStore/store'
import {list as getAppMallOptions} from "@/api/course/coursePlaySourceConfig";
import { getActivityByProductId, saveActivity } from "@/api/hisStore/productActivity";
import { listStoreProductAttrValue } from "@/api/hisStore/storeProductAttrValue";
export default {
  name: "HisStoreProduct",
  components: {
    Treeselect,
    Editor,
    Material,
    singleImg,
  },
  watch: {
    imageArr: function(val) {
      this.form.image = val.join(',')
    },
    photoArr: function(val) {
      this.form.sliderImage = val.join(',')
    },
    drugImageArr: function(val) {
      this.form.drugImage = val.join(',');
    },
    'activityForm.activityType': function(val) {
      // 限时团购：默认全选所有规格，不允许手动取消
      if (val === 8 && this.activityAllSpecs && this.activityAllSpecs.length > 0) {
        this.activityAllSpecs.forEach(s => { s.selected = true; });
      }
    }
  },
  computed: {
    selectedSpecList() {
      return this.activityAllSpecs.filter(s => s.selected);
    }
  },
  data() {
    return {
      isMedicalMall: this.$store.state.user.medicalMallConfig.medicalMall,
      // isStores: this.$store.state.user.medicalMallConfig.stores,
      isStores: true,
      companyId: null,
      storeId: null,
      isAudit: null,
      uploadUrl:process.env.VUE_APP_BASE_API+"/common/uploadOSS",
      //videoAccept:"video/*",
      upload: {
        // 是否显示弹出层
        open: false,
        // 弹出层标题
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/store/store/storeProduct/importData"
      },
      // 添加药品相关字段
      isDrugOptions: [
        { dictValue: "0", dictLabel: "否" },
        { dictValue: "1", dictLabel: "是" }
      ],

      // 药品展示图
      drugImageArr: [],

      productTuiCateOptions:[],
      showIput: false,
      createBnt:true,
      // 规格数据
      formDynamic: {
        attrsName: '',
        attrsVal: ''
      },
      open1: false,
      form1: {},
      isBtn: false,
      columns: [],
      attrs:[],
      templateList:[],
      ruleList:[],
      // 多规格表格data
      manyFormValidate: [],
      // 单规格表格data
      oneFormValidate: [
        {
          image: '',
          price: 0,
          cost: 0,
          agentPrice: 0,
          otPrice: 0,
          stock: 0,
          barCode: '',
          weight: 0,
          volume: 0,
          integral: 0
        }
      ],
      photoArr:[],
      imageArr:[],
      tagType: [],
      presaleShippingTime: null,
      activeName:"1",
      productTypeOptions:[],
      isDisplayOptions:[],
      isGoodOptions:[],
      isNewOptions:[],
      isBestOptions:[],
      isHotOptions:[],
      isShowOptions:[],
      categoryOptions:[],
      // 企业列表
      companyOptions:[],
      storeOptions:[],
      // 活动设置相关
      activityDialogVisible: false,
      activityIsOngoing: false,
      activityOngoingType: null,
      activityCurrentProduct: null,
      activitySubmitLoading: false,
      activityForm: {
        activityType: 0,
        startTime: null,
        endTime: null,
        // 团购人数默认 5 人（系统允许范围 2~5）
        groupNum: 5,
        remark: null
      },
      activitySpecList: [],
      activityAllSpecs: [],
      activityRules: {
        activityType: [{ required: true, message: '请选择活动类型', trigger: 'change' }],
        startTime: [{ required: true, message: '请选择活动开始时间', trigger: 'change' }]
      },
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: false,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      isFullscreen: false,
      // 总条数
      total: 0,
      // 商品表格数据
      storeProductList: [],
      expandedCompanyRows: {},
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 小程序列表
      appMallOptions:[],
      appIds:[], // 选择的小程序
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        productName: null,
        productType: null,
        productTypes: [],
        isShow: "1",
        barCode:null,
        companyIds: null,
        storeIds: null,
        drugRegCertNo: null,
        commonName: null,
        dosageForm: null,
        unitPrice: null,
        batchNumber: null,
        mah: null,
        mahAddress: null,
        manufacturer: null,
        manufacturerAddress: null,
        indications: null,
        dosage: null,
        adverseReactions: null,
        contraindications: null,
        precautions: null,
        appId:null
      },
      // 表单参数
      form: {},
      storeForm: {isAudit:1,status:1},
      // 表单校验
      rules: {
        image: [
          { required: true, message: "商品图片不能为空", trigger: "blur" }
        ],
        sliderImage: [
          { required: true, message: "轮播图不能为空", trigger: "blur" }
        ],
        productName: [
          { required: true, message: "商品名称不能为空", trigger: "blur" }
        ],
        // productInfo: [
        //   { required: true, message: "商品简介不能为空", trigger: "blur" }
        // ],
        // unitName: [
        //   { required: true, message: "单位名不能为空", trigger: "blur" }
        // ],
        // keyword: [
        //   { required: true, message: "关键字不能为空", trigger: "blur" }
        // ],
        cateId: [
          { required: true, message: "分类id不能为空", trigger: "blur" }
        ],
        price: [
          { required: true, message: "商品价格不能为空", trigger: "blur" }
        ],
        prescribeCode: [
          { required: true, message: "国药准字不能为空", trigger: "blur" }
        ],
        prescribeSpec: [
          { required: true, message: "规格不能为空", trigger: "blur" }
        ],
        prescribeFactory: [
          { required: true, message: "生产厂家不能为空", trigger: "blur" }
        ],
        prescribeName: [
          { required: true, message: "处方药不能为空", trigger: "blur" }
        ],
        companyIds: [
          { required: true, message: "销售公司不能为空", trigger: "blur" }
        ],
        // 药品相关字段校验（仅在是药品时必填）
        drugImage: [
          { required: true, message: "药品展示图不能为空", trigger: "blur" }
        ],
        drugRegCertNo: [
          { required: true, message: "药品注册证书编号不能为空", trigger: "blur" }
        ],
        commonName: [
          { required: true, message: "通用名称不能为空", trigger: "blur" }
        ],
        dosageForm: [
          { required: true, message: "剂型不能为空", trigger: "blur" }
        ],
        unitPrice: [
          { required: true, message: "单价不能为空", trigger: "blur" }
        ],
        batchNumber: [
          { required: true, message: "批号不能为空", trigger: "blur" }
        ],
        mah: [
          { required: true, message: "上市许可持有人不能为空", trigger: "blur" }
        ],
        mahAddress: [
          { required: true, message: "上市许可持有人地址不能为空", trigger: "blur" }
        ],
        manufacturer: [
          { required: true, message: "生产企业不能为空", trigger: "blur" }
        ],
        manufacturerAddress: [
          { required: true, message: "生产企业地址不能为空", trigger: "blur" }
        ],
        indications: [
          { required: true, message: "功能主治不能为空", trigger: "blur" }
        ],
        dosage: [
          { required: true, message: "用法用量不能为空", trigger: "blur" }
        ],
        adverseReactions: [
          { required: true, message: "不良反应不能为空", trigger: "blur" }
        ],
        contraindications: [
          { required: true, message: "禁忌不能为空", trigger: "blur" }
        ],
        precautions: [
          { required: true, message: "注意事项不能为空", trigger: "blur" }
        ],
        storeId :[
          { required: true, message: "所属店铺不能为空", trigger: "blur"}
        ],
      }
    };
  },
  created() {
    this.getDicts("store_product_tui_cate").then((response) => {
      this.productTuiCateOptions = response.data;
    });
    this.getDicts("store_product_enable").then((response) => {
      this.isNewOptions = response.data;
      this.isBestOptions = response.data;
      this.isHotOptions = response.data;
      this.isGoodOptions=response.data;
      this.isDisplayOptions=response.data;
    });
    this.getDicts("store_product_type").then((response) => {
      this.productTypeOptions = response.data;
      if(!this.isMedicalMall &&
      this.productTypeOptions.length === 4){
        //删除后两项
        this.productTypeOptions.splice(2,2);
      }
    });
    this.getDicts("store_product_is_show").then((response) => {
      this.isShowOptions = response.data;
    });
    getAllShippingTemplates().then(response => {
      this.templateList =response.data;
    });
    getAllStoreProductRule().then(response => {
      this.ruleList =response.data;
    });
    getCompanyList().then(response => {
      this.companyOptions = response.data;
    });
    // 查询小程序
    this.getAppMallOptions();

    listStore(this.storeForm).then(response => {
      this.storeOptions = response.rows;
    });
    this.getTreeselect();
    this.getList();
  },
  methods: {
    getAppMallOptions() {
      getAppMallOptions({pageNum:1,pageSize:100}).then(response => {
        this.appMallOptions = response.rows;
      })
    },
    getCompanyNameList(companyName) {
      if (!companyName) {
        return [];
      }
      return String(companyName).split(/[,，]/).map(s => s.trim()).filter(Boolean);
    },
    getDisplayCompanyNameList(row) {
      const list = this.getCompanyNameList(row.companyName);
      if (list.length <= 3 || this.isCompanyNameExpanded(row)) {
        return list;
      }
      return list.slice(0, 3);
    },
    isCompanyNameExpanded(row) {
      return !!this.expandedCompanyRows[row.productId];
    },
    toggleCompanyNameExpand(row) {
      const key = row.productId;
      this.$set(this.expandedCompanyRows, key, !this.expandedCompanyRows[key]);
    },
    getStatusText(row) {
      if (row.isAudit == 0) {
        return '待审核';
      }
      if (row.isAudit == 2) {
        return '审核退回';
      }
      const option = this.isShowOptions.find(item => item.dictValue == row.isShow);
      return option ? option.dictLabel : '未知状态';
    },

    getStatusType(row) {
      if (row.isAudit == 0) {
        return 'warning';
      }
      if (row.isAudit == 2) {
        return 'danger';
      }
      const statusMap = {
        0: 'warning',
        1: 'success',
        2: 'danger'
      };
      return statusMap[row.isShow] || 'info';
    },
    cancel1(){
      this.open1 = false;
    },
    submitForm1(){
      let param = {}
      param.productId = this.ids;
      param.goodsStatus = this.form1.isShow;
      param.goodsIsShow = this.form1.isDisplay;
      param.companyIds = this.form1.companyId.join(',');
      batchModify(param).then(res=>{
        if(res.code === 200){
          this.$message.success("批量修改成功");
          this.getList();
        }
      }).finally(()=>{
        this.open1 = false;
        this.form1.isShow = null;
        this.form1.isDisplay = null;
        this.form1.companyId = null;
      })
    },
    handleFullScreen(){
      this.isFullscreen = !this.isFullscreen;
    },
    handleSuccess(response, file) {
      // 上传成功后的回调函数
      this.myloading.close();
      //this.form.video = response.url;
      this.$refs.upload.clearFiles();
    },
    beforeUpload(file) {
      // 上传前的钩子函数，可以在这里对文件进行处理
      // 返回 false 则取消上传

      // 例如限制文件大小
      const isLt2M = file.size / 1024 / 1024 < 200;
      if (!isLt2M) {
        this.$message.error('上传视频文件大小不能超过 200MB!');
        return false;
      }
      this.myloading = this.$loading({
        lock: true,
        text: '上传中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });

    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
      this.getList();
    },
    handleImport() {
      this.upload.title = "商品导入";
      this.upload.open = true;
    },
    importTemplate() {
      importTemplate().then(response => {
        this.download(response.msg);
      });
    },
    // 删除表格中的属性
    delAttrTable (index) {
      this.manyFormValidate.splice(index, 1);
    },
    addBtn () {
      this.clearAttr();
      this.createBnt = false;
      this.showIput = true;
    },
    //生成SKU
    generate () {
      var prodoct = this.form.productId?this.form.productId:0;
      genFormatAttr(prodoct, { attrs: this.attrs }).then(res => {
        if(this.form.specType === 0){
          this.oneFormValidate = res.value;
          this.form.header = res.header;
          let header = res.header;
          header.pop();
          this.oneFormValidate.map((item) => {
            if(this.imageArr.length>0){
              item.image = this.imageArr[0]
            }
          });
        }else if(this.form.specType === 1) {
          this.manyFormValidate = res.value;
          let headerdel = {
            title: '操作',
            slot: 'action',
            fixed: 'right',
            width: 220
          };
          res.header.push(headerdel);
          this.form.header = res.header;
          let header = res.header;
          header.pop();
          // this.manyFormValidate.map((item) => {
          //   if(this.imageArr.length>0){
          //     item.image = this.imageArr[0]
          //   }
          // });
        }

      }).catch(res => {
      })
    },
    // 取消添加新规格
    closeAttrName () {
      this.showIput = false;
      this.createBnt = true;
    },
    clearAttr () {
      this.formDynamic.attrsName = '';
      this.formDynamic.attrsVal = '';
    },
    // 处理限购数量输入
    handlePurchaseLimitInput(value) {
      // 只允许输入纯数字
      if (value !== null && value !== undefined && value !== '') {
        // 如果不是数字,设置为null
        if (isNaN(value) || value < 0) {
          this.$nextTick(() => {
            this.form.purchaseLimit = null;
          });
        } else {
          // 确保是整数
          this.form.purchaseLimit = Math.floor(Number(value));
        }
      }
    },
    // 删除规格
    handleRemoveRole (index) {
      this.attrs.splice(index, 1);
      this.manyFormValidate.splice(index, 1);
    },
    // 删除属性
    handleRemove2 (item, index) {
      item.splice(index, 1);
    },
    // 添加规则名称
    createAttrName () {
      if (this.formDynamic.attrsName && this.formDynamic.attrsVal) {
        let data = {
          value: this.formDynamic.attrsName,
          detail: [
            this.formDynamic.attrsVal
          ]
        };
        this.attrs.push(data);
        var hash = {};
        this.attrs = this.attrs.reduce(function (item, next) {
          hash[next.value] ? '' : hash[next.value] = true && item.push(next);
          return item
        }, [])
        this.clearAttr();
        this.showIput = false;
        this.createBnt = true;
      } else {
        this.$message.warning('请添加完整的规格！');
      }
    },
    // 添加属性
    createAttr (num, idx) {
      if (num) {
        this.attrs[idx].detail.push(num);
        var hash = {};
        this.attrs[idx].detail = this.attrs[idx].detail.reduce(function (item, next) {
          hash[next] ? '' : hash[next] = true && item.push(next);
          return item
        }, [])
      } else {
        this.$message.warning('请添加属性！');
      }
    },
    confirm () {
      let that = this;
      that.createBnt = true;
      if (that.form.selectRule==null||that.form.selectRule.trim().length <= 0) {
        return this.$message({
          message:'请选择属性',
          type: 'error'
        });
      }
      that.ruleList.forEach(function (item, index) {
        if (item.ruleName === that.form.selectRule) {
          that.attrs =JSON.parse( item.ruleValue);

        }
      });

    },
    updateText(text){
      this.form.description=text
    },
    handleClick(tab, event) {
      this.queryParams.isShow=tab.name;
      this.getList();
    },
    /** 转换商品分类数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.cateId,
        label: node.cateName,
        children: node.children
      };
    },
    getTreeselect() {
      getAllStoreProductCategory().then(response => {
        this.categoryOptions = [];
        const data = this.handleTree(response.data, "cateId", "pid");
        this.categoryOptions=data;
      });
    },
    /** 查询商品列表 */
    getList() {
      this.loading = true;
      listStoreProduct(this.queryParams).then(response => {
        this.storeProductList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 标签类型变更
    onTagTypeChange(val) {
      if (!val || !val.includes('presale')) {
        this.presaleShippingTime = null;
      }
    },
    // 表单重置
    reset() {
      this.form = {
        productId: null,
        image: null,
        video: null,
        sliderImage: null,
        productName: null,
        productInfo: null,
        keyword: null,
        barCode: null,
        cateId: null,
        price: null,
        vipPrice: null,
        otPrice: null,
        postage: null,
        unitName: null,
        sort: null,
        sales: null,
        stock: null,
        isShow: "0",
        isHot: "0",
        isBenefit: "0",
        isBest: "0",
        isNew: "0",
        description: null,
        createTime: null,
        updateTime: null,
        isPostage: null,
        foodProductionLicenseCode: null,
        brand: null,
        isDel: null,
        giveIntegral: null,
        cost: null,
        isGood: "0",
        browse: null,
        codePath: null,
        tempId: "",
        specType: 0,
        isIntegral: null,
        integral: null,
        productType: "1",
        prescribeCode: null,
        prescribeSpec: null,
        prescribeFactory: null,
        prescribeName: null,
        isDisplay:"1",
        companyIds:[],
        returnAddress: "", // 退货地址
        isDrug: "1", // 是否药品
        drugImage: null, // 药品展示图
        drugRegCertNo: null, // 药品注册证书编号
        commonName: null, // 通用名称
        dosageForm: null, // 剂型
        unitPrice: null, // 单价
        batchNumber: null, // 批号
        mah: null, // 上市许可持有人
        mahAddress: null, // 上市许可持有人地址
        manufacturer: null, // 生产企业
        manufacturerAddress: null, // 生产企业地址
        indications: null, // 功能主治
        dosage: null, // 用法用量
        adverseReactions: null, // 不良反应
        contraindications: null, // 禁忌
        precautions: null, // 注意事项
        purchaseLimit: null, // 限购数量
        tagInfo: null // 标签信息
      };
      // 重置标签类型和预售发货时间
      this.tagType = [];
      this.presaleShippingTime = null;
      // 重置药品展示图
      this.drugImageArr = [];
      this.resetForm("form");
      this.oneFormValidate = [
        {
          image: '',
          price: 0,
          agentPrice: 0,
          cost: 0,
          otPrice: 0,
          stock: 0,
          barCode: '',
          weight: 0,
          volume: 0,
          integral: 0,
          brokerage:0,
          brokerageTwo:0
        }
      ]
      this.attrs=[];
      this.photoArr=[];
      this.imageArr=[];
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      if (this.companyId){
        this.queryParams.companyIds = this.companyId +''
      }
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.companyId = null;
      this.queryParams.companyIds = null;
      this.queryParams.storeIds = null;
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.productId)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();

      this.open = true;
      this.title = "添加商品";
      setTimeout(() => {
        this.$refs.myeditor.setText("");
      }, 500);

    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      if(this.ids.length > 1){
        this.title = "批量修改商品";
        this.open1 = true;
        return;
      }
      var that=this;
      this.reset();
      const productId = row.productId || this.ids
      getStoreProduct(productId).then(response => {
        this.form = response.data;
        this.form.isShow = response.data.isShow.toString();
        this.form.isHot = response.data.isHot.toString();
        this.form.isGood = response.data.isGood.toString();
        this.form.isBest = response.data.isBest.toString();
        this.form.isNew = response.data.isNew.toString();
        this.form.productType = response.data.productType.toString();
        this.form.isDisplay = response.data.isDisplay.toString();
        if(this.form.tuiCateId!=null){
          this.form.tuiCateId = response.data.tuiCateId.toString();
        }
        // this.form.isDrug = response.data.isDrug ? response.data.isDrug.toString() : "1";
        this.form.isDrug = response.data.isDrug === 0 ? "0" : (response.data.isDrug ? response.data.isDrug.toString() : "1");
        if (this.form.drugImage != null) {
          this.drugImageArr = this.form.drugImage.split(",");
        }

        //组装attrs数据
        if(response.attrs!=null){
          this.attrs=[];
          response.attrs.forEach(function (item, index) {
            var data={value:item.attrName,detail:item.attrValues.split(',')}
            that.attrs.push(data);
          });
        }
        // 组装companyIds
        if (this.form.companyIds != null && this.form.companyIds != undefined && response.data.companyIds.length > 0) {
          this.form.companyIds = response.data.companyIds.split(',').map(Number);
        }
        // 解析标签信息
        if (this.form.tagInfo) {
          try {
            const tagObj = JSON.parse(this.form.tagInfo);
            // type 兼容单值(旧)和数组(新)
            if (Array.isArray(tagObj.type)) {
              this.tagType = tagObj.type;
            } else if (tagObj.type) {
              this.tagType = [tagObj.type];
            } else {
              this.tagType = [];
            }
            this.presaleShippingTime = tagObj.shippingTime || null;
          } catch (e) {
            this.tagType = [];
            this.presaleShippingTime = null;
          }
        } else {
          this.tagType = [];
          this.presaleShippingTime = null;
        }
        this.appIds = this.form.appIds ? this.form.appIds.split(',') : [];
        setTimeout(() => {
          that.generate();
        }, 200);
        if(this.form.specType === 0){
          that.manyFormValidate = [];
        }else {
          that.createBnt = true;
          that.oneFormValidate = [
            {
              image: '',
              price: 0,
              agentPrice: 0,
              cost: 0,
              otPrice: 0,
              stock: 0,
              barCode: '',
              weight: 0,
              volume: 0,
              integral: 0,
              brokerage:0,
              brokerageTwo:0
            }
          ]
        }
        setTimeout(() => {
          if(this.form.description==null){
            this.$refs.myeditor.setText("");
          }
          else{
            this.$refs.myeditor.setText(this.form.description);
          }
        }, 200);
        if(this.form.image!=null){
          this.imageArr=this.form.image.split(",");
        }
        if(this.form.sliderImage!=null){
          this.photoArr=this.form.sliderImage.split(",");
        }
        this.open = true;
        this.title = "修改商品";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if(this.form.specType ===0 ){
            this.form.items = [];
            this.form.values = this.oneFormValidate;
          }else{
            this.form.items = this.attrs;
            this.form.values = this.manyFormValidate;
          }
          if(this.form.specType === 1 && this.manyFormValidate.length===0){
            return this.$message.warning('请点击生成规格！');
          }
          // 组装companyIds
          if (this.form.companyIds != null && this.form.companyIds != undefined) {
            this.form.companyIds = this.form.companyIds.join(',');
          }
          // 组装标签信息 tagInfo
          if (this.tagType && this.tagType.length > 0) {
            const tagObj = { type: this.tagType };
            if (this.tagType.includes('presale') && this.presaleShippingTime) {
              tagObj.shippingTime = this.presaleShippingTime;
            }
            this.form.tagInfo = JSON.stringify(tagObj);
          } else {
            this.form.tagInfo = null;
          }
          // 小程序
          const params = {
            ...this.form,
            appIds: this.appIds.join(',') // 数组转字符串
          };
          addOrEdit(params).then(response => {
            if (response.code === 200) {
              // 根据是否有productId判断是新增还是修改
              if (this.form.productId) {
                this.msgSuccess("修改成功");
              } else {
                this.msgSuccess("新增成功");
              }
              this.open = false;
              this.getList();
            }
          }).catch(error => {
            this.$message.error('请求失败: ' + error.message)
          });
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const productIds = row.productId || this.ids;
      this.$confirm('是否确认删除商品编号为"' + productIds + '"的数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function() {
        return delStoreProduct(productIds);
      }).then(() => {
        this.getList();
        this.msgSuccess("删除成功");
      }).catch(function() {});
    },
    /** 复制按钮操作 */
    bulkCopy(row) {
      const productIds = row.productId || this.ids;
      this.$confirm('是否确认复制商品编号为"' + productIds + '"的数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function() {
        return bulkCopy(productIds);
      }).then(() => {
        this.getList();
        this.msgSuccess("复制成功");
      }).catch(function() {});
    },
    /** 判断商品活动是否“已过期”：activity_type 有值 且 end_time 在当前时间之前
     *  给列表的“活动类型”列用——过期了就跳过 tag 展示，统一显示“无”。
     *  注：存在 activityType 但 end_time 为空时算“未过期”（不误杀新活动的展示） */
    isActivityExpired(row) {
      if (!row || !row.activityType || row.activityType === 0) return false;
      if (!row.activityEndTime) return false;
      return new Date(row.activityEndTime).getTime() < Date.now();
    },
    /** 判断商品是否“活动进行中”：activity_type 存在 且 now 在 [start, end] 之间
     *  活动中不允许修改/删除商品，重点防护后台 saveActivity 逻辑已锁定的商品，避免商品信息跟活动参数不一致 */
    isProductInActivity(row) {
      if (!row || !row.activityType || row.activityType === 0) return false;
      // 后台返回的是 ISO 时间字符串 或 yyyy-MM-dd HH:mm:ss，new Date 都能解析
      const start = row.activityStartTime ? new Date(row.activityStartTime).getTime() : null;
      const end = row.activityEndTime ? new Date(row.activityEndTime).getTime() : null;
      const now = Date.now();
      // 两边都有才能认为「进行中」，缺一个就认为数据异常，不锁按钮（避免误伤）
      if (start == null || end == null) return false;
      return now >= start && now <= end;
    },
    /** 设置活动按钮操作 */
    handleSetActivity(row) {
      // // 校验审核状态：只有审核通过的商品才能设置活动
      // if (row.isAudit !== 1) {
      //   this.$message.warning('商品审核通过后才能设置活动');
      //   return;
      // }
      this.activityCurrentProduct = row;
      this.activityIsOngoing = false;
      this.activityOngoingType = null;
      this.activityForm = {
        activityType: 0,
        startTime: null,
        endTime: null,
        // 团购人数默认 5 人（系统允许范围 2~5）
        groupNum: 5,
        remark: null
      };
      this.activitySpecList = [];
      this.activityAllSpecs = [];

      // 先查询已有活动设置
      getActivityByProductId(row.productId).then(res => {
        const activityList = res.data || [];
        this.activityIsOngoing = res.isOngoing || false;
        this.activityOngoingType = res.ongoingActivityType || null;

        if (activityList.length > 0) {
          // 回显已有活动设置
          const first = activityList[0];
          this.activityForm.activityType = first.activityType || 0;
          this.activityForm.remark = first.remark;
          this.activityForm.startTime = first.startTime || null;
          this.activityForm.endTime = first.endTime || null;
          if (first.groupNum != null) {
            this.activityForm.groupNum = first.groupNum;
          }
        } else {
          // 从商品表获取activityType
          this.activityForm.activityType = row.activityType || 0;
        }

        // 加载商品规格数据
        this.loadActivitySpecList(row.productId, activityList);

        this.activityDialogVisible = true;
      }).catch(() => {
        // 查询失败时仍然打开弹窗，使用商品行数据
        this.activityForm.activityType = row.activityType || 0;
        this.loadActivitySpecList(row.productId, []);
        this.activityDialogVisible = true;
      });
    },

    /** 加载活动规格列表 */
    loadActivitySpecList(productId, existActivityList) {
      // 先获取商品基本信息（确定specType），再获取规格值列表
      getStoreProduct(productId).then(res => {
        const productData = res.data;
        listStoreProductAttrValue({ productId: productId, pageNum: 1, pageSize: 999 }).then(attrRes => {
          const attrValues = attrRes.rows || [];
          let specList = attrValues.map(v => ({
            specId: v.id,
            specName: v.sku || ('规格' + v.id),
            image: v.image || productData.image || null,
            price: v.price || 0,
            agentPrice: v.agentPrice || 0,
            cost: v.cost || 0,
            otPrice: v.otPrice || 0,
            specStock: v.stock || 0,
            barCode: v.barCode || '',
            originalPrice: v.price || 0,
            startTime: null,
            endTime: null,
            flashPrice: null,
            discountValue: 10,
            discount: null,
            discountPrice: null,
            groupPrice: null,
            stock: null,
            selected: false
          }));

          // 回显已有活动数据
          this.mergeExistActivity(specList, existActivityList);
          // 限时团购：强制全选
          if (this.activityForm.activityType === 8) {
            specList.forEach(s => { s.selected = true; });
          }
          this.activityAllSpecs = specList;
        })
      });
    },

    /** 切换规格选中状态 */
    toggleSpecSelect(spec) {
      // 限时团购：默认全选且不允许更改
      if (this.activityForm.activityType === 8) return;
      spec.selected = !spec.selected;
    },

    /** 合并已有活动数据到规格列表（含团购价回显）
     *  注意：specId 后端是 Long，若 Jackson 配置了 Long→String 防 JS 精度丢失，
     *  这里直接 === 会判不上，导致整行回显失败（团购价/秒杀价/折扣 都回显不出来）。
     *  统一用 String() 比较兜底。 */
    mergeExistActivity(specList, existActivityList) {
      if (!existActivityList || existActivityList.length === 0) return;
      specList.forEach(spec => {
        const matched = existActivityList.find(a => {
          if (spec.specId !== null && spec.specId !== undefined) {
            return String(a.specId) === String(spec.specId);
          }
          return true;
        });
        if (!matched) return;
        spec.selected = true;
        spec.flashPrice = matched.flashPrice;
        spec.discount = matched.discount;
        spec.discountPrice = matched.discountPrice;
        // 团购价：BigDecimal 序列化后可能是数字也可能是字符串，统一转 Number 给 el-input-number
        spec.groupPrice = matched.groupPrice != null ? Number(matched.groupPrice) : null;
        spec.stock = matched.stock;
        spec.originalPrice = matched.originalPrice || spec.originalPrice;
        spec.startTime = matched.startTime;
        spec.endTime = matched.endTime;
        // 折扣值转换：discount存的是0.8格式，滑块需要8格式
        if (matched.discount) {
          spec.discountValue = Number((matched.discount * 10).toFixed(1));
        }
      });
    },

    /** 折扣滑块变化时计算折扣价 */
    handleSpecDiscountChange(row) {
      if (row.originalPrice && row.discountValue) {
        const discount = row.discountValue / 10;
        row.discount = discount;
        row.discountPrice = Math.round(row.originalPrice * discount * 100) / 100;
      }
    },

    /** 折扣价变化时反算折扣 */
    handleSpecDiscountPriceChange(row) {
      if (row.originalPrice && row.discountPrice) {
        const discount = row.discountPrice / row.originalPrice;
        row.discount = Math.round(discount * 1000) / 1000;
        row.discountValue = Math.round(discount * 100) / 10;
      }
    },

    /** 提交活动设置 */
    submitActivityForm() {
      this.$refs['activityForm'].validate(valid => {
        if (!valid) return;

        const { activityType, remark } = this.activityForm;

        if (activityType === 0) {
          // 不参与活动，直接保存
          this.activitySubmitLoading = true;
          saveActivity({
            productId: this.activityCurrentProduct.productId,
            activityType: 0,
            activityList: []
          }).then(res => {
            if (res.code === 200) {
              this.$message.success('活动设置已清除');
              this.activityDialogVisible = false;
              this.getList();
            } else {
              this.$message.error(res.msg || '保存失败');
            }
          }).finally(() => {
            this.activitySubmitLoading = false;
          });
          return;
        }

        // 校验统一活动时间
        if (!this.activityForm.startTime) {
          this.$message.warning('请选择活动开始时间');
          return;
        }
        if (!this.activityForm.endTime) {
          this.$message.warning('请选择活动结束时间');
          return;
        }
        // 时间区间必须大于当前时间，开始时间必须小于结束时间
        const _nowTs = Date.now();
        const _startTs = new Date(this.activityForm.startTime.replace(/-/g, '/')).getTime();
        const _endTs = new Date(this.activityForm.endTime.replace(/-/g, '/')).getTime();
        if (isNaN(_startTs) || isNaN(_endTs)) {
          this.$message.warning('活动时间格式有误');
          return;
        }
        if (_startTs >= _endTs) {
          this.$message.warning('活动开始时间必须早于结束时间');
          return;
        }
        if (_endTs <= _nowTs) {
          this.$message.warning('活动结束时间必须大于当前时间');
          return;
        }

        // 限时团购：独立分支（不需秒杀价/折扣，全部规格参与，带 groupNum）
        // 团购人数限制：2 ≤ groupNum ≤ 5，默认 5；达到该人数并全部付款后自动成团发货
        if (activityType === 8) {
          const gn = Number(this.activityForm.groupNum);
          if (!gn || gn < 2 || gn > 5) {
            this.$message.warning('请输入有效的团购人数（限 2 ~ 5 人）');
            return;
          }
          // 团购价每个规格都必填
          let groupPriceError = false;
          for (const s of this.activityAllSpecs) {
            if (s.groupPrice === null || s.groupPrice === undefined || s.groupPrice === '' || isNaN(Number(s.groupPrice)) || Number(s.groupPrice) <= 0) {
              this.$message.warning('请填写规格【' + s.specName + '】的团购价（需大于0）');
              groupPriceError = true;
              break;
            }
            if (s.originalPrice && Number(s.groupPrice) >= Number(s.originalPrice)) {
              this.$message.warning('规格【' + s.specName + '】的团购价应低于原价 ' + s.originalPrice);
              groupPriceError = true;
              break;
            }
          }
          if (groupPriceError) return;
          const groupList = this.activityAllSpecs.map(spec => ({
            specId: spec.specId,
            originalPrice: spec.originalPrice,
            groupPrice: spec.groupPrice,
            stock: spec.stock,
            startTime: this.activityForm.startTime,
            endTime: this.activityForm.endTime,
            groupNum: this.activityForm.groupNum
          }));
          if (groupList.length === 0) {
            this.$message.warning('当前商品没有可用规格');
            return;
          }
          this.activitySubmitLoading = true;
          saveActivity({
            productId: this.activityCurrentProduct.productId,
            activityType: 8,
            groupNum: this.activityForm.groupNum,
            activityList: groupList
          }).then(res => {
            if (res.code === 200) {
              this.$message.success('活动设置保存成功');
              this.activityDialogVisible = false;
              this.getList();
            } else {
              this.$message.error(res.msg || '保存失败');
            }
          }).finally(() => {
            this.activitySubmitLoading = false;
          });
          return;
        }

        // 校验规格活动数据
        let hasError = false;
        const activityList = this.selectedSpecList.map(spec => {
          const item = {
            specId: spec.specId,
            originalPrice: spec.originalPrice,
            stock: spec.stock,
            startTime: this.activityForm.startTime,
            endTime: this.activityForm.endTime
          };
          if (activityType === 6) {
            // 秒杀
            if (!spec.flashPrice && spec.flashPrice !== 0) {
              this.$message.warning('请填写规格【' + spec.specName + '】的秒杀价');
              hasError = true;
              return null;
            }
            item.flashPrice = spec.flashPrice;
          } else if (activityType === 7) {
            // 限时折扣
            if (!spec.discount && spec.discount !== 0) {
              this.$message.warning('请填写规格【' + spec.specName + '】的折扣');
              hasError = true;
              return null;
            }
            item.discount = spec.discount;
            item.discountPrice = spec.discountPrice;
          }

          // if (!spec.stock && spec.stock !== 0) {
          //   this.$message.warning('请填写规格【' + spec.specName + '】的活动库存');
          //   hasError = true;
          //   return null;
          // }

          return item;
        });

        if (hasError) return;

        // 过滤掉null
        const validList = activityList.filter(item => item !== null);
        if (validList.length === 0) {
          this.$message.warning('请至少设置一个规格的活动信息');
          return;
        }

        this.activitySubmitLoading = true;
        saveActivity({
          productId: this.activityCurrentProduct.productId,
          activityType: activityType,
          activityList: validList
        }).then(res => {
          if (res.code === 200) {
            this.$message.success('活动设置保存成功');
            this.activityDialogVisible = false;
            this.getList();
          } else {
            this.$message.error(res.msg || '保存失败');
          }
        }).finally(() => {
          this.activitySubmitLoading = false;
        });
      });
    },

    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm('是否确认导出所有商品数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function() {
        return exportStoreProduct(queryParams);
      }).then(response => {
        this.download(response.msg);
      }).catch(function() {});
    }
  }
};
</script>

<style scoped>
/* 规格选择列表 */
.spec-select-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}
.spec-select-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px dashed #DCDFE6;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  background: #fff;
  min-width: 160px;
}
.spec-select-item:hover {
  border-color: #409EFF;
  background: #ECF5FF;
}
.spec-select-active {
  border-style: solid;
  border-color: #409EFF;
  background: #ECF5FF;
}
.spec-select-disabled {
  cursor: not-allowed !important;
  opacity: 0.85;
}
.spec-select-disabled:hover {
  border-color: #409EFF;
  background: #ECF5FF;
}
.spec-select-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.spec-select-name {
  font-size: 13px;
  font-weight: 500;
  color: #303133;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.spec-select-detail {
  font-size: 11px;
  color: #909399;
}

/* 活动规格卡片列表 */
.activity-spec-list {
  max-height: 400px;
  overflow-y: auto;
  padding-right: 5px;
}
.activity-spec-card {
  border: 1px solid #EBEEF5;
  border-radius: 6px;
  margin-bottom: 12px;
  background: #FAFAFA;
  transition: all 0.2s;
}
.activity-spec-card:hover {
  border-color: #409EFF;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);
}
.spec-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid #EBEEF5;
  background: #F5F7FA;
  border-radius: 6px 6px 0 0;
}
.spec-card-header .spec-name {
  font-size: 14px;
  font-weight: 600;
  color: #303133;
}
.spec-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.spec-thumb {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  object-fit: cover;
  border: 1px solid #EBEEF5;
  flex-shrink: 0;
}
.spec-card-header .spec-info {
  font-size: 12px;
  color: #909399;
}
.spec-card-header .spec-info b {
  color: #606266;
}
.spec-detail-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding: 8px 16px;
  background: #F5F7FA;
  border-bottom: 1px solid #EBEEF5;
}
.spec-detail-item {
  font-size: 12px;
  color: #909399;
  white-space: nowrap;
}
.spec-detail-item b {
  color: #606266;
  font-weight: 500;
}
.spec-card-body {
  padding: 12px 16px 8px;
}
.spec-field {
  margin-bottom: 4px;
}
.spec-field label {
  display: block;
  font-size: 12px;
  color: #909399;
  margin-bottom: 6px;
  line-height: 1;
}
.company-name-list {
  text-align: left;
  line-height: 1.5;
}
.company-name-item {
  word-break: break-all;
}
</style>
