<!--
 * @Descripttion:
 * @version:
 * @Author: kBank
 * @Date: 2022-10-26 17:12:12
-->
<template>
  <div class="page" style="padding-left: 0 !important">
    <div class="topbox">
      <div
        v-for="(item, index) in topList"
        :key="index"
        class="levelList_i"
        :class="tabActive == item.id ? 'act' : ''"
        @click.prevent="handleLink(item.id)"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="main">
      <div ref="box" class="contain">
        <div v-show="tabActive == 0">
          <el-form
            ref="form"
            :rules="rules"
            :model="form"
            label-width="120px"
          >
            <el-row :gutter="40">
              <el-col :span="16">
                <el-form-item :label="'商品名称'" prop="waresName">
                  <el-input
                    v-model="form.waresName"
                    clearable
                    maxlength="100"
                    :placeholder="'请输入'"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item :label="'商品编码'" prop="waresCode">
                  <el-input
                    v-model="form.waresCode"
                    :placeholder="'请输入'"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item :label="'商品卖点'" prop="sellingPoints">
                  <el-input
                    v-model="form.sellingPoints"
                    clearable
                    :placeholder="'请输入'"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item :label="'虚拟销量'" prop="sales">
                  <el-input
                    v-model="form.sales"
                    clearable
                    oninput="value=value.replace(/[^\d]/g,'')"
                    :placeholder="'请输入'"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item :label="'商品价格'" prop="waresPrice">
                  <el-input
                    v-model="form.waresPrice"
                    clearable
                    type="number"
                    :placeholder="'请输入'"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  :label="'商品业绩' + `(${isLocals()})`"
                  prop="waresAchieve"
                >
                  <el-input
                    v-model="form.waresAchieve"
                    clearable
                    type="number"
                    :placeholder="'请输入'"
                  />
                </el-form-item>
              </el-col>
              <!-- <el-col :span="8">
                <el-form-item :label="'排列序号'"
                              prop="sort">
                  <el-input clearable
                            v-model="form.sort"
                            oninput="value = value.replace(/[^\d]/g,'')"
                            :placeholder="'请输入'"></el-input>
                </el-form-item>
              </el-col> -->
              <el-col :span="8">
                <el-form-item :label="'所属专区'" prop="specialArea">
                  <el-select
                    v-model="form.specialArea"
                    clearable
                    @change="selSpecial"
                  >
                    <el-option
                      v-for="item in areaList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col v-if="form.specialArea == 43" :span="8">
                <el-form-item :label="'区域分红方式'" prop="areaIncomeType">
                  <el-select v-model="form.areaIncomeType" :disabled="methods == 0" clearable @change="handleAreaIncomeTypeChange">
                    <el-option label="比率" :value="1" />
                    <el-option label="比值" :value="2" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col v-if="form.specialArea == 43" :span="8">
                <el-form-item :label="'复购区域分红'" prop="areaIncome">
                  <el-input
                    v-model="form.areaIncome"
                    type="number"
                    style="width: 100%"
                    :controls="false"
                    clearable
                    :disabled="methods == 0 || form.areaIncomeType == 1"
                    :placeholder="'请输入'"
                  >
                    <template v-if="form.areaIncomeType == 1" slot="append">
                      <span>%</span>
                    </template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item :label="'商品分类'" prop="pkAreaClassifys">
                  <!-- <el-select clearable  v-model="form.pkAreaClassify">
                    <el-option v-for="item in agreeList"
                               :key="item.val"
                               :label="item.text"
                               :value="item.val"></el-option>
                  </el-select> -->
                  <el-cascader
                    v-model="form.pkAreaClassifys"
                    :show-all-levels="false"
                    :options="hierarchyList"
                    @change="flChange"
                  />
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item :label="'上架状态'" prop="isPutOn">
                  <el-select v-model="form.isPutOn" clearable>
                    <el-option
                      v-for="item in agreeList"
                      :key="item.val"
                      :label="item.text"
                      :value="item.val"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item :label="'预售状态'" prop="preSaleStatus">
                  <el-select v-model="form.preSaleStatus" clearable>
                    <el-option
                      v-for="item in presaleList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item :label="'供应方式'" prop="operateScope">
                  <el-select v-model="form.operateScope" clearable>
                    <el-option
                      v-for="item in gyList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item :label="'销售状态'" prop="isSale">
                  <el-select v-model="form.isSale" clearable>
                    <el-option
                      v-for="item in xsList"
                      :key="item.val"
                      :label="item.text"
                      :value="item.val"
                    />
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item :label="'套餐类型'" prop="isSingle">
                  <el-select v-model="form.isSingle" clearable>
                    <el-option
                      v-for="item in tcList"
                      :key="item.val"
                      :label="item.text"
                      :value="item.val"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item :label="'是否推荐'">
                  <el-select v-model="form.isRecommend" clearable>
                    <el-option
                      v-for="item in isTj"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item :label="'前缀标签'">
                  <el-select v-model="form.pkPrefixLabel" clearable>
                    <el-option
                      v-for="item in qzList"
                      :key="item.pkId"
                      :label="item.label"
                      :value="item.pkId"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item :label="'炫酷标签'">
                  <el-select v-model="form.pkCoolLabel" clearable>
                    <el-option
                      v-for="item in kxList"
                      :key="item.pkId"
                      :label="item.label"
                      :value="item.pkId"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item :label="'商品类型'">
                  <el-select v-model="form.isMakerGift" clearable>
                    <el-option
                      v-for="item in waresTypeList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="支付比例">
                  <el-select v-model="form.pkSpecialCurrency" clearable>
                    <el-option
                      v-for="item in specialCurrency"
                      :key="item.pkId"
                      :label="item.tempName"
                      :value="item.pkId"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="是否预售">
                  <el-select v-model="form.isPreSale" clearable>
                    <el-option
                      v-for="item in agreeList"
                      :key="item.val"
                      :label="item.text"
                      :value="item.val"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="预售数量">
                  <el-input
                    v-model="form.preSaleQuantity"
                    clearable
                    :placeholder="'请输入'"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="商品排序" prop="sortStatus">
                  <el-select v-model="form.sortStatus" clearable>
                    <el-option
                      v-for="item in sortList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="上传盒数" prop="boxNum">
                  <el-input
                    v-model="form.boxNum"
                    clearable
                    :placeholder="'请输入'"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item :label="'保证标签'">
                  <el-checkbox-group v-model="form.pkGuaranteeLabel">
                    <el-checkbox
                      v-for="(item, index) in bzList"
                      :key="item.pkId"
                      :label="item.pkId"
                    >{{ item.label }}</el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item :label="'卖点标签'">
                  <el-select v-model="form.pkSellingPoint" clearable multiple>
                    <el-option
                      v-for="item in mdList"
                      :key="item.pkId"
                      :label="item.label"
                      :value="item.pkId"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item :label="'补充协议'">
                  <el-select v-model="form.pkAgreement" clearable>
                    <el-option
                      v-for="item in agreementList"
                      :key="item.pkId"
                      :label="item.title"
                      :value="item.pkId"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item :label="'包邮类型'" prop="isFreeMail">
                  <el-select v-model="form.isFreeMail" clearable>
                    <el-option
                      v-for="item in postList"
                      :key="item.val"
                      :label="item.text"
                      :value="item.val"
                    />
                  </el-select>
                </el-form-item>
                <div v-if="form.isFreeMail == 1" class="baoyou">
                  <el-checkbox-group
                    v-model="form.checkList"
                    @change="getTrans"
                  >
                    <el-checkbox
                      v-for="(item, index) in transportTypeList"
                      :key="item.value"
                      :label="item.value"
                    >
                      <div>{{ item.label }}</div>
                      <el-select
                        v-show="item.value == 1"
                        v-model="form.pkLandPostage"
                        clearable
                      >
                        <el-option
                          v-for="item in postMoneyList1"
                          :key="item.pkId"
                          :label="item.tempName"
                          :value="item.pkId"
                        />
                      </el-select>
                      <el-select
                        v-show="item.value == 2"
                        v-model="form.pkAirPostage"
                        clearable
                      >
                        <el-option
                          v-for="item in postMoneyList2"
                          :key="item.pkId"
                          :label="item.tempName"
                          :value="item.pkId"
                        />
                      </el-select>
                      <el-select
                        v-show="item.value == 3"
                        v-model="form.pkOceanPostage"
                        clearable
                      >
                        <el-option
                          v-for="item in postMoneyList3"
                          :key="item.pkId"
                          :label="item.tempName"
                          :value="item.pkId"
                        />
                      </el-select>
                    </el-checkbox>
                  </el-checkbox-group>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="40">
              <el-col :span="8">
                <el-form-item :label="'上架日期'">
                  <el-date-picker
                    v-model="form.putOnTime"
                    type="datetime"
                    :placeholder="'请选择'"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item :label="'下架日期'">
                  <el-date-picker
                    v-model="form.putOffTime"
                    type="datetime"
                    :placeholder="'请选择'"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item :label="'预计发货时间'">
                  <el-date-picker
                    v-model="form.arrivalTime"
                    type="datetime"
                    :placeholder="'请选择'"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item :label="'标签提示'">
                  <el-input
                    v-model="form.warnMessage"
                    clearable
                    :placeholder="'请输入'"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item :label="'商品封面'" prop="cover">

                  <imageUpload v-model="form.cover" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item :label="'图片1'" prop="cover1">

                  <imageUpload v-model="form.cover1" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item :label="'图片2'" prop="cover2">

                  <imageUpload v-model="form.cover2" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item :label="'图片3'" prop="cover3">
                  <imageUpload v-model="form.cover3" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="24">
                <el-form-item :label="'商品详情'" prop="details">
                  <editor
                    ref="sptwEditor1"
                    v-model="form.details"
                    :min-height="196"
                    :upload-url="uploadImgUrl"
                  />
                </el-form-item>
              </el-col>
              <!-- <el-col :span="24">
                <el-form-item label="规格与包装">
                  <el-row v-for="item,index in form.waresSpecsPackList"
                          :key="index">
                    <el-col :span="10"
                            style="margin-right:20px">
                      <el-input clearable  v-model="item.key"
                                placeholder="规格名称"></el-input>
                    </el-col>
                    <el-col :span="10"
                            style="margin-right:10px">
                      <el-input clearable  v-model="item.value"
                                placeholder="规格内容"></el-input>
                    </el-col>
                    <el-col :span="2"
                            v-show="index == form.waresSpecsPackList.length-1">
                      <i class="el-icon-circle-plus-outline addIcon"
                         @click="addGg"></i>
                    </el-col>
                    <el-col :span="2"
                            v-show="index != form.waresSpecsPackList.length-1">
                      <i class="el-icon-remove-outline addIcon"
                         @click="removeGg(index)"></i>
                    </el-col>
                  </el-row>
                </el-form-item>
              </el-col> -->

              <el-col :span="24">
                <el-form-item :label="'售后保障'" prop="afterGuarantee">
                  <editor
                    ref="sptwEditor3"
                    v-model="form.afterGuarantee"
                    :min-height="196"
                    :upload-url="uploadImgUrl"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <!-- 产品明细 -->
        <div v-show="tabActive == 1">
          <Cpmx ref="cpmx" @getTableList="getTableList" />
        </div>
        <!-- 规格明细 -->
        <div v-show="tabActive == 2">
          <Ggmx ref="ggmxed" @getGoodList="getGoodList" />
        </div>
        <!-- 团队配置 -->
        <div v-show="tabActive == 3" class="teamPz">
          <div class="tit">{{ '团队配置' }}</div>
          <div class="xian" />
          <el-form
            ref="team"
            :model="form"
            style="width: 1200px; padding: 0 20px"
            label-width="auto"
          >
            <el-row
              v-for="(item, index) in form.waresAuthorityList"
              :key="index"
              :gutter="20"
            >
              <el-col :span="10">
                <el-form-item :label="'可见类型'">
                  <el-select
                    v-model="item.authorityType"
                    clearable
                    @change="getTeamList(item.authorityType)"
                  >
                    <el-option
                      v-for="cld in xyList"
                      v-show="!(index > 0 && cld.value == 5)"
                      :key="cld.value"
                      :label="cld.label"
                      :value="cld.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col
                v-show="form.waresAuthorityList[index].authorityType != 5"
                :span="10"
              >
                <el-form-item :label="'团队编号'">
                  <el-input
                    v-model="item.memberCode"
                    clearable
                    :placeholder="'请输入'"
                  />
                </el-form-item>
              </el-col>
              <el-col
                v-show="
                  form.waresAuthorityList[index].authorityType != 5 &&
                    index !== form.waresAuthorityList.length - 1
                "
                :span="4"
              >
                <i
                  class="el-icon-remove-outline addIcon"
                  @click="removeTeamPz(index)"
                />
              </el-col>
              <el-col
                v-show="
                  form.waresAuthorityList[index].authorityType != 5 &&
                    index == form.waresAuthorityList.length - 1
                "
                :span="4"
              >
                <i
                  class="el-icon-circle-plus-outline addIcon"
                  @click="addTeamPz"
                />
              </el-col>
            </el-row>
          </el-form>
          <!-- <Ggmx ref="ggmxed"></Ggmx> -->
        </div>
        <!-- 级差配置 -->
        <div v-show="tabActive == 4">
          <Jcpz ref="jcpzed" @getRangList="getRangList" />
        </div>
        <!-- 等级配置 -->
        <div v-show="tabActive == 5" class="teamPz">
          <div class="djpz">
            <div class="tit">{{ '等级配置' }}</div>
            <div class="djpz_i">{{ '选择能够购买该商品的会员等级，若不选择则默认全部可购买' }}</div>
          </div>
          <div class="xian" />
          <el-form
            ref="team"
            :model="form"
            style="width: 1200px; padding: 0 20px"
            label-width="auto"
          >
            <div class="djpz_a">
              <el-checkbox v-model="levelAll" @change="getLevel">{{
                '全部'
              }}</el-checkbox>
              <div class="djpz_g">
                <el-checkbox-group
                  v-model="form.waresGradeIds"
                  @change="getLevelAll"
                >
                  <el-checkbox
                    v-for="item in levelList"
                    :key="item.pkId"
                    :label="item.pkId"
                  >{{ item.gradeName }}</el-checkbox>
                </el-checkbox-group>
              </div>
            </div>
          </el-form>
          <!-- <Ggmx ref="ggmxed"></Ggmx> -->
        </div>
        <!-- 奖衔配置 -->
        <div v-show="tabActive == 6" class="teamPz">
          <div class="djpz">
            <div class="tit">{{ '奖衔配置' }}</div>
            <!-- <div class="djpz_i">{{'选择能够购买该商品的会员等级，若不选择则默认全部可购买'}}</div> -->
          </div>
          <div class="xian" />
          <el-form
            ref="team"
            :model="form"
            style="width: 1200px; padding: 0 20px"
            label-width="auto"
          >
            <div class="djpz_a">
              <el-checkbox v-model="gradeAll" @change="getGrade">{{
                '全部'
              }}</el-checkbox>
              <div class="djpz_g">
                <el-checkbox-group
                  v-model="form.waresAwardsIds"
                  @change="getGradeAll"
                >
                  <el-checkbox
                    v-for="item in awardsList"
                    :key="item.pkId"
                    :label="item.pkId"
                  >{{ item.awardsName }}</el-checkbox>
                </el-checkbox-group>
              </div>
            </div>
          </el-form>
        </div>
        <!-- 商品权限 -->
        <div v-show="tabActive == 7" class="teamPz">
          <div class="djpz">
            <div class="tit">商品权限</div>
            <!-- <div class="djpz_i">{{'选择能够购买该商品的会员等级，若不选择则默认全部可购买'}}</div> -->
          </div>
          <div class="xian" />
          <el-form
            ref="team"
            :model="form"
            style="width: 1200px; padding: 0 20px"
            label-width="auto"
          >
            <div class="djpz_a">
              <div class="djpz_g">
                <el-checkbox-group v-model="form.waresMemberAuthorizeList">
                  <el-checkbox
                    v-for="item in authorityList"
                    :key="item.value"
                    :label="item.value"
                  >{{ item.label }}</el-checkbox>
                </el-checkbox-group>
              </div>
            </div>
          </el-form>
        </div>
      </div>
      <div class="footer">
        <el-button size="small" class="cancelBtn" @click="goBack">
          {{ '取消' }}</el-button>
        <el-button
          v-hasButtons="['GoodsReleaseConfirm']"
          size="small"
          style="background-color: #c8161d; border-color: #c8161d"
          class="sureBtn"
          @click="submit('form')"
        >
          {{ '确认' }}</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import Editor from '@/components/Editor'
import Cpmx from '@/views/goodsManage/goodsRelease/cpmx.vue'
import Ggmx from '@/views/goodsManage/goodsRelease/ggmx.vue'
import Jcpz from '@/views/goodsManage/goodsRelease/jcpz.vue'
import { getToken } from '@/utils/auth'
import UpDataImg from '@/components/upDataImg'
import * as api from '@/api/product.js'
import { specialArea } from '@/api/configManage'
import ImageUpload from '@/components/ImageUpload'
import { isLocals } from '@/utils/numberToCurrency'
import { getAwardsListChiose, getAwardsNewListChiose } from '@/api/level'
export default {
  name: 'Jcsz',
  components: {
    ImageUpload,
    Editor,
    UpDataImg,
    Jcpz,
    Cpmx,
    Ggmx
  },
  data() {
    return {
      levelAll: false,
      gradeAll: false,
      // 产品明细
      cpList: [],
      uploadImgUrl: process.env.VUE_APP_BASE_API + '/system/upload',
      headers: {
        Authorization: getToken()
      },
      dialogImageUrl: '',
      dialogVisible: false,
      form: {
        isMakerGift: 1,
        waresGradeIds: [],
        waresAwardsIds: [],
        sales: '',
        sortStatus: 0,
        boxNum: '1',
        waresCode: '',
        sort: '',
        sptw: '',
        ysList: [],
        bzList: [],
        areaIncome: 0,
        pkGuaranteeLabel: [],
        areaIncomeType: undefined,
        specialArea: '',
        checkList: [],
        waresMemberAuthorizeList: [],
        waresAuthorityList: [
          {
            authorityType: 5,
            memberCode: ''
          }
        ],
        waresSpecsPackList: [{ key: '', value: '' }]
      },
      moren: '/goodsManage/goodsRelease/jcsz',
      tabActive: 0,
      agreeList: [
        {
          text: '允许',
          val: 0
        },
        {
          text: '禁止',
          val: 1
        }
      ],
      // 套餐类型
      tcList: [
        {
          text: '套装',
          val: 0
        },
        {
          text: '单品',
          val: 1
        }
      ],
      postList: [
        {
          text: '包邮',
          val: 0
        },
        {
          text: '不包邮',
          val: 1
        }
      ],
      isTj: [
        {
          label: '推荐',
          value: 0
        },
        {
          label: '不推荐',
          value: 1
        }
      ],
      xsList: [
        {
          text: '允许出售',
          val: 0
        },
        {
          text: '禁止出售',
          val: 1
        }
      ],
      topList: [
        {
          name: '基础设置',
          id: 0
        },
        {
          name: '产品明细',
          id: 1
        },
        {
          name: '规格明细',
          id: 2
        },
        {
          name: '团队配置',
          id: 3
        },
        // {
        //   name: '级差配置',
        //   id: 4,
        // },
        {
          name: '等级配置',
          id: 5
        },
        {
          name: '奖衔配置',
          id: 6
        },
        {
          name: '商品权限',
          id: 7
        }
      ],
      goodList: [],
      copyArr: [],
      // 血缘列表
      xyList: '',
      // 海陆空
      transportTypeList: [],
      // 商品分类
      hierarchyList: [],
      // 所属专区
      areaList: [],
      // 预售状态
      presaleList: [],
      // 供应方式
      gyList: [],
      // 前缀标签
      qzList: [],
      // 酷炫标签
      kxList: [],
      // 保障标签
      bzList: [],
      // 卖点标签
      mdList: [],
      // 协议
      agreementList: [],
      // 邮费模板
      postMoneyList1: [],
      postMoneyList2: [],
      postMoneyList3: [],
      levelList: [],
      rules: {
        areaIncomeType: [
          { required: true, message: '请选择区域分红方式', trigger: 'change' }
        ],
        areaIncome: [
          { required: true, message: '请输入复购区域分红', trigger: 'blur' }
        ],
        waresName: [
          { required: true, message: '请输入商品名称', trigger: 'blur' }
        ],
        sortStatus: [{ required: true, message: '请选择', trigger: 'change' }],
        waresCode: [
          { required: true, message: '请输入商品编码', trigger: 'blur' }
        ],
        sellingPoints: [
          { required: true, message: '请输入商品卖点', trigger: 'blur' }
        ],
        sales: [{ required: true, message: '请输入商品销量', trigger: 'blur' }],
        waresPrice: [
          { required: true, message: '请输入商品价格', trigger: 'blur' }
        ],
        waresAchieve: [
          { required: true, message: '请输入商品业绩', trigger: 'blur' }
        ],
        sort: [
          { required: true, message: '请输入排列序号', trigger: 'blur' }
        ],
        pkAreaClassifys: [
          { required: true, message: '请选择商品分类', trigger: 'change' }
        ],
        specialArea: [
          { required: true, message: '请选择所属专区', trigger: 'change' }
        ],
        isPutOn: [
          { required: true, message: '请选择上架状态', trigger: 'change' }
        ],
        operateScope: [
          { required: true, message: '请选择供应方式', trigger: 'change' }
        ],
        preSaleStatus: [
          {
            required: true,
            message: '请选择预售状态',
            trigger: 'change'
          }
        ],
        isSale: [
          { required: true, message: '请选择销售状态', trigger: 'change' }
        ],
        isSingle: [
          {
            required: true,
            message: '请选择套餐类型',
            trigger: 'change'
          }
        ],
        pkAgreement: [
          { required: true, message: '请选择补充协议', trigger: 'change' }
        ],
        isFreeMail: [
          { required: true, message: '请选择包邮类型', trigger: 'change' }
        ],
        // videoUrl: [
        //   { required: true, message: '请上传商品视频', trigger: 'blur' }
        // ],
        cover: [{ required: true, message: '请上传视频主图', trigger: 'blur' }],
        cover1: [
          { required: true, message: '请上传图片', trigger: 'blur' }
        ],
        // cover2: [
        //   { required: true, message: '请上传图片', trigger: 'blur' }
        // ],
        // cover3: [
        //   { required: true, message: '请上传图片', trigger: 'blur' }
        // ],
        // cover4: [
        //   { required: true, message: '请上传图片', trigger: 'blur' }
        // ],
        details: [
          { required: true, message: '请输入商品详情', trigger: 'blur' }
        ],
        afterGuarantee: [
          { required: true, message: '请输入售后保障', trigger: 'blur' }
        ]
      },
      yesNo: [],
      waresTypeList: [],
      specialCurrency: [],
      awardsList: [],
      authorityList: [],
      isTrue: false,
      sortList: []
    }
  },
  mounted() {
    // 血缘关系
    this.getXYList()
    // 商品编码
    this.getWaresCode()
    // 运输方式
    this.getTransportType()
    // 查询分类父子级关系
    this.get_hierarchy_list()
    // 获取专区
    this.getArea()
    //  供应方式
    this.supply_way()
    //  查询预售状态
    this.presale_status()
    // 四个标签
    this.labelAll()
    // 协议接口
    this.getAgreementList()
    // 邮费模板
    this.getPostageList()
    // 排序
    // this.getWaresSort()
    this.getOther()
    this.$refs.box.scrollTop = 0
    this.$store.commit('settings/GGMX_SETTING', [])

    // 获取极差列表
    this.getRangeList()
  },
  methods: {
    isLocals,
    getOther() {
      api.get_sort().then((res) => {
        this.sortList = res.data
      })
      api.yes_no().then((res) => {
        this.yesNo = res.data
      })
      api.wares_type().then((res) => {
        this.waresTypeList = res.data
      })
      api.special_currency().then((res) => {
        this.specialCurrency = res.data
      })
      getAwardsNewListChiose().then((res) => {
        this.awardsList = res.rows
      })
      api.ERegistrationAuthority().then((res) => {
        this.authorityList = res.data
      })
    },
    handleAreaIncomeTypeChange(val) {
      if (val == 1) {
        this.form.areaIncome = 0.5
      } else {
        this.form.areaIncome = ''
      }
    },
    // getWaresSort() {
    //   api.waresSort().then((res) => {
    //     this.form.sort = res.data
    //   })
    // },
    getLevel(e) {
      if (e) {
        const levelArr = this.levelList.map((item) => {
          return item.pkId
        })
        this.form.waresGradeIds = levelArr
      } else {
        this.form.waresGradeIds = []
      }
    },
    getLevelAll(e) {
      if (e.length == this.levelList.length) {
        this.levelAll = true
      } else {
        this.levelAll = false
      }
    },
    getGrade(e) {
      if (e) {
        const gradeArr = this.awardsList.map((item) => {
          return item.pkId
        })
        this.form.waresAwardsIds = gradeArr
      } else {
        this.form.waresAwardsIds = []
      }
    },
    getGradeAll(e) {
      if (e.length == this.awardsList.length) {
        this.gradeAll = true
      } else {
        this.gradeAll = false
      }
    },
    getRangeList() {
      api.rangeNewList().then((res) => {
        this.levelList = res.data
      })
    },
    getWaresCode() {
      api.getWaresCode().then((res) => {
        this.form.waresCode = res.msg
      })
    },
    goBack() {
      this.$router.go(-1)
    },
    addGg() {
      this.form.waresSpecsPackList.push({ key: '', value: '' })
    },
    submit() {
      if (!this.form.waresSpecsSkuList) {
        this.$message({
          message: '请配置商品',
          type: 'warning'
        })
        return false
      }
      this.$refs['form'].validate((valid) => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: '努力提交中',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          this.$store.commit('settings/GGMX_SETTING', [])
          api.waresSave(this.form).then((res) => {
            loading.close()
            if (res.code == 200) {
              this.$message({
                message: '添加成功',
                type: 'success'
              })
              this.$router.replace({
                path: '/goodsManage/goodsList/goodsList'
              })
            } else {
              this.$message({
                message: res.msg,
                type: 'warning',
                duration: 3000
              })
            }
          })
        } else {
          this.$message({
            message: '请填写完整信息',
            type: 'warning'
          })
          return false
        }
      })
    },
    getTrans(data) {
      this.form.isLandTrans = ''
      this.form.isAirTrans = ''
      this.form.isOceanTrans = ''
      data.forEach((item) => {
        if (item == 1) {
          this.form.isLandTrans = 0
        } else if (item == 2) {
          this.form.isAirTrans = 0
        } else if (item == 3) {
          this.form.isOceanTrans = 0
        }
      })
    },
    getTeamList(val) {
      if (val == 5) {
        this.form.waresAuthorityList = [
          {
            authorityType: 5,
            memberCode: ''
          }
        ]
      }
    },
    getPostageList() {
      // 陆运
      api.getPostageList({ tranType: 1 }).then((res) => {
        this.postMoneyList1 = res.data
      })
      // 空运
      api.getPostageList({ tranType: 2 }).then((res) => {
        this.postMoneyList2 = res.data
      })
      // 海运
      api.getPostageList({ tranType: 3 }).then((res) => {
        this.postMoneyList3 = res.data
      })
    },
    getAgreementList() {
      api.getAgreementList().then((res) => {
        this.agreementList = res.data
      })
    },
    // 四个标签
    labelAll() {
      // 前缀标签
      api.labelAll({ labelType: 1 }).then((res) => {
        this.qzList = res.data
      })
      // 酷炫标签
      api.labelAll({ labelType: 2 }).then((res) => {
        this.kxList = res.data
      })
      // 保障标签
      api.labelAll({ labelType: 3 }).then((res) => {
        this.bzList = res.data
      })
      // 卖点标签
      api.labelAll({ labelType: 4 }).then((res) => {
        this.mdList = res.data
      })
    },
    //  供应方式
    supply_way() {
      api.supply_way().then((res) => {
        this.gyList = res.data
      })
    },
    //  查询预售状态
    presale_status() {
      api.presale_status().then((res) => {
        this.presaleList = res.data
      })
    },
    // 获取专区
    getArea() {
      specialArea().then((res) => {
        this.areaList = res.data
      })
    },
    // 商品分类赋值
    flChange(value) {
      console.log(
        '%c [ form.pkAreaClassifys ]-770',
        'font-size:13px; background:#42289a; color:#866cde;',
        this.form.pkAreaClassifys
      )
      this.form.pkAreaClassify = value[value.length - 1]
    },
    selSpecial(e) {
      if (e == 43) {
        this.$set(this.form, 'areaIncomeType', 1)
        this.$set(this.form, 'areaIncome', 0.5)
      }
      this.get_hierarchy_list(e)
      if (
        e == 3 ||
        e == 26 ||
        e == 12 ||
        e == 22 ||
        e == 14 ||
        e == 43 ||
        e == 44
      ) {
        this.$set(this, 'topList', [
          {
            name: '基础设置',
            id: 0
          },
          {
            name: '产品明细',
            id: 1
          },
          {
            name: '规格明细',
            id: 2
          },
          {
            name: '团队配置',
            id: 3
          },
          {
            name: '级差配置',
            id: 4
          },
          {
            name: '等级配置',
            id: 5
          },
          {
            name: '奖衔配置',
            id: 6
          },
          {
            name: '商品权限',
            id: 7
          }
        ])
      } else {
        this.$set(this, 'topList', [
          {
            name: '基础设置',
            id: 0
          },
          {
            name: '产品明细',
            id: 1
          },
          {
            name: '规格明细',
            id: 2
          },
          {
            name: '团队配置',
            id: 3
          },

          {
            name: '等级配置',
            id: 5
          },
          {
            name: '奖衔配置',
            id: 6
          },
          {
            name: '商品权限',
            id: 7
          }
        ])
      }
    },
    // 查询分类父子级关系
    get_hierarchy_list(val) {
      api
        .get_hierarchy_list({
          specialArea: val || null
        })
        .then((res) => {
          this.hierarchyList = res.data
        })
    },
    // 运输方式
    getTransportType() {
      api.transportType().then((res) => {
        this.transportTypeList = res.data
      })
    },
    getXYList() {
      api.getEWaresPermissionTypeList().then((res) => {
        console.log(
          '%c [ res ]-451',
          'font-size:13px; background:#73d160; color:#b7ffa4;',
          res
        )
        this.xyList = res.data
      })
    },
    addTeamPz() {
      this.form.waresAuthorityList.push({
        kjlx: '',
        teamOrder: ''
      })
    },
    removeGg(index) {
      this.form.waresSpecsPackList.splice(index, 1)
    },
    removeTeamPz(index) {
      this.form.waresAuthorityList.splice(index, 1)
    },
    getRangList(data) {
      this.form.waresRangeList = data
    },
    // 切换tab
    handleLink(id) {
      if (id == 2) {
        if (this.cpList.length == 0) {
          this.$message({
            message: '请先添加产品',
            type: 'warning'
          })
        } else {
          if (this.isTrue) {
            this.$message({
              message: '产品明细存在相同销售类型,请核对',
              type: 'warning'
            })
          } else {
            this.tabActive = id
            this.$refs.box.scrollTop = 0
            this.$refs.ggmxed.getData(this.cpList, this.form.specialArea)
          }
        }
      } else if (id == 4) {
        this.tabActive = id
        this.$refs.box.scrollTop = 0
        this.$refs.jcpzed.getAllData(
          this.goodList,
          this.copyArr,
          this.form.specialArea
        )
      } else {
        this.tabActive = id
        this.$refs.box.scrollTop = 0
      }
      // this.tabActive = id
      // this.$refs.box.scrollTop = 0
    },
    getGoodList(goodList, copyArr) {
      this.goodList = goodList
      this.copyArr = copyArr
      const waresSpecsSkuList = []
      this.goodList.forEach((item) => {
        if (item.showList) {
          waresSpecsSkuList.push(...item.showList)
        }
      })
      this.form.waresSpecsSkuList = waresSpecsSkuList
    },
    // // 保证
    // bzChange(val) {
    //   this.form.pkGuaranteeLabel = this.form.pkGuaranteeLabels
    // },
    // // 卖点
    // mdChange(val) {
    //   console.log('%c [ val ]-828', 'font-size:13px; background:#f8a68c; color:#ffead0;', val)
    //   this.form.pkSellingPoint = val
    // },
    // 多选框
    changeYsfs() {},
    // 获取产品明细数组内容
    getTableList(data, isTrue) {
      console.log(
        '%c [ data ]-1313',
        'font-size:13px; background:#442827; color:#886c6b;',
        data
      )
      this.isTrue = isTrue
      this.form.waresDetailList = data
      this.cpList = data.map((item) => {
        return {
          pkProduct: item.pkProduct,
          isGift: item.isGift,
          quantity: item.quantity
        }
      })
    },
    getImg1(data) {
      this.form.videoUrl = data
    },
    delImg1() {},
    getImg2(data) {
      this.form.cover = data
    },
    delImg2() {},
    getImg3(data) {
      this.form.cover1 = data
    },
    delImg3() {},
    getImg4(data) {
      this.form.cover2 = data
    },
    delImg4() {},
    getImg5(data) {
      this.form.cover3 = data
    },
    delImg5() {},
    getImg6(data) {
      this.form.cover4 = data
    },
    delImg6() {},
    getImg7(data) {
      this.form.cover5 = data
    },
    delImg7() {},
    getImg8(data) {
      this.form.cover6 = data
    },
    delImg8() {}
  }
}
</script>
<style scoped lang="scss">
::v-deep .el-select,
.el-cascader {
  width: 100%;
}
::v-deep .el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}
.topbox {
  align-items: center;
  padding: 3px 0 3px 0;
  display: flex;
  //   background: skyblue;
  .levelList_i {
    margin-left: 20px;
    position: relative;
    cursor: pointer;
    padding: 4px 15px;
    // width: 88px;
    // height: 34px;
    border-radius: 17px;
    border: 1px solid #cccccc;
    font-size: 14px;
    font-family: MicrosoftYaHei;
    text-align: center;
    // line-height: 32px;
  }
  .act {
    color: #ffffff;
    background: #c8161d;
  }
  .act1 {
    border-bottom: 3px solid #1890ff !important;
  }
  .cha {
    font-size: 16px;
    color: #606266;
    position: absolute;
    top: 10px;
  }
  .li {
    width: 40px;
    margin: 0 auto;
    border-bottom: 3px solid transparent;
  }
}
.page {
  height: calc(100vh - 50px);
  overflow: hidden;
  background: #f9f9f9;
  padding-top: 20px;
}
.main {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 124px);
  overflow: hidden;
}
.contain {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0px 2px 20px 0px rgba(238, 238, 238, 0.5);
  margin: 0px 20px 0 20px;
  height: 100%;
  overflow-y: auto;
  padding: 0 10px;
  overflow-x: hidden;
}
.footer {
  height: 68px;
  background: #ffffff;
  box-shadow: 0px -3px 20px 0px rgba(204, 204, 204, 0.5);
  margin: 0 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  .thebtn1 {
    background: #3181e5;
    color: #ffffff;
    padding: 9px 45px;
  }
  .thebtn2 {
    background: #cccccc;
    color: #ffffff;
    padding: 9px 45px;
  }
}
.addIcon {
  font-size: 22px;
  line-height: 40px;
}
.teamPz {
  margin: 0 -20px;
  overflow-x: hidden;

  .xian {
    height: 1px;
    background: rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
  }
  .tit {
    font-size: 14px;
    font-weight: bold;
    color: #333333;
    padding: 0 20px;
    border-left: 5px solid #c8161d;
    margin: 15px 0;
    margin-right: -20px;
  }
}
.baoyou {
  ::v-deep .el-checkbox {
    display: flex;
    align-items: center;
    margin-right: 0px;
    margin-bottom: 10px;
  }
  ::v-deep .el-checkbox__label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
  }
  ::v-deep .el-input {
    width: auto;
  }
  ::v-deep .el-select {
    width: auto;
  }
}
.djpz {
  display: flex;
  align-items: center;
}

.djpz_i {
  margin-left: 10px;
  font-size: 10px;

  font-weight: 400;
  color: #999999;
}
.djpz_a {
  display: flex;
  align-items: center;
  .djpz_g {
    display: inline-block;
    margin-left: 20px;
  }
}
::v-deep .el-form-item {
  margin-bottom: 15px;
}
</style>
