<template>
  <div id="topA">
    <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-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="selectPro">
              <div>
                <p class="label-item" v-if="selectPro">
                  <span class="label-name">{{selectPro}}</span>
                </p>
              </div>
              <!-- 添加商品 -->
              <addpro v-if="baseJson.brandId" 
              :typeBtn="true" 
              @selectProFun="selectProFun" 
              @skuListProducts="skuListProducts"
              :brandId="baseJson.brandId"
                  :productType="productType"
              ></addpro>
              
                <el-tooltip v-else class="item" effect="dark" content="请先选择品牌" placement="top">
                  <el-button
                    type="primary"
                    plain
                    class="button-new-tag"
                    size="small"
                  >+ 添加商品</el-button>
                </el-tooltip>
              </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 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="100px" 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==1?true:false, 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==1?true:false, message: item.name + '不能为空'}">
                  <el-checkbox-group v-model="labelJson[item.id]">
                    <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==1?true:false, 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">
                            <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_12 f_c_disable">在标题栏中输入或选择内容可以进行筛选和批量填充</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> -->

              <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型号" width="150">
                  <!-- <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型号"></el-input>
                  </template>
                </el-table-column>

                <!-- <el-table-column prop="skuName" label="sku商品名称">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.skuName" placeholder="sku商品名称"></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/jpeg,image/jpg,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%;">
                        <img
                          v-if="scope.row.mainImg"
                          :src="scope.row.mainImg + '?x-oss-process=image/format,jpg/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>

                <!-- <el-table-column prop="purchasePrice" label="采购价" width="120">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.purchasePrice" placeholder="采购价" 
                    disabled
                    >
                      <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">
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.salePrice"
                      placeholder="销售价"
                   disabled
                    
                     >
                        <i slot="prefix" class="iconfont iconrenminbi1 f_12 l_h_32 p_l_5"></i>
                      </el-input>
                  </template>
                </el-table-column> -->

                <!-- 20200523新增两个价格 -->

                <el-table-column prop="supplyPrice" label="供货价" width="120">
         
                  <template slot-scope="scope">
                    <el-input v-model.trim="scope.row.supplyPrice" placeholder="供货价" 
                    disabled
                    >
                      <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">
         
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.productPrice" placeholder="原价" 
                    disabled
                    >
                      <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-model.trim="scope.row.stock" placeholder="库存"></el-input>
                  </template>
                </el-table-column> -->
                <!-- <el-table-column prop="warnStock" label="预警库存">
          
                  <template slot-scope="scope">
                    <el-input v-model.trim="scope.row.warnStock" placeholder="库存"></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="起订量"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="bangding" label="绑定商品" width="100">
                  <template slot-scope="scope">
                   <!-- <div>{{scope.row.key}}</div> -->
                   <!-- <div>商品sku:{{selectProSkuId}}</div>
                   <div>序号：{{scope.$index}}</div> -->
                     <addpro v-if="selectProSkuId" 
                     @selectProFun2="selectProFun2" 
                     :sku_id="selectProSkuId" 
                     :sku_index="scope.$index"
                     :skuList="skuList"
                         :productType="productType"></addpro>
                     <el-tooltip v-else class="item" effect="dark" content="请先添加商品" placement="top">
                          <el-button type="text" >绑定商品</el-button>
                      </el-tooltip>
                  </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="warnStock" label="预警库存">
                <el-input class="input" v-model.number="skuList[0].warnStock" 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>

          <el-form style="margin-top:10px;" :label-position="labelPosition" label-width="100px" :model="baseJson" :rules="rules">
           <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==1">15天</el-radio>
              <el-radio v-model="baseJson.deliveryTime" :label="2" v-if="setDeliveryDate.isDeliveryDate==1">30天</el-radio>
              <el-radio v-model="baseJson.deliveryTime" :label="3" v-if="setDeliveryDate.isDeliveryDate==1">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" :rules="{ required: true,message:'发货地不能为空'}">
              <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="商品主图" 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 v-if="selectMainImgs && selectMainImgs.length>0">
               
                
              <div class="supMain_bigbox" v-for="(item,idx) in selectMainImgs" :key="idx">
     
               <el-checkbox-group  v-model="checkboxMainImg" @change="mainImgChange">
                <div class="radioCssDiv">
                   <el-checkbox class="radioCss" 
                   style="margin-right:10px;" 
                   :min="0"
                   :max="5"
                   :label="idx" :key="idx">&nbsp;</el-checkbox>

                  <!-- <el-radio class="radioCss" 
                    :label="idx" 
                    v-model="radioMainImg" 
                    style="margin-right:10px;">&nbsp;</el-radio> -->

                 </div>

                <div v-if="selectMainImgs.length" class="supMainImgs">
                      <ul class="el-upload-list el-upload-list--picture-card">
                        <li class="el-upload-list__item is-ready">
                          <div>
                            <img
                              class="el-upload-list__item-thumbnail"
                              :src="selectMainImgs[idx]['mainImg']" alt="">
                          </div>
                        </li>
                      </ul>
                </div>
                      </el-checkbox-group>
              </div>
         
               </div>
               <!-- 默认的图片上传框 -->
               <div>
                
               <!-- v-for="index in 5" :key="index" -->
                <div class="supMainImgs" >
                    <div class="radioCssDiv">

                  <!-- <el-radio class="radioCss" 
                  :label="9999" 
                  v-model="radioMainImg" 
                  style="margin-right:10px;">&nbsp;</el-radio> -->

                   <!-- <el-checkbox class="radioCss" 
                   style="margin-right:10px;" 
                    v-model="radioMainImg" 
                   :label="9999">&nbsp;</el-checkbox> -->

                  </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.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>
                        </li>
                        <li class="el-upload-list__item is-ready" style="border:none;">

                    
                         <el-upload
                 
                    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')" 
                    :show-file-list="false"
                    :on-exceed="(files,fileList) => handleExceed(files,fileList,'supMainImgs')"
                    :before-upload="(file) => beforeUpload(file,'supMainImgs',)"
                    :file-list="imgsJson.supMainImgs"
                    :before-remove="handleError"
                    :limit="uploadLim"
                    multiple
                    >
                    <!--  :show-file-list="false" 隐藏状态. 
                    :file-list="imgsJson.supMainImgs" 必须加上这一行，才能在删除图片后，再次上传图片，有超出提示-->
                   
                    <i class="el-icon-plus"></i>
      
                  </el-upload>
                      </li>
                      </ul>
                 
                </div>
       </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 v-if="selectMainImgs && selectMainImgs.length">
              <div class="video_bigbox" v-for="(item,idx) in selectMainImgs" :key="idx">
                  <template v-if="selectMainImgs[idx] && selectMainImgs[idx]['video']">
                <div class="radioCssDiv">
                    <el-radio class="radioCss" 
                    :label="idx" 
                    v-model="radioVideo" 
                    style="margin-right:10px;">&nbsp;</el-radio>
                 </div>

                    <div class="videoshow">
                      <video width="222" height="148" :src="selectMainImgs[idx]['video']" controls="controls">
                        您的浏览器不支持 video 标签。
                      </video>
                    </div>
               
                  </template>
              </div>
               </div>
               <div class="videoshow0">
               <div class="radioCssDiv">
                  <el-radio class="radioCss" :label="9999" v-model="radioVideo" style="margin-right:10px;">&nbsp;</el-radio>
                  </div>
                 
                 
              <el-upload
                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"
                :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
                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')"
                :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
                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')"
                :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="详情描述"  prop="imgsJson.detailImgs">
                <div class="form_tip">
                  详情页的规格统一宽度为<span class="red">790px</span>，
                  单张切片大小不超过<span class="red">1M</span>
                  ，支持JPG和PNG格式
                </div>

              <div class="details_img_box">
                <div v-if="selectMainImgs && selectMainImgs.length">

           
                <div class="leftbox" v-for="(item0,index0) in selectMainImgs"
                      :key="index0">
                       <template v-if="item0.subImgs && item0.subImgs.length>0">
                      <div class="radioCssDiv">
                        <el-radio class="radioCss" 
                        :label="index0" 
                        v-model="radioSubImgs" 
                        style="margin-right:10px;">&nbsp;</el-radio>
                      </div>
               
                <div class="left" >

                  <!-- 详情描述 subImgs-->
                  <ul class="el-upload-list el-upload-list--picture-card">
                    <li
                      class="el-upload-list__item is-ready"
                      v-for="(item,index) in item0.subImgs"
                      :key="index">
                      <div>
                        <img
                          class="el-upload-list__item-thumbnail"
                          :src="item" alt="">
                        <!-- <span>{{item}}</span> -->
                      </div>
                      <!-- 操作按钮 -->
                      <span class="el-upload-list__item-actions">
                        <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,'detailImgs')">
                          <i class="el-icon-delete"></i>
                        </span> -->
                      </span>
                    </li>
                  </ul>
                </div>
                </template>
              </div>
                   </div>
                <!-- 上传 -->
                <div class="leftbox">
                  <div class="radioCssDiv">
                  <el-radio class="radioCss" :label="9999" v-model="radioSubImgs" style="margin-right:10px;">&nbsp;</el-radio>
                  </div>
                <div class="left">

                  <ul class="el-upload-list el-upload-list--picture-card">
                    <li
                      class="el-upload-list__item is-ready"
                      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)">
                          <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')"
                    multiple
                    :limit="100"
                    :on-exceed="handleExceed">
                    <i class="el-icon-plus"></i>
                  </el-upload>

                </div>
               </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>
       <a href="#topA" id="_a" @click="backTop" style="display:none">回到顶部</a>
    </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">
      <!-- 其他图片弹窗 -->
      <img width="100%" :src="dialogImageUrl" alt="">
    </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 { _uuid, _getOssToken, _supplierId, _deepClone, _deal,_getStorage } from '@/utils/utils'
import Validate from '@/utils/verification'
import FileVerification from "@/utils/FileVerification"
import addpro from "@/components/common/addproducts"
// import addpro2 from "@/components/common/addproducts"
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 {
          loading_list:false,//sku列表渲染loading
       productType:'',//商品类型
      setDeliveryDate:'',
      supplierData:'',
      brandName:'',
      initArr:[],
      selectProSkuId:'',//已选择的商品sku_id
      selectPro:'',//已选择的商品
      productData:[],

      cities: [{
          value: 'Beijing',
          label: '北京'
        }, {
          value: 'Shanghai',
          label: '上海'
        }, {
          value: 'Nanjing',
          label: '南京'
        }, {
          value: 'Chengdu',
          label: '成都'
        }, {
          value: 'Shenzhen',
          label: '深圳'
        }, {
          value: 'Guangzhou',
          label: '广州'
        }],
        value: '',

      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:{}, // 提交的数据

      dialogTableVisible:false,

      inputNewValueVisible: {}, //新增参数
      skuListInit: {
          "specs": [],
          "mainImg": "",
          "model": "",
          "supplyPrice": "",
          "purchasePrice": "",
          "purchasePriceDisable":true,
          "stock": "",
          "warnStock":"0",
          "moq": "",
          "isShow":true,
          saleable:1, // sku销售启用
           isMove:0,
           isNew:true
     
        }, // 初始化数据
      labelList:[],
      skuList: [], // 表格动态属性数据
      sku:[],
      editJson:{},
      selectMainImgs:[],//绑定商品的主图
      radioMainImg:9999,//默认选中一组主图
      radioSubImgs:0,//默认选中一组详情图
      radioVideo:0,//默认选中一组video
      checkboxMainImg:[],//商品主图多选
      // 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: '供货价不能为空'}],
        moq:[
          { required: true, message: '起订量不能为空'},
          { type: 'number', message: '起订量有误'}
        ],
        warnStock:[
          { required: true, message: '预警库存不能为空'},
          { type: 'number', message: '预警库存有误'}
        ],
        stock:[
          { required: true, message: '商品库存不能为空'},
          { type: 'number', message: '商品库存有误'}
        ]
      }
    }
  },
  mounted() {
    this.init();
    window.addEventListener('scroll', this.dataScroll,true);
  },
  computed:{
    uploadLim(){
       return 5-this.checkboxMainImg.length?5-this.checkboxMainImg.length:-1
    }
  },
  methods: {
    mainImgChange(e){
      // console.log(e);
       if (e.length + this.imgsJson['supMainImgs'].length > 5) {
        this.$alert('只能选择5张', '提示', {
          type: 'warning '
        }).then(() => {
  
          this.checkboxMainImg.splice(e.length-1)
        }).catch(() => {
          this.checkboxMainImg.splice(e.length-1)
        });

      }
    },
        //判断是否设置交货期
       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;
            }
          })
          .catch(r => console.log(r));
      },
    //选品牌带出供货商
    setBrand(e){
      this.getSupplier(this.baseJson.brandId)
    },
    
    selectProFun(obj){
      this.selectPro = obj.productName;
      this.selectProSkuId = obj.skuId;
      this.baseJson.model = obj.specJson.model;
    },
    skuListProducts(list){
       this.loading_list =true
      let { spuId } = this.$route.query;
      let specJson = [];

      let listarr = [];
      list.map((res,index)=>{
        let id = _uuid();
        listarr.push({
          id,
          name:res.model,
          type:1,//1为可编辑或者自定义，0为商品配置的规格
          edit:false
        })

        res.specs =[];
        res.specs.push({
          id:this.specsData[0]['id'],
          name:this.specsData[0]['name'],
          specParam:{
            id,
            name:res.model,
            type:1,//1为可编辑或者自定义，0为商品配置的规格
            // edit:false
          }
        });

      })
      specJson = list;
       
     //初始化销售规格---

     this.specsData[0].specParams = [...this.initArr,...listarr];
     listarr =[];
      // sku表单还原
      this.specJsonBackfill(specJson);

      // 商品主图选择
      this.showSelectManiImgs();
    },
    //绑定商品的主图
    selectProFun2(objItem){
     
    // 筛选展示的sku
     let skulist_true =[];
     this.skuList.map((r,index)=>{
       if(r.isShow){
         skulist_true.push(r);
       }
     })
     skulist_true.map((r,index)=>{
          this.selectMainImgs =[...this.selectMainImgs]
          if(index == objItem.skuIndex){
          let objAss = Object.assign(r,objItem.specJson);
          this.skuList.splice(index,1,objAss);
          this.selectMainImgs.splice(index,1,objItem)
        }
      
     })
 
     this.$set(this,'selectMainImgs',this.selectMainImgs)
     this.$set(this,'skuList',skulist_true)
    },
       delSpecs(index) {
         this.selectPro ='';
      // var item = this.params.templates.splice(index, 1);
      // this.specsSource.push(...item);
    },
    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()
    },

    dataScroll: function (e) {
      // console.log('gundogn00000--',document.documentElement.scrollTop,document.body.scrollTop,window.pageYOffset);
      // 标签定位
      this.scroll = e.target.scrollTop;
      // console.log('scroll--',this.scroll);

      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));

    },
    // 获取新增的商品信息
    getOldSkuName(){
      let { spuId } = this.$route.query;
      this.$axios.get('/products/getOldSkuName',{
        params:{
          spuId
        }
      }).then(r => {
        let { code, data } = r.data
        if(code == 200){
          this.selectPro = data.oldSkuName;
          this.selectProSkuId = data.oldSkuId;

        }
      }).catch(r => console.log(r));
    },
    // 获取供货商--发货地
    getSupplier(brandId){
      this.$axios.post('/products/querySupplierByBrand',{
        menuId:this.menuId,
        brandId
      }).then(r => {
        let { code, data } = r.data
        if(code == 200){
          // this.supplierData = data[0]?data[0]:'';
          // this.baseJson.supplierId = data[0].id;

          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();
      }
    },
         // // 获取品牌
     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)
      },
    buildNew(data) {
      this.menuId =
        data && data.menuId
          ? data.menuId
          : this.$route.query.menuId;
      this.baseJson.menuId = this.menuId
     
      this.getSetHuo();
      this.getArea() // 获取地区列表
    
      // 类目属性&规格参数
      let getSpecs = () => {
        return this.$axios
          .post('/products/getTemplateRelated',{
            menuId:this.menuId,
            type:this.spuId?"1":"0",
            spuId:this.spuId
          })
          .then(res => {
            let { code, data } = res.data

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

              this.productType = menuNames.split(",")[2];

              this.breadCurmb(menuNames)

              labels.map(r => {
                if(r.style == 1){
                  this.$set(this.labelJson,r.id,[])
                }else{
                  this.$set(this.labelJson,r.id,'')
                }
              })
              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;
              //存储第一个
              this.initArr = this.specsData[0]['specParams'];
            }
          })
          .catch(r => console.log(r));
      };
    

      this.$axios
        .all([getSpecs(),this.getBrandData()])
        .then(r => {
          // console.log(data)
          if (data && data.spuId) {
             this.getOldSkuName();
            this.editProduct(data);
          }
        })
        .catch(r => {
          // console.log(r);
        });
    },
    editProduct(data){
           this.loading_list =true
      // 编辑数据回填
      // 地址数据，使用时为数组，上传时为字符串
      let arr = data.place.split(',')
      data.place = []
      arr.map(r => {
        data.place.push(Number(r))
      })

      let label = ['supMainImgs','higImg','model3D','video','detailImgs']
      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表单还原
      this.specJsonBackfill(data.specJson)

    },
    //sku表单还原
    specJsonBackfill(specJson){
   
      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)
      if(this.spuId){
        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)
            }
          })
          }
        })
      }else{
        specJson.map(r => {
          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 = []
      specJson.map(r => {
        r.stock = r.stock+"";
        r.warnStock = r.warnStock+"";
        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) {
        // 处理属性
        this.dealSkuSelect(this.specJson, item);
    },
    dealSkuSelect(selected, item){
      // 生成sku表单
      let specsData = _deepClone(this.specsData)
      let arr = []

      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.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)
        }
        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 => {
         // 初始化
        let data = {}
        if(this.spuId){
          this.editJson.specJson.forEach(rd => {

            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)
        }
        if(!checkSkuList(skuList,data)){
          skuList.push(data)
        }
      })

    // 商品主图选择
    this.showSelectManiImgs();

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

    },
    showSelectManiImgs(){
   
        let skulist_true =[];
        this.skuList.map((r,index)=>{
          if(r.isShow){
            skulist_true.push(r);
          }
        })

        let { spuId } = this.$route.query;
        if(spuId){
        }else{
          this.$set(this,'selectMainImgs',skulist_true)
        }
         if(this.selectMainImgs.length>=5){
           this.checkboxMainImg = [0,1,2,3,4];
         }else{
           let as = [];
              this.selectMainImgs.map((item,idx) => {
                as.push(idx)
              })
              this.checkboxMainImg =as;
         }

        this.radioVideo=0;
        this.radioSubImgs=0;
      
    },
    proSpecProperties(skuList) {
      // console.dir(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;
    },

    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) {
      // 移除图片
      let fileList = _deepClone(this.imgsJson[label])
      let index = fileList.indexOf(file);
      
      this.imgsJson[label].splice(idx,1)
    },
    onError(err,file,fileList){
      this.loadingEnd(1)
    },
    handlePictureCardPreview(file) {
      // 查看大图
      this.dialogImageUrl = file.url || file;
      this.dialogVisible = true;
    },
    handleSuccess(response, file, fileList, supMainImgsIndex){
      // 文件上传
      let filterSku = v => {
        // 过滤需要修改
        return v.key == this.skuImageKey;
      };
      let { label, host, keys } = this.uploadData
      let successNum = this.uploadData.successNum += 1
// console.log(successNum,this.uploadData.beforeNum)
      if( successNum == this.uploadData.beforeNum ){
        keys.map(key => {
          if(label === 'mainImg'){
            // sku图
            this.skuList.filter(filterSku)[0].mainImg = host + "/" + key
          }
          //主图改成多图上传---0622
          // else if(label === 'supMainImgs'){
          //   // 商品主图
          //   this.$set(this.imgsJson[label],supMainImgsIndex,{"url":host + "/" + key,"name":host + "/" + key})
          // }
          else{
            if(label === 'video' || label === 'model3D'){
              this.imgsJson[label] = [{"url":host + "/" + key,"name":host + "/" + key}]
            }else{
              // 多图
              this.imgsJson[label].push({"url":host + "/" + key,"name":host + "/" + key})
            }
          }
        })
        this.$refs.detailImgs.clearFiles()
        this.uploadData.keys = []
        this.uploadData.successNum = 0
        this.uploadData.beforeNum = 0
        this.loadingEnd()
      }

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

    },
    beforeUploadCheck(file,label){
      let self = this
      const fv = new FileVerification(file);
      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:1024,
          vImgW:[790]
        }
      }


      async function getResult(rule){
        let res = true
        for(let i in rule){
          let val = rule[i]
          if(['vImgPercentage','vImgWH','vImgW','vImgH'].indexOf(i) != -1){
            let r = await fv[i](val[0],val[1])
            res = r
          }else{
            res = fv[i](val)
          }
        }
        return res
      }

      return getResult(rules[label])

    },
    beforeUploadErr(){
        this.$refs.detailImgs.clearFiles()
        this.uploadData.keys = []
        this.uploadData.successNum = 0
        this.uploadData.beforeNum = 0
    },
    beforeUpload(file,label) {
      this.uploadData.beforeNum += 1
      this.uploadData['label'] = label // 上传位置标识

      // 文件上传
      return new Promise((resolve, reject) => {

        // 校验上传文件属性
        this.beforeUploadCheck(file,label).then(res => {
          if(!res){
            this.$notify.error(
              "请按要求上传文件"
            );
            this.beforeUploadErr()
            reject();
          }else if (typeof(res) == 'object' && !res.result) {
            let err = res.h?res.w + "*" + res.h:res.w
            this.beforeUploadErr()
            this.$notify.error(
              "请上传" + err + "像素的图片格式文件"
            );
            reject();
          }else{
            this.loadingStart()

            _getOssToken.call(this, null).then((res) => {
              let fileExt = /\.[^\.]+$/.exec(file.name);
              let uuid = _uuid()
              let uploadData = this.uploadData
              this.uploadData = {...uploadData, ...res};

              this.uploadData.key = 'ROOT/ETao/gl/busiImage/' + uuid + fileExt;
              this.uploadData.keys.push('ROOT/ETao/gl/busiImage/' + uuid + fileExt)
              resolve();

            }).catch((err) => {
              reject(err)
            })

          }
        });

      })
    },
    handleError(file, fileList){

      // console.log('cuowu--',file,fileList);
      // 处理加上校验后删除前一个已上传文件的问题
      return false
    },

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

    dealLabel(){
      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)

      // 20200523--- 已经绑定商品图片
 
        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.filter((r) => {return r.isShow === true})
      // isMove做标识逻辑删除---- 旧数据和新增的数据合并
      let skuListOld =[]
      if(this.spuId){
        skuListOld = _deepClone(this.editJson.specJson)
      }
      let skuListAdd = []
      let skuListAddResult = []
      let temp ={}
      if(this.spuId){
          skuListAdd = _deepClone(skuList.concat(skuListOld))
          skuListAdd.map((item,index) =>{
            if(item.skuId){
              if(!temp[item.skuId]){
                skuListAddResult.push(item);
                temp[item.skuId] = true
              }
            }else{
               skuListAddResult.push(item);
            }
          })
      }else{
        skuListAddResult = skuList
      }
    
      let skuListMap = []
      skuListAddResult.map(r=>{
          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(',')
      

      //0525临时默认
      // baseJson.brandId = 1;
      baseJson.platForm =2;//类型
      baseJson.oldSkuName = this.selectPro;
      baseJson.oldSkuId = this.selectProSkuId;

      let str ='';
      this.checkboxMainImg.forEach(item=>{
          if(this.selectMainImgs[item]['mainImg']){
            str += this.selectMainImgs[item]['mainImg'] + (item<this.checkboxMainImg.length-1?',':'');
          }
      })
      if(str){
          if(baseJson["imgsJson"]['supMainImgs']){
            baseJson["imgsJson"]['supMainImgs'] = str + ',' + baseJson["imgsJson"]['supMainImgs']
          }else{
            baseJson["imgsJson"]['supMainImgs'] = str
          }
      }

       if(this.radioVideo != "9999"){

        if(this.selectMainImgs[this.radioVideo] && this.selectMainImgs[this.radioVideo]['video']){

          let str = this.selectMainImgs[this.radioVideo]['video'].toString();
          baseJson["imgsJson"]['video'] = str;
        }

      }
      
      if(this.radioSubImgs != "9999"){

        if(this.selectMainImgs[this.radioSubImgs] && this.selectMainImgs[this.radioSubImgs]['subImgs']){

          let str = this.selectMainImgs[this.radioSubImgs]['subImgs'].toString();
          baseJson["imgsJson"]['detailImgs'] = str;
        }

      }
      

      //  console.log('baseJson["imgsJson"]--',baseJson["imgsJson"]);



      // 校验 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/edit'
          }else{
            // 新增
            postUrl = '/products/etao/add'
          }
          // 提交数据
          this.$axios.post(postUrl,baseJson).then(r => {
            let {code, data, msg,message} = r.data
            if(code == 200){

              if(JSON.stringify(this.editJson) != '{}'){
                this.$message({
                  message: '保存成功',
                  type: 'success'
                });
                setTimeout(() => {
                this.$router.replace("/goods/listold")
                },1500)
              }else{
                 this.$message({
                  message: '保存成功,请继续录入商品',
                  type: 'success'
                });
                  this.hidden_a_href();
              }
            }else{
              this.$message({
                message: msg || message,
                type: 'warning'
              });
            }
          }).catch(r => console.log(r))
            this.loadingEnd()
        }
      })
    },
   hidden_a_href(){
  　　document.getElementById("_a").click();
  },
    backTop(){
      this.activeName="base";
      // 初始化全部的 data数据
      this.buildNew();
      // Object.assign(this.$data, this.$options.data());

    },
    handleCancel(){
      this.$router.go(-1)
    },
    
    
    handleRequest(row){
      // 申请修改零售价
      if(row.salePrice == ""){
        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:'moq',
          tip:'起订量不能为空'
        },{
          key:'warnStock',
          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]
                    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)

    },


  },
  destroyed () {
    window.removeEventListener('scroll',this.dataScroll)
  },
  components: { addpro}
};
</script>

<style lang="scss" scoped>
.supMain_bigbox{
  display: inline-block;

}
.video_bigbox{
  display: inline-flex;
  align-items: center;
  position: relative;
    .radioCssDiv{
       display: inline-block;
      .radioCss{
        height: auto;
         transform: none;
          position: initial;
      }

    }
    .videoshow{
      height: auto;
      margin-right: 30px;
    }
  
}
  .videoshow0{
    display: inline-flex;
    position: relative;
    .closebtn{
      position: absolute;
      right: -30px;
      top: -10px;
      font-size: 24px;
      cursor: pointer;
      color: #999;
    }
  }
.radioCssDiv{
  display: inline-block;

  .radioCss{
    height: 140px;
      transform: translate(20%,40%);
      position: relative;
    >>>.el-radio__inner{
      width: 18px;
      height: 18px;
    }
  }
}
.label-item {
      .label-name {
        display: inline-block;
        background: #f6f6f6;
        padding: 2px 18px;
        margin-bottom: 10px;
        border: 1px solid #e2e2e2;
        border-radius: 2px;
      }
      .el-icon-close {
        background: #a5a5a5;
        color: #ffffff;
        border-radius: 50%;
        padding: 2px;
        font-size: 10px;
        cursor: pointer;
        margin-left: 6px;
        &:hover {
          background: red;
        }
      }
    }
// .box-card{
//   width: 500px;
//   .bodybox{
//     max-height: 400px;
//     overflow-y: auto;
//     .item{
//       display: flex;
//       align-items: center;
//       border-bottom: 1px solid #F6F6F6;
//       padding: 10px 0;
//       .left{
//         width: 50px;
//         min-width: 50px;
//         margin-right: 20px;
//         img{
//           display: block;
//           width: 100%;
//         }
//       }
//       .right{
//         // line-height: 26px;
//       }
//       &:hover{
//         color: #f60;
//       }
//     }
//   }

//   >>>.el-card__header{
//     padding: 0;
//   }
//   .title-card {
//     display: flex;
//     align-items: center;
//     border-bottom: 1px solid #f2f2f2;
//     padding: 10px;
//     .title-left {
//       flex: 1;
//     }
//     .title-right {
//       flex: 2;
//       padding-left: 6px;
//       border-left: 2px solid #cccccc;
//       display: flex;
//       align-items: center;
//       .input {
//         border: none;
//         width: 100%;
//       }
//       .el-icon-search {
//         cursor: pointer;
//       }
//     }
//   }
// }

.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;
}
.details_img_box{
  border: 1px solid #ddd;
  margin-bottom: 40px;
  overflow: hidden;
  .leftbox{
    float: left;
    width: 260px;
    height: 486px;
    margin-top: 9px;
    display: flex;
    margin-bottom: 20px;
    margin-right: 30px;
    .radioCssDiv{
      .radioCss{
        height: auto;
      }
    }
  }
  .left{
    display: inline-block;
    // width: 21%;
    width: 100%;
    height: 486px;
    overflow-x: hidden;
    overflow-y: auto;
    background: #F7F7F7;
    padding: 2%;
    vertical-align: middle;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .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;
  position: relative;
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      box-sizing: border-box;
  /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%);
  }
}
.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;
    }
  }
}
.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>
