<template>
  <div style="width:1010px;">
    <div class="mune">
      <div class="title">商品详情</div>
      <div class="class_title">
        当前类目：<span v-for="(item,index) in breadCurmbList" :key="index">{{item}}<i class="el-icon-arrow-right" v-if="index != breadCurmbList.length-1"></i></span>
        <template  v-if="spuId == ''">
          <span class="class_btn">
            <el-button type="primary" plain @click="handleChangeTpl">切换类目</el-button>
          </span>
          <span class="class_tip">注意：切换类目后，当前页面所填写内容将会丢失</span>
        </template>
      </div>
    </div>
    <div class="hr"></div>
    <div>
      <div id="scrollBox">
        <el-tabs v-model="activeName" @tab-click="jump" class="tabbox">
          <el-tab-pane label="基础信息" name="base"></el-tab-pane>
          <el-tab-pane label="类目属性" name="category"></el-tab-pane>
          <el-tab-pane label="销售信息" name="sale"></el-tab-pane>
          <el-tab-pane label="图文描述" name="picture"></el-tab-pane>
          <el-tab-pane label="服务描述" name="service"></el-tab-pane>
        </el-tabs>
        <div class="hr"></div>
        <div class="infobox">
          <div class="title2 do-jump" id="base">基础信息</div>
          <div class="form_box">

            <el-form :label-position="labelPosition" label-width="100px" :model="baseJson" :rules="rules" ref="labelForm">



              <el-form-item
                label="品牌"
                prop="brandId">
                <!-- <el-select v-model="baseJson.brandId" filterable laceholder="请选择" @change="setBrand">
                  <el-option
                    v-for="item in brandData"
                    :key="item.brandId"
                    :label="item.brandName"
                    :value="item.brandId">
                  </el-option>

                </el-select> -->
                 <el-input disabled class="input" v-model="brandName"  placeholder="品牌"></el-input>
              </el-form-item>
              <el-form-item label="供应商" prop="supplierId">

                 <el-input disabled class="input" v-model="supplierData"  placeholder="供货商"></el-input>
              </el-form-item>
              <el-form-item label="系列型号" prop="model">
                <el-input  class="input" v-model="baseJson.model"  placeholder="请输入系列型号(spu)" maxlength="12"></el-input>
                <div class="form_tip">不超过12个汉字</div>
              </el-form-item>

              <!-- <el-form-item label="商品卖点" prop="description.sellingPoint">
                <el-input
                  class="input"
                  type="textarea"
                  placeholder="请输入内容"
                  v-model="baseJson.description.sellingPoint"
                  maxlength="50"
                  show-word-limit
                  rows="4">
                </el-input>
              </el-form-item> -->
              <!-- <el-form-item label="商品尺寸" prop="description.size">
                <el-input class="input" v-model="baseJson.description.size"  placeholder="请输入商品尺寸" maxlength="20"></el-input> mm
                <div class="form_tip">例如220*180*20，如商品有多个尺寸，请在图片详情中补充说明</div>
              </el-form-item>
              <el-form-item label="包装重量" prop="description.weight">
                <el-input class="input" v-model="baseJson.description.weight"  placeholder="请输入包装重量" maxlength="20"></el-input> kg
                <div class="form_tip">用于估算物流费用</div>
              </el-form-item>
              <el-form-item label="包装体积" prop="description.volume">
                <el-input class="input" v-model="baseJson.description.volume" placeholder="请输入包装体积" maxlength="20"></el-input> m³
                <div class="form_tip">用于估算物流费用</div>
              </el-form-item> -->

            </el-form>
          </div>
        </div>
        <div class="hr"></div>
        <div class="infobox">
          <!-- <div class="title2 do-jump" id="category">类目属性</div> -->
           <div class="title2 do-jump title3" id="category">
             <span>类目属性</span>
             <!-- <span class="feedback"><el-button type="primary"><router-link to="/help/feedbackadd" style="color:#fff;">我要反馈</router-link></el-button> </span> -->
           </div>

          <el-form :label-position="labelPosition" label-width="110px" v-cloak :model="labelJson" ref="formCategory">
            <div v-for="item in labelsData" :key="item.id">
              <template v-if="item.style == 0">
                <el-form-item :label="item.name" :prop="item.id" :rules="{ required: item.required, message: item.name + '不能为空'}">
                  <el-radio-group v-model="labelJson[item.id]">
                    <el-radio style="line-height:32px;" v-for="i in item.labelParams" :label="i.id" :key="i.id">{{i.name}}</el-radio>
                  </el-radio-group>
                </el-form-item>
              </template>

              <template v-if="item.style == 1">
                <el-form-item :label="item.name" :prop="item.id" :rules="{ required: item.required, message: item.name + '不能为空'}">
                  <template slot="label">{{item.name}}<div style="font-size:12px;margin-top:-8px;">(最多可选<span style="font-weight:bold;">
                    {{~~item.selectedNum?(~~item.selectedNum-item.labelParams.length)>0?
                    item.labelParams.length:~~item.selectedNum:item.labelParams.length}}</span>个)</div></template>
                  <el-checkbox-group v-model="labelJson[item.id]" :max="~~item.selectedNum?~~item.selectedNum:item.labelParams.length">
                    <el-checkbox  v-for="i in item.labelParams" :label="i.id" :key="i.id">{{i.name}}</el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </template>

              <template v-if="item.style == 2">
                <el-form-item :label="item.name" :prop="item.id" :rules="{ required: item.required, message: item.name + '不能为空'}">
                  <el-input class="input" maxlength="30" placeholder="请输入" v-model="labelJson[item.id]"></el-input>
                </el-form-item>
              </template>
            </div>
            <div style="line-height:20px" class="p_l_30 p_t_20">
              <div class="form_tip"><span class="red" @click="dealLabel">温馨提醒：属性名称有红星(*)为必填，无则选填，错误填写类目属性，会影响商品审核</span>，并且导致商品无法被准确搜索与推荐，影响您的正常销售，请认真准确填写！</div>
              <div class="form_tip">属性选择内容越多，搜索权重越低，全部选中并不会带来更多流量，强烈建议选择最准确内容即可。</div>
            </div>
          </el-form>

        </div>
        <div class="hr"></div>
        <div class="infobox">
          <div class="title2 do-jump" id="sale">销售信息</div>

          <template v-if="!singleSku">
            <!-- 有销售信息（模板有关联规格） -->
            <div class="common-attr">
              <span class="left"></span>
              <div class="right" style="margin-top:-20px;" v-loading="loading_list">
                <!-- <p class="tip">错误填写商品属性，可能会引起商品下架或搜索流量减少，影响您的正常销售，请认真准确填写！</p> -->
                <div class="bg">
                  <div class="item-box" v-for="item in specsData" :key="item.id">

                    <div class="p_b_10">
                      <span class="p_r_10">{{item.name}}</span>
                      <!-- 自定义输入框 -->
                      <el-input
                        maxlength="30"
                        style="width:180px;"
                        v-model="inputNewTag[item.id]"
                        size="small"
                        placeholder="请输入自定义值"
                        @keyup.enter.native="handleNewTag(item,inputNewTag[item.id])"
                      ></el-input>
                      <el-button
                        size="small"
                        @click="handleNewTag(item,inputNewTag[item.id])"
                      >+添加</el-button>
                    </div>

                    <div class="sku_bg p_t_10 p_b_10">
                      <!-- sku -->
                      <el-checkbox-group
                        v-model="specJson[item.id]"
                        @change="checkboxSpecsChange(item)">
                        <span
                          class="checkbox-tpl"
                          v-for="subItem in item.specParams"
                          :key="subItem.id">
                          <el-checkbox
                            :label="subItem.id">
                            <!-- subItem.edit -->
                            <span v-if="!subItem.edit">{{subItem.name}}</span>
                            <el-input
                              v-else
                              class="input-tag"
                              v-model="subItem.name"
                              size="small"
                              maxlength="30"
                              :ref="'tag_' + subItem.id"
                              @keyup.enter.native="$event.target.blur"
                              @blur="handleNewTagEditConfirm(item,subItem)"
                              ></el-input>
                          </el-checkbox>
                          <!-- 编辑 -->
                          <template v-if="subItem.type == 1">
                            <!-- <i class="el-icon-edit params-btn" @click="handleInputNewValueEdit(subItem)"></i> -->
                            <!-- <i class="el-icon-delete params-btn" @click="handleInputNewTagDelete(subItem)"></i> -->
                          </template>
                        </span>
                        <!-- 自定义输入框 -->
                        <!-- <el-input
                          class="input-new-tag"
                          v-if="inputNewValueVisible[item.id]"
                          v-model="inputNewValue[item.id]"
                          :ref="'input_new_' + item.id"
                          size="small"
                          @keyup.enter.native="$event.target.blur"
                          @blur="handleInputNewValueConfirm(item)"
                        ></el-input>
                        <el-button
                          v-else
                          class="button-new-tag"
                          size="small"
                          @click="handleNewValue(item.id)"
                        >+自定义</el-button> -->
                      </el-checkbox-group>

                    </div>

                  </div>
                </div>
              </div>
            </div>
            <div class="m_t_20 m_b_20">
              商品SKU设置
              <span class="f_14 f_c_disable form_tip">SKU图必须为高清无底图，图片像素为800*800PX， 大小不可超过512k，格式为png</span>
            </div>
            <div class="sku_list" v-loading="loading_list">
              <!-- <div class="button" v-if="skuList.filter(v => v.isShow !== false).length > 0">
                <el-button @click="handleSetPrice">批量设置建议价格</el-button>
              </div> -->
              <!-- <div class="button" v-if="skuList.filter(v => v.isShow !== false).length > 0">
                <el-button @click="handleSetName">批量填写商品名称</el-button>
              </div> -->
<!-- v.isShow !== false && v.isMove!==1 -->
              <el-table
                :data="skuList.filter(v => (v.isShow !== false))"
                class="sku_list_table"
                max-height="600"
                border
                :span-method="objectSpanMethod">
                <!-- <el-table-column type="index" width="80"></el-table-column> -->

                <el-table-column
                  v-for="(item,key,index) in sku"
                  :key="index"
                  prop="sku"
                  :label="key">
                  <template slot-scope="scope">
                    <p>{{scope.row["specs"][index]["specParam"]["name"]}}</p>
                  </template>
                </el-table-column>

                <el-table-column label="sku型号" min-width="220">
                  <!-- <template slot="header">
                    <span class="f_c_must">*</span>
                    <el-input placeholder="sku型号" style="width:80%;"></el-input>
                  </template> -->
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.model"
                      placeholder="sku"
                    >
                      <div slot="prepend" style="margin: 0 -15px">{{baseJson.model}}-</div>
                    </el-input>
                  </template>
                </el-table-column>



                <el-table-column prop="mainImg" label="sku图" width="80">
                  <template slot-scope="scope">
                    <el-upload
                      class="avatar-uploader"
                      :action="uploadData.host|| '' "
                      :data="uploadData"
                      :show-file-list="false"
                      accept="image/png"
                      :on-success="handleSuccess"
                      :on-error="onError"
                      :before-upload="(file) => beforeUpload(file,'mainImg')"
                      name="file">
                      <div @click="getSkuImageIndex(scope.row.key)"
                      style="width:100%;height:100%;background: url('https://edspicserver.oss-cn-hangzhou.aliyuncs.com/ROOT/ETao/actImg/wh750.png') 0 0 repeat;">
                        <img
                          v-if="scope.row.mainImg"
                          :src="scope.row.mainImg + '?x-oss-process=image/format,png/resize,h_80,w_80'"
                          class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                      </div>
                    </el-upload>
                  </template>
                </el-table-column>


                  <el-table-column prop="specLength" label="长宽高(mm)" width="120">
                  <template slot-scope="scope">
                    <div><el-input v-model.trim="scope.row.specLength" placeholder="长度"
                    ></el-input></div>
                    <div style="margin:4px 0;"><el-input v-model.trim="scope.row.specWidth" placeholder="宽度"
                    ></el-input></div>
                    <div><el-input v-model.trim="scope.row.specHeight" placeholder="高度"
                    ></el-input></div>

                  </template>
                </el-table-column>
                 <!-- 20200523新增两个价格 -->

                <el-table-column prop="supplyPrice" label="供货价" width="120">
                  <template slot-scope="scope">
                    <el-popover
                     v-if="hasFormula==1"
                      placement="top"
                      width="160"
                      trigger="click"
                      :ref="`popover-${scope.$index}`">
                      <div>
                        <el-input style="padding-right:0;"
                        v-model.trim="inputSupplyPrice" placeholder="供货价"
                        >
                          <i slot="prefix" class="iconfont iconrenminbi1 f_12 l_h_32 p_l_5"></i>
                          <el-button slot="append"
                          style="color:#fff;background-color:#f60;border-color:#f60;height:30px;"
                          type="primary" size="mini"
                          @click="onFormula(scope.row,scope.$index)">计算</el-button>
                        </el-input>
                      </div>
                      <div slot="reference" style="font-size:14px;cursor: pointer;"
                      @click="closePopover">
                        <span>{{scope.row.supplyPrice}}</span>
                        <i style="font-size:18px;color:#f60;" class="el-icon-edit params-btn"></i>
                      </div>
                    </el-popover>
                    <el-input v-else v-model.trim="scope.row.supplyPrice" placeholder="供货价">
                      <i slot="prefix" class="iconfont iconrenminbi1 f_12 l_h_32 p_l_5"></i>
                    </el-input>
                  </template>
                </el-table-column>

                 <el-table-column prop="purchasePrice" label="采购价" width="120" v-if="!priceformulaId">
                   <!-- <template slot="header" slot-scope="scope">
                     <el-tooltip placement="top" effect="light" v-if="pifaTip">
                        <div slot="content">
                            <div>{{pifaTip}}</div>
                        </div>
                        <div>采购价<span class="el-icon-question"></span></div>
                      </el-tooltip>
                      <div v-else>采购价</div>
                  </template> -->
                  <template slot-scope="scope">
                    <el-input :disabled="hasFormula?true:false" v-model.trim="scope.row.purchasePrice" placeholder="采购价"
                    >
                      <i slot="prefix" class="iconfont iconrenminbi1 f_12 l_h_32 p_l_5"></i>
                    </el-input>
                  </template>

                </el-table-column>

                <el-table-column prop="salePrice" label="优惠价" width="120" v-if="!priceformulaId">
                  <!-- <template slot="header" slot-scope="scope">
                     <el-tooltip placement="top" effect="light" v-if="youhuiTip">
                        <div slot="content">
                            <div>{{youhuiTip}}</div>
                        </div>
                        <div>优惠价<span class="el-icon-question"></span></div>
                      </el-tooltip>
                      <div v-else>优惠价</div>
                  </template> -->
                  <template slot-scope="scope">
                    <el-input
                     :disabled="hasFormula?true:false"
                      v-model.trim="scope.row.salePrice"
                      placeholder="优惠价"
                     >
                        <i slot="prefix" class="iconfont iconrenminbi1 f_12 l_h_32 p_l_5"></i>
                      </el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="productPrice" label="零售价" width="120" v-if="!priceformulaId">
                  <!-- <template slot="header" slot-scope="scope">
                     <el-tooltip placement="top" effect="light" v-if="lingshouTip">
                        <div slot="content">
                            <div>{{lingshouTip}}</div>
                        </div>
                        <div>零售价<span class="el-icon-question"></span></div>
                      </el-tooltip>
                      <div v-else>零售价</div>
                  </template> -->
                  <template slot-scope="scope">
                    <el-input :disabled="hasFormula?true:false" v-model.trim="scope.row.productPrice" placeholder="零售价">
                      <i slot="prefix" class="iconfont iconrenminbi1 f_12 l_h_32 p_l_5"></i>
                    </el-input>
                  </template>
                </el-table-column>
                <!-- 0523 -->

                <el-table-column prop="stock" label="库存" width="100">
                  <template slot-scope="scope">
                    <el-input v-if="scope.row.skuId" disabled value="*" placeholder="库存"></el-input>
                    <el-input v-else v-model.trim="scope.row.stock" placeholder="库存"
                    oninput="value=value.replace(/[^\d]/g, '')"></el-input>

                  </template>
                </el-table-column>
                <el-table-column prop="moq" label="起订量" width="100">
                  <template slot-scope="scope">
                    <el-input v-model.trim="scope.row.moq" placeholder="起订量"
                    oninput="value=value.replace(/[^\d]/g, '')"></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="光源数量" width="100">
                  <template slot-scope="scope">
                    <el-input v-model.trim="scope.row.lightSourceCount" placeholder="光源"
                    oninput="value=value.replace(/[^\d]/g, '')"></el-input>
                  </template>
                </el-table-column>

               <el-table-column prop="saleable" label="SKU是否销售" width="80">
                    <template slot-scope="scope">
                      <el-switch :active-value="1" :inactive-value="0" v-model="scope.row.saleable"></el-switch>
                    </template>
                 </el-table-column>
              </el-table>
            </div>

          </template>

          <template v-else>
            <!-- 无销售信息（模板无关联规格） -->

              <el-form :label-position="labelPosition" :model="skuList[0]" label-width="100px" :rules="rules">
               <!-- <el-form-item prop="purchasePrice" label="采购价">
                <el-input
                  class="input"
                  v-model="skuList[0].purchasePrice"
                  placeholder="请输入采购价"
                  >
                    <i slot="prefix" class="iconfont iconrenminbi1 f_12 l_h_32 p_l_5"></i>
                  </el-input>
              </el-form-item>

              <el-form-item prop="salePrice" label="销售价">
                <el-input
                  class="input"
                  v-model="skuList[0].salePrice"
                  placeholder="销售价"

                  >
                    <i slot="prefix" class="iconfont iconrenminbi1 f_12 l_h_32 p_l_5"></i>
                  </el-input>
              </el-form-item> -->

              <el-form-item prop="moq" label="起订量">
                <el-input class="input" v-model.number="skuList[0].moq" placeholder="请输入起订量"></el-input>
              </el-form-item>

              <el-form-item prop="stock" label="商品库存">
                <el-input class="input" v-model.number="skuList[0].stock" placeholder="请输入商品库存"></el-input>
              </el-form-item>

            </el-form>
          </template>
       <!--<div class="tipsdiv">注意：如果该产品入选优选专区，则以实际B端、C端的实际显示价格为准</div>-->
          <el-form :label-position="labelPosition" label-width="100px" style="margin-top: 10px">
           <el-form-item label="交货期" prop="deliveryTime">
              <el-radio v-model="baseJson.deliveryTime" :label="0">现货</el-radio>
              <el-radio v-model="baseJson.deliveryTime" :label="1" v-if="setDeliveryDate.isDeliveryDate">15天</el-radio>
              <el-radio v-model="baseJson.deliveryTime" :label="2" v-if="setDeliveryDate.isDeliveryDate">30天</el-radio>
              <el-radio v-model="baseJson.deliveryTime" :label="3" v-if="setDeliveryDate.isDeliveryDate">45天</el-radio>
            </el-form-item>

            <!-- <el-cascader
              :options="area"
              :props="{ checkStrictly: true ,children:'subAreas',label:'name',value:'code'}"
              clearable></el-cascader> -->

            <!-- <el-form-item label="销售区域" prop="salesArea">全国</el-form-item> -->
            <!-- <el-form-item label="发货地" prop="place">
              <el-cascader
              v-model="baseJson.place"
              :options="areaPlace"
              :props="{ checkStrictly: false ,children:'subAreas',label:'name',value:'code'}"
              clearable
              filterable
              @change="handleSelectArea"></el-cascader>
            </el-form-item> -->



          </el-form>
        </div>
        <div class="hr"></div>
        <div class="infobox">
          <div class="title2 do-jump" id="picture">商品主图</div>

          <el-form :label-position="labelPosition" label-width="100px">
            <el-form-item label="商品主图" required prop="imgsJson.supMainImgs">
              <div class="form_tip">
                商品主图像素要求800*800px，并且确保商品位于图中间600*800px的安全区域，以免在不同展示环境下裁切时显示不完整；
                大小不可超过512k，格式为jpg或png，最多可上传5张。
                <!-- <span class="green checktip m_l_20">查看重要注意事项</span> -->
              </div>
              <!-- 商品主图 -->
              <div class="supMainImgs">
               <ul class="el-upload-list el-upload-list--picture-card">
                        <li class="el-upload-list__item is-ready"
                        v-for="(item,index) in imgsJson.supMainImgs" :key="index"
                        >
                          <div>
                            <img
                              class="el-upload-list__item-thumbnail"
                              :src="item.url" alt="">
                          </div>
                          <!-- 操作按钮 -->
                          <span class="el-upload-list__item-actions">
                            <span
                              class="el-upload-list__item-preview"
                              @click="handleMoveSoft(item, 'supMainImgs', 'left')">
                              <i class="el-icon-arrow-left"></i>
                            </span>
                            <span
                              class="el-upload-list__item-delete"
                              @click="handlePictureCardPreview(item)">
                              <i class="el-icon-view"></i>
                            </span>
                            <span
                              class="el-upload-list__item-delete"
                              @click="handleRemove(item,'supMainImgs',index)">
                              <i class="el-icon-delete"></i>
                            </span>
                            <span
                              class="el-upload-list__item-preview"
                              @click="handleMoveSoft(item, 'supMainImgs', 'right')">
                              <i class="el-icon-arrow-right"></i>
                            </span>
                          </span>
                            <span class="titicon" v-if="index == 0"><img src="@/assets/img/mainicon.png" alt=""></span>
                        </li>
                        <li class="el-upload-list__item is-ready" style="border:none;">


                         <el-upload
                    ref="supMainImgs"
                    accept="image/jpeg,image/jpg,image/png"
                    :action="uploadData.host|| '' "
                    :data="uploadData"
                    list-type="picture-card"
                    :on-preview="handlePictureCardPreview"
                    :on-success="(response, file, fileList) => handleSuccess(response, file, fileList)"
                    :on-error="onError"
                    :on-remove="(file) => handleRemove(file,'supMainImgs')"
                    :file-list="imgsJson.supMainImgs"
                    :show-file-list="false"
                    :on-exceed="(files,fileList) => handleExceed(files,fileList,'supMainImgs')"
                    :before-upload="(file) => beforeUpload(file,'supMainImgs',)"
                    :before-remove="(file,fileList) => handleError(file,fileList,'supMainImgs')"
                    :limit="5"
                    >
                    <!-- uploadLim   改成一张上传： multiple-->
                    <!-- 加上这个就出现--多图上传只出现一张，不加就限制不了5张 :file-list="imgsJson.supMainImgs" -->
                    <!--  :show-file-list="false" 隐藏状态.
                    :file-list="imgsJson.supMainImgs" 必须加上这一行，才能在删除图片后，再次上传图片，有超出提示-->

                    <i class="el-icon-plus"></i>
                  </el-upload>
                          </li>
                      </ul>
            </div>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="imageUrl" alt="">
              </el-dialog>
            </el-form-item>
          </el-form>

          <el-form :label-position="labelPosition" label-width="100px">
            <el-form-item label="商品短视频" prop="imgsJson.video">
               <div class="form_tip">商品短视频必须为MP4格式，大小不可超过50M</div>
               <div class="videoshow0">

              <el-upload
              ref="video"
                accept="video/mp4,audio/mp4"
                class="avatar-uploader video_pro"
                :action="uploadData.host|| '' "
                :data="uploadData"
                :show-file-list="false"
                :on-success="handleSuccess"
                :on-error="onError"
                :before-remove="(file,fileList) => handleError(file,fileList,'video')"
                :on-remove="(file) => handleRemove(file,'video')"
                :before-upload="(file) => beforeUpload(file,'video')">

                <template v-if="imgsJson.video.length != 0">
                  <div v-for="(item,index) in imgsJson.video" :key="index">
                    <video v-if="item.url" :src="item.url" controls="controls">
                      您的浏览器不支持 video 标签。
                    </video>
                  </div>
                </template>


                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
              <div class="closebtn" v-if="imgsJson.video.length>0" @click="handleRemove('','video')">
                <i class="el-icon-circle-close"></i>
              </div>

               </div>
            </el-form-item>
          </el-form>

                <!-- 新增高清图 -->
             <!-- <el-form :label-position="labelPosition" label-width="100px">
            <el-form-item label="高清无底图" prop="imgsJson.higImg">
              <div class="form_tip">提供给设计师进行方案设计，必须为无底图，建议各款式均上传至少一张。图片像素要求为1600*1600px，格式为png，大小在1M以内。</div>

              <ul class="el-upload-list el-upload-list--picture-card">
                <li
                  class="el-upload-list__item is-ready"
                  v-for="(item,index) in imgsJson.higImg"
                  :key="index">
                  <div>
                    <img
                      class="el-upload-list__item-thumbnail"
                      :src="item.url" alt="">

                  </div>

                  <span class="el-upload-list__item-actions">
                    <span
                      class="el-upload-list__item-preview"
                      @click="handleMoveSoft(item, 'higImg', 'left')">
                      <i class="el-icon-arrow-left"></i>
                    </span>
                    <span
                      class="el-upload-list__item-delete"
                      @click="handlePictureCardPreview(item)">
                      <i class="el-icon-view"></i>
                    </span>
                    <span
                      class="el-upload-list__item-delete"
                      @click="handleRemove(item,'higImg',index)">
                      <i class="el-icon-delete"></i>
                    </span>
                    <span
                      class="el-upload-list__item-preview"
                      @click="handleMoveSoft(item, 'higImg', 'right')">
                      <i class="el-icon-arrow-right"></i>
                    </span>
                  </span>
                </li>
              </ul>
              <el-upload
                ref="higImg"
                style="display:inline-block;"
                accept="image/png"
                :action="uploadData.host|| '' "
                :data="uploadData"
                list-type="picture-card"
                :show-file-list="false"
                :on-preview="handlePictureCardPreview"
                :on-success="handleSuccess"
                :on-error="onError"
                :on-remove="(file) => handleRemove(file,'higImg')"
                :before-upload="(file) => beforeUpload(file,'higImg')"
                :before-remove="(file,fileList) => handleError(file,fileList,'higImg')"
                :file-list="imgsJson.higImg">
                <i class="el-icon-plus"></i>
              </el-upload>

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

          <!-- <el-form :label-position="labelPosition" label-width="100px">
            <el-form-item label="商品3D模型" prop="imgsJson.model3D">
              <div class="form_tip">提供给设计师进行方案设计，请将商品3d模型所关联文件打包生成.rar或.zip格式，大小不超过100M。</div>
              <el-upload
              ref="model3D"
                class="upload_3d"
                accept=".rar,.zip,.max,.3Dmax"
                :action="uploadData.host|| '' "
                :data="uploadData"
                :on-success="handleSuccess"
                :on-error="onError"
                :on-remove="(file) => handleRemove(file,'model3D')"
                :limit="1"
                :on-exceed="handleExceed"
                :before-upload="(file) => beforeUpload(file,'model3D')"
                :before-remove="(file,fileList) => handleError(file,fileList,'model3D')"
                :file-list="imgsJson.model3D">
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>

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

          <el-form :label-position="labelPosition" label-width="100px">
            <el-form-item label="详情描述" required prop="imgsJson.detailImgs">
                <div class="form_tip">
                  详情页的规格统一宽度为<span class="red">790px</span>，
                单张切片大小不超过<span class="red">2M</span>
                  ，支持JPG和PNG格式
                </div>

              <div class="details_img_box">
                <div class="left">

                  <!-- 详情描述 -->
                  <ul class="el-upload-list el-upload-list--picture-card">
                    <li
                      class="el-upload-list__item is-ready is-ready2"
                      v-for="(item,index) in imgsJson.detailImgs"
                      :key="index">
                      <div>
                        <img
                          class="el-upload-list__item-thumbnail"
                          :src="item.url" alt="">
                      </div>
                      <!-- 操作按钮 -->
                      <span class="el-upload-list__item-actions">
                        <span
                          class="el-upload-list__item-preview"
                          @click="handleMoveSoft(item, 'detailImgs', 'up')">
                          <i class="el-icon-caret-top"></i>
                        </span>
                        <span
                          class="el-upload-list__item-delete"
                          @click="handleMoveSoft(item, 'detailImgs', 'down')">
                          <i class="el-icon-caret-bottom"></i>
                        </span>
                        <span
                          class="el-upload-list__item-delete"
                          @click="handlePictureCardPreview(item,true)">
                          <i class="el-icon-view"></i>
                        </span>
                        <span
                          class="el-upload-list__item-delete"
                          @click="handleRemove(item,'detailImgs',index)">
                          <i class="el-icon-delete"></i>
                        </span>
                      </span>
                    </li>
                  </ul>

                  <el-upload
                    class="detail_imgs"
                    ref="detailImgs"
                    accept="image/jpeg,image/jpg,image/png"
                    :action="uploadData.host|| '' "
                    :data="uploadData"
                    :show-file-list="false"
                    list-type="picture-card"
                    :on-success="handleSuccess"
                    :on-error="onError"
                    :before-upload="(file) => beforeUpload(file,'detailImgs')"
                    :on-remove="(file) => handleRemove(file,'detailImgs')"
                    multiple

                    :before-remove="(file,fileList) => handleError(file,fileList,'detailImgs')"
                    :on-exceed="(files,fileList) => handleExceed(files,fileList,'detailImgs')"
                    >
                    <i class="el-icon-plus"></i>
                  </el-upload>
<!-- uploadLim_detailImgs -->
<!--       :limit="uploadLim_detailImgs" -->
                </div>

                <div class="right">
                  <div class="right_main">
                    <template v-for="(item,index) in imgsJson.detailImgs">
                      <div :key="index">
                        <img class="show_img" :src="item.url">
                        <img class="full" src="@/assets/img/full.png" alt="全屏预览" @click="dialogTableVisible = true">
                      </div>
                    </template>
                  </div>
                </div>

              </div>
            </el-form-item>
          </el-form>
          <el-form :label-position="labelPosition" label-width="100px" class="do-jump">
            <!-- <el-form-item label="上架商品" v-if="setDeliveryDate.isEtaoVip">
              <el-radio v-model="baseJson.etaoProductVip" :label="0">非铂金商品</el-radio>
              <el-radio v-model="baseJson.etaoProductVip" :label="1">铂金商品</el-radio>
            </el-form-item> -->
            <el-form-item label="上架策略">
              <el-radio v-model="baseJson.strategy" :label="0">审核通过后上架</el-radio>
              <!--<el-radio v-model="baseJson.strategy" :label="1">审核通过后放入仓库</el-radio>-->
            </el-form-item>
          </el-form>
        </div>
        <div class="hr"></div>
      </div>
    </div>
    <div class="btns">
      <el-button type="primary" @click="handleSave(1)">保存并上架</el-button>
      <!-- <el-button type="primary" @click="handleSave(0)" plain>保存到仓库中</el-button> -->
      <el-button type="primary" @click="handleCancel" plain>取消</el-button>
    </div>

    <el-dialog :visible.sync="dialogTableVisible" width="80%">
      <!-- 详情弹窗 放大-->
      <img class="full_imgs" v-for="(item,index) in imgsJson.detailImgs" :key="index" :src="item.url">
    </el-dialog>
      <!-- 其他图片弹窗 -->
    <el-dialog :visible.sync="dialogVisible">
      <div :class="{'imgBox':!this.isDetails?true:false}">
        <img width="100%" :src="dialogImageUrl" alt="">
      </div>
    </el-dialog>
    <!-- <el-dialog
      title="提示"
      :visible.sync="requestDialog"
      width="30%"
      center>
      <span>是否申请修改建议价格？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="requestDialog = false">取 消</el-button>
        <el-button type="primary" @click="handleRequest = false;$message.success('申请成功')">确 定</el-button>
      </span>
    </el-dialog> -->
  </div>
</template>

<script>
import { _assembleOss,_uuid, _getOssToken, _supplierId, _deepClone, _deal,_getStorage } from '@/utils/utils'
import Validate from '@/utils/verification'
import FileVerification from "@/utils/FileVerification"

export default {
  data() {
    var checkSize = (rule, value, callback) => {
      if (Validate.isSize(value)) {
        callback();
      } else {
        callback(new Error('商品尺寸有误'));
      }
    };
    var checkNum = (rule, value, callback) => {
      if (Validate.isNumber(value)) {
        callback();
      } else {
        callback(new Error('数值有误'));
      }
    };
    return {
      priceformulaId:null,
      beforeArr:[],//批量上传顺序
      isDetails:false,
      inputSupplyPrice:'',
         olddata:{},
      // uploadImgOSS:false,
      loading_list:false,//sku列表渲染loading
      setDeliveryDate:'',
      brandName:'',
      supplierData:'',
      singleSku:false,
      scroll: 0,
      breadCurmbList:[],
      area:[],
      areaPlace:[],
      activeName:"base",
      menuId:"",
      specsData:[],
      labelsData:[],
      spuId:"",

      labelPosition: 'right',

      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      imageUrl:'',
      brandData: [],
      baseJson:{
        etaoProductVip:0,
        brandId:"", //品牌ID
        supplierId:"", //供货商ID
        menuId:"", // 类目id
        model:"", //系列型号
        description:{
          size:"", // 尺寸
          weight: "", //重量
          volume: "", //体积
          // sellingPoint: "" //卖点
        },
        deliveryTime:0, // 交货期
        salesArea:"1", //销售区域
        place:[], //发货地
        pledge:1, // 服务承诺
        strategy:0, //上架策略
        isReview:"1"
      },
      labelJson:{},
      specJson:{},
      imgsJson:{
        supMainImgs: [],
        video: [],
        higImg: [],
        // model3D: [],
        detailImgs: []
      },
      uploadData: {keys:[],successNum:0,beforeNum:0}, // 临时存放上传文件
      skuImageKey:"",
      saveData:{}, // 提交的数据
      hasFormula:0,
      dialogTableVisible:false,

      inputNewValueVisible: {}, //新增参数
      skuListInit: {
          "specs": [],
          "mainImg": "",
          "model": "",
          "supplyPrice": "",
          "purchasePrice": "",
          productPrice:'',
          "purchasePriceDisable":true,
          "stock": "",
          "moq": "",
          "isShow":true,
           saleable:1,
           isMove:0,
           isNew:true
        }, // 初始化数据
      labelList:[],
      skuList: [], // 表格动态属性数据
      sku:[],
      editJson:{},
      // requestDialog:false
      // 自定义标签
      inputNewTag:{},
      rules:{
        supplierId:[{ required: true, message: '供应商不能为空'}],
        brandId:[{ required: true, message: '品牌不能为空'}],
        model:[{ required: true, message: '系列型号不能为空'}],
        description:{
          size:[{ validator: checkSize, trigger: 'blur' }],
          weight:[{ validator: checkNum, trigger: 'blur' }],
          volume:[{ validator: checkNum, trigger: 'blur' }],
          // sellingPoint:[{ required: true, message: '商品卖点不能为空'}]
        },
        supplyPrice:[{ required: true, message: '供货价不能为空'}],
        purchasePrice:[{ required: true, message: '采购价不能为空'}],
        salePrice:[{ required: true, message: '优惠价不能为空'}],
        productPrice:[{ required: true, message: '零售价不能为空'}],
        moq:[
          { required: true, message: '起订量不能为空'},
          { type: 'number', message: '起订量有误'}
        ],
        // stock:[
        //   { required: true, message: '商品库存不能为空'},
        //   { type: 'number', message: '商品库存有误'}
        // ]
      },
      loading:null,
      youhuiTip:'',
      lingshouTip:'',
      pifaTip:'',
    }

  },
    computed:{
    uploadLim_detailImgs(){
      // if(this.imgsJson.detailImgs){
      //   let imgarr = this.imgsJson.detailImgs.length
      //   console.log(5-imgarr?5-imgarr:-1);
      //  return 5-imgarr?5-imgarr:-1
      // }else{
        return 30
      // }
    }
  },
  mounted() {
    this.priceformulaId = _getStorage('priceformulaId')
    this.init()
    window.addEventListener('scroll', this.dataScroll,true);
  },
  methods: {
    loadingStart(tx){
      this.loading = this.$loading({
        lock: true,
        text: tx?tx:'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
    },
    loadingEnd(type){
      if(type){
        this.$message.error('网络异常,请重新上传试试！')
      }
      this.loading.close()
    },
    closePopover(index, item) {
      this.inputSupplyPrice =''
      //每次只显示一个Popover弹窗 使用doClose()
      // 遍历所有的refs，判断索引名中是否有 'popover-' ;如果有，都使用doClose关掉
      for (const key in this.$refs) {
          if (key.indexOf('popover-') !== -1) {
              this.$refs[key].doClose();
          }
      }
    },
    //输入供货价套用公式计算其他价格
      onFormula(row,index){
        this.$refs['popover-'+index].doClose();
        if(!this.inputSupplyPrice){
          this.$message.error("请输入供货价");
          return false
        }

         this.$axios.post('/products/calculation/skuPrice',{
           supplyPrice: this.inputSupplyPrice,
           menuId: this.menuId,
           brandId: this.editJson.brandId||this.baseJson.brandId,
        }).then(r => {
          let { code, data,msg,message} = r.data
          if(code == 200){
            row.supplyPrice = this.inputSupplyPrice
            row.purchasePrice = data.purchasePrice;
            row.salePrice = data.salePrice;
            row.productPrice = data.productPrice;
            // this.$message.success('自动计算成功');
          }else{
            this.$message.error(msg || message);
          }
          this.inputSupplyPrice =''
        }).catch(r => console.log(r))
      },
        //选品牌带出供货商
    setBrand(e){
      this.getSupplier(this.baseJson.brandId)
    },
    dataScroll: function (e) {
      // 标签定位
      this.scroll = e.target.scrollTop;
      this.loadSroll();
    },
    loadSroll: function () {
      var self = this;
      var sections = document.getElementsByClassName('do-jump');
      for (var i = sections.length - 1; i >= 0; i--) {
        if (self.scroll >= sections[i].offsetTop - 100) {
          if(i==0){
            this.activeName="base";
          }else if(i==1){
            this.activeName="category"
          }else if(i==2){
            this.activeName="sale"
          }else if(i==3){
            this.activeName="picture"
          }else if(i==4){
            this.activeName="service"
          }
          break;
        }
      }
    },
    jump(e){
      var index=e.index;
      var id=e.name;
      document.getElementById(id).scrollIntoView({block: "start",behavior: "smooth"});
    },
    breadCurmb(menuNames){
      this.breadCurmbList = menuNames.split(',')
    },
    getArea(){
      this.$axios.get('/products/areaDetail').then(r => {
        let { code, data } = r.data
        if(code == 200){
          // 销售区
          data.areas.unshift({
            code:1,
            name:'全国'
          });
          this.area = data.areas
          // 发货地
          this.areaPlace = _deal(_deepClone(data.areas), node => node.subAreas !== null,'subAreas')
          // console.log(this.baseJson.place)
          // this.$forceUpdate()
        }
      }).catch(r => console.log(r));

    },
    getFormulaTip(){
      let { brandId} = _getStorage('info');
      this.$axios.get('/products/infoByTemplateId',{
        params:{
            brandId:brandId,
           templateId:this.menuId
        }
      }).then(r => {
        let { code, data } = r.data
        if(code == 200){
          data.forEach(e => {
            if(e.priceType==1){
              this.pifaTip = e.tip;
            }else if(e.priceType==2){
              this.youhuiTip = e.tip;
            }else if(e.priceType==3){
              this.lingshouTip = e.tip;
            }
          });
        }
      }).catch(r => console.log(r))
    },
    // getBrands(supplierId){
    //   this.$axios.post('/products/supplierAndBrand',{
    //     supplierId,
    //     menuId:this.menuId
    //   }).then(r => {
    //     let { code, data } = r.data
    //     if(code == 200){
    //       this.brandData = data[0]?data[0].brands:[]
    //     }
    //   }).catch(r => console.log(r))
    // },
    // handleChangeSupplier(supplierId){
    //   this.getBrands(supplierId)
    //   this.baseJson.brandId = ""
    // },
       // 获取供货商
    getSupplier(brandId){
      this.$axios.post('/products/querySupplierByBrand',{
        menuId:this.menuId,
        brandId
      }).then(r => {
        let { code, data } = r.data
        if(code == 200){

          let arr = data[0].place?data[0].place.split(','):[]
          let arr0 = [];
          arr.map(r => {
              arr0.push(Number(r))
          })
          this.baseJson.place =arr0;

        }
      }).catch(r => console.log(r))
    },
    init(){
      // 判断是否编辑
      let { spuId } = this.$route.query
      if(spuId){
        this.spuId = spuId
        this.$axios.get('/products/getInfo',{params:{
          spuId
        }}).then(r => {
          let { code, data } = r.data
          if(code == 200){
            this.editJson = data
            // this.baseJson = { ...this.baseJson, ...data} //编辑源数据
            // console.log(this.baseJson)
            this.buildNew(data)
            //  this.getSupplier(data.brandId)
          }
        })
      }else{
        this.buildNew();
      }
    },
    //判断是否设置交货期
       getSetHuo() {
       let { brandId} = _getStorage('info');
       this.baseJson.brandId = brandId;
        this.$axios
          .get('/products/getBrandInfoById',{
            params:{
                brandId:brandId
            }
          })
          .then(res => {
            let { code, data} = res.data
            if (code == 200) {
              this.setDeliveryDate =data;
              this.baseJson.etaoProductVip = data.isEtaoVip;
              this.baseJson.isEtaoVip = data.isEtaoVip;
            }
          })
          .catch(r => console.log(r));
      },
     // // 获取品牌
     getBrandData () {
       let { brandId,brandName,merId,merCompany} = _getStorage('info');
       this.baseJson.brandId = brandId;
       this.baseJson.supplierId =merId;
       this.brandName = brandName;
       this.supplierData = merCompany;

       this.getSupplier(brandId)
        // return this.$axios
        //   .post('/products/brandList',{
        //     menuId:this.menuId,
        //     brandId:brandId
        //   })
        //   .then(res => {
        //     let { code, data} = res.data
        //     if (code == 200) {
        //       this.brandData = data?data:[];
        //       // this.getSupplier(this.baseJson.brandId)
        //     }
        //   })
        //   .catch(r => console.log(r));
      },
    buildNew(data) {
      this.menuId =
        data && data.menuId
          ? data.menuId
          : this.$route.query.menuId;
      this.baseJson.menuId = this.menuId
     this.getSetHuo();
      this.getArea() // 获取地区列表
      this.getFormulaTip() // 获取价格公式提示
      let { brandId} = _getStorage('info');
      // 类目属性&规格参数
      let getSpecs = () => {
        return this.$axios
          .post('/products/getTemplateRelated',{
            menuId:this.menuId,
            type:this.spuId?"1":"0",
            spuId:this.spuId,
            brandId:brandId
          })
          .then(res => {
            let { code, data } = res.data

            if (code == 200) {
              let { labels, specs, menuNames,formulaParams} = data

              this.breadCurmb(menuNames)
              this.hasFormula = formulaParams

              labels.map(r => {
                if(r.style == 1){
                  this.$set(this.labelJson,r.id,[])
                }else{
                  this.$set(this.labelJson,r.id,'')
                }
                if (r.style == 2) {
                  r.labelParams = []
                }
              })
              let filterLabel = (r) => {
                // 过滤已关闭标签
                return r.labelParams.length != 0
              }
              this.labelsData = labels
              if(specs.length == 0){
                // 无销售信息（模板无关联规格）；有销售信息（模板有关联规格）不操作
                this.singleSku = true
                this.skuList.push(_deepClone(this.skuListInit))
              }

              specs.forEach(r => {
                this.$set(this.specJson,r.id,[])
                this.$set(this.inputNewTag,r.id,'') // 自定义标签
                r.specParams.forEach(t => {
                  // 初始化自定义标签编辑
                  t['edit'] = false
                })
              })

              this.specsData = specs

            }
          })
          .catch(r => console.log(r));
      };


      this.$axios
        .all([getSpecs(),this.getBrandData()])
        .then(r => {
          // console.log(data)
          if (data && data.spuId) {
            this.editProduct(data);
          }
        })
        .catch(r => {
          // console.log(r);
        });
    },
    editProduct(data){
      if (data && data.specJson && data.specJson.length > 0) {
        data.specJson.forEach(item => {
          if (item.model && item.model.startsWith(data.model+'-')) {
            item.model = item.model.replace(data.model+'-',''); // 保存的时候会加回去
          }
        })
      }
      this.olddata = _deepClone(data);
      if (this.olddata && this.olddata.specJson && this.olddata.specJson.length > 0) {
        this.olddata.specJson.forEach(item => {
          item.isMove = 1
        })
      }
      this.loading_list =true
      // 编辑数据回填
      // 地址数据，使用时为数组，上传时为字符串
      let arr = data.place.split(',')
      data.place = []
      arr.map(r => {
        data.place.push(Number(r))
      })

      let label = ['supMainImgs','higImg','video','detailImgs'] //,'model3D'
      label.map(t => {
        let tt = data.imgsJson[t]
        if(tt){
          let arrys = tt.split(',')
          data.imgsJson[t] = []
          arrys.map(r => {
            if(r !=""){
              data.imgsJson[t].push({
                url:r,
                name:r
              })
            }
          })
        }else{
          data.imgsJson[t] = []
        }
      })

      // data.imgsJson.detailImgs = data.imgsJson.detailImgs.split(',')

      this.baseJson = { ...this.baseJson, ...data }

      data.labelJson.map(r => {
        // 类目属性
        if(r.style == 0){
          // 单选
          if(r.labelParams.length != 0){
            r.labelParams.map(t => {
              if(this.labelJson[r.id] !== undefined){
                this.labelJson[r.id] = t.id
              }
            })
          }
        }else if(r.style == 1){
          // 多选
          if(r.labelParams.length != 0){
            r.labelParams.map(t => {
              if(this.labelJson[r.id] !== undefined){
                this.labelJson[r.id].push(t.id)
              }
            })
          }
        }else if(r.style == 2){
          // console.log('r',r)
          // 自定义
          if(r.labelParams.length != 0){
            r.labelParams.map(t => {
              this.labelJson[r.id] = t.name
            })
          }
        }else{}

      })

      // 商品主图
      this.imgsJson = { ...data.imgsJson }

      // sku表单还原
      let dealSpec = (spec,t) => {
        let hasIn = false
        for(let i in spec){
          if(spec[i] == t.specParam.id){
            hasIn = true
            break
          }
        }
        return hasIn
      }
      // console.log('data',data.specJson)
      data.specJson.map(r => {
        // r.isMove==0 ----移除的sku，不选中销售规格属性
        if(r.isMove == 0){
          r.specs.map(t => {
            let spec = this.specJson[t.id]
            if(!dealSpec(spec,t)){
                spec.push(t.specParam.id)
            }
          })

        }
      })
      // console.log('specJson',this.specJson)
      this.dealSkuSelect(this.specJson)
      // sku表单数据回填
      let dataJson = []
      data.specJson.map(r => {
         r.stock = r.stock+"";
        r.moq = r.moq+"";
        let skuList = _deepClone(this.skuList)
        let obj = {}
        skuList.map(t => {
          // console.log('t',t)
          // console.log('r',r)
          // 判断表单和编辑数据是否为同一条
          if(r.specs.length == 0){
            // 无关联规格商品
            obj = {...t,...r,...{isShow:r.isMove?false:true}}
            dataJson.push(obj)
          }else{
            // 有关联规格商品
            let arr = []
              r.specs.map(r => {
                arr.push(r.specParam.id)
              })

            if(t.key == arr.join(',')){
              obj = {...t,...r,...{isShow:r.isMove?false:true}}
              dataJson.push(obj)
            }

          }

        })
      })
      this.$set(this,'skuList',dataJson)
      this.loading_list =false

    },
    checkboxSpecsChange(item) {
      // console.log('checkboxSpecsChange--',item);

        // 处理属性
        this.dealSkuSelect(this.specJson, item);

    },
    dealSkuSelect(selected, item){
      // 生成sku表单
      let specsData = _deepClone(this.specsData)
      let arr = []
      // console.log('已选择的规格打钩--',selected,'skuList的规格--',specsData);
      for(let key in selected){

        if(selected[key].length != 0){

          let type = []
          for(let k in specsData){
            if(specsData[k].id == key){
              let { id, name } = _deepClone(specsData[k])
              let spec = {id,name}

              specsData[k].specParams.map(r => {
                selected[key].map(t => {
                  if(r.id == t){
                    spec['specParam'] = r
                    type.push(_deepClone(spec))
                  }
                })
              })
              arr.push(type)
            }

          }

        }
      }
      // console.log('打钩--',arr);
      // console.log('打钩渲染的skulist--',this.skuList)
      // console.log('this.data.baseJson.skuList',this.olddata.specJson);

      // console.dir(specsData)
      // [[{},{}],[{}]]
      // debugger
// console.dir(arr)


      // sku组合
      let isKey = [];
      let result = [];
      let sku = [];
      let doExchange = (arr, index) => {
        for (var i = 0; i < arr[index].length; i++) {
          result[index] = arr[index][i];

          if (index != arr.length - 1) {
            doExchange(arr, index + 1);
          } else {
            result.map(r => {
              // 重新处理数据格式，result已经组合完成
              isKey.push(r);
            });
            // $e.createItemsSku(result, isKey.join(",")); // 生成格式
            // console.dir(JSON.stringify(isKey))
            sku.push(isKey)
            isKey = []; // 清空临时存放
          }
        }
      }

      arr.length != 0 && doExchange(arr, 0);

      let returnKey = (r) => {
        // 多属性拼成新id，唯一
        let arr = []
        for(let key in r){
          arr.push(r[key]["specParam"].id)
        }
        // console.log('returnKey--',arr,arr.join(','));
        return arr.join(',')
      }

      // this.skuList  // sku表单初始数据
      // this.skuList = [] //这里需要处理不存在的isShow为false
      let skuList = this.skuList

      for(let key in skuList){
        // 首先全部隐藏
        skuList[key].isShow = false
        skuList[key].isMove =1
      }

      let checkSkuList = (skuList,data) => {
        let result = false
        for(let i in skuList){
          if(skuList[i].key == data['key']){
            skuList[i].isShow = true
            skuList[i].isMove =0
            result = true
          }
        }
        return result
      }

      sku.map(r => {
        // console.log('sku--',r);
        // 初始化
        let data = {}
        if(this.spuId){
          this.olddata.specJson.forEach(rd => {
            // console.log('rd.specs',rd.specs);
            if(returnKey(rd.specs) == returnKey(r)){
              data = _deepClone(rd)
              data['key'] = returnKey(r)
              data['isMove'] =0
              data['isShow'] =true
            }
            })
        }
        // console.log('data--',data);
        if(Object.keys(data).length==0){
          data = _deepClone(this.skuListInit)
          data['specs'] = r
          data['key'] = returnKey(r)
        }
        // console.log('datakey--',data['key'])

        if(!checkSkuList(skuList,data)){
          skuList.push(data)
        }
      })


      this.proSpecProperties(_deepClone(this.skuList))
      // console.dir(this.skuList)

    },
    proSpecProperties(skuList) {
      // 构造properties（构造表头）
      let specPropertiesTable = {};
      for (let i in skuList) {
        if (skuList[i].isShow) {
          let spec = skuList[i].specs;

          for (let j in spec) {
            let key = spec[j].name; // 用name作为key，用于生成表头

            if (!specPropertiesTable[key]) {
              specPropertiesTable[key] = [];
            }
            specPropertiesTable[key].push(spec[j].specParam);
          }
        }
      }
      this.sku = specPropertiesTable;
      // console.dir(this.sku)
      // debugger
    },

    handleSelectArea(res){
      // 选中发货地
      this.baseJson.place = res
    },

    handleNewTagEditConfirm(item,subItem){
      // 编辑完标签
      if(subItem.name == ''){
        this.$message.error('标签名称不能为空')
        return false
      }
      subItem.edit = false

      this.skuList.forEach(r => {
        r.specs.forEach(z => {
          if(z.specParam.id == subItem.id){
            z.specParam.name = subItem.name
          }
        })

      })
    },
    handleNewTag(item,newTag){
      // 新增自定义属性标签
      let id = _uuid()
      if(newTag == ''){
        this.$message.error('自定义值不能为空')
        return false
      }else{
        let status = item.specParams.some(item => item.name == newTag)
        if(!status){
          item.specParams.push({
            id:id,
            name:newTag,
            type:1,
            edit:false
          })
          this.inputNewTag[item.id] = ''
        }else{
          this.$message.error('规格名称不能相同！')
        }
      }
    },

    handleInputNewValueEdit(item){
      // 编辑标签
      item.edit = true
      this.$nextTick(() => {
        this.$refs['tag_' + item.id][0].$el.querySelector('input').focus();
      })

    },
    handleInputNewTagDelete(){
      // 删除标签
    },
    // table操作
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // let num = 0
      // let arr = []
      // for(let key in this.specJson) {
      //   arr.push(this.specJson[key].length)
      // }

      // if(let i=0;i < arr.length;i++){
      //   arr[i]
      // }
      // console.dir(arr)

      // // console.dir(this.specJson)
      //   if (columnIndex === 0) {
      //     if (rowIndex % 2 === 0) {
      //       return {
      //         rowspan: 2,
      //         colspan: 1
      //       };
      //     } else {
      //       return {
      //         rowspan: 0,
      //         colspan: 0
      //       };
      //     }
      //   }
    },
    handleSetName(){},
    handleMoveSoft(file, label, softType){
      let filter = v => {
        return v.url !== file.url;
      };

      let checkIndex = (fileList,file) => {
        for(let i in fileList){
          if(fileList[i].url == file.url){
            return i
          }
        }
      }
      let fileList = _deepClone(this.imgsJson[label])
      let index = checkIndex(fileList, file)

      let indexFile = _deepClone(fileList[index])
      fileList = fileList.filter(filter)

      if(softType == 'up' || softType== 'left'){
        if(index == 0){
          this.$message.error('已经是第一张')
          return false
        }else{
          fileList.splice(index-1, 0, indexFile)
          this.$set(this.imgsJson,label,fileList)
        }
      }

      if(softType == 'down' || softType== 'right'){
        if(index == fileList.length){
          this.$message.error('已经是最后一张')
          return false
        }else{
          fileList.splice(index+1, 0, indexFile)
          this.$set(this.imgsJson,label,fileList)
        }
      }

    },
    handleRemove(file, label,idx) {

      // debugger
      // 移除图片
      // let fileList = _deepClone(this.imgsJson[label])
      // let index = fileList.indexOf(file)

      // this.imgsJson[label].splice(idx,1)
      // console.log('handleRemove--',label,file,fileList,this.imgsJson[label]);
      if(label == 'video'){
        this.imgsJson[label].splice(0,1)
        return false
      }

       let fileList = _deepClone(this.imgsJson[label])
      for(let i in fileList){
        if(fileList[i].url == file.url){
          this.imgsJson[label].splice(i,1)
          // this.$refs[label].clearFiles()
          break
        }
      }
       // 清除组件内部fileList
      if(this.$refs[label]){
        let uploadFiles = this.$refs[label].uploadFiles
        // console.log('uploadFiles--',uploadFiles);
        for(let i in uploadFiles){
          if(uploadFiles[i].raw && uploadFiles[i].raw.url){
            if(uploadFiles[i].raw.url == file.url){
              uploadFiles.splice(i,1)
              break
            }
          }
        }
      }

    },
    onError(err,file,fileList){
      this.loadingEnd(1)
    },
    handlePictureCardPreview(file,type) {
      // 查看大图
      this.dialogImageUrl = file.url || file;
      this.dialogVisible = true;
      this.isDetails =type?true:false

    },
    handleSuccess(response, file, fileList, supMainImgsIndex){

      // 文件上传
      let filterSku = v => {
        // 过滤需要修改
        return v.key == this.skuImageKey;
      };
      let { label, host, keys } = this.uploadData
       fileList.map(r => {
          // console.log(r)
          // let url = r.raw && r.raw.url || r.url
          let url = r.raw?r.raw.url:r.url

          // 防止没上传完404
          if(url && url == file.raw.url){

            if(label === 'mainImg'){
              // sku图
              this.skuList.filter(filterSku)[0].mainImg = url
            }
            // else if(label === 'supMainImgs'){
            //   // 商品主图
            //   this.$set(this.imgsJson[label],supMainImgsIndex,{"url":url,"name":url})
            // }
            // else if(label === 'supMainImgs'){
            //   // 商品主图
            //   // this.$set(this.imgsJson[label],supMainImgsIndex,{"url":url,"name":url})
            //    this.imgsJson[label].push({"url":url,"name":url})
            // }
            else{
              if(label === 'video'){ // || label === 'model3D'
                this.imgsJson[label] = [{"url":url,"name":url}]
              }else{
                // 多图
                this.imgsJson[label].push({"url":url,"name":url,uid:file.uid})
                this.imgsJson[label].sort((a,b)=>{
                  return a.uid-b.uid
                })
              }
            }
          }
        })
          console.log('上传成功')

          this.loadingEnd()

    },
    getSkuImageIndex(key) {
      // console.dir(key)
      // 编辑sku图
      this.skuImageKey = key;
    },
    handleExceed(files, fileList,label) {
      // console.log('超出限制文件个数--',files,'fileList--',fileList,label);
      this.$message.warning(`超出限制文件个数`);
    },

    beforeUpload(file,label) {
      let self =this
      this.beforeArr.push(file);
      // this.uploadData.beforeNum += 1
      this.uploadData['label'] = label // 上传位置标识
      const rules = {
        'mainImg':{
          vSize:512,
          vImgWH:[800,800]
        },
        'supMainImgs':{
          vSize:512,
          vImgWH:[800,800]
        },
        'video':{
          vIsVideo:true,
          vSize:51200
        },
        'higImg':{
          vSize:1024,
          vImgWH:[1600,1600]
        },
        // 'model3D':{
        //   vSize:102400,
        // },
        'detailImgs':{
          vSize:2048,
          vImgW:[790]
        }
      }
      // 文件上传
      return new Promise((resolve, reject) => {
        _assembleOss.call(this,{
           file,
          label,
          rules,
          fail:(result, msg, file) => {
            // console.log('fail--',result, msg, file);
            // this.beforeUploadErr(file)
            // if(!result){
            //   if(this.loading){
            //     this.loadingEnd()
            //   }
            // }
          },
          beforeUpload:(result) => {
            // console.log('result---',result)
            this.loadingStart()
          },
          success: (res,url,file) => {
            let uploadData = this.uploadData
            this.uploadData = {...uploadData, ...res}
            this.uploadData.key = url
            file.url = this.uploadData.host + '/' + url
            // this.uploadData.keys.push(url)
          }
        }).then(r => {
          r?resolve():reject()
        })

      })
    },
    handleError(file, fileList,label){
      // this.loadingEnd()
      // this.$refs[label].clearFiles()

      // 处理加上校验后删除前一个已上传文件的问题
      return false
    },

    handleChangeTpl(){
      // 切换类目/切换模板
      this.$confirm("尚未保存，是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$router.replace({ path: "/goods/template" });
        })
        .catch(() => {});
    },

    dealLabel(){
      // console.log(this.labelJson)
      let labelsData = _deepClone(this.labelsData)
      let selected = _deepClone(this.labelJson)
      for(let key in selected){
        labelsData.map(r => {
          if(r.id == key){
            if(selected[key] == "" || selected[key].length == 0){
              // 数据没填
              r.labelParams = []
            }else{
              // 数据有填
              if(r.style == 0){
                for(let i in r.labelParams){
                  if(selected[key] == r.labelParams[i].id){
                    r.labelParams = [r.labelParams[i]]
                    break;
                  }
                }
              }else if(r.style == 1){
                let arr = []
                for(let i in r.labelParams){
                  selected[key].map(t => {
                    if(r.labelParams[i].id == t){
                      arr.push(r.labelParams[i])
                    }

                  })
                }
                r.labelParams = arr
              }else if(r.style == 2){
                r.labelParams[0] = {name:''}
                r.labelParams[0].name = selected[key]
              }else{}
            }
          }
        })
      }
      return labelsData
    },
    handleSave(isReview){
      if(isReview==1){
        this.$refs.formCategory.validate((valid,e) => {});
           this.$refs.labelForm.validate((valid,e) => {});
      }
      // isReview -> 1-提交审核，0-保存到仓
      this.saveData = {}
      let baseJson = _deepClone(this.baseJson)
      let imgsJson = {}
      let skuList = _deepClone(this.skuList)
      let labelList = _deepClone(this.labelJson)
      // console.dir(baseJson)
      // console.dir(labelList)
      for(let k in this.imgsJson){
        let o = this.imgsJson[k]
        let arr = []
        if(typeof(o) == 'object' && o  instanceof Array){
          o.map(r => {
            arr.push(r.url?r.url:r)
          })
          imgsJson[k] = arr.join(',')
        }else{
          imgsJson[k] = o
        }
      }

      baseJson["labelJson"] = this.dealLabel()
      // baseJson["specJson"] = skuList
      // baseJson["specJson"] = skuList.filter((r) => {return r.isShow === true})

      // isMove做标识逻辑删除---- 旧数据和新增的数据合并
      let skuListOld =[]
      if(this.spuId){
        skuListOld = _deepClone(this.olddata.specJson)
      }
      let skuListAdd = []
      let skuListAddResult = []
      let temp ={}
      if(this.spuId){
          skuListAdd = _deepClone(skuList.concat(skuListOld))
          // skuListAdd.map((item,index) =>{
          //   if(!temp[item.skuId]){
          //     skuListAddResult.push(item);
          //     temp[item.skuId] = true
          //   }
          // })
          skuListAdd.forEach(item => {
            if (!item.stock) {
              item.stock = "0"
            }
          })

          skuListAdd.map((item,index) =>{
            if(item.skuId){
              if(!temp[item.skuId]){
                skuListAddResult.push(item);
                temp[item.skuId] = true
              }
            }else{
               skuListAddResult.push(item);
            }
          })

          // for(item22 in skuListAdd){
          //   console.log('item--',item22);
          //   // let flag =true;
          //   // for(item2 of skuListAddResult){
          //   //   if(item.skuId == item2.skuId){
          //   //     flag =false
          //   //   }
          //   // }
          //   // if(flag){
          //   //   skuListAddResult.push(item)
          //   // }

          // }
      }else{
        skuListAddResult = skuList
      }

      let skuListMap = []
      skuListAddResult.map(r=>{
          r.model = this.baseJson.model + '-' + r.model
          if(r.skuId){
            skuListMap.push(r)
          }else if(r.isNew && r.isMove ==0){
            skuListMap.push(r)
          }
      })
      baseJson["specJson"] = skuListMap

      // console.log('skuListOld',skuListOld);
      // console.log('初始化的isMove--skuList',skuList);
      //  console.log('skuListAdd--',skuListAdd);
      //  console.log('skuListAddResult--',skuListAddResult);
      // console.log(' baseJson["specJson"]',baseJson["specJson"]);
      baseJson["imgsJson"] = imgsJson
      baseJson['isReview'] = isReview
      baseJson.place = this.baseJson.place.join(',')
      baseJson.formulaParams = this.hasFormula
      // 校验 start
      new Promise((resolve,reject) =>{
        let r = this.CheckNull(baseJson)
          resolve(r)
      }).then(r => {
        if(r){
        // 校验结束，提交数据
          this.loadingStart('保存中...')
          let postUrl = ''
          if(JSON.stringify(this.editJson) != '{}'){
            // 编辑
            postUrl = '/products/sdEdit'
          }else{
            // 新增
            postUrl = '/products/sdAdd'
          }
          // 提交数据
          this.$axios.post(postUrl,baseJson).then(r => {
            let {code, data, msg,message} = r.data
            if(code == 200){
              this.$message({
                message: '保存成功',
                type: 'success'
              });
              setTimeout(() => {
                this.$router.replace("/goods/list")
              },1500)
            }else{
              this.$message({
                message: msg || message,
                type: 'warning'
              });
            }
          }).catch(r => console.log(r))

          this.loadingEnd()
        }
      })
    },
    handleCancel(){
      this.$router.go(-1)
    },

    handleRequest(row){
      // 申请修改零售价
      if(row.purchasePrice == ""){
        this.$message.error('零售价不能为空')
      }else{
        row.purchasePriceDisable = false
      }
    },
    checkWarning(message){
      // 校验请求后返回提示
      let msg = ''
      switch(message){
        case 'supplierId不能为空':
          msg = '供应商不能为空'
          break;
        case 'brandId不能为空':
          msg = '品牌不能为空'
          break;
        case '商品系列型号不能为空':
          msg = '商品系列型号不能为空'
          break;
        case 'place_发货地不能为空':
          msg = '发货地不能为空'
          break;
        case 'imgsJson_商品主图至少提供一张无底图':
          msg = '商品主图不能为空'
          break;
        case '类目标签选项不能为空':
          msg = '类目标签填写不完整'
          break;
        case '供货价不能为空':
          msg = '供货价不能为空'
          break;
        // case '库存不能为空':
        //   msg = '商品库存不能为空'
        //   break;
        default:
          msg = '内容填写不完整'
      }

      this.$notify({
        message: msg,
        type: 'warning'
      });
    },
    CheckNull(baseJson){
      // 提交前校验
      let result = true
      // 规则
      let requires = [{
        key:'supplierId',
        tip:'供应商不能为空'
      },{
        key:'brandId',
        tip:'品牌不能为空'
      },{
        key:'model',
        tip:'商品系列型号不能为空'
      },{
        key:'place',
        tip:'发货地不能为空'
      },{
        key:'salesArea',
        tip:'销售区域'
      },
      // {
      //   key:'labelJson',
      //   child:[{
      //     key:'labelParams',
      //     tip:'类目属性填写不完整'
      //   }]
      // },
      {
        key:'specJson',
        child:[{
          key:'model',
          tip:'sku型号不能为空'
        },{
          key:'mainImg',
          tip:'sku图不能为空'
        },{
          key:'supplyPrice',
          tip:'供货价不能为空'
        },{
          key:'purchasePrice',
          tip:'采购价不能为空'
        },{
          key:'salePrice',
          tip:'优惠价不能为空'
        },{
          key:'productPrice',
          tip:'零售价不能为空'
        },{
          key:'moq',
          tip:'起订量不能为空'
        },
        // {
        //   key:'stock',
        //   tip:'商品库存不能为空'
        // }
        ]
      },{
        key:'imgsJson',
        child:[{
          key:'supMainImgs',
          tip:'商品主图填写不完整',
          // rules:{
          //   limit:5,
          //   tip:'需要5张商品主图，请填写完整'
          // }
        },{
          key:'detailImgs',
          tip:'商品详情不能为空'
        }]
      }]
      let tipsDialog = (msg) => {
        this.$notify({
          title: '警告',
          message: msg,
          type: 'warning'
        });
        return false
      }
      let check = (requires,data,num) => {
// console.log('result',result)
        for(let i in requires){
          let r = requires[i]
          let d = data[r['key']]

          if(d != undefined){
            if(typeof(d) != 'object'){
              if(d == ""){
                // 只处理字符串
                tipsDialog(r['tip'])
                result = false
                return false
              }else{
                // 额外规则
                if(r['rules'] != undefined && d.split(',').length < 5){
                  tipsDialog(r['rules'].tip)
                  result = false
                  return false
                }
              }
            }else{
              if(r['child'] != undefined){
                if(Array.isArray(d)){
                  // 数组
                  for(let ii in d){
                    let t = d[ii]
                    if (t && t.isMove == 1) continue;
                    for(let iii in r['child']){
                      let z = r['child'][iii]
                      // console.log(t[z.key])
                      if(t[z.key] == "" || t[z.key] == null || t[z.key].length == 0){
                        tipsDialog(z.tip)
                        result = false
                        return false
                      }
                    }
                  }
                }else{
                  check(r['child'],d,num)
                }
              }
            }
          }

        }
        // return result

      }
      check(requires,baseJson,0)
      // console.log(result)
      return result
      // console.log( check(requires,baseJson))
      // return check(requires,baseJson)

    },

  },
  components: { }
};
</script>

<style lang="scss" scoped>
.is-ready{
  background: url('https://edspicserver.oss-cn-hangzhou.aliyuncs.com/ROOT/ETao/actImg/wh750.png') 0 0 repeat;
}
.is-ready2{
  background: #fff;
}
.tipsdiv{
  padding: 26px 10px 20px;
    color: #E2523A;
}
.common-attr{
  .right {
    flex: 1;
    .bg {
      padding: 15px;
    }
    .sku_bg{
      background: #fafafa;
      border: 1px solid #dcdcdc;
    }
    .item {
      margin-top: 10px;
      .name {
        display: inline-block;
        min-width: 72px;
      }
    }
    .item-box {
      position: relative;
      padding-bottom:20px;
      .item-title {
        padding-top: 10px;
        padding-bottom: 10px;
      }
      .checkbox-tpl{
        display: inline-block
      }
      .params-btn{
        margin-right:5px;
        font-size: 14px;
        cursor: pointer;
        &:hover{
          color:#409EFF;
        }
      }
      .el-checkbox{
        margin: 10px 5px 10px 15px;
      }
      .button-new-tag{
        margin-left: 10px;
        height: 32px;
        line-height: 30px;
        padding-top: 0;
        padding-bottom: 0;
      }
    }
  }
}
.btns{
    text-align: center;
    padding: 30px;
    /* margin-bottom: 100px; */
}
.details_img_box{
  border: 1px solid #ddd;
  margin-bottom: 40px;
  .left{
    display: inline-block;
    width: 21%;
    height: 486px;
    overflow: auto;
    background: #F7F7F7;
    padding: 2%;
    vertical-align: middle;
  }
  .right{
    width: 74%;
    height: 486px;
    float: right;
    .right_main{
      position: relative;
      height: 100%;
      overflow-y:scroll;
    }
    .show_img{
      display: block;
      width:100%;
    }
    .full{
      position: absolute;
      right: 0;
      top: 0;
      width: 30px;
      height: 30px;
      cursor: pointer;
    }
  }
  /deep/ .el-upload-list--picture-card .el-upload-list__item{
    width: 100%;
    height: 75px;
  }
  .el-upload-list__item-thumbnail{
    height: 65px;
    padding: 5px;
    vertical-align: middle;
    width: 65px;
  }
  .img_name{
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 152px;
  }
  /deep/ .el-upload--picture-card{
    width: 100%;
      height: 75px;
  }
  .el-icon-plus{
    position: relative;
    top: -30px;
  }
}
// 主图上传
.supMainImgs{
  position: relative;
  display:inline-block;
  margin-right: 20px;
  margin-bottom: 20px;
  .img{
    max-width:146px;
    max-height: 146px;
    vertical-align: middle;
  }
  .tit{
    position: absolute;
    left:0;
    top:0;
    height: 30px;
    width: 100%;
    line-height: 30px;
    text-align: center;
    color:#fff;
    background: rgba(0,0,0,.5);
  }
  .titicon{
    position: absolute;
    right:0px;
    top:0px;
  }
}
.video_pro{
  height:148px;
  width:222px;
        border: 1px dashed #d9d9d9;
      border-radius: 6px;
      box-sizing: border-box;
      position: relative;
  /deep/ .el-upload--text{
    width: 100%;
    height: 100%;
  }
  .el-icon-plus{
    font-size: 28px;
    line-height:5;
  }
  video{
    max-width: 100%;
    max-height:100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
  }
}
 .videoshow0{
    display: inline-flex;
    position: relative;
    .closebtn{
      position: absolute;
      right: -30px;
      top: -10px;
      font-size: 24px;
      cursor: pointer;
      color: #999;
    }
  }
.intr{
    padding-left: 35px;
  }
.title2{
  font-size: 16px;
  font-weight: bold;
  padding-bottom: 40px;
}
.title3{
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.input{
    width: 350px;
}

.red{
  color: #E2523A;
}
.green{
  color: #2491A2;
}
.hr{
    height: 2px;
    background: #f0f0f0;
}
.form_tip{
  font-size: 13px;
  color: #999999
}
.title {
    padding-left: 3px;
    border-left: 3px solid #ff6600;
    color: #3a3a3a;
    font-weight: bold;
    font-size: 20px;
  }
.mune{
  padding: 30px 20px 0;
  .class_title{
    padding: 30px 0 15px;
    .class_btn{
      padding: 0 20px;
    }
    .class_tip{
      color: #999;
      font-size: 13px;
    }
  }
}
#scrollBox{
  overflow-y: scroll;
}
.tabbox{
  padding: 0 20px;
  position: sticky;
  top: -15px;
  background: #fff;
  z-index: 9;
}
.infobox{
  padding: 20px;
  .checktip{
    cursor: pointer;
  }
}
/deep/ .el-tabs__header {
  margin: 0;
}
.full_imgs{
  display: block;
  width: 100%;
}
.sku_list_table{
  // 上传图片
  /deep/ .el-upload--text {
    width: 52px;
    height: 52px;
    line-height: 52px;
    border: 1px dashed #d9d9d9;
  }
  /deep/ .el-table--medium td {
    padding: 5px 0;
  }
  /deep/.el-upload-list__item img.el-upload-list__item-thumbnail{
    width: 146px;
    object-fit: contain;
    line-height: 148px;
  }
}
.avatar {
  max-width:100%;
  max-height:100%;
}
/* 3d上传 */
.upload_3d{
  /deep/ .el-upload--text{
    width: auto;
    height:auto;
    border:none;
  }
}
</style>
