<template>
  <el-dialog
    custom-class="center-dialog"
    :fullscreen="true"
    :title="title"
    top="0vh"
    :visible.sync="dialogFormVisible"
    width="70%"
    @close="close"
  >
    <el-scrollbar v-loading="loading" style="height: 100vh">
      <el-row>
        <div class="tit_font">{{ __('基本信息') }}</div>
        <el-divider />
        <el-form label-width="80px">
          <el-col :md="6">
            <el-form-item :label="__('商品分类')">
              <el-cascader
                v-model="categoryId"
                filterable
                :options="categoryOptions"
                :props="{
                  label: 'category_name',
                  value: 'category_id',
                  children: 'sub',
                }"
                :style="{ width: '90%' }"
                @change="onCategoryChange"
                :disabled="false"
              />
            </el-form-item>
          </el-col>
          <el-col :md="18">
            <el-form-item :label="__('商品类型')">
              <el-radio-group v-model="productForm.kind_id" @change="radChange">
                <el-radio
                  :disabled="!row.category_virtual_enable"
                  :label="1201"
                >
                  {{ __('实体商品') }}
                </el-radio>
                <el-radio
                  :disabled="!row.category_virtual_enable"
                  :label="1202"
                >
                  {{ __('虚拟商品（服务类商品）') }}
                </el-radio>
                <el-radio
                  :disabled="!row.category_virtual_enable"
                  :label="1203"
                >
                  {{ __('电子卡券') }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <el-row>
        <div class="tit_font">{{ __('辅助属性') }}</div>
        <el-divider />
        <el-form label-width="100px">
          <el-form-item v-if="brands && brands.length > 0" :label="__('品牌')">
            <el-radio-group v-model="checkBrand">
              <el-radio
                v-for="brand in brands"
                :key="brand.brand_id"
                :label="brand.brand_id"
              >
                {{ brand.brand_name }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            v-for="assist in assists"
            :key="assist.assist_id"
            :label="assist.assist_name"
          >
            <el-checkbox-group
              v-if="assist.assist_format === 'checkbox'"
              v-model="assistArr[assist.assist_id]"
            >
              <el-checkbox
                v-for="item in assist.items"
                :key="item.assist_item_id"
                :label="item.assist_item_id"
              >
                {{ item.assist_item_name }}
              </el-checkbox>
            </el-checkbox-group>
            <el-select
              v-if="assist.assist_format === 'select'"
              v-model="assistArr[assist.assist_id]"
              clearable
              :placeholder="'请选择' + assist.assist_name"
              :style="{ width: '50%' }"
            >
              <el-option
                v-for="item in assist.items"
                :key="item.assist_item_id"
                :label="item.assist_item_name"
                :value="item.assist_item_id"
              />
            </el-select>
            <el-radio-group
              v-if="assist.assist_format === 'radio'"
              v-model="assistArr[assist.assist_id]"
            >
              <el-radio
                v-for="item in assist.items"
                :key="item.assist_item_id"
                :label="item.assist_item_id"
              >
                {{ item.assist_item_name }}
              </el-radio>
            </el-radio-group>
            <el-input
              v-if="assist.assist_format === 'text'"
              v-model="assistArr[assist.assist_id]"
              clearable
              :placeholder="'请输入内容' + assist.assist_name"
              :style="{ width: '50%' }"
            />
          </el-form-item>
        </el-form>
      </el-row>
      <el-row>
        <div class="tit_font">{{ __('商品规格') }}</div>
        <el-divider />
        <el-form label-width="100px">
          <el-form-item
            v-for="spec in specs"
            :key="spec.spec_id"
            :label="spec.spec_name"
          >
            <el-checkbox-group v-model="checkSpec[spec.spec_id]">
              <el-checkbox
                v-for="item in spec.specItems"
                :key="item.spec_item_id"
                :disabled="
                  !configs.config.product_spec_edit &&
                  ((newSpecItemIdRow.indexOf(item.spec_item_id) > -1 &&
                    checkSpec[spec.spec_id].indexOf(item) > -1) ||
                    !(allowCheckSpecRow.indexOf(spec.spec_id) > -1))
                "
                :label="item"
              >
                {{ item.spec_item_name }}
              </el-checkbox>
              <el-button
                class="el-icon-circle-plus"
                style="padding-left: 10px"
                type="text"
                @click="showEditSpecItem(spec.spec_id)"
              />
              <el-button
                class="el-icon-edit"
                type="text"
                @click="showTable(spec.spec_id)"
              />
            </el-checkbox-group>
          </el-form-item>
          <el-form-item v-if="false">
            <vab-query-form>
              <vab-query-form-left-panel :span="23">
                <el-form :inline="true" label-width="100px" size="mini">
                  <el-col :span="5">
                    <el-form-item>
                      <el-input
                        v-model="batchObj.item_market_price"
                        clearable
                        :placeholder="__('市场价')"
                        @blur="(e) => batchInput(e, 'item_market_price')"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="5">
                    <el-form-item>
                      <el-input
                        v-model="batchObj.item_unit_price"
                        clearable
                        :placeholder="__('零售价')"
                        @blur="(e) => batchInput(e, 'item_unit_price')"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="5">
                    <el-form-item>
                      <el-input
                        v-model="batchObj.item_unit_points"
                        clearable
                        :placeholder="__('所需积分')"
                        @blur="(e) => batchInput(e, 'item_unit_points')"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="5">
                    <el-form-item>
                      <el-input
                        v-model="batchObj.item_quantity"
                        clearable
                        :placeholder="__('库存')"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="4">
                    <el-form-item :label="__('上下架')">
                      <el-switch
                        v-model="batchObj.item_enable"
                        :active-value="1001"
                        :inactive-value="1002"
                      />
                    </el-form-item>
                  </el-col>
                </el-form>
              </vab-query-form-left-panel>
              <vab-query-form-right-panel :span="1">
                <el-button size="small" type="primary" @click="batchHandle">
                  {{ __('批量操作') }}
                </el-button>
              </vab-query-form-right-panel>
            </vab-query-form>
          </el-form-item>
          <el-form-item>
            <el-table
              border
              :data="specData"
              :span-method="spanMethod"
              style="width: 100%"
            >
              <el-table-column align="center" type="index" width="50" />
              <el-table-column
                v-for="item in specHead"
                :align="item.property == 'color_img' ? 'left' : 'center'"
                :key="item.spec_item_id"
                :label="item.label"
                :property="item.property"
                :width="getItemWidth(item.property)"
              >
                <template slot="header" slot-scope="scope">
                  <!-- 这里是自定义表头内容 -->
                  <div
                    v-if="
                      scope.column.property === 'item_market_price' ||
                      scope.column.property === 'item_unit_price' ||
                      scope.column.property === 'item_advice_price' ||
                      scope.column.property === 'item_unit_points' ||
                      scope.column.property === 'item_quantity' ||
                      scope.column.property === 'item_weight'
                    "
                  >
                    <span>{{ scope.column.label }}</span>
                    <vab-icon
                      :data-key="scope.column.property"
                      icon="more-2-line"
                      style="cursor: pointer"
                      :title="__('批量设置')"
                      @click="batOper"
                    />
                  </div>
                  <div v-else>
                    <span>{{ scope.column.label }}</span>
                  </div>
                </template>
                <template slot-scope="scope">
                  <picUpload
                    v-if="scope.column.property === 'main_color_img'"
                    :file-list="[scope.row.main_color_img]"
                    :height="50"
                    :show-file-list="false"
                    :width="50"
                    @get-file="
                      (value) =>
                        handleAvatarSuccess('main_color_img', value, scope)
                    "
                    @remove-file="
                      (value) =>
                        handleAvatarSuccess('main_color_img', value, scope)
                    "
                  />
                  <picUpload
                    v-else-if="scope.column.property === 'color_img'"
                    :file-list="scope.row.color_img"
                    :height="50"
                    :show-file-list="true"
                    :width="50"
                    @get-file="
                      (value) => handleSuccess('color_img', value, scope)
                    "
                    @remove-file="
                      (value) => handleDelColorImg('color_img', value, scope)
                    "
                  />
                  <el-switch
                    v-else-if="scope.column.property === 'item_enable'"
                    v-model="scope.row.item_enable"
                    :active-value="1001"
                    :inactive-value="1002"
                  />
                  <el-switch
                    v-else-if="scope.column.property === 'item_is_default'"
                    v-model="scope.row.item_is_default"
                  />
                  <el-input
                    v-else-if="scope.column.property === 'item_market_price'"
                    v-model="scope.row[scope.column.property]"
                    @blur="(e) => handleInput(e, scope)"
                  />
                  <el-input
                    v-else-if="scope.column.property === 'item_unit_price'"
                    v-model="scope.row[scope.column.property]"
                    @blur="(e) => handleInput(e, scope)"
                  />
                  <el-input
                    v-else-if="scope.column.property === 'item_advice_price'"
                    v-model="scope.row[scope.column.property]"
                    @blur="(e) => handleInput(e, scope)"
                  />
                  <el-input
                    v-else-if="scope.column.property === 'item_unit_points'"
                    v-model="scope.row[scope.column.property]"
                    @blur="(e) => handleInput(e, scope)"
                  />
                  <el-input
                    v-else-if="showProperty(scope.column.property)"
                    v-model="scope.row[scope.column.property]"
                  />
                  <el-input
                    v-else
                    v-model="scope.row[scope.column.property]"
                    readonly
                  />
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </el-form>
      </el-row>
      <el-row>
        <div class="tit_font">{{ __('商品信息') }}</div>
        <el-divider />
        <el-form
          ref="productForm"
          label-width="100px"
          :model="productForm"
          :rules="productRules"
          size="medium"
        >
          <el-col :span="12">
            <el-form-item :label="__('商品名称')" prop="product_name">
              <el-input
                v-model="productForm.product_name"
                clearable
                :placeholder="__('请输入商品名称')"
                :style="{ width: '90%' }"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="__('商品货号')" prop="product_number">
              <el-input
                v-model="productForm.product_number"
                clearable
                :placeholder="__('请输入商品货号')"
                :style="{ width: '90%' }"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="__('商品卖点')" prop="product_tips">
              <el-input
                v-model="productForm.product_tips"
                clearable
                :placeholder="__('请输入商品卖点')"
                :style="{ width: '90%' }"
              />
            </el-form-item>
            <el-form-item :label="__('商品标签')" prop="product_tags">
              <el-select
                v-model="detailForm.product_tags"
                multiple
                :placeholder="__('请选择商品标签')"
                :style="{ width: '90%' }"
              >
                <el-option
                  v-for="item in productTags"
                  :key="item.product_tag_id"
                  :label="item.product_tag_name"
                  :value="item.product_tag_id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="__('视频地址')" prop="product_video">
              <el-input
                v-model="productForm.product_video"
                clearable
                :placeholder="
                  __(
                    '可以添加一个视频播放地址，将会在商品主图上展示出来[仅移动端起作用]'
                  )
                "
                :style="{ width: '90%' }"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="__('本店商品分类')" prop="store_category_ids">
              <el-cascader
                v-model="productForm.store_category_ids"
                :options="storeCategoryTree"
                :props="categoryProps"
                :show-all-levels="false"
                :style="{ width: '90%' }"
              />
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <el-row v-show="productForm.kind_id === 1202">
        <div class="tit_font">{{ __('预约服务属性') }}</div>
        <el-divider />
        <el-form
          ref="validForm"
          label-width="100px"
          :model="validForm"
          size="medium"
        >
          <el-col :span="12">
            <el-form-item :label="__('服务类型')" prop="product_valid_type">
              <el-radio-group
                v-model="validForm.product_valid_type"
                size="medium"
                :style="{ width: '90%' }"
              >
                <el-radio
                  v-for="(item, index) in product_valid_typeOptions"
                  :key="index"
                  :disabled="item.disabled"
                  :label="item.value"
                >
                  {{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              :label="__('填写预约日期')"
              prop="product_service_date_flag"
            >
              <el-radio-group
                v-model="validForm.product_service_date_flag"
                size="medium"
                :style="{ width: '90%' }"
              >
                <el-radio
                  v-for="(item, index) in product_service_date_flagOptions"
                  :key="index"
                  :disabled="item.disabled"
                  :label="item.value"
                >
                  {{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="__('有效期')" prop="product_valid_period">
              <el-radio-group
                v-model="validForm.product_valid_period"
                size="medium"
                :style="{ width: '90%' }"
              >
                <el-radio
                  v-for="(item, index) in product_valid_periodOptions"
                  :key="index"
                  :disabled="item.disabled"
                  :label="item.value"
                >
                  {{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              :label="__('填写联系人')"
              prop="product_service_contactor_flag"
            >
              <el-radio-group
                v-model="validForm.product_service_contactor_flag"
                size="medium"
                :style="{ width: '90%' }"
              >
                <el-radio
                  v-for="(item, index) in product_service_contactor_flagOptions"
                  :key="index"
                  :disabled="item.disabled"
                  :label="item.value"
                >
                  {{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col v-show="validForm.product_valid_period === 1002" :span="12">
            <el-form-item
              :label="__('商品有效期至')"
              prop="product_validity_end"
            >
              <el-date-picker
                v-model="validForm.product_validity_end"
                :placeholder="__('商品有效期至')"
                :style="{ width: '90%' }"
                type="date"
              />
            </el-form-item>
          </el-col>
          <el-col v-show="validForm.product_valid_period === 1003" :span="12">
            <el-form-item
              :label="__('商品有效时长')"
              prop="product_validity_duration"
            >
              <el-input
                v-model="validForm.product_validity_duration"
                :placeholder="__('请输入有效时长')"
                :style="{ width: '90%' }"
              />
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <el-row v-show="productForm.kind_id === 1203">
        <div class="tit_font">{{ __('电子卡券') }}</div>
        <el-divider />
        <el-form
          ref="productForm1"
          label-width="100px"
          :model="productForm"
          size="medium"
        >
          <el-col :span="12">
            <el-form-item :label="__('次卡售卖')" prop="card_type_id">
              <el-select
                v-model="productForm.card_type_id"
                clearable
                filterable
                :placeholder="__('请选择')"
                :style="{ width: '90%' }"
                @change="radChanges(productForm.card_type_id)"
              >
                <el-option
                  v-for="item in paycardTypes"
                  :key="item.card_type_id"
                  :label="item.card_type_name"
                  :value="item.card_type_id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="__('优惠券售卖')" prop="voucher_activity_id">
              <el-select
                v-model="productForm.voucher_activity_id"
                clearable
                :placeholder="__('请选择')"
                :style="{ width: '90%' }"
                @change="radChangesTypeId(productForm.voucher_activity_id)"
              >
                <el-option
                  v-for="item in activityArr"
                  :key="item.activity_id"
                  :label="item.activity_name"
                  :value="item.activity_id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="__('券码售卖')" prop="coupon_type_id">
              <el-select
                v-model="productForm.coupon_type_id"
                clearable
                :placeholder="__('请选择')"
                :style="{ width: '90%' }"
                @change="radChangesVAId(productForm.coupon_type_id)"
              >
                <el-option
                  v-for="item in couponCardTypes"
                  :key="item.card_type_id"
                  :label="item.card_type_name"
                  :value="item.card_type_id"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <el-row>
        <div class="tit_font">{{ __('物流/其它') }}</div>
        <el-divider />
        <el-form
          ref="productForm"
          label-width="100px"
          :model="productForm"
          size="medium"
        >
          <el-col :span="12">
            <el-form-item :label="__('运费设置')" prop="transport_type_id">
              <el-select
                v-model="productForm.transport_type_id"
                filterable
                :placeholder="__('请选择')"
                :style="{ width: '90%' }"
              >
                <el-option
                  v-for="item in transports"
                  :key="item.transport_type_id"
                  :label="item.transport_type_name"
                  :value="item.transport_type_id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="__('购买上限')" prop="product_buy_limit">
              <el-input
                v-model="productForm.product_buy_limit"
                clearable
                :placeholder="__('请输入购买上限')"
                :style="{ width: '90%' }"
              />
            </el-form-item>
          </el-col>
          <!--          <el-col :span="12">-->
          <!--            <el-form-item :label="__('七天无理由')" prop="contract_type_id">-->
          <!--              <el-radio-group-->
          <!--                v-model="productForm.contract_type_id"-->

          <!--                size="medium"-->
          <!--                :style="{ width: '90%' }"-->
          <!--              >-->
          <!--                <el-radio-->
          <!--                  v-for="(item, index) in contract_type"-->

          <!--                  :key="index"-->
          <!--                  :disabled="item.disabled"-->
          <!--                  :label="item.value"-->
          <!--                >-->
          <!--                  {{ item.label }}-->
          <!--                </el-radio>-->
          <!--              </el-radio-group>-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->

          <!--<el-col :span="24">-->
          <!--<el-form-item label="消费者权益保障" label-width="130px" prop="contract_type_ids">-->
          <!--<el-checkbox-group-->
          <!--v-model="productForm.contract_type_ids"-->
          <!--&gt;-->
          <!--<el-checkbox v-for="(item,index) in roleList" :label="item.contract_type_id" :key="index">-->
          <!--{{item.contract_type_name}}-->
          <!--</el-checkbox>-->
          <!--</el-checkbox-group>-->
          <!--</el-form-item>-->
          <!--</el-col>-->

          <!--<el-col :span="12">-->
          <!--<el-form-item label="配送方式" label-width="130px" prop="product_transport_id">-->
          <!--<el-checkbox-group-->
          <!--v-model="productForm.product_transport_id"-->
          <!--&gt;-->
          <!--<el-checkbox v-for="(item,index) in roleLists" :label="item.value" :key="index">{{item.label}}-->
          <!--</el-checkbox>-->
          <!--</el-checkbox-group>-->
          <!--</el-form-item>-->
          <!--</el-col>-->
          <el-col :span="12">
            <el-form-item
              v-if="false"
              :label="__('支付方式')"
              prop="payment_type_id"
            >
              <el-radio-group
                v-model="productForm.payment_type_id"
                size="medium"
                :style="{ width: '90%' }"
              >
                <el-radio
                  v-for="(item, index) in payment_type_idOptions"
                  :key="index"
                  :label="item.value"
                >
                  {{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="__('开售时间')" prop="product_state_id">
              <el-radio-group
                v-model="productForm.product_state_id"
                size="medium"
                :style="{ width: '90%' }"
              >
                <el-radio
                  v-for="(item, index) in product_state_idOptions"
                  :key="index"
                  :disabled="item.disabled"
                  :label="item.value"
                >
                  {{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="__('库存锁定')" prop="product_inventory_lock">
              <el-radio-group
                v-model="productForm.product_inventory_lock"
                size="medium"
                :style="{ width: '90%' }"
              >
                <el-radio
                  v-for="(item, index) in product_inventory_lockOptions"
                  :key="index"
                  :disabled="item.disabled"
                  :label="item.value"
                >
                  {{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col v-if="productForm.product_state_id === 1002" :span="12">
            <el-form-item label="" prop="product_state_id">
              <el-date-picker
                v-model="productForm.product_sale_time"
                :placeholder="__('预计上架时间，可以动态修正状态')"
                :style="{ width: '90%' }"
                type="datetime"
              />
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <el-row style="margin-bottom: 68px">
        <div class="tit_font">{{ __('详细介绍') }}</div>
        <el-divider />
        <el-row class="quill">
          <el-col :span="2">{{ __('商品描述') }}</el-col>
          <el-col :span="21">
            <quill-editor
              ref="vab-quill"
              v-model="detailForm.product_detail"
              style="width: 90%"
            />
          </el-col>
        </el-row>
        <!--        <el-row class="quill">-->
        <!--          <el-col :span="2">{{__('规格参数')}}</el-col>-->
        <!--          <el-col :span="21">-->
        <!--            <quill-editor-->
        <!--              ref="vab-quill"-->
        <!--              v-model="detailForm.product_param"-->
        <!--              style="width: 90%"-->
        <!--            />-->
        <!--          </el-col>-->
        <!--        </el-row>-->
        <!--        <el-row class="quill">-->
        <!--          <el-col :span="2">{{__('售后服务')}}</el-col>-->
        <!--          <el-col :span="21">-->
        <!--            <quill-editor-->
        <!--              ref="vab-quill"-->
        <!--              v-model="detailForm.product_service"-->
        <!--              style="width: 90%"-->
        <!--            />-->
        <!--          </el-col>-->
        <!--        </el-row>-->
      </el-row>
    </el-scrollbar>

    <el-dialog
      append-to-body
      :title="__('管理 厂商 规格值')"
      :visible.sync="tableVisible"
      width="50%"
    >
      <el-row align="right">
        <el-col :offset="21" :span="3" style="padding-bottom: 10px">
          <el-button @click="editSpecItem()">
            {{ __('新增') }}
          </el-button>
        </el-col>
      </el-row>
      <el-row :span="24">
        <el-table
          border
          :data="specTableData"
          height="400px"
          style="width: 100%"
        >
          <el-table-column :label="__('操作')" prop="date">
            <template slot-scope="scope">
              <el-button type="text" @click="editSpecItem(scope.row)">
                {{ __('编辑') }}
              </el-button>
              <el-button type="text" @click="detSpecItem(scope.row)">
                {{ __('删除') }}
              </el-button>
            </template>
          </el-table-column>
          <el-table-column :label="__('商品规格值编号')" prop="spec_item_id" />
          <el-table-column :label="__('规格值名称')" prop="spec_item_name" />
          <el-table-column :label="__('排序')" prop="spec_item_order" />
        </el-table>
      </el-row>
      <template #footer>
        <el-button @click="closeTableVisible">{{ __('关闭') }}</el-button>
      </template>
      <el-dialog
        append-to-body
        :title="specTitle"
        :visible.sync="editVisible"
        width="30%"
      >
        <el-form
          ref="specItemForm"
          label-width="100px"
          :model="specItemForm"
          size="medium"
        >
          <el-form-item :label="__('规格值名称')" prop="spec_item_name">
            <el-input
              v-model="specItemForm.spec_item_name"
              clearable
              :placeholder="__('请输入规格值名称')"
              :style="{ width: '100%' }"
            />
          </el-form-item>
          <el-form-item :label="__('排序')" prop="spec_item_order">
            <el-input
              v-model="specItemForm.spec_item_order"
              clearable
              :placeholder="__('请输入排序')"
              :style="{ width: '100%' }"
            />
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="saveSpecItem">{{ __('确认') }}</el-button>
          <el-button @click="closeEditSpecItem">{{ __('取消') }}</el-button>
        </template>
      </el-dialog>
    </el-dialog>
    <el-dialog
      append-to-body
      :title="specTitle"
      :visible.sync="editVisible"
      width="30%"
    >
      <el-form
        ref="specItemForm"
        label-width="100px"
        :model="specItemForm"
        size="medium"
      >
        <el-form-item :label="__('规格值名称')" prop="spec_item_name">
          <el-input
            v-model="specItemForm.spec_item_name"
            clearable
            :placeholder="__('请输入规格值名称')"
            :style="{ width: '100%' }"
          />
        </el-form-item>
        <el-form-item :label="__('排序')" prop="spec_item_order">
          <el-input
            v-model="specItemForm.spec_item_order"
            clearable
            :placeholder="__('请输入排序')"
            :style="{ width: '100%' }"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="saveSpecItem">{{ __('确认') }}</el-button>
        <el-button @click="closeEditSpecItem">{{ __('取消') }}</el-button>
      </template>
    </el-dialog>
    <el-row style="padding-top: 20px" class="footer">
      <el-col :offset="12" :span="12">
        <el-button size="medium" @click="close">{{ __('取消') }}</el-button>
        <el-button
          size="medium"
          :loading="saveBtnLoading"
          type="primary"
          @click="save"
        >
          {{ __('保存') }}
        </el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
import { translateTitle as __ } from '@/utils/i18n'
import { getxfz, saveProduct } from '@/api/product/base'
import { productInfoByPid } from '@/api/product/info'
import { getItemListByPid } from '@/api/product/item'
import quillEditor from '@/components/quill/quillEditor'
import picUpload from '@/components/material/PicUpload'
import { get } from '@/api/base/product/type'
import {
  categoryTree as getCategoryTree,
  get as getCategory,
} from '@/api/base/product/category'
import { list as tags } from '@/api/store/product/tag'
import { transports } from '@/api/store/transport/type'
import { getPayCardTypes } from '@/api/card/type'
import { getCouponsList } from '@/api/store/activity/base'
import {
  doDelete,
  doEdit as doEditSpecItem,
  getList as getSpecItemList,
} from '@/api/product/spec/item'
import { URL } from '@/config'
import { getStoreCategoryTree } from '@/api/store/product/category'
import { renderTime } from '@/utils/date'
import { getToken } from '@/utils/token'
import { mapGetters } from 'vuex'

export default {
  name: 'AddProduct',
  components: { quillEditor, picUpload },
  props: {},
  data() {
    return {
      categoryOptions: [],
      categoryId: null,
      params: {
        authorization: '',
      },
      batchObj: {
        item_is_default: false,
        item_enable: 1001,
        item_market_price: undefined,
        item_unit_price: undefined,
        item_unit_points: undefined,
        item_quantity: undefined,
      }, // 批量操作对象
      loading: false,
      shop_product_assist_index: [],
      shop_product_index: {},
      shop_product_item: {},
      shop_product_detail: {},
      shop_product_image: [],
      shop_product_info: {},
      shop_product_base: {},
      shop_product_valid_period: {},
      row: {}, // 类型对象数据
      spanArr: {},
      specImageIdList: [], // 选中的spec 是image类型 spec_id 集合
      productTags: [], // 产品标签
      roleList: [],
      storeCategoryTree: [], // 店铺分类树数据
      transports: [], // 运费
      paycardTypes: [], // 次卡
      activityArr: [], // 优惠券售卖
      couponCardTypes: [], // 券码售卖
      categoryProps: {
        value: 'store_product_cat_id',
        label: 'store_product_cat_name',
        children: 'nodes',
        multiple: true,
      },
      specId: undefined,
      specItemForm: {},
      detailForm: {
        product_detail: '',
        product_tags: [],
      },
      specTableData: [],
      product_state_idOptions: [
        {
          label: this.__('立即开售'),
          value: 1001,
        },
        {
          label: this.__('定时开售'),
          value: 1002,
        },
      ],
      roleLists: [
        {
          label: this.__('物流配送'),
          value: 10,
        },
        {
          label: this.__('门店自提'),
          value: 5,
        },
        {
          label: this.__('到店服务'),
          value: 5,
        },
      ],
      payment_type_idOptions: [
        {
          label: this.__('先预约后支付'),
          value: 1,
        },
        {
          label: this.__('先支付后预约'),
          value: 0,
        },
      ],
      product_inventory_lockOptions: [
        {
          label: this.__('下单锁定'),
          value: 1001,
        },
        {
          label: this.__('支付锁定'),
          value: 1002,
        },
      ],
      product_valid_periodOptions: [
        {
          label: this.__('长期有效'),
          value: 1001,
        },
        {
          label: this.__('自定义有效期'),
          value: 1002,
        },
        {
          label: this.__('有效时长'),
          value: 1003,
        },
      ],
      product_valid_typeOptions: [
        {
          label: this.__('到店服务'),
          value: 1001,
        },
        {
          label: this.__('上门服务'),
          value: 1002,
        },
      ],
      product_service_date_flagOptions: [
        {
          label: this.__('否'),
          value: 0,
        },
        {
          label: this.__('是'),
          value: 1,
        },
      ],
      product_service_contactor_flagOptions: [
        {
          label: this.__('否'),
          value: 1,
        },
        {
          label: this.__('是'),
          value: 2,
        },
      ],
      validForm: {
        product_valid_period: 1001,
        product_valid_type: 1001,
        product_service_date_flag: 0,
        product_service_contactor_flag: 1,
      },
      productForm: {
        product_sale_time: '',
        product_video: '',
        product_buy_limit: undefined,
        product_number: '',
        product_name: '',
        product_inventory_lock: 1001,
        payment_type_id: 0,
        product_state_id: 1001,
        contract_type_ids: [],
        product_transport_id: [],
        transport_type_id: undefined,
        store_category_ids: [],
        voucher_activity_id: [],
        coupon_type_id: [],
        product_service: '',
        product_param: '',
        product_detail: '',
        product_id: undefined,
        product_tips: '',
      },
      productRules: {
        product_name: [
          {
            required: true,
            message: '请输入商品名称',
            trigger: 'blur',
          },
        ],
      },
      action: URL.action,
      virtualHead: [
        {
          label: this.__('主图'),
          property: 'main_color_img',
        },
        {
          label: this.__('图片'),
          property: 'color_img',
        },
        {
          label: this.__('属性编号'),
          property: 'item_number',
        },
        {
          label: this.__('市场价'),
          property: 'item_market_price',
        },
        {
          label: this.__('零售价'),
          property: 'item_unit_price',
        },
        {
          label: this.__('需要积分'),
          property: 'item_unit_points',
        },
        {
          label: this.__('库存'),
          property: 'item_quantity',
        },
        {
          label: this.__('上下架'),
          property: 'item_enable',
        },
        {
          label: this.__('是否默认'),
          property: 'item_is_default',
        },
      ],
      expHead: [
        {
          label: this.__('主图'),
          property: 'main_color_img',
        },
        {
          label: this.__('图片'),
          property: 'color_img',
        },
        {
          label: this.__('属性编号'),
          property: 'item_number',
        } /*
          {
            label: this.__('条形码'),
            property: 'item_barcode',
          },
          {
            label: this.__('重量[kg]'),
            property: 'item_weight',
          },*/,
        {
          label: this.__('市场价'),
          property: 'item_market_price',
        },
        {
          label: this.__('零售价'),
          property: 'item_unit_price',
        },
        {
          label: this.__('需要积分'),
          property: 'item_unit_points',
        },
        {
          label: this.__('库存'),
          property: 'item_quantity',
        },
        /*{
            label: this.__('采购价'),
            property: 'item_purchase_price',
          },
          {
            label: this.__('采购税率'),
            property: 'item_purchase_rate',
          },
          {
            label: this.__('销售税率'),
            property: 'item_sales_rate',
          },*/
        {
          label: this.__('上下架'),
          property: 'item_enable',
        },
        {
          label: this.__('是否默认'),
          property: 'item_is_default',
        },
      ],
      specHead: [],
      specData: [],
      allSpecData: [],
      newSpecItemIdRow: [],
      assistArr: {},
      checkBrand: undefined, // 选中的品牌列表
      checkSpec: {}, // 选中的spec 列表
      brands: [], // 品牌数据
      assists: [], // 辅助属性数据
      specs: [], // 规格参数数据
      allowCheckSpecRow: [],

      title: '',
      dialogFormVisible: false,
      tableVisible: false,
      editVisible: false,
      specTitle: '',
      saveBtnLoading: false,
    }
  },
  watch: {
    // 监控spec 勾选事件
    checkSpec: {
      handler(newVal, oldVal) {
        console.info('newVal')
        console.info(newVal)
        console.info(JSON.stringify(this.specs))

        const arr = []

        //重新排序
        this.specs.forEach((spec) => {
          let spec_id = spec.spec_id
          const element = newVal[spec_id]
          if (element.length > 0) arr.push(element)
        })

        /*
          for (let spec_id in newVal) {
            const element = newVal[spec_id]
            if (element.length > 0) arr.push(element)
          }
          */

        const descartes = this.descartes(arr)
        // 构造表头数据
        this.creSpecHead(arr)
        // 构造表数据
        this.creSpecData(descartes)

        // 计算合并列
        this.initRowspan()
      },
      deep: true,
    },
  },
  computed: {
    ...mapGetters({
      token: 'user/token',
      configs: 'routes/configs',
    }),
  },

  async created() {
    await this.getCategoryTree()
    this.getStoreBase()
    // 获取商品标签
    this.getProductTags()
    // 获取快递类型
    this.getTransports()
    // 获取次卡数据
    this.getPayCardTypes()
    // 获取代金券数据
    this.getCouponsFun()
    // 获取券码数据
    this.getCouponCardTypes()
    // 获取店铺分类树数据
    this.getStoreCategoryTree()
    this.params.authorization = getToken()
    this.getxfz()
  },
  methods: {
    // 清空  card_type_id
    radChanges(row) {
      if (row) {
        this.productForm.voucher_activity_id = ''
        this.productForm.coupon_type_id = ''
      }
      this.$forceUpdate()
    },
    // 清空 voucher_activity_id
    radChangesTypeId(row) {
      if (row) {
        this.productForm.card_type_id = ''
        this.productForm.coupon_type_id = ''
      }
      this.$forceUpdate()
    },
    // 清空 coupon_type_id
    radChangesVAId(row) {
      if (row) {
        this.productForm.card_type_id = ''
        this.productForm.voucher_activity_id = ''
      }
      this.$forceUpdate()
    },
    getStoreBase() {
      if (
        this.configs.config.supplier_market_enable &&
        2 == this.configs.store_type
      ) {
        const unitPriceIndex = this.expHead.findIndex(
          (item) => item.property === 'item_unit_price'
        )

        if (unitPriceIndex !== -1) {
          this.expHead[unitPriceIndex].label = this.__('成本价')

          this.expHead.splice(unitPriceIndex + 1, 0, {
            label: this.__('建议零售价'),
            property: 'item_advice_price',
          })
        }

        const unitIndex = this.virtualHead.findIndex(
          (item) => item.property === 'item_unit_price'
        )

        if (unitIndex !== -1) {
          this.virtualHead[unitIndex].label = this.__('成本价')

          this.virtualHead.splice(unitIndex + 1, 0, {
            label: this.__('建议零售价'),
            property: 'item_advice_price',
          })
        }
      }
    },

    batchHandle() {
      for (const key in this.batchObj) {
        this.specData.forEach((item, index) => {
          this.$set(this.specData[index], key, this.batchObj[key])
        })
      }
    },
    batchInput(e, key) {
      let value = e.target.value
      value = Math.round(value * Math.pow(10, 4)) / Math.pow(10, 4) //四舍五入
      value = Number(value).toFixed(4) //补足位数
      e.target.value = value
      this.batchObj[key] = value
    },
    // 计算合并列的下标和数量
    initRowspan() {
      const image = this.getFirstImageSpec()
      if (!image) return
      let data = this.specData
      let index = 1
      let currIndex = 0
      this.spanArr[image] = {}
      for (let i = 0; i <= data.length - 1; i++) {
        if (i === data.length - 1) {
          this.spanArr[image][currIndex] = index
          return
        }
        if (data[i][image] === data[i + 1][image]) {
          index++
        } else {
          this.spanArr[image][currIndex] = index
          currIndex = i + 1
          index = 1
        }
      }
    },
    getFirstImageSpec() {
      let specs = this.specs
      let checkSpec = this.checkSpec
      let sp = specs.find((spec) => {
        let spec_id = spec.spec_id
        let checkSpecElement = checkSpec[spec_id]
        return checkSpecElement.length > 0 && spec.spec_format === 'image'
      })
      return sp ? sp.spec_id : null
    },
    // 四舍五入返回四位有效数字
    handleInput(e, scope) {
      let value = e.target.value
      const index = scope.$index
      value = Math.round(value * Math.pow(10, 4)) / Math.pow(10, 4) //四舍五入
      value = Number(value).toFixed(4) //补足位数
      this.specData[index][scope.column.property] = value
    },
    // 维护选中的类型image的spec
    initSpecImageList() {
      this.specImageIdList = []
      this.specs.forEach((spec) => {
        if (spec.spec_format === 'image')
          this.specImageIdList.push(spec.spec_id)
      })
    },
    saveSpecItem() {
      var that = this
      this.$refs['specItemForm'].validate(async (valid) => {
        if (valid) {
          const { msg, status, data } = await doEditSpecItem(this.specItemForm)
          if (200 == status) {
            // 修改规格编辑后数据
            if (that.specItemForm.spec_item_id) {
              for (let i = 0; i < that.specData.length; i++) {
                for (let j = 0; j < that.specs.length; j++) {
                  for (let k = 0; k < that.specs[j].specItems.length; k++) {
                    if (
                      that.specs[j].specItems[k].spec_item_id ===
                      that.specItemForm.spec_item_id
                    ) {
                      that.specs[j].specItems[k].spec_item_name =
                        that.specItemForm.spec_item_name
                    }
                  }
                }
              }
            }

            this.$baseMessage(msg, 'success')
          } else {
            this.$baseMessage(msg, 'error')
          }
          await this.upDateSpecItem()
          this.closeEditSpecItem()
        } else {
          return false
        }
      })
    },
    async upDateSpecItem() {
      // 更新
      const specItemList = await this.getSpecItemList(this.specId)
      this.specTableData = specItemList
      const spec = this.specs.find((item) => item.spec_id === this.specId)

      const checkSpecItems = this.checkSpec[this.specId]

      //如下实现spec.specItems = specItemList

      //spec.specItems未被删除的spec_item_id
      let exists_sii = []

      //新增数据-已经存在的编号
      let exists_new_sii = []

      //新增
      for (let j = 0; j <= specItemList.length - 1; j++) {
        for (let i = 0; i <= spec.specItems.length - 1; i++) {
          if (spec.specItems[i].spec_item_id == specItemList[j].spec_item_id) {
            exists_new_sii.push(specItemList[j].spec_item_id)
            break
          }
        }
      }

      //修改更改后的值
      for (let i = 0; i <= spec.specItems.length - 1; i++) {
        for (let j = 0; j <= specItemList.length - 1; j++) {
          //更改最新值
          if (spec.specItems[i].spec_item_id == specItemList[j].spec_item_id) {
            this.$set(
              spec.specItems,
              i,
              Object.assign(spec.specItems[i], specItemList[j])
            )
            exists_sii.push(spec.specItems[i].spec_item_id)
            break
          }

          if (spec.specItems.length - 1 == j) {
          } else if (spec.specItems.length - 1 > j) {
            //删除
            //查找被删除的元素index
          } else {
            //新增
            //spec.specItems.push(specItemList[j]);
            //exists_sii.push(specItemList[j].spec_item_id);
          }
        }
      }

      let add_flag = false //为新增操作

      //新增
      for (let j = 0; j <= specItemList.length - 1; j++) {
        if (exists_new_sii.indexOf(specItemList[j].spec_item_id) > -1) {
        } else {
          //console.info("新增-specItemList[j]");
          //console.info(specItemList[j]);
          //新增
          spec.specItems.push(specItemList[j])
          add_flag = true
        }
      }

      if (!add_flag) {
        //删除
        for (let i = 0; i <= spec.specItems.length - 1; i++) {
          if (exists_sii.indexOf(spec.specItems[i].spec_item_id) > -1) {
          } else {
            spec.specItems.splice(i, 1)
          }
        }

        //删除
        for (let i = 0; i <= checkSpecItems.length - 1; i++) {
          if (exists_sii.indexOf(checkSpecItems[i].spec_item_id) > -1) {
          } else {
            checkSpecItems.splice(i, 1)
          }
        }
      }

      this.$forceUpdate()

      //console.info("this.specs");
      //console.info(this.specs);
      //console.info(this.checkSpec);
    },
    detSpecItem(row) {
      var that = this
      if (row.spec_item_id) {
        this.$baseConfirm(this.__('你确定要删除当前项吗'), null, async () => {
          const { msg, status } = await doDelete({
            spec_item_id: row.spec_item_id,
          })
          if (200 == status) {
            for (let i = 0; i < that.specData.length; i++) {
              let index = row.spec_id + '_' + row.spec_item_id
              if (that.specData[i][index] === row.spec_item_id) {
                that.specData.splice(i, 1)
              }
            }
            // 移除勾选
            for (let i = 0; i < that.checkSpec[row.spec_id].length; i++) {
              if (
                that.checkSpec[row.spec_id][i].spec_item_id == row.spec_item_id
              ) {
                that.checkSpec[row.spec_id].splice(i, 1)
              }
            }

            this.$baseMessage(msg, 'success')
            //await this.upDateSpecItem()
          } else {
            this.$baseMessage(msg, 'error')
          }
          await this.upDateSpecItem()
        })
      }
    },
    closeEditSpecItem() {
      this.specItemForm = {}
      this.editVisible = false
    },
    showEditSpecItem(spec_id) {
      this.specId = spec_id
      this.editSpecItem()
    },
    editSpecItem(row) {
      if (row) {
        this.specTitle = '编辑'
        this.specItemForm = Object.assign({}, row)
        this.editVisible = true
        return
      }
      this.specTitle = '新增'
      this.specItemForm = {
        spec_id: this.specId,
      }
      this.editVisible = true
    },
    async showTable(spec_id) {
      this.specId = spec_id
      this.specTableData = await this.getSpecItemList(spec_id)
      this.tableVisible = true
    },
    async getSpecItemList(spec_id) {
      const { data } = await getSpecItemList({ spec_id: spec_id })
      return data
    },
    // 合并列
    spanMethod({ row, column, rowIndex, columnIndex }) {
      if (
        column.property === 'main_color_img' ||
        column.property === 'color_img'
      ) {
        // if (this.specImageIdList.length === 0) {
        let image = this.getFirstImageSpec()
        if (!image) {
          if (rowIndex === 0) {
            return {
              rowspan: this.specData.length,
              colspan: 1,
            }
          } else {
            return {
              rowspan: 0,
              colspan: 0,
            }
          }
        } else {
          const _row = this.spanArr[image][rowIndex]
          const _col = _row > 0 ? 1 : 0
          return {
            rowspan: _row,
            colspan: _col,
          }
        }
      }
    },
    radChange(val) {
      // 清空选中的规格参数
      for (let key in this.checkSpec) {
        this.$set(this.checkSpec, key, [])
      }
      if (val) {
        this.specHead = Array.from(this.expHead)
      } else {
        this.specHead = Array.from(this.virtualHead)
      }
    },
    showProperty(property) {
      const obj = this.expHead.find((item) => item.property === property)
      return obj ? true : false
    },
    handleAvatarSuccess(name, image, scop) {
      this.specData[scop.$index][name] = image
    },
    handleDelColorImg(name, image, scop) {
      const color_id = this.specData[scop.$index]['color_id']
      for (let i = 0; i < this.specData.length; i++) {
        const spec = this.specData[i]
        if (spec.color_id === color_id) {
          this.specData[i][name] = image
          this.specData[i]['colorImg'] = image
        }
      }
    },
    handleSuccess(name, images, scop) {
      images.forEach((image) => {
        this.specData[scop.$index][name].push(image)
      })
    },
    // 构建表头数据
    creSpecHead(arr) {
      this.specHead = []
      let sp = this.specs
      arr.forEach((specs) => {
        const spec = sp.find((item) => item.spec_id === specs[0].spec_id)
        if (spec) {
          const obj = {
            label: spec.spec_name,
            property: spec.spec_id.toString(),
          }
          this.specHead.push(obj)
        }
      })
      const head =
        this.productForm.kind_id === 1201 ? this.expHead : this.virtualHead
      this.specHead = this.specHead.concat(head)
    },
    getProductAssistsIndex() {
      let assists = this.assists
      let assistArr = this.assistArr
      if (!assists || !assistArr) return []

      let assistsIndexs = []
      for (let assist_id in assistArr) {
        const assist = assists.find(
          (item) => item.assist_id === Number(assist_id)
        )
        if (assist) {
          let obj = {
            assist_id: Number(assist_id),
          }
          let format = assist.assist_format
          if (format === 'text' || format === 'radio') {
            obj.assist_item_id = assistArr[assist_id]
          } else {
            obj.assist_item_id = assistArr[assist_id].toString()
          }
          assistsIndexs.push(obj)
        }
      }
      return assistsIndexs
    },
    // 构建表数据
    creSpecData(descartes) {
      //return ;
      //存入参考数据
      //存在的ssid
      let ssid_row = []
      for (let i = 0; i < this.specData.length; i++) {
        if (this.allSpecData.length == 0) {
          this.allSpecData.push(Object.assign({}, this.specData[i]))
          break
        }

        for (let j = 0; j < this.allSpecData.length; j++) {
          if (
            typeof this.allSpecData[j]['siid'] !== 'undefined' &&
            typeof this.specData[i]['siid'] !== 'undefined' &&
            this.allSpecData[j]['siid'] == this.specData[i]['siid']
          ) {
            this.allSpecData[j] = Object.assign({}, this.specData[i])
            ssid_row.push(this.allSpecData[j]['siid'])
            break
          }
          /*
            if (j == this.allSpecData.length-1)
            {
              this.allSpecData.push(Object.assign({}, this.specData[i]));
            }*/
        }
      }
      for (let i = 0; i < this.specData.length; i++) {
        if (ssid_row.indexOf(this.specData[i]['ssid']) > -1) {
        } else {
          this.allSpecData.push(Object.assign({}, this.specData[i]))
        }
      }

      this.specData = []
      // 当specs 为空时
      if (!this.specs || this.specs.length === 0) {
        const obj = {
          main_color_img: this.default_image,
          color_img: [],
          item_enable: 1001,
          item_is_default: false,
          item_market_price: undefined,
          item_unit_price: undefined,
          item_advice_price: undefined,
          item_unit_points: undefined,
          item_quantity: undefined,
        }
        this.specData.push(obj)
        return
      }

      for (let i = 0; i < descartes.length; i++) {
        let obj = {
          category_id: this.row.category_id,
          main_color_img: this.default_image,
          color_img: [],
          item_enable: 1001,
          item_is_default: false,
          item_market_price: undefined,
          item_unit_price: undefined,
          item_advice_price: undefined,
          item_unit_points: undefined,
          item_quantity: undefined,
        }

        let spec_item_ids = []
        let id = ''

        if (Array.isArray(descartes[i])) {
          descartes[i].forEach((spec) => {
            let spec_id = spec.spec_id
            let spec_item_id = spec.spec_item_id
            id = spec_id + '_' + spec_item_id
            obj[spec.spec_id] = spec.spec_item_name
            obj[id] = spec.spec_item_id

            spec_item_ids.push(spec_item_id)
          })
        } else {
          let spec_id = descartes[i].spec_id
          let spec_item_id = descartes[i].spec_item_id
          id = spec_id + '_' + spec_item_id
          obj[spec_id] = descartes[i].spec_item_name
          obj[id] = spec_item_id

          spec_item_ids.push(spec_item_id)
        }

        spec_item_ids.sort(function (a, b) {
          return a - b
        })
        let spec_item_ids_str = spec_item_ids.join('-')

        obj['siid'] = spec_item_ids_str

        console.info(obj)
        //判断目前填充的数据
        for (let j = 0; j < this.allSpecData.length; j++) {
          if (
            typeof this.allSpecData[j]['siid'] !== 'undefined' &&
            this.allSpecData[j]['siid'] == spec_item_ids_str
          ) {
            //obj = Object.assign(obj, this.allSpecData[j])

            obj.category_id = this.allSpecData[j].category_id
            obj.colorImg = this.allSpecData[j].colorImg
            obj.color_id = this.allSpecData[j].color_id
            obj.color_img = this.allSpecData[j].color_img
            obj.item_barcode = this.allSpecData[j].item_barcode
            obj.item_enable = this.allSpecData[j].item_enable
            obj.item_id = this.allSpecData[j].item_id
            obj.item_is_default = this.allSpecData[j].item_is_default
            obj.item_market_price = this.allSpecData[j].item_market_price
            obj.item_number = this.allSpecData[j].item_number
            obj.item_quantity = this.allSpecData[j].item_quantity
            obj.item_unit_points = this.allSpecData[j].item_unit_points
            obj.item_unit_price = this.allSpecData[j].item_unit_price
            obj.item_advice_price = this.allSpecData[j].item_advice_price
            obj.item_weight = this.allSpecData[j].item_weight
            obj.main_color_img = this.allSpecData[j].main_color_img
          }
        }

        this.specData.push(obj)
      }
    },
    // 生成笛卡尔积
    descartes(array) {
      if (!array || array.length === 0) return [[]]

      return [].reduce.call(array, function (col, set) {
        const res = []
        col.forEach(function (c) {
          set.forEach(function (s) {
            const t = [].concat(Array.isArray(c) ? c : [c])
            t.push(s)
            res.push(t)
          })
        })
        return res
      })
    },
    __,

    resetData() {
      this.checkSpec = {}
      this.specs = []
    },
    async showEdit(row) {
      this.resetData()
      this.dialogFormVisible = true
      this.loading = true
      // 记载数据
      const productId = Number(row.product_id)
      this.productForm.product_id = productId
      this.productForm.text_category_id = row.category_name
      await this.getProductInfo(productId)
      await this.getProductItem(productId)
      await this.getCategory(this.shop_product_index.category_id)

      this.categoryId = this.shop_product_index.category_id

      // 初始化表头数据
      this.specHead = Array.from(this.expHead)
      this.shop_product_base = Object.assign({}, row)
      await this.getType(this.shop_product_index.type_id, productId)

      // 初始化数据
      this.initData()
      this.loading = false
    },
    async onCategoryChange(row) {
      console.info(row)

      if (row.length > 0) {
        const category_id = row[row.length - 1]
        const category = this.findTree(this.categoryOptions, category_id)

        if (category != null) {
          //判断更改后的商品类型是否一致，不一致不可以改!
          if (this.shop_product_index.type_id == category.type_id) {
            this.productForm.category_id = category.category_id
            this.productForm.text_category_id = category.category_name
            this.productForm.category_name = category.category_name
          } else {
            this.$baseMessage('商品类型不一致，不可以更改分类！', 'error')
          }
        }
      }
    },
    initData() {
      // 初始化数据
      // initBrand()
      // this.initBrand()
      // initAssists()
      this.initAssists()
      // initDetail()
      this.initDetail()
      // initProduct()
      this.initProduct()
      if (this.shop_product_index.kind_id === 1202) {
        this.initValid()
      }
      // initSpec()
      this.initSpec()
      // initItems()
      this.initItems()
      // initTableHead()
      this.initTableHead()
      // 计算合并列
      this.initRowspan()
    },
    // 初始化 辅助属性
    initAssists() {
      let assists = this.assists
      this.shop_product_assist_index.forEach((assist, index) => {
        const assistId = assist.assist_id

        const _assist = assists.find(
          (item) => item.assist_id === Number(assistId)
        )

        let format = _assist.assist_format
        if (format === 'text') {
          this.$set(this.assistArr, assistId, assist.assist_item_id)
        } else if (format === 'radio' || format === 'select') {
          this.$set(this.assistArr, assistId, Number(assist.assist_item_id))
        } else {
          const assist_item_id = assist.assist_item_id.split(',').map(Number)
          this.$set(this.assistArr, assistId, assist_item_id)
        }
      })
    },
    // 初始化虚拟产品数据
    initValid() {
      let shopProductValidPeriod = this.shop_product_valid_period
      if (!shopProductValidPeriod) return
      this.validForm = {
        product_valid_period: shopProductValidPeriod.product_valid_period,
        product_valid_type: shopProductValidPeriod.product_valid_type,
        product_validity_end: shopProductValidPeriod.product_validity_end,
        product_service_date_flag:
          shopProductValidPeriod.product_service_date_flag,
        product_service_contactor_flag:
          shopProductValidPeriod.product_service_contactor_flag,
      }
    },
    // 初始化 规格属性
    initSpec() {
      let that = this
      const strSpecs = this.shop_product_info
        ? this.shop_product_info.product_spec
        : ''
      const specs = JSON.parse(strSpecs)
      console.info('+++++++++++++++++')
      console.info(specs)
      specs.forEach((spec, index) => {
        const spec_id = Number(spec.id)

        //设置允许点选的规格信息
        that.allowCheckSpecRow.push(spec_id)

        const idsArr = spec.item.map((obj) => Number(obj.id))
        const items = this.getSpecItemByIds(spec_id, idsArr)
        // 设置spec 勾选数据
        this.$set(this.checkSpec, spec_id, items)
        console.info(items)
        items.forEach((item, index) => {
          that.newSpecItemIdRow.push(item.spec_item_id)
        })
      })
    },
    initTableHead() {
      const checkSpec = this.checkSpec
      let arr = []
      for (let key in checkSpec) {
        const element = checkSpec[key]
        if (element.length > 0) arr.push(element)
      }
      const descartes = this.descartes(arr)
      // 构造表头数据
      this.creSpecHead(arr)
      // 构造表数据
      //this.creSpecData(descartes)
    },
    initItems() {
      const productItems = this.shop_product_item
      const shop_product_image = this.shop_product_image

      let tmpSpecData = []
      this.specData = []
      // const image_id = this.specImageIdList[0]
      productItems.forEach((productItem, index) => {
        let obj = {
          main_color_img: '',
          color_id: productItem.color_id,
          color_img: [],
          item_id: productItem.item_id,
          item_barcode: productItem.item_barcode,
          item_number: productItem.item_number,
          item_weight: productItem.item_weight,
          item_market_price: productItem.item_market_price,
          item_unit_price: productItem.item_unit_price,
          item_advice_price: productItem.item_advice_price,
          item_unit_points: productItem.item_unit_points,
          item_quantity: productItem.item_quantity,
          item_enable: productItem.item_enable,
          item_is_default: productItem.item_is_default == 1 ? true : false,
          item_purchase_price: productItem.item_purchase_price,
          item_purchase_rate: productItem.item_purchase_rate,
          item_sales_rate: productItem.item_sales_rate,
        }

        const strSpec = productItem.item_spec
        const itemSpecs = JSON.parse(strSpec ? strSpec : [])
        let spec_item_ids = []

        if (itemSpecs.length > 0) {
          itemSpecs.forEach((spec, ind) => {
            const spec_id = Number(spec.id)
            let spec_item_id = Number(spec.item.id)
            let id = spec_id + '_' + spec_item_id
            obj[spec_id] = spec.item.name
            obj[id] = spec_item_id

            spec_item_ids.push(spec_item_id)
          })
        }

        if (itemSpecs.length > 0 && itemSpecs[0].spec_format) {
          let image_id = this.getFirstImageSpec()
          itemSpecs.forEach((spec, ind) => {
            if (image_id && image_id === Number(spec.id)) {
              const item_id = Number(spec.item.id)
              obj.main_color_img = this.getMainImage(item_id)
              obj.color_img = this.getOtherImage(item_id)
              // 控件图片回显属性（固定格式[{url:''}]）
              obj.colorImg = obj.color_img.map((item) => {
                return {
                  url: item,
                }
              })
            }
          })
        } else {
          if (shop_product_image.length) {
            let image = shop_product_image?.[0]
            obj.main_color_img = image.item_image_default
            let other = image.item_image_other
            if (other) {
              obj.color_img = other.split(',')
            } else {
              obj.color_img = []
            }
            // 控件图片回显属性（固定格式[{url:''}]）
            obj.colorImg = obj.color_img.map((item) => {
              return {
                url: item,
              }
            })
          }
        }

        spec_item_ids.sort(function (a, b) {
          return a - b
        })
        let spec_item_ids_str = spec_item_ids.join('-')

        obj['siid'] = spec_item_ids_str

        tmpSpecData.push(obj)
        //this.specData.push(obj)
      })

      this.specData = Object.assign([], tmpSpecData)
      this.allSpecData = Object.assign([], this.specData)
    },
    initDetail() {
      const productDetail = this.shop_product_detail
      // 售后服务
      this.detailForm.product_service = productDetail.product_service
      // 规格参数
      this.detailForm.product_param = productDetail.product_param
      // 商品描述
      this.detailForm.product_detail = productDetail.product_detail
      // 商品标签
      const productTags = productDetail.product_tags
      if (productTags !== 'null' && productTags) {
        this.detailForm.product_tags = productTags.split(',').map(Number)
      }
    },
    initProduct() {
      const productBase = this.shop_product_base
      const productIndex = this.shop_product_index
      const shopProductInfo = this.shop_product_info
      // 商品卖点
      this.productForm.product_tips = productBase.product_tips
      // 视频地址
      this.productForm.product_video = productBase.product_video
      // 运费设置id
      let transportTypeId = productBase.transport_type_id
      let transports = this.transports
      if (!transportTypeId && transports && transports.length > 0) {
        this.productForm.transport_type_id = transports[0].transport_type_id
      } else {
        this.productForm.transport_type_id = transportTypeId
      }
      // 商品状态
      this.productForm.product_state_id = productBase.product_state_id

      // 发售日期
      this.productForm.product_sale_time = productBase.product_sale_time
      //
      this.productForm.product_inventory_lock =
        productBase.product_inventory_lock
      this.productForm.product_name = productIndex.product_name
      this.productForm.product_number = productIndex.product_number
      this.productForm.kind_id = productIndex.kind_id
      this.productForm.payment_type_id = productIndex.payment_type_id
      this.productForm.product_buy_limit = shopProductInfo.product_buy_limit
      // 初始化商品的品牌
      this.checkBrand = this.shop_product_index.brand_id
    },
    // 获取其它图片集合
    getOtherImage(color_id) {
      const productImage = this.getProductImage(color_id)
      if (!productImage) return []
      const strImageOther = productImage.item_image_other
      if (strImageOther) {
        return strImageOther.split(',')
      }
      return []
    },
    // 获取主图
    getMainImage(color_id) {
      const productImage = this.getProductImage(color_id)
      if (!productImage) return ''
      return productImage.item_image_default
    },
    // 获取图片对象
    getProductImage(color_id) {
      const productImages = this.shop_product_image
      for (let i = 0; i < productImages.length; i++) {
        const colorId = productImages[i].color_id
        if (color_id === colorId) {
          return productImages[i]
        }
      }
      return null
    },
    // 根据 spec_id 和 spec_item_id 获取items
    getSpecItemByIds(spec_id, idsArr) {
      const specs = this.specs
      let itemArr = []
      let items = []
      for (let i = 0; i < specs.length; i++) {
        if (specs[i].spec_id === spec_id) {
          items = specs[i].specItems
          break
        }
      }
      for (let i = 0; i < idsArr.length; i++) {
        for (let j = 0; j < items.length; j++) {
          const item = items[j]
          if (item.spec_item_id === idsArr[i]) {
            itemArr.push(item)
            break
          }
        }
      }
      return itemArr
    },
    close() {
      this.reset()
      this.dialogFormVisible = false
    },
    reset() {
      this.batchObj = {
        item_is_default: false,
        item_enable: 1001,
        item_market_price: undefined,
        item_unit_price: undefined,
        item_unit_points: undefined,
        item_quantity: undefined,
        item_purchase_price: undefined,
        item_purchase_rate: undefined,
        item_sales_rate: undefined,
      }
      this.productForm = {
        product_sale_time: '',
        product_video: '',
        product_buy_limit: undefined,
        product_number: '',
        kind_id: 1201,
        product_name: '',
        product_inventory_lock: 1001,
        product_state_id: 1002,
        contract_type_ids: [],
        product_transport_id: [],

        transport_type_id: undefined,
        store_category_ids: [],
        product_service: '',
        product_param: '',
        product_detail: '',
        product_id: undefined,
        product_tips: '',
      }
      this.validForm = {
        product_valid_period: 1001,
        product_valid_type: 1001,
        product_service_date_flag: 0,
        product_service_contactor_flag: 1,
      }
      this.detailForm = {
        product_detail: '',
        product_tags: [],
      }
      this.specData = []
      this.checkBrand = undefined
    },
    save() {
      // 校验字段
      if (!this.productForm.product_name) {
        this.$baseMessage('请输入商品名称！', 'error')
        return
      }

      this.creProductSpec()
      this.parColorImg()

      let assistArr = this.assistArr
      let checkBrand = this.checkBrand
      let detailForm = this.detailForm
      let productForm = this.productForm
      let validForm = this.validForm
      let assistsIndex = this.getProductAssistsIndex()

      // 格式化日期
      if (productForm.product_sale_time) {
        productForm.product_sale_time = renderTime(
          productForm.product_sale_time
        )
      }
      if (validForm.product_validity_end) {
        validForm.product_validity_end = renderTime(
          validForm.product_validity_end
        )
      }

      let productObj = {
        assistsIndex: assistsIndex,
        brand_id: checkBrand ? checkBrand : 0,
        assists: assistArr ? assistArr : '',
        productDetail: detailForm ? detailForm : '',
        productBase: productForm ? productForm : '',
        productSpec: this.getProductSpec(),
        valid: validForm ? validForm : '',
      }
      const specData = this.specData
      for (let i = 0; i < specData.length; i++) {
        if (
          specData[i].item_unit_price <= 0 &&
          specData[i].item_unit_points <= 0
        ) {
          this.$baseMessage('商品零售价及积分不能同时为0', 'warning')
          return
        }

        if (
          this.configs.config.supplier_market_enable &&
          2 == this.configs.store_type &&
          specData[i].item_advice_price <= 0
        ) {
          this.$baseMessage('商品建议零售价不能为0', 'warning')
          return
        }
      }
      this.saveProduct(
        JSON.stringify(productObj),
        JSON.stringify(this.specData)
      )
    },
    async getxfz() {
      const { data } = await getxfz()
      this.roleList = data.items
    },
    // 将colorImg 数组格式保存为color_img json格式
    parColorImg() {
      // 处理列合并导致后面 color_img 数据为空
      const specData = this.specData
      if (specData.length > 2) {
        let img = specData[0].color_img
        // 有image 类型的spec时，并且被选中了
        let element = this.getFirstImageSpec()
        if (element) {
          // image 类型spec id
          for (let i = 1; i <= specData.length - 1; i++) {
            if (specData[i - 1][element] === specData[i][element]) {
              specData[i].color_img = img
              continue
            }
            img = specData[i].color_img
          }
        } else {
          // 没有image 类型的spec被选中
          specData.forEach((item, index) => {
            item.color_img = img
          })
        }
      }
    },
    closeTableVisible() {
      this.specId = undefined
      this.tableVisible = false
    },
    async getType(type_id, productId) {
      const { data } = await get({ type_id: type_id, product_id: productId })
      this.brands = data.brands
      this.assists = data.assists
      this.specs = data.specs
      // 维护image类型的spec
      // this.initSpecImageList()
      // // 动态添加vue 属性
      this.initAssistArr(this.assists)
      this.initCheckSpecArr(this.specs)
    },
    // 初始化vue属性 assistArr
    initAssistArr(assists) {
      if (!assists) return
      assists.forEach((assist) => {
        const assist_id = assist.assist_id
        let assist_format = assist.assist_format
        if (assist_format === 'text' || assist_format === 'radio') {
          this.$set(this.assistArr, assist_id, '')
        } else {
          this.$set(this.assistArr, assist_id, [])
        }
      })
    },
    // 初始化vue属性 checkSpec
    initCheckSpecArr(specs) {
      // if (!specs) {
      //   // 当specs为null 时初始化specData数据（specs为null 不能触发watch 监控事件）
      //   this.creSpecData([])
      //   return
      // }
      specs.forEach((spec) => {
        const spec_id = spec.spec_id
        this.$set(this.checkSpec, spec_id, [])
      })
    },
    // 获取 shop_product_index，shop_product_item，shop_product_detail，shop_product_image
    async getProductInfo(product_id) {
      const { data } = await productInfoByPid({
        product_id: product_id,
      })
      this.shop_product_index = data.shop_product_index
      this.handleShopProductIndex(this.shop_product_index)
      this.shop_product_info = data.shop_product_info
      this.shop_product_detail = data.shop_product_detail
      this.shop_product_image = data.shop_product_image
      this.shop_product_assist_index = data.shop_product_assist_index
      if (this.shop_product_index.kind_id === 1202) {
        this.shop_product_valid_period = data.shop_product_valid_period
      }
    },
    // 获取 shop_product_item
    async getProductItem(product_id) {
      const { data } = await getItemListByPid({
        product_id: product_id,
      })
      this.shop_product_item = data
    },
    async getCategory(category_id) {
      const { data } = await getCategory({ category_id: Number(category_id) })
      this.productForm.category_id = data.category_id
      this.productForm.category_name = data.category_name
    },
    async getPayCardTypes() {
      var that = this
      let params = {
        pay_type: 2,
      }
      const { data } = await getPayCardTypes(params)
      this.paycardTypes = data
    },
    async getCouponCardTypes() {
      var that = this
      let params = {
        pay_type: 3,
      }
      const { data } = await getPayCardTypes(params)
      this.couponCardTypes = data
    },
    async getCouponsFun() {
      var that = this
      let params = {
        activity_type_id: 1105,
        activity_type: 3,
      }
      const { data } = await getCouponsList(params)
      this.activityArr = data
    },
    async getTransports() {
      const { data } = await transports()
      this.transports = data
    },
    async getStoreCategoryTree() {
      const { data } = await getStoreCategoryTree()
      this.storeCategoryTree = data
    },
    async getCategoryTree() {
      const { data } = await getCategoryTree()

      const treeData = this.tree(data)
      console.info(treeData)
      //遍历，将空子集设置为null
      this.categoryOptions = treeData
    },

    tree(data) {
      for (let i = 0; i < data.length; i++) {
        let item = data[i]

        // item.sub 不等于 undefined && item.sub.length 大于 0 时
        if (item.sub && item.sub.length > 0) {
          item.sub = this.tree(item.sub)
        } else {
          delete item.sub
        }
      }

      return data
    },
    findTree(data, idx) {
      for (let i = 0; i < data.length; i++) {
        let item = data[i]

        if (item.category_id == idx) {
          return item
        }

        // item.sub 不等于 undefined && item.sub.length 大于 0 时
        if (item.sub && item.sub.length > 0) {
          const tmp = this.findTree(item.sub, idx)
          if (tmp != null) {
            return tmp
          }
        }
      }

      return null
    },
    async getProductTags() {
      const { data } = await tags({ pageSize: 500 })
      this.productTags = data.items
    },
    async saveProduct(productObj, productItems) {
      this.$refs['productForm'].validate(async (valid) => {
        if (valid) {
          this.loading = true
          this.saveBtnLoading = true
          const { msg, status } = await saveProduct({
            productObj: productObj,
            productItems: productItems,
          })
          this.loading = false
          this.saveBtnLoading = false
          if (200 == status) {
            this.$baseMessage(msg, 'success')
          } else {
            this.$baseMessage(msg, 'error')
          }
          this.close()
          this.$emit('fetch-data')
        }
      })
    },
    handleShopProductIndex(shop_product_index) {
      let storeCategoryIds = shop_product_index.store_category_ids
      if (storeCategoryIds) {
        this.productForm.store_category_ids = storeCategoryIds
          .split(',')
          .map(Number)
        console.log(this.productForm.store_category_ids)
      }
      let contractTypeIds = this.shop_product_index.contract_type_ids
      if (contractTypeIds) {
        this.productForm.contract_type_ids = contractTypeIds
          .split(',')
          .map(Number)
      }
      let productTransportId = this.shop_product_index.product_transport_id
      if (productTransportId) {
        this.productForm.product_transport_id = productTransportId
          .split(',')
          .map((item) => Number(item))
      }
      let voucherActivityId = shop_product_index.voucher_activity_id
      if (voucherActivityId) {
        this.productForm.voucher_activity_id = Number(voucherActivityId)
      } else {
        this.productForm.voucher_activity_id = ''
      }
      // if (voucherActivityId) {
      //   this.productForm.voucher_activity_id = voucherActivityId
      //     .split(',')
      //     .map(Number)
      // } else {
      //   this.productForm.voucher_activity_id = '';
      // }
      let couponTypeId = shop_product_index.coupon_type_id
      console.log(couponTypeId)
      if (couponTypeId) {
        this.productForm.coupon_type_id = couponTypeId
      } else {
        this.productForm.coupon_type_id = ''
      }

      if (shop_product_index.card_type_id != 0) {
        this.productForm.card_type_id = shop_product_index.card_type_id
      }
      this.productForm.store_id = shop_product_index.store_id
    },
    // 获取product_spec
    getProductSpec() {
      let specs = Object.values(this.checkSpec).filter(
        (item) => item.length > 0
      )
      const specsArr = []
      specs.forEach((spec) => {
        const specId = spec[0].spec_id
        const sp = this.specs.find((item) => item.spec_id === specId)
        const obj = {
          id: sp.spec_id,
          name: sp.spec_name,
          item: [],
          spec_format: sp.spec_format,
        }
        spec.forEach((item) => {
          const itemObj = {
            id: item.spec_item_id,
            name: item.spec_item_name,
          }
          obj.item.push(itemObj)
        })
        specsArr.push(obj)
      })

      //重新排序
      const arr = []
      this.specs.forEach((spec) => {
        let spec_id = spec.spec_id

        specsArr.forEach((sa) => {
          let id = sa.id
          if (spec_id == id) {
            arr.push(sa)
          }
        })
      })

      return arr ? arr : ''
    },
    // 获取 item_spec
    creProductSpec() {
      let head = this.getSpecHead()
      this.specData.forEach((row) => {
        const objs = []
        head.forEach((spec) => {
          let spec_id = spec.spec_id
          let specItems = spec.specItems
          let spec_item = specItems.find((item) => {
            let spec_item_id = item.spec_item_id
            let id = spec_id + '_' + spec_item_id
            return spec_item_id === row[id]
          })
          if (spec_item) {
            let obj = {
              id: spec_id,
              name: spec.spec_name,
              item: {
                id: spec_item.spec_item_id,
                name: row[spec.spec_id],
              },
            }
            objs.push(obj)
          }
        })
        const objStr = JSON.stringify(objs)
        row.product_spec = objStr
      })
    },
    // 获取选中的表头字段集合（选中的spec对象）
    getSpecHead() {
      let head = Object.values(this.checkSpec)
        .filter((item) => item.length > 0)
        .map((item) => item[0].spec_id)
      const headObj = []
      this.specs.forEach((spec) => {
        head.forEach((item) => {
          if (spec.spec_id === item) {
            headObj.push(spec)
          }
        })
      })
      return headObj
    },

    // 获取选中的表头宽度
    getItemWidth(property) {
      let width = null

      switch (property) {
        case 'main_color_img':
          width = 80
          break
        case 'color_img':
          width = null
          break
        case 'item_barcode':
          width = 120
          break
        case 'item_advice_price':
          width = 120
          break
        case 'item_weight':
        case 'item_market_price':
        case 'item_unit_price':
        case 'item_unit_points':
        case 'item_quantity':
          width = 100
          break
        case 'item_enable':
        case 'item_is_default':
          width = 90
          break
        default:
          width = 120
          break
      }

      return width
    },

    batOper(e) {
      const key = e.target.dataset.key
      let title = ''
      if (key == 'item_market_price') {
        title = this.__('批量设置市场价')
      } else if (key == 'item_unit_price') {
        title = this.__('批量设置价格')
      } else if (key == 'item_unit_points') {
        title = this.__('批量设置积分')
      } else if (key == 'item_quantity') {
        title = this.__('批量设置库存')
      } else if (key == 'item_weight') {
        title = this.__('批量设置重量')
      } else if (key == 'item_advice_price') {
        title = this.__('批量设置建议零售价')
      }

      this.$prompt(title, {
        confirmButtonText: this.__('确定'),
        cancelButtonText: this.__('取消'),
      })
        .then(({ value }) => {
          if (value) {
            this.specData.forEach((item, index) => {
              this.specData[index][key] = Number(value) || ''

              this.$forceUpdate()
            })
          }

          this.$forceUpdate()
        })
        .catch(() => {})
    },
  },
}
</script>
<style lang="scss" scoped>
.tit_font {
  padding: 10px 0;
  line-height: inherit;
  font-size: 21px;
  font-weight: bold;
  color: #000;
}

.add-product-upload .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.add-product-upload .el-upload:hover {
  border-color: #409eff;
}

#main-uploader-icon {
  font-size: 14px;
  color: #8c939d;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
}

#add-product-color-upload .el-upload--picture-card {
  font-size: 14px;
  color: #8c939d;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
}

#add-product-color-upload .el-upload-list--picture-card .el-upload-list__item,
#add-product-color-upload .el-upload-list__item-actions {
  width: 50px;
  height: 50px;
}

#img-avatar {
  font-size: 14px;
  color: #8c939d;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
}

#main-avatar {
  width: 50px;
  height: 50px;
  display: block;
}

.quill {
  margin-bottom: 58px;
}

::v-deep {
  .el-dialog__body {
    padding-top: 10px;
  }

  .pic-upload-list--picture-card .pic-upload-list--item {
    margin: 0;
    margin: 0 5px;
  }

  .pic-upload-source {
    padding: 0;

    .pic-upload-source-box {
      height: 50px;
      line-height: 50px;
    }
  }

  .pic-upload--picture-card {
    margin: 0 5px;
  }

  .center-dialog {
    padding-bottom: 58px;
    position: relative;
    overflow: hidden;
  }

  .footer {
    position: fixed; /* 使用fixed定位 */
    left: 0;
    bottom: 0;
    width: 100%;
    height: 58px;
    line-height: 58px;
    background: #fff;
    color: white;
    text-align: center;
    z-index: 1;
    display: flex;
    padding-top: 0 !important;
    justify-content: center;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.35);
  }
}
</style>
