<template>
  <section class="main p_all_20">

<div class="" v-loading="loading"  element-loading-text="加载中">
  <div id="brandBigbox">
    <el-tabs v-model="activeName">
      <el-tab-pane :label="titleLabel" name="first"></el-tab-pane>
    </el-tabs>
    <div class="brandContent">
      <div class="updatebig">
        <div class="updateBtnBig mRight updateShow">
          <div class="updateShowImg" v-if="planInfo.coverPath && planInfo.coverPath != ''">
            <div class="imgBox">
              <img :src="planInfo.coverPath" class="preview imageLen" alt="">
            </div>
            <div class="btnBox">
              <!-- 编辑 -->
                <el-upload
                  class="avatar-uploader-edit"
                  :action="uploadData.host|| '' "
                  :show-file-list="false"
                  :on-success="handleSuccessEdit"
                  :before-upload="beforeUpload"
                  :data="uploadData"
                  name='file'
                  >
                  <i class="editdelBtn editBtn el-icon-edit-outline" @click="editBtn(1)"></i>
                </el-upload>
              <span class="editdelBtn delBtn el-icon-delete" @click="delBtn(1)"></span>
            </div>
          </div>
          <div v-else class="uploadbox">
            <el-upload
              class="avatar-uploader"
              :action="uploadData.host|| '' "
              :show-file-list="false"
              :on-success="handleSuccess"
              :before-upload="beforeUpload"
              :data="uploadData"
              name='file'
              >
              <i class="el-icon-plus avatar-uploader-icon" @click="isEdit=0"></i>
            </el-upload>
            <p class="iconText">方案封面</p>
          </div>
        </div>
          <div class="updateBtnBig updateShow">
            <div class="updateShowImg" v-if="planInfo.videoPath && planInfo.videoPath != ''">
              <div class="imgBox">
                <video controls="" class="videoBox" :src="planInfo.videoPath"></video>
              </div>
              <div class="btnBox">
                <!-- 编辑 视频-->
                <el-upload
                  class="avatar-uploader-edit"
                  :action="uploadData.host|| '' "
                  :show-file-list="false"
                  :on-success="handleSuccessEdit"
                  :before-upload="beforeUploadVideo"
                  :data="uploadData"
                  name='file'
                  >
                  <i class="editdelBtn editBtn el-icon-edit-outline" @click="editBtn(2)"></i>
                </el-upload>
                <!-- 删除，视频 -->
                <span class="editdelBtn delBtn el-icon-delete" @click="delBtn(2)"></span>
              </div>
            </div>
            <div v-else class="uploadbox">
              <el-upload
                class="avatar-uploader"
                :action="uploadData.host|| '' "
                :show-file-list="false"
                :on-success="handleSuccessVideo"
                :before-upload="beforeUploadVideo"
                :data="uploadData"
                name='file'
                >
                <i class="el-icon-plus avatar-uploader-icon" @click="isEdit=0"></i>
              </el-upload>
              <p class="iconText">方案视频介绍（非必填）</p>
            </div>
          </div>

      </div>
      <div class="updatebig updatebig2">
        <div class="leftL mRight">
          <div class="input111 input1 ">
            <el-input
              type="text"
              placeholder="请输入方案标题..."
              v-model="planInfo.title"
              maxlength="10"
              show-word-limit
            ></el-input>
          </div>
          <div class="input111 input2">
            <el-input
              type="textarea"
              placeholder="请输入方案简介..."
              v-model="planInfo.introduction"
              maxlength="100"
              show-word-limit
            ></el-input>
          </div>
        </div>
        <div class="rightR select_box" id="select_box">
          <div class="selectLine selectLine1">
            <span class="selectTit">空间：</span>
            <el-select v-model="planInfo.space" multiple placeholder="请选择">
              <el-option
                v-for="item in spaceOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="selectLine selectLine2">
            <span class="selectTit">风格：</span>
            <el-select v-model="planInfo.style" multiple placeholder="请选择">
              <el-option
                v-for="item in styleOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="selectLine selectLine2">
            <span class="selectTit">面积：</span>
            <el-select v-model="planInfo.area" multiple placeholder="请选择">
              <el-option
                v-for="item in areaOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="selectLine selectLine2">
            <span class="selectTit">预算：</span>
            <el-select v-model="planInfo.budget" multiple placeholder="请选择">
              <el-option
                v-for="item in budgetOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
          </div>

        </div>
      </div>
      <div class="showBox" id="showBox">
        <div class="updateShow" v-for="(item,index) in planInfo.planImgList" :key="index">
          <div class="updateShowImg">
            <div class="imgBox">
              <img :src="item.imgPath" class="preview imageLen" alt="">
            </div>
            <div class="btnBox">
              <!-- 编辑 -->
                <el-upload
                  class="avatar-uploader-edit"
                  :action="uploadData.host|| '' "
                  :show-file-list="false"
                  :on-success="handleSuccessEdit"
                  :before-upload="beforeUpload"
                  :data="uploadData"
                  name='file'
                  >
                  <i class="editdelBtn editBtn el-icon-edit-outline" @click="editBtn(3,index)"></i>
                </el-upload>
                <!-- 删除 -->
              <span class="editdelBtn delBtn el-icon-delete" @click="delBtn(3,index)"></span>
            </div>
          </div>
          <div class="updateShowText">
            <el-input
              type="textarea"
              placeholder="编辑文案"
              v-model="item.description"
            ></el-input>
          </div>
        </div>
      </div>
      <div class="update1">
        <div class="udpatebox">
          <div class="updateBtn">
            <el-upload
            class="avatar-uploader"
            :action="uploadData.host|| '' "
            :show-file-list="false"
            :on-success="handleSuccessList"
            :before-upload="beforeUpload"
            :data="uploadData"
            name='file'
            >
            <i class="el-icon-plus avatar-uploader-icon" @click="isEdit=0"></i>
          </el-upload>
          <p class="iconText">添加方案图片</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 商品橱窗 -->
    <div class="product-box">
      <!-- 商品列表 -->
      <p class="titleP">关联方案商品(<span class="actNum">{{planInfo.goodsList.length}}</span>/<span class="totalCss">10</span>)</p>
      <div class="product_wrap">
        <div class="product_box" v-for="(item,index) in planInfo.goodsList" :key="index">
          <div class="product_item">
            <!-- <span class="delPitem check_produce" @click="delPitem(index)">x</span> -->
            <div class="delPitem check_produce" @click="delPitem(index)"><i class="el-icon-delete"></i></div>
            <div class="product_pic_box">
              <img class="product_pic" :src="item.productImg+'?x-oss-process=image/resize,h_250,w_250'">
                <img v-if="item.goodsChildStatus==1" class="jiaobiao" src="@/assets/img/zi_x1.png">
                <img v-if="item.goodsChildStatus==2" class="jiaobiao" src="@/assets/img/tao_x1.png">
            </div>
            <div class="product_info">
              <p class="product_name">{{item.productName}}</p>
              <p class="retail">可用库存：{{item.stock}}<span class="stock">{{item.deliveryDate}}</span></p>
              <p class="retail">零售价：<span class="retail_price">￥{{item.productPrice}}</span></p>
              <p class="retail">优惠价：<span class="retail_price">￥{{item.mallSalePrice}}</span></p>
              <p class="retail">批发价：<span class="trade_price">￥{{item.dealerPrice}}</span></p>
            </div>
          </div>
        </div>
        <div class="product_box_add" v-if="planInfo.goodsList.length<10" @click="showGoodsList">
          <div class="product_txt">
            <p class="el-icon-plus"></p>
            <p class="add_tip">添加方案商品</p>
          </div>
        </div>
      </div>
      <!-- 商品弹窗 -->
      <el-dialog class="my_alert_produce_dialog" title="选择关联方案商品" :visible.sync="dialogTableVisible">
        <div class="search_product">
          <el-input placeholder="商品名称" v-model="selectProSearch" class="input-with-select"></el-input>
          <el-button type="primary" class="proSearch" @click="getProductList">搜索</el-button>
        </div>
        <div class="my_alert_produce_box" v-loading="loading" v-if="goodsListSelect.length>0">
          <div class="my_alert_left my_alert_produce" id="alert_list_box">
            <div class="produce_list" id="produce_list">
              <div class="produce_list_li" :class="{active:index==ins}" v-for="(goods,index) in goodsListSelect" :key="index" @click="getGoodsJson(goods,index)">
                <div class="produce_img">
                  <img :src="goods.productImg+'?x-oss-process=image/resize,h_250,w_250'" alt=" ">
                </div>
                <div class="produce_text">
                  <p class="produce_text_tit">{{goods.productName}}</p>
                  <p class="produce_price">¥{{goods.dealerPrice}}</p>
                </div>
              </div>
            </div>
          </div>
          <div class="my_alert_right">
            <div id="produce_info">
              <div class="produceimgBig">
                <img :src="goodsJson.productImg+'?x-oss-process=image/resize,h_250,w_250'" class="produceImgsize" alt=" ">
              </div>
              <p class="pName">{{goodsJson.productName}}</p>
              <p class="pPrice">¥{{goodsJson.dealerPrice}}</p>
              <ul class="pInfo">
                <li v-for="(item,index) in goodsJson.goodsJson" :key="index">
                  <span class="s1">{{item.name}}</span>
                  <span class="s2">{{item.value}}</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="no_goods" v-else>暂无商品~</div>
        <div slot="footer" class="dialog-footer">
          <el-pagination
            background
            class="fenye"
            @current-change="handleCurrentChange"
            layout="prev, pager, next"
            :total="total">
          </el-pagination>
          <el-button @click="dialogTableVisible = false">取 消</el-button>
          <el-button  v-if="goodsListSelect.length>0" type="primary" @click="selectOk()">确 定</el-button>
        </div>
      </el-dialog>

    </div>

    <div class="saveBtnBox">
      <el-button class="" type="primary" @click="saveBtn()">保存</el-button>
      <el-button class="" type="primary" plain @click="onBack()">取消</el-button>
    </div>
  </div>
  </section>
</template>

<script>
// import {area} from '@/util/minAreaDate'
import { _uuid, _getOssToken, _getStorage } from '@/utils/utils'
export default {
  data() {
    return {
      // show:false,
      planId:'',
      brandId:'',
      loading:false,
      activeName: 'first',
      uploadData:{},
      titleLabel:"创建新方案",
      dialogTableVisible:false,
      selectProSearch:'',
      planInfo:{
        planId: "",
        coverPath: "",
        videoPath: "",
        title: "",
        introduction: "",
        space: [],
        style: [],
        area: [],
        budget: [],
        brandId: "",
        planImgList: [],
        goodsList: []
      },
      goodsListSelect:[],
      goodsJson:{},
      total:0,
      currentPage:1,
      ins:0,
      areaOptions:[],
      spaceOptions:[],
      styleOptions:[],
      budgetOptions:[],
      type:NaN,
      index:"",
    }
  },
  components: {
  },
  mounted() {
    let { brandId } = _getStorage('info');
    this.brandId=brandId;
    var route=this.$route;
    var planId=route.query.planId || '';
    this.planId =planId;
    
    if(planId){
      this.titleLabel = "编辑方案";
      this.getTplData();
    }
    this.getProductList();
    this.getOptions();
  },
  methods: {
    //获取方案详情
    getTplData(){
      this.loading=true;
      this.$axios.get("/brand/scheme/"+this.planId).then((res)=>{
        if(res.data.code==200){
          var data=res.data.data;
          data.area = this.setOptionsArray(data.area);
          data.budget = this.setOptionsArray(data.budget);
          data.space = this.setOptionsArray(data.space);
          data.style = this.setOptionsArray(data.style);
          this.planInfo=data;
          this.loading=false;
        }
      }).catch(()=>{
        this.loading=false;
      })
    },
    //获取多选框选项数据
    getOptions(){
      this.$axios.get("/brand/scheme/dict").then((res)=>{
        if(res.data.code==200){
          var data=res.data.data;
          var area=data.area;
          var budget=data.budget;
          var space=data.space;
          var style=data.style;
          this.areaOptions=this.setOptions(area);
          this.budgetOptions=this.setOptions(budget);
          this.spaceOptions=this.setOptions(space);
          this.styleOptions=this.setOptions(style);
        }
      }).catch(()=>{
      })
    },
    //建立多选框选项
    setOptions(list){
      var arr=[];
      for(let i=0;i<list.length;i++){
        var item={
          value: list[i].name,
          label: list[i].name
        }
        arr.push(item);
      }
      return arr;
    },
    //多选框选项数组转换成字符串
    setOptionsString(list){
      var str="";
      str = list.join(',');
      return str;
    },
    //多选框选项数字符串换成数组
    setOptionsArray(str){
      var arr=[];
      if(str && str != ""){
        arr = str.split(',');
      }
      return arr;
    },
    //刪除关联商品
    delPitem(index){
      this.$confirm('确定要删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.planInfo.goodsList.splice(index,1);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //获取弹出框关联商品总列表
    getProductList(){
      this.loading=true;
      var params= {
            brandId:this.brandId,
            page:this.currentPage,
            pageSize:9,
            keyword: this.selectProSearch,
          }
      this.$axios.get("/products/listForChoose",{
        params:params
      }).then((res)=>{
        if(res.data.code==200){
          this.goodsListSelect=res.data.data.list;
          if(res.data.data.list.length>0){
            this.goodsJson=res.data.data.list[0];
          }else{
            this.goodsJson={};
          }
          this.total=parseInt(res.data.data.total);
          this.loading=false;
        }
      }).catch(()=>{
        this.loading=false;
      })
    },
    //点击某关联商品，获取该商品详情
    getGoodsJson(data,index){
      this.goodsJson=data;
      this.ins=index;
    },
    //确认选择商品
    selectOk(){
      var goods=this.goodsJson;
      var arr={
        "goodsId":goods.productId,
        //商品图片地址
        "productImg": goods.productImg,
        //子商城商品：1=子商城商品
        "goodsChildStatus": goods.goodsChildStatus,
        //零售价
        "productPrice": goods.productPrice,
        //批发价
        "dealerPrice": goods.dealerPrice,
        //交货期
        "deliveryDate": goods.deliveryDate,
        //库存
        "stock": goods.stock,
        //商品名称
        "productName": goods.productName,
        //优惠价
        "mallSalePrice": goods.mallSalePrice
      }
      this.planInfo.goodsList.push(arr);
      this.dialogTableVisible = false;
    },
    //返回
    onBack(){
      this.$router.back();
    },
    showGoodsList(){
      this.dialogTableVisible = true;
    },
    handleCurrentChange(val){
      this.currentPage = val;
      this.getProductList();
    },
    //保存详情
    saveBtn(){
      this.planInfo.brandId=this.brandId;
      var saveInfo=Object.assign({}, this.planInfo);
      saveInfo.area = this.setOptionsString(this.planInfo.area);
      saveInfo.budget = this.setOptionsString(this.planInfo.budget);
      saveInfo.space = this.setOptionsString(this.planInfo.space);
      saveInfo.style = this.setOptionsString(this.planInfo.style);
      if(this.planId === ''){
        this.saveAdd(saveInfo);
      }else{
        this.saveModify(saveInfo);
      }
    },
    //新增详情保存
    saveAdd(saveInfo){
      this.$axios.post('/brand/scheme/add',
        saveInfo
      ).then((res) => {
        if(res.data.code==200){
          // this.$router.push({path:'/marketing/brandintroduce'});
          this.onBack();
          this.$message.success("保存成功");
        }else{
          this.$message.error(res.data.message);
        }
      }).catch(()=>{})
    },
    //编辑详情保存
    saveModify(saveInfo){
      this.$axios.post('/brand/scheme/modify',
        saveInfo
      ).then((res) => {
        if(res.data.code==200){
          // this.$router.push({path:'/marketing/brandintroduce'});
          this.onBack();
          this.$message.success("保存成功");
        }else{
          this.$message.error(res.data.message);
        }
      }).catch(()=>{})
    },
    //删除图片或视频  1-方案封面  2-方案视频  3-方案图片
    delBtn(type,index){
      this.$confirm('确定要删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if(type==1){
          this.planInfo.coverPath="";
          // this.coverImgShow=false;
        }else if(type==2){
          this.planInfo.videoPath="";
          // this.videoImgShow=false;
        }else{
          this.planInfo.planImgList.splice(index,1);
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    editBtn(type,index){
      // 修改前赋值
      this.type = type
      this.index = index?index:""
      // debugger
    },
    // 上传图片(编辑)
        handleSuccessEdit(res, file, fileList) {
          // 1-方案封面  2-方案视频  3-方案图片
          var path = this.uploadData.host + "/" + this.uploadData.key
          if(this.type == 1){
            this.planInfo.coverPath = path
          }else if(this.type == 2){
            this.planInfo.videoPath = ""
            this.planInfo.videoPath = path
          }else if(this.type == 3){
            for(let i in this.planInfo.planImgList){
              if(i == this.index){
                this.planInfo.planImgList[i].imgPath = path
              }
            }
          }

          this.uploadData = {};
          this.loading=false;
        },
    // 上传图片（方案图片）
    handleSuccessList(res, file, fileList) {
      var imgInfo={
        "imgPath":this.uploadData.host + '/' + this.uploadData.key,
        "description":"",
        "sort":this.planInfo.planImgList.length+1
      }
      this.planInfo.planImgList.push(imgInfo);
      this.uploadData = {};
      this.loading=false;
    },
    // 上传图片（方案封面）
    handleSuccess(res, file, fileList) {
      this.planInfo.coverPath=this.uploadData.host + '/' + this.uploadData.key;
      // this.coverImgShow=true;
      this.uploadData = {};
      this.loading=false;
    },
    beforeUpload(file) {
      if (file.type.indexOf("image/") == -1) {
        this.$message.error('请上传图片格式文件');
        return false;
      }
      if(file.size>2*1024*1024){
        this.$message.error('图片大小不能超过2M');
        return false;
      }
      this.loading=true;
      return new Promise((resolve, reject) => {
        _getOssToken.call(this, null).then((res) => {
          let fileExt = /\.[^\.]+$/.exec(file.name);
          this.uploadData = res;
          this.uploadData.key = 'resource/avatar/sjback' + _uuid() + fileExt;
          resolve();
        }).catch((err) => {
          reject(err)
        })
      })
    },
    //上传视频
    handleSuccessVideo(res, file, fileList) {
      this.planInfo.videoPath=this.uploadData.host + '/' + this.uploadData.key;
      // this.videoImgShow=true;
      this.uploadData = {};
      this.loading=false;
    },
    beforeUploadVideo(file) {
      if (file.type.indexOf("video/") == -1) {
        this.$message.error('请上传视频格式文件');
        return false;
      }
      if(file.size>200*1024*1024){
        this.$message.error('视频大小不能超过200M');
        return false;
      }
      this.loading=true;
      return new Promise((resolve, reject) => {
        _getOssToken.call(this, null).then((res) => {
          let fileExt = /\.[^\.]+$/.exec(file.name);
          this.uploadData = res;
          this.uploadData.key = 'resource/avatar/sjback' + _uuid() + fileExt;
          resolve();
        }).catch((err) => {
          reject(err)
        })
      })
    },
  }
};
</script>

<style lang="scss" scoped>
#brandBigbox{
    .el-select{
      width: 387px
    }
    >>>.el-upload{
      width: 100%;
    }
}
img{
  max-width: 100%;
  max-height: 100%;
}
.avatar-uploader-edit{
  display: inline-block;
}
.no_goods{
  text-align: center;
  font-size: 20px;
  padding: 50px;
  color: #999;
}
.trade_price{
    display: inline-block;
    width: 73%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #FF0000;
    position: absolute;
}
.stock{
    position: absolute;
    top: 0;
    right: 0;
}
.retail{
    position: relative;
    font-size: 13px;
    line-height: 16px;
}
.product_name{
    font-size: 14px;
    color: #515151;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    padding: 15px 0;
}
.product_info{
    padding: 0 12px;
}
.jiaobiao{
    position: absolute;
    left: 12px;
    bottom: 0;
}
.product_pic_box{
    height: 200px;
    text-align: center;
    position: relative;
}
.product_box{
  position: relative
}
.product_box .check_produce {
  text-align: center;
    display: none;
    background: #000;
    color: #fff;
    opacity: 0.47;
    width: 100%;
    height: 38px;
    line-height: 38px;
    font-size: 16px;
    position: absolute;
    bottom: 0;
    cursor: pointer;
}
.product_box:hover .check_produce{display:block;}
  .fenye{
    float: left;
  }
  .my_alert_left .active{
    border: 2px solid #6795ec;
  }
.my_alert_right .produceimgBig {
    background: #fff;
    width: 430px;
    height: 260px;
    position: relative;
    overflow: hidden;
}
.my_alert_right .produceimgBig img {
    display: block;
    max-width: 100%;
    width: 250px;
    height: 250px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.my_alert_right .pName {
    padding: 10px 0;
    line-height: 20px;
}
.my_alert_right .pPrice {
    color: red;
}
.my_alert_right .pInfo {
    background: #fff;
    margin: 20px 0;
}
.my_alert_right .pInfo li {
    display: flex;
    border-bottom: 1px solid #f2f2f2;
    width: 100%;
    overflow: hidden;
}
.my_alert_right .pInfo li span.s1 {
    min-width: 28%;
    border-right: 1px solid #f2f2f2;
    padding: 10px;
    text-align: center;
}
.my_alert_right .pInfo li .s2 {
    width: 70%;
    padding: 10px;
    text-align: center;
}
  .my_alert_produce_dialog .el-dialog__body{
    background: #f2f2f2;
  }
.produce_list_li {
    display: block;
    margin-bottom: 10px;
    background: #fff;
    border: 2px solid #fff;
    border-radius: 8px;
    overflow: hidden;
    height: 110px;
    cursor: pointer;
}
.produce_img {
    width: 110px;
    height: 110px;
    overflow: hidden;
    float: left;
}
.produce_img img {
    display: inline-block;
    max-width: 100%;
    width: 100%;
}
.produce_text {
    width: 60%;
    height: 100%;
    margin-left: 10px;
    float: left;
    position: relative;
    padding:  20px 0;
}
.produce_text_tit {
    vertical-align: top;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 20px;
}
.produce_price {
    padding-top: 30px;
    color: red;
}
  .input-with-select{
    width: 282px;
    padding-bottom: 10px;
  }
  .my_alert_produce_dialog .el-dialog{
    width: 865px;
  }
  .my_alert_produce_box{
    height: 612px;
  }
  .my_alert_left {
    float: left;
    width: 340px;
    height: 100%;
    border-right: 1px solid #ccc;
    padding-right: 15px;
    overflow: auto;
}
.my_alert_right {
    float: left;
    padding: 0 15px;
    width: 430px;
    height: 100%;
    overflow-y: auto;
}
  .product_txt{
    position: absolute;
    top: 137px;
    width: 100%;
  }
  .product_txt .el-icon-plus{
    font-size: 40px;
    padding-bottom: 5px;
  }
  .product_box_add{
    background-color: #fff;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 220px;
    height: 350px;
    text-align: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    color: #8c939d;
    display: inline-block;
    margin-bottom: 10px;
  }
  .product_box{
    background-color: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    width: 220px;
    height: 350px;
    overflow: hidden;
    color: #8c939d;
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
  }
  .product_wrap{
    padding: 0 40px;
  }
  .updateShow{
    padding-bottom: 10px;
    position: relative;
  }
  .updateShowText{
    padding: 10px 0;
  }
  .showBox{
    width: 440px;
    padding-left: 40px;
  }
  .videoBox{
    width: 100%;
    height: 250px;
  }
  .imgBox{
    text-align: center;
    height: 250px;
  }
  .imgBox img{
    max-width: 100%;
    max-height: 100%;
  }
    .updateBtn .avatar-uploader-icon {
      line-height: 178px;
    }
    .avatar-uploader-icon {
      font-size: 40px;
      color: #8c939d;
      line-height: 250px;
      text-align: center;
    }
    .updateBtn .iconText{
      top: 115px;
    }
    .iconText{
      position: absolute;
      top: 150px;
      width: 100%;
      text-align: center;
      color: #999;
    }
    .avatar-uploader{
      height: 100%;
    }
    .udpatebox .el-upload--text{
      width: 100%;
      height: 178px;
    }
    .el-upload--text{
      width: 100%;
      width: 100%;
      height: auto;
      background: transparent;
      border: none;
      vertical-align: sub;
    }
.recommend_wrap {display: inline-block;box-shadow: 1px 0 5px #ccc;background: #fff;padding: 30px;}
    .ulBox {position:absolute;bottom:-1px;background-color:#fff;}
    .brand_nav {white-space: nowrap;font-size: 0;}
    .brand_nav .listName{display: inline-block;color: #797979;font-size: 14px;padding: 12px 40px;border-right:1px solid #E4E4E4;background: #fff;cursor: pointer;border-top:2px solid #E4E4E4;}
    .brand_nav .actCss {background:#fff;border-top:2px solid #f60;}

    .goback{position:absolute;right:30px;top:6px;border:1px solid #E4E4E4;border-radius:4px;padding:5px 16px;color:#797979;font-size:14px;cursor:pointer;}
    .brandContent{padding:40px;padding-bottom:0;}
    .updatebig{overflow:hidden;}
    .updatebig2{margin-top:30px;}
    .mRight{margin-right:50px;}
    .udpatebox{overflow:hidden;margin-bottom:30px;}
    .updateBtnBig{width:438px;height:250px;background-color:#fff;float:left;position:relative;overflow:hidden;}
    .updateBtn{
      width:178px;height:178px;background-color:#fff;float:left;position:relative;
          border: 1px dashed #d9d9d9;
    border-radius: 6px;
      }
    .upInput{border:1px solid red;width:100%;height:100%;opacity:0;position:absolute;z-index:1;cursor:pointer;}
    .iconUp{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
    .iconImg{width:60px;display:block;margin:0 auto;}
    .leftL,.rightR{float:left;width:438px;}
    input[type="text"]::-webkit-input-placeholder {color: #aab2bd;font-size: 12px;padding-left:4px;}
    .input111{border-bottom:1px solid #E4E4E4;position:relative;}
    .input1{width:100%;margin-bottom: 10px;}
    .input1 .inputTitle{height:36px;line-height:36px;outline:none;border:none;}
    .inputTitle,.inputJie{width:100%;outline:none;border:none;}
    .inputJie{min-height:100px;margin-top:20px;vertical-align:top;display:inline-block;}
    .tipsNum{position:absolute;right:20px;bottom:10px;color:#999;}
    .update1{margin-top:20px;padding: 0 40px;}
    .uploadbox{
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
    }
    .titleP{padding:20px 40px;}
    .totalCss{color:#f60;}

    .saveBtnBox{padding:20px;padding-left:40px;cursor:pointer;}
    .saveBtnBox .saveBtn{background:#409eff;color:#fff;width:100px;height:38px;line-height:38px;text-align:center;border-radius:4px;display:inline-block;margin-right:20px;border:1px solid #409eff;}
    .saveBtnBox .close_btn{background-color:#fff;border:1px solid #409eff;color:#409eff;}
    .saveBtnBox .close_btn a{display:block;width:100%;}

    .updatebig .updateShow {float:left;}
    .select_box{
          position:relative;
      }
      .selectLine{
            margin-bottom: 10px;
      }
      .editdelBtn{display:inline-block;cursor: pointer;color: #fff;font-size: 30px;}
      .btnBox{position:absolute;top:10px;right:10px;z-index:1;display:none;background:rgba(0,0,0,0.4);border-radius:4px;padding:4px 2px 2px;}
      .updateShowImg:hover .btnBox{display:block;}
      .updateShowImg{
        border: 1px dashed #d9d9d9;
      }
</style>
