web-base-admin/src/views/goodsManage/goodsList/goodsEdit/jcsz.vue

<!--
 * @Descripttion:
 * @version:
 * @Author: kBank
 * @Date: 2022-10-26 17:12:12
-->
<template>
  <div class="page">
    <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"
            :model="form"
            :rules="rules"
            style="width:1200px"
            label-width="100px"
          >
            <el-row :gutter="40">
              <el-col :span="16">
                <el-form-item
                  :label="'商品名称'"
                  prop="waresName"
                >
                  <el-input
                    v-model="form.waresName"
                    clearable
                    :disabled="methods==0"
                    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
                    :disabled="methods==0"
                    :placeholder="'请输入'"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  :label="'虚拟销量'"
                  prop="sales"
                >
                  <el-input
                    v-model="form.sales"
                    clearable
                    :disabled="methods==0"
                    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
                    :disabled="methods==0"
                    :placeholder="'请输入'"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  :label="'商品业绩'+`(${isLocals()})`"
                  prop="waresAchieve"
                >
                  <el-input
                    v-model="form.waresAchieve"
                    clearable
                    :disabled="methods==0"
                    :placeholder="'请输入'"
                  />
                </el-form-item>
              </el-col>
              <!-- <el-col :span="8">
                <el-form-item :label="'排列序号'"
                              prop="sort">
                  <el-input clearable
                            :disabled="methods==0"
                            oninput="value = value.replace(/[^\d]/g,'')"
                            v-model="form.sort"
                            :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
                    :disabled="methods==0"
                    @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 :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"
                    :disabled="methods==0"
                    :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
                    :disabled="methods==0"
                  >
                    <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
                    :disabled="methods==0"
                  >
                    <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
                    :disabled="methods==0"
                  >
                    <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
                    :disabled="methods==0"
                  >
                    <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
                    :disabled="methods==0"
                  >
                    <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
                    :disabled="methods==0"
                  >
                    <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
                    :disabled="methods==0"
                  >
                    <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
                    :disabled="methods==0"
                  >
                    <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 v-show="form.specialArea == 3" :span="8">
                <el-form-item label="发起人收益">
                  <el-input
                    v-model="form.makerIncome"
                    clearable
                    :placeholder="'请输入'"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item :label="'保证标签'">
                  <el-checkbox-group
                    v-model="form.pkGuaranteeLabel"
                    :disabled="methods==0"
                  >
                    <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
                    :disabled="methods==0"
                    multiple
                  >
                    <el-option
                      v-for="item in mdList"
                      :key="item.pkId"
                      :label="item.label"
                      :value="item.pkId"
                      @change="mdChange"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item :label="'补充协议'">
                  <el-select
                    v-model="form.pkAgreement"
                    clearable
                    :disabled="methods==0"
                  >
                    <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
                    :disabled="methods==0"
                  >
                    <el-option
                      v-for="item in postList"
                      :key="item.val"
                      :label="item.text"
                      :value="item.val"
                    />
                  </el-select>
                </el-form-item>
                <div
                  v-show="form.isFreeMail == 1"
                  class="baoyou"
                >
                  <el-checkbox-group
                    v-model="form.checkList"
                    :disabled="methods==0"
                    @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
                        :disabled="methods==0"
                      >
                        <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
                        :disabled="methods==0"
                      >
                        <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
                        :disabled="methods==0"
                      >
                        <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"
                    :disabled="methods==0"
                    type="datetime"
                    :placeholder="'请选择'"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item :label="'下架日期'">
                  <el-date-picker
                    v-model="form.putOffTime"
                    :disabled="methods==0"
                    type="datetime"
                    :placeholder="'请选择'"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item :label="'预计发货时间'">
                  <el-date-picker
                    v-model="form.arrivalTime"
                    :disabled="methods==0"
                    type="datetime"
                    :placeholder="'请选择'"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item :label="'标签提示'">
                  <el-input
                    v-model="form.warnMessage"
                    clearable
                    :disabled="methods==0"
                    :placeholder="'请输入'"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item
                  label="商品视频"
                  prop="videoUrl"
                >
                  <!-- <el-input clearable  v-model="form.name"
                            :placeholder="'请输入'"></el-input> -->
                  <!-- <UpDataImg :maxLength="1"
                                 ref="upImg1"
                                 @getImg="getImg1"
                                 @delImg="delImg1"></UpDataImg> -->
                  <imageUpload
                    v-model="form.videoUrl"
                    :is-video="true"
                  />
                </el-form-item>
              </el-col>
              <!-- <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="'图片'"
                  prop="cover1"
                >
                  <!-- <el-input clearable  v-model="form.name"
                            :placeholder="'请输入'"></el-input> -->
                  <!-- <UpDataImg :maxLength="1"
                                 ref="upImg3"
                                 @getImg="getImg3"
                                 @delImg="delImg3"></UpDataImg> -->
                  <imageUpload v-model="form.cover1" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  :label="'图片'"
                  prop="cover2"
                >
                  <!-- <el-input clearable  v-model="form.name"
                            :placeholder="'请输入'"></el-input> -->
                  <!-- <UpDataImg :maxLength="1"
                                 ref="upImg4"
                                 @getImg="getImg4"
                                 @delImg="delImg4"></UpDataImg> -->
                  <imageUpload v-model="form.cover2" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  :label="'图片'"
                  prop="cover3"
                >
                  <!-- <el-input clearable  v-model="form.name"
                            :placeholder="'请输入'"></el-input> -->
                  <!-- <UpDataImg :maxLength="1"
                                 ref="upImg5"
                                 @getImg="getImg5"
                                 @delImg="delImg5"></UpDataImg> -->
                  <imageUpload v-model="form.cover3" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item
                  :label="'图片'"
                  prop="cover4"
                >
                  <!-- <el-input clearable  v-model="form.name"
                            :placeholder="'请输入'"></el-input> -->
                  <!-- <UpDataImg :maxLength="1"
                                 ref="upImg6"
                                 @getImg="getImg6"
                                 @delImg="delImg6"></UpDataImg> -->
                  <imageUpload v-model="form.cover4" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item :label="'图片'">
                  <!-- <el-input clearable  v-model="form.name"
                            :placeholder="'请输入'"></el-input> -->
                  <!-- <UpDataImg :maxLength="1"
                                 ref="upImg7"
                                 @getImg="getImg7"
                                 @delImg="delImg7"></UpDataImg> -->
                  <imageUpload v-model="form.cover5" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item :label="'图片'">
                  <!-- <el-input clearable  v-model="form.name"
                            :placeholder="'请输入'"></el-input> -->
                  <!-- <UpDataImg :maxLength="1"
                                 ref="upImg8"
                                 @getImg="getImg8"
                                 @delImg="delImg8"></UpDataImg> -->
                  <imageUpload v-model="form.cover6" />
                </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"
                    :read-only="methods==0"
                    :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-if="index == form.waresSpecsPackList.length-1">
                          <i class="el-icon-circle-plus-outline addIcon"
                             @click="addGg"></i>
                        </el-col>
                        <el-col :span="2"
                                v-if="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"
                    :read-only="methods==0"
                    :min-height="196"
                    :upload-url="uploadImgUrl"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <!-- 产品明细 -->
        <!-- <div v-show="tabActive==1"> -->
        <Cpmx
          v-show="tabActive == 1"
          ref="cpmxed"
          :methods="methods"
          :table-data-ed.sync="waresDetailList"
          @getTableList="getTableList"
        />
        <!-- </div> -->
        <!-- 规格明细 -->
        <div v-show="tabActive == 2">
          <Ggmx
            ref="ggmxed"
            :methods="methods"
            :special-area="form.specialArea"
            :wares-specs-sku-list.sync="waresSpecsSkuList"
            @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="100px"
          >
            <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
                    :disabled="methods==0"
                    @change="getTeamList(item.authorityType)"
                  >
                    <el-option
                      v-for="cld in xyList"
                      v-if="!(index>0&&cld.value==5)"
                      :key="cld.value"
                      :label="cld.label"
                      :value="cld.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col
                v-if="form.waresAuthorityList[index].authorityType != 5"
                :span="10"
              >
                <el-form-item :label="'团队编号'">
                  <el-input
                    v-model="item.memberCode"
                    clearable
                    :disabled="methods==0"
                    :placeholder="'请输入'"
                  />
                </el-form-item>
              </el-col>
              <el-col
                v-if="form.waresAuthorityList[index].authorityType != 5&&index !== form.waresAuthorityList.length-1"
                :span="4"
              >
                <i
                  v-show="methods!=0"
                  class="el-icon-remove-outline addIcon"
                  @click="removeTeamPz(index)"
                />
              </el-col>
              <el-col
                v-if="form.waresAuthorityList[index].authorityType != 5&&index == form.waresAuthorityList.length-1"
                :span="4"
              >
                <i
                  v-show="methods!=0"
                  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"
            :methods="methods"
            :wares-range-list="waresRangeList"
            @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"
                :disabled="methods==0"
                @change="getLevel"
              >{{ '全部' }}</el-checkbox>
              <div class="djpz_g">
                <el-checkbox-group
                  v-model="form.waresGradeIds"
                  :disabled="methods==0"
                  @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>
          <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"
                :disabled="methods==0"
                @change="getGrade"
              >{{ '全部' }}</el-checkbox>
              <div class="djpz_g">
                <el-checkbox-group
                  v-model="form.waresAwardsIds"
                  :disabled="methods==0"
                  @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" :disabled="methods==0">
                  <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
        v-if="methods!=0"
        class="footer"
      >
        <el-button
          size="small"
          class="thebtn2"
        > {{ '取消' }}</el-button>
        <el-button
          size="small"
          class="thebtn1"
          @click="submit('form')"
        > {{ '确认' }}</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import Editor from '@/components/Editor'
import Cpmx from '@/views/goodsManage/goodsList/goodsEdit/cpmx.vue'
import Ggmx from '@/views/goodsManage/goodsList/goodsEdit/ggmx.vue'
import Jcpz from '@/views/goodsManage/goodsList/goodsEdit/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 } from '@/api/level'
export default {
  name: 'Jcsz',
  components: {
    ImageUpload,
    Editor,
    UpDataImg,
    Jcpz,
    Cpmx,
    Ggmx
  },
  data() {
    return {
      isMakerGift: 1,
      levelAll: false,
      gradeAll: false,
      // 产品明细
      cpList: [],
      uploadImgUrl: process.env.VUE_APP_BASE_API + '/system/upload',
      headers: {
        Authorization: getToken()
      },
      dialogImageUrl: '',
      dialogVisible: false,
      form: {
        waresGradeIds: [],
        waresAwardsIds: [],
        sales: '',
        sortStatus: 0,
        sort: '',
        sptw: '',
        ysList: [],
        bzList: [],
        pkGuaranteeLabel: [],
        specialArea: '',
        checkList: [],
        waresMemberAuthorizeList: [],
        waresAuthorityList: [
          {
            authorityType: 5,
            memberCode: ''
          }
        ],
        waresSpecsPackList: [{ key: '', value: '' }]
      },
      moren: '/goodsManage/goodsRelease/jcsz',
      tabActive: 0,
      waresDetailList: [],
      waresSpecsSkuList: [],
      waresRangeList: [],
      agreeList: [
        {
          text: '允许',
          val: 0
        },
        {
          text: '禁止',
          val: 1
        }
      ],
      // 套餐类型
      tcList: [
        {
          text: '套装',
          val: 0
        },
        {
          text: '单品',
          val: 1
        }
      ],
      postList: [
        {
          text: '包邮',
          val: 0
        },
        {
          text: '不包邮',
          val: 1
        }
      ],
      xsList: [
        {
          text: '允许出售',
          val: 0
        },
        {
          text: '禁止出售',
          val: 1
        }
      ],
      isTj: [
        {
          label: '推荐',
          value: 0
        },
        {
          label: '不推荐',
          value: 1
        }
      ],
      topList: [
        {
          name: '基础设置',
          id: 0
        },
        {
          name: '产品明细',
          id: 1
        },
        {
          name: '规格明细',
          id: 2
        },
        {
          name: '团队配置',
          id: 3
        },

        {
          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: [],
      rules: {
        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' }
        ]
      },
      pkId: '',
      methods: 1,
      levelList: [],
      yesNo: [],
      specialCurrency: [],
      waresTypeList: [],
      awardsList: [],
      authorityList: [],
      sortList: []
    }
  },
  created() {
    this.pkId = this.$route.query.id
    this.methods = this.$route.query.methods
    this.getOther()
    // 获取极差列表
    this.getRangeList()
    // 血缘关系
    this.getXYList()
    // 运输方式
    this.getTransportType()
    // 查询分类父子级关系
    this.get_hierarchy_list()
    // 获取专区
    this.getArea()
    //  供应方式
    this.supply_way()
    //  查询预售状态
    this.presale_status()
    // 四个标签
    this.labelAll()
    // 协议接口
    this.getAgreementList()
    // 邮费模板
    this.getPostageList()
    // 获取所有数据
    this.getEduitdata()

    this.$store.commit('settings/GGMX_SETTING', [])
  },
  // mounted() {
  //   this.$refs.box.scrollTop = 0
  // },
  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
      })
      getAwardsListChiose().then((res) => {
        this.awardsList = res.rows
      })
      api.ERegistrationAuthority().then((res) => {
        this.authorityList = res.data
      })
    },
    // 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.rangeList().then((res) => {
        this.levelList = res.data
      })
    },
    getWaresCode() {
      api.getWaresCode().then((res) => {
        this.form.waresCode = res.msg
      })
    },
    getEduitdata() {
      api
        .waresDetail({
          pkId: this.pkId
        })
        .then((res) => {
          this.form = res.data
          // this.form.waresAwardsIds = res.data.waresAwardsIds || []
          this.$set(this.form, 'waresAwardsIds', res.data.waresAwardsIds || [])
          this.$set(this.form, 'waresMemberAuthorizeList', res.data.waresMemberAuthorizeList || [])
          if (this.form.parentPkAreaClassify) {
            this.form.pkAreaClassifys = [
              this.form.parentPkAreaClassify,
              this.form.pkAreaClassify
            ]
          } else {
            this.form.pkAreaClassifys = [this.form.pkAreaClassify]
          }
          this.waresDetailList = this.form.waresDetailList
          this.waresSpecsSkuList = this.form.waresSpecsSkuList
          // this.form.waresAuthorityList.forEach((item) => {
          //   item.memberCode = item.pkMember
          // })
          this.waresRangeList = this.form.waresRangeList
          // this.$refs.upImg1.geCoverList(this.form.videoUrl)
          // this.$refs.upImg2.geCoverList(this.form.cover)
          // this.$refs.upImg3.geCoverList(this.form.cover1)
          // this.$refs.upImg4.geCoverList(this.form.cover2)
          // this.$refs.upImg5.geCoverList(this.form.cover3)
          // this.$refs.upImg6.geCoverList(this.form.cover4)
          // this.$refs.upImg7.geCoverList(this.form.cover5)
          // this.$refs.upImg8.geCoverList(this.form.cover6)
          // this.$refs.cpmx.getTableData(this.form.waresDetailList)

          if (this.levelList.length == this.form.waresGradeIds.length) {
            this.levelAll = true
            this.$forceUpdate()
          }
          const checkList = []
          if (this.form.isOceanTrans == 0) {
            checkList.push(3)
          } else if (this.form.isLandTrans == 0) {
            checkList.push(1)
          } else if (this.form.isAirTrans == 0) {
            checkList.push(2)
          }
          this.$set(this.form, 'checkList', checkList)
          const that = this
          if (this.methods == 2) {
            this.getWaresCode()
            // 排序
            // this.getWaresSort()
          }
          if (
            this.form.specialArea == 3 ||
            this.form.specialArea == 26 ||
            this.form.specialArea == 12 ||
            this.form.specialArea == 22 ||
            this.form.specialArea == 14
          ) {
            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
              }
            ]
          }
          setTimeout(() => {
            that.$refs.box.scrollTop = 0
          }, 50)
        })
    },
    addGg() {
      this.form.waresSpecsPackList.push({ key: '', value: '' })
    },
    submit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          let urlRequir = ''
          let mssg = ''
          if (this.methods == 1) {
            urlRequir = api.waresUpdate
            mssg = '修改成功'
          } else {
            urlRequir = api.waresSave
            mssg = '复制成功'
            this.form.waresSpecsSkuList.forEach((item) => {
              item.pkWaresSpecsSku = null
            })
          }
          const loading = this.$loading({
            lock: true,
            text: '努力提交中',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })

          this.$store.commit('settings/GGMX_SETTING', [])
          this.form.cover = this.form.cover1
          urlRequir(this.form).then((res) => {
            loading.close()
            if (res.code == 200) {
              this.$message({
                message: mssg,
                type: 'success'
              })
              this.$router.replace({
                path: '/goodsManage/goodsList/goodsList'
              })
            }
          })
        } else {
          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 [ value ]-827',
        'font-size:13px; background:#7eb846; color:#c2fc8a;',
        value
      )
      this.form.pkAreaClassify = value[value.length - 1]
    },
    selSpecial(e) {
      this.get_hierarchy_list(e)
      if (e == 3 || e == 26 || e == 12 || e == 22 || e == 14) {
        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) => {
        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 {
          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.waresRangeList,
          this.pkId
        )
      } else {
        this.tabActive = id
        this.$refs.box.scrollTop = 0
      }
      // this.tabActive = id
      // this.$refs.box.scrollTop = 0
    },
    getGoodList(goodList, copyArr) {
      if (goodList[0].showList) {
        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) {
      this.form.pkSellingPoint = val
    },
    // 多选框
    changeYsfs() {},
    // 获取产品明细数组内容
    getTableList(data) {
      this.form.waresDetailList = data
      this.cpList = data.map((item) => {
        return {
          pkProduct: item.pkProduct,
          isGift: item.isGift,
          quantity: item.quantity
        }
      })
      this.$refs.ggmxed.getData(this.cpList, this.form.specialArea)
    },
    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: 0px 0 0px 0;
  display: flex; //   background: skyblue;
  .levelList_i {
    margin-left: 20px;
    position: relative;
    cursor: pointer;
    padding: 3px 10px;
    // width: 88px;
    // height: 34px;
    border-radius: 17px;
    border: 1px solid #cccccc;
    font-size: 14px;
    font-family: MicrosoftYaHei;
    text-align: center;
    // line-height: 34px;
  }
  .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: 0px 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 #4391fd;
    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;
}
// ::v-deep .el-input__suffix{
//   top: -3px;
// }
// ::v-deep .el-select .el-input__suffix {
//   top: 5px;
// }
</style>