<template>
  <section class="main">
    <div class="p_all_20">
      <!-- <div class="top-container">
        <div class="first-box">
          <h3>商品推荐</h3>
          <p>通过商品推荐设置，您可将商品推荐展示在买家平台（E淘分销商城及E淘铂金卡小程序）的品牌专区、品牌店铺首页、商品详情区域等，增加流量提高销量。</p>
        </div>
        <div class="second-box">
          <h3>设置流程</h3>
          <p class="first-line">1、每个模块选择若干推荐商品</p>
          <div class="inner-box">
            <p class="arrow">----------------------------------------</p>
            <div class="right-arrow">></div>
          </div>P
          :<>"?
          <p class="third-line">优先选择库存充足的淘淘淘商品，没有上架淘淘淘的选择子商城商品</p>
        </div>
        <div class="thrid-box">
          <p class="sub-title">2、设置成功</p>
          <p>商品将展示在分销商城</p>
          <a class="link" href="/home">查看展示效果</a>
        </div>
      </div> -->
      <div>
        <div class="top">店铺banner</div>
        <el-tabs type="border-card">
          <el-tab-pane label="电脑端">
            <banner-set
            :bannerList="brandsTabs.pcBanners"
            :isPc='true'
            :isVipBrand='brandsTabs.enableCustomCategory'
            :uploadWH="[1920,480]"
            :uploadSize="2"
            ></banner-set>
          </el-tab-pane>
          <el-tab-pane label="手机端">
            <banner-set
            :bannerList="brandsTabs.appBanners"
            :isPc='false'
            :isVipBrand='brandsTabs.enableCustomCategory'
            :uploadWH="[702,240]"
            :uploadSize="1"
            ></banner-set>
          </el-tab-pane>
        </el-tabs>
      </div>
      
      <div class="bottom-container">
        <div class="top" v-if="brandsTabs.categories">
          <span>分类标签</span>
          <el-button class="addCategoryBtn" @click="addNewTable" v-if="brandsTabs.categories.length<7"> + 添加标签</el-button>
          </div>
        <el-tabs
          type="border-card"
          v-model="activeCategory"
        >
          <el-tab-pane
            v-for="(item,index) in brandsTabs.categories"
            :key="index"
            :label="item.name"
            :name="''+index"
          >
          <div slot="label" class="labelslot">
            <el-popover
              v-if="item.isDefault != 1" 
              placement="top"
              width="20"
              trigger="hover">
              <div style="text-align: center;">
                <i class="el-icon-edit blueIcon" v-if="item.enableRename" @click="editTable(item.name,item.categoryId)"></i>
                <i class="el-icon-delete blueIcon" v-if="item.enableDelete" @click="deleteTable(item.categoryId)"></i>
              </div>
              
              <span slot="reference">{{item.name}}</span>
            </el-popover>
            <span slot="reference" v-else>{{item.name}}</span>
          </div>
            <!--rightBox是显示商品分类细节的部分-->
            <div class="rightBox">
              <!--rightBox-top是-->
              <div class="rightBox-top">
                <el-button class="choseAndAdd" type="primary" @click="addNewProduct(item.productIds,item.products)">选择/更改商品</el-button>
                <p class="guild">{{Tips}}</p>
              </div>
              <!--下面是可以抓取的框架-->
              <ul class="rightBox-bottom">
                <draggable
                  v-model="item.products"
                  ghost-class="ghost"
                  @end="onEnd"
                  class="draggleable-box"
                >
                  <!-- <transition-group type="transition" name="flip-first"> -->
                  <li
                    class="goodBox"
                    v-for="(detialItem,childIndex) in item.products"
                    :key="detialItem.productId"
                    :id="detialItem.productId"
                  >
                    <!-- <div class="picBox">
                      <img class="goodsPic" :src="detialItem.productImg" alt />
                    </div>
                    <p class="goodsName">{{detialItem.productName}}</p>
                    <div class="sizeAndStock">
                      <p class="width">W:{{detialItem.width}}</p>
                      <p class="height">H:{{detialItem.height}}</p>
                      <p class="deepth">D:{{detialItem.depth}}</p>
                      <p class="stock">{{detialItem.deliveryDate}}</p>
                    </div>
                    <p class="avaliableStock">可用库存： {{detialItem.stock}}</p>
                    <p class="price">
                      零售价：
                      <span class="red">￥{{detialItem.productPrice}}</span>
                    </p>
                    <p class="wholesalePrice">
                      批发价：
                      <span class="red">￥{{detialItem.dealerPrice}}</span>
                    </p> -->
                    <SelectProductCard :item="detialItem" type="0" :border="false"/>
                    <div class="del-card" @click="delCard(childIndex)"><i class="el-icon-delete"></i></div>
                  </li>

                  <li class="addNewBox" slot="footer" @click="addNewProduct(item.productIds,item.products)">
                    <img
                      class="addNewGoods"
                      src="../../../assets/img/add_kefu.png"
                      alt
                    />
                    <p class="addANewGood" @click="addNewProduct(item.productIds,item.products)">添加商品</p>
                  </li>
                  <!-- </transition-group> -->
                </draggable>
              </ul>
              <!--上面是可以抓取的框架-->
            </div>
          </el-tab-pane>
        </el-tabs>

        <sel-pro-dialog
          :dialogVisiblePro="dialogVisible"
          :title="'选择推荐商品'"
          @changeDia="changeDialogV"
          :ids="checkIds"
          :list="checkList"
          :max="max_length"
          :min="min_length"
          ref="selPro"
          ></sel-pro-dialog>
      </div>
      <div class="saveBtnBox">
        <el-button class="" type="primary" @click="saveBtn()">保存</el-button>
        <!-- 接口已变更，若放开请和后台重新对接 -->
        <!-- <el-button class="" type="primary" plain @click="onPreview()">预览</el-button> -->
      </div>
    </div>
  </section>
</template>
<script>
import draggable from "vuedraggable";
import {  _getStorage,_saveStorage,_removeStorage, _getOssToken, _uuid } from "@/utils/utils";
import selProDialog from "./selectProductMultipleDialog"
import bannerSet from "./bannerSet"
import { mapState,mapMutations } from 'vuex'
import SelectProductCard from "@/components/common/SelectProductCard"
var uploadBox ={};
export default {
  inject:["reload"],
  name: "saleRecommend",
  data() {
    return {
      brandId: "",
      addCategory: {
        name: "",
        brandId: ""
      },
      uploadData: {keys:[],successNum:0,beforeNum:0}, // 临时存放上传文件
      dialogImageUrl: '',
      dialogVisibleImg: false,
      productTable: [],
      checkIds:[],
      checkList:[],
      activeCategory: '0',
      //////////
      brandsTabs: [],
      popoverWindowProducts: [],
      customerSelectedList: [],
      povoverCategoryId: "",
      defaultcategoryId: "",
      dialogFormVisible: false,
      form: {
        name: ""
      },
      formLabelWidth: "120px",
      index: 0,
      changeIndicate: 0,
      dialogVisible: false,
      productsNameOrCode: "",
      sortType: "1",
      click_modal: false,
      press_escape: false,
      Tips: "",
      listName: "",
      max_length: 0,
      min_length: 0,
      oldIndex: "",
      newIndex: "",
      lockScroll: true
    };
  },
  components: {
    draggable,
    selProDialog,
    bannerSet,
    SelectProductCard
  },
  // beforeRouteEnter (to, from, next) {
  //   next(vm => {
  //     if(from.path=="/marketing/preview"){
  //       vm.getSaveData();
  //     }else{
  //       vm.getDefaultData();
  //     }
  //   })
  // },
  // beforeRouteLeave(to, from, next) {
  //   this.$confirm('您还未保存，确认离开此页面?', '提示', {
  //           confirmButtonText: '确定',
  //           cancelButtonText: '取消',
  //           type: 'warning'
  //       }).then(() => {
  //         next();
  //       }).catch(() => {
  //         this.clickNavItem(4);
  //         // this.reload();
  //   });
  // },
  mounted() {
    let { brandId } = _getStorage('info');
    this.brandId=brandId;
    var data=_getStorage('storePreview');
    if(data){
      this.getSaveData();
    }else{
      this.getDefaultData();
    }
  },
  methods: {
    ...mapMutations("navBar",['clickNavItem']),
    saveBefore(arrBig){
      return new Promise((resolve, reject) => {
          for(let k0 in arrBig){
            if(arrBig[k0] && arrBig[k0].length>0){
              for(var kk in arrBig[k0]){
                if(!arrBig[k0][kk].name){
                  this.$message.error((k0==1?'手机端':'电脑端') + 'banner名称不能为空，请完善信息！')
                  return true
                }
                if(!arrBig[k0][kk].path){
                  this.$message.error((k0==1?'手机端':'电脑端') + 'banner展示图不能为空，请完善信息！')
                  return true
                }
              }
            }
          }
        resolve()
      })
    },
    saveBtn(){
      let pcBr = this.brandsTabs.pcBanners;
      let appBr = this.brandsTabs.appBanners
      this.saveBefore([pcBr,appBr]).then(res =>{
        var saveInfo={
          brandId: this.brandId,
          pcBanners: pcBr,
          appBanners: appBr,
          categories: []
        };
        for( var k in this.brandsTabs.categories){
          var obj={
              categoryId: this.brandsTabs.categories[k].categoryId,
              productIds: this.brandsTabs.categories[k].productIds
            }
            saveInfo.categories.push(obj);
        }
        this.$axios
        .post("/brandstore/save",saveInfo)
        .then(res => {
            if (res.data.code == 200) {
              this.getDefaultData();
              this.$message.success("保存成功!");
            } else {
                this.$message.error(res.data.message);
            }
        })
        .catch((err) => {
          this.$message.error(res.data.message);
        });
      })
    },
    changeDialogV(e,ids,list){
      this.dialogVisible =e;
      var i=Number(this.activeCategory);
      if(ids){
        this.brandsTabs.categories[i].productIds = ids;
      }
      if(list){
        this.brandsTabs.categories[i].products = list;
      }
    },
    onEnd(event) {
      var i=Number(this.activeCategory);  //当前分类
      let cutItIds = this.brandsTabs.categories[i].productIds.splice(event.oldIndex, 1);
      this.brandsTabs.categories[i].productIds.splice(event.newIndex, 0, cutItIds[0]);

      // this.$axios
      //   .put(this.HOST + "/v1/etao/recommend/category", {
      //     skuIds: this.customerSelectedList,
      //     categoryId: this.povoverCategoryId
      //   })
      //   .then(res => {
      //     if (res.data.code === 200) {
      //     }
      //   })
      //   .catch(err => {
      //     console.log(err);
      //   });
    },
    // },
    getSaveData(){
      var data=_getStorage('storePreview');
      this.brandsTabs = data;
      this.max_length = data.categories[0].max;
      this.min_length = data.categories[0].min;
      this.Tips = data.categories[0].tips;

      this.checkIds=this.brandsTabs.categories[0].productIds;
      this.checkList=this.brandsTabs.categories[0].products;

      _removeStorage('storePreview')
    },
    getDefaultData() {
      // debugger
      // var idx = !this.changeIndicate ? 0 : this.changeIndicate;
      // var nav_idx = !this.activeCategory ? 0 : this.activeCategory;
      this.$axios
        .get("/brandstore/setting",{
          params:{
            brandId:this.brandId
          }
        })
        .then(res => {
          if (res.data.code === 200) {
            var data=res.data.data;
            // let newactiveCategory = parseInt(this.activeCategory);
            this.brandsTabs = data;
            // this.defaultcategoryId =
            //   res.data.data.categories[idx].categoryId;
            
            this.max_length = data.categories[0].max;
            this.min_length = data.categories[0].min;
            this.Tips = data.categories[0].tips;

            for (let i = 0; i < data.categories.length; i++) {
              this.brandsTabs.categories[i].productIds=[];
              data.categories[i].products.map(r => {
                  this.brandsTabs.categories[i].productIds.push(r.productId);
              });
              
            }
            this.checkIds=this.brandsTabs.categories[0].productIds;
            this.checkList=this.brandsTabs.categories[0].products;

          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //删除标签
    deleteTable(categoryId) {
      this.$confirm("此操作将永久删除该标签, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$axios
            .delete("/brandstore/category/" + categoryId)
            .then(res => {
              if (res.data.code === 200) {
                this.changeIndicate = 0;
                this.$message.success("删除标签成功!");
                this.getDefaultData();
              }else{
                this.$message.error(res.data.message);
              }
            })
            .catch(err => {
              console.log(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    gotoVip(){
       const h = this.$createElement;
          this.$msgbox({
            message: h('p', { style: 'padding:40px 0' }, [
              h('span', null, "您当前不是铂金品牌，无法进行当前操作，请前往升级" ),
            ]),
            showCancelButton: true,
            center:true,
            confirmButtonText: '前往升级',
            cancelButtonText: '我知道了',
                      showConfirmButton:false, //先隐藏掉升级按钮
          }).then(action => {
              this.$router.push('/vippay');
          }).catch(() => {
          });
    },
    //添加标签
    addNewTable() {
      if(!this.brandsTabs.enableCustomCategory){
        this.gotoVip();
      }else{
        this.$prompt("请输入新标签名称", "新建标签", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /^.{1,6}$/,
        inputErrorMessage: "名称不能为空且不能超过6个字符"
      })
        .then(({ value }) => {
          this.$axios
            .post("/brandstore/category/add", {
              name: value,
              brandId: this.brandId
            })
            .then(res => {
              if (res.data.code === 200) {
                this.$message.success("标签新增成功!");
                this.getDefaultData();
              }else {
                this.$message.error(res.data.message);
              }
            })
            .catch(err => {
              console.log(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入"
          });
        });
      }
    },

    // changeBrand() {
    //   let newactiveCategory = parseInt(this.activeCategory);
    //   this.$axios
    //     .get(this.HOST + "/v1/etao/recommend/brand")
    //     .then(res => {
    //       if (res.data.code === 200) {
    //         this.brandsTabs = res.data.data;
    //         this.defaultcategoryId =
    //           res.data.data[newactiveCategory].category[0].categoryId;
    //         //注意，下面这个太重要，最后一个0是页面加载时默认的变色的标题的index，如果没有，页面加载时就不会变色！！！！我他妈花了1小时才发现这个问题，千万要注意啊，么么哒@@@@@
    //         this.getListDetial(
    //           this.defaultcategoryId,
    //           this.Tips,
    //           this.changeIndicate,
    //           this.max_length,
    //           this.min_length,
    //           this.listName
    //         );
    //       }
    //     })
    //     .catch(err => {
    //       console.log(err);
    //     });
    // },
    editTable(name, categoryId) {
      let e = this;
      this.$prompt("请输入新的标签名称", "编辑标签", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /^.{1,6}$/,
        inputErrorMessage: "名称不能为空且不能超过6个字符",
        inputValue: name
      })
        .then(({ value }) => {
          this.$axios
            .post("/brandstore/category/modify", {
              name: value,
              categoryId: categoryId
            })
            .then(res => {
              if (res.data.code === 200) {
                this.$message.success("标签修改成功!");
                this.getDefaultData();
              }else{
                this.$message.error(res.data.message);
              }
            })
            .catch(err => {
              console.log(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入"
          });
        });
    },
    resetList() {
      this.customerSelectedList = [];
      for (let i = 0; i < this.productTable.length; i++) {
        this.customerSelectedList.push(this.productTable[i].skuId);
      }
    },
    // getListDetial(e) {
    //   // this.povoverCategoryId = categoryId;
    //   // this.Tips = tips;
    //   // this.changeIndicate = index;
    //   this.max_length = this.brandsTabs.categories[e.index].max;
    //   this.min_length = this.brandsTabs.categories[e.index].min;
    //   this.Tips = this.brandsTabs.categories[e.index].tips;
    //   // this.listName = name;
    //   this.$axios
    //     .get("/brandstore/products/selected?categoryId=" + this.activeCategory)
    //     .then(res => {
    //       this.productTable = res.data.data;
    //       this.resetList();
    //       // console.log(this.customerSelectedList);
    //     })
    //     .catch(err => {
    //       console.log(err);
    //     });
    // },
    //删除推荐商品
    delCard(i){
      var cate=this.brandsTabs.categories[this.activeCategory];
      cate.products.splice(i,1);
      cate.productIds.splice(i,1);
    },
    //选择推荐商品
    addNewProduct(ids,list) {
      if(ids){
        this.checkIds=ids;
      }
      if(list){
        this.checkList=list;
      }
      // this.$refs.selPro.setData();
      this.dialogVisible = true;
    },
    searchAllProducts() {
      this.addNewProduct();
    },
    sortListener() {
      this.addNewProduct();
    },
    customerSelectedListener(skuId, selectedType) {
      if (selectedType && this.customerSelectedList.indexOf(skuId) === -1) {
        this.customerSelectedList.push(skuId);
      } else if (this.customerSelectedList.indexOf(skuId) !== -1) {
        this.customerSelectedList.splice(
          this.customerSelectedList.indexOf(skuId),
          1
        );
      }
    },

    saveChange() {
      this.productsNameOrCode = "";
      if (this.max_length !== -1) {
        if (this.customerSelectedList.length < this.min_length) {
          this.$message.error(
            this.listName + "里的商品不得少于" + this.min_length + "个"
          );
          return false;
        }
        if (this.customerSelectedList.length > this.max_length) {
          this.$message.error(
            this.listName + "里的商品不得大于" + this.max_length + "个"
          );
          return false;
        }
        this.submitCustomerSelectedList();
      } else {
        if (this.customerSelectedList.length < this.min_length) {
          this.$message.error(
            this.listName + "商品不得少于" + this.min_length + "个"
          );
          return false;
        }
      }
      this.submitCustomerSelectedList();
    },
    submitCustomerSelectedList() {
      this.dialogVisible = false;
      this.$axios
        .put(this.HOST + "/v1/etao/recommend/category", {
          skuIds: this.customerSelectedList,
          categoryId: this.povoverCategoryId
        })
        .then(res => {
          if (res.data.code === 200) {
            this.getListDetial(
              this.povoverCategoryId,
              this.Tips,
              this.changeIndicate,
              this.max_length,
              this.min_length,
              this.listName
            );
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    handleClose(done) {
      this.$confirm("确认关闭？所有未保存的信息都将不被保存。")
        .then(_ => {
          this.dialogVisible = false;
          this.resetList();
          this.productsNameOrCode = "";
          done();
        })
        .catch(_ => {});
    },
    //店铺预览
    onPreview(){
      _saveStorage('storePreview',this.brandsTabs);
      this.$router.push('/marketing/preview')
    }
  }
};
</script>

<style lang="scss" scoped>
.addtab{
  cursor: pointer;
}
.saveBtnBox{
  padding: 30px;
  text-align: center;
}
.top{
  padding: 20px 0;
  .addCategoryBtn{
    margin-left: 20px;
  }
}
.uploadertip{
  padding-left: 20px;
}
.updateBtn .iconText {
  text-align: center;
  color: #999;
  position: absolute;
  top: 109px;
  /*left: 42px;*/
  width: 100%;
}
.udpatebox {
  overflow: hidden;
  margin-bottom: 30px;
  padding: 15px;
}
.updateBtn {
  width: 178px;
  height: 178px;
  // background-color: #f6fafd;
  // float: left;
  display: inline-block;
  position: relative;
  cursor: pointer;
  border: 1px solid #e0e0e0;
}
.avatar-uploader >>> .el-upload--text {
  width: 178px;
  height: 178px;
}
.avatar-uploader-edit {
  display: inline-block;
}
.avatar-uploader-edit >>> .el-upload--text {
  width: 29px;
  height: 26px;
  background: inherit;
  border: none;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.labelslot{
  display: inline-block;
}
.blueIcon {
  padding: 0 10px;
  &:hover {
    cursor: pointer;
    color: blue;
  }
}
.top-container {
  display: flex;
  justify-content: flex-start;
  .first-box {
    box-sizing: border-box;
    width: 430px;
    margin-right: 50px;
    border-right: 1px dashed #ccc;
    padding-right: 37px;
    h3 {
      margin-bottom: 15px;
    }
    p {
      margin-top: 5px;
      color: #868686;
    }
  }
  .second-box {
    width: 458px;
    margin-right: 30px;

    h3 {
      margin-bottom: 15px;
    }
    .first-line {
      display: inline;
    }
    .inner-box {
      position: relative;
      display: inline;
      .arrow {
        display: inline;
        color: #ccc;
      }
      .right-arrow {
        position: absolute;
        top: 3px;
        display: inline;
        color: #ccc;
      }
    }
    .third-line {
      color: #868686;
      width: 224px;
    }
  }
  .thrid-box {
    margin-top: 28px;
    .sub-title {
      color: black;
    }
    p {
      margin-top: 5px;
      color: #868686;
    }
    .link {
      color: #0077ff;
    }
  }
}
.bottom-container {
  margin-top: 50px;
  //   display: flex;
  // justify-content: start;
  .leftBox {
    width: 20%;
    min-width: 10%;
    padding: 10px;
    .listItem {
      position: relative;
      display: flex;
      justify-content: center;
      padding: 10px 0;
      width: 100%;
      word-break: break-word;
      cursor: pointer;
      margin-bottom: 6px;
      .listDetial {
        text-align: center;
        margin: 0 auto;
      }
      .limitLength {
        text-align: center;
        width: 100%;
        word-break: break-word;
        cursor: pointer;
      }
      .OrangelimitLength {
        text-align: center;
        width: 100%;
        word-break: break-word;
        cursor: pointer;
        color: #ff8331;
      }
      .hide {
        display: none;
      }
      .iconBox {
        z-index: 2002;
        position: absolute;
        display: flex;
        justify-content: space-around;
        background: #fff;
        font-size: 14px;
        left: 120px;
        width: 40px;
        min-width: 100px;
        border-radius: 4px;
        border: 1px solid #ebeef5;
        padding: 12px;
        color: #606266;
        line-height: 1.4;
        text-align: justify;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        transform-origin: center bottom;
        bottom: -4px;
      }
    }
    .newListItem {
      width: 100%;
      margin-top: 15px;
    }
  }
  .rightBox {
    // width: 80%;
    // min-width: 90%;
    padding: 10px;
    .rightBox-top {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .choseAndAdd {
        margin-right: 20px;
      }
      .guild {
        font-family: "微软雅黑 Regular", "微软雅黑";
        width: 80%;
        font-weight: 400;
        font-style: normal;
        color: #868686;
      }
    }
    .rightBox-bottom {
      width: 1026px;
      display: flex;
      margin: 30px auto;
      flex-wrap: wrap;
      .draggleable-box {
        display: flex;
        flex-wrap: wrap;
        .goodBox {
          cursor: pointer;
          box-sizing: content-box;
          // text-align: center;
          border: 1px solid #e0e0e0;
          height: 350px;
          margin: 7px;
          background: #ffffff;
          position: relative;
          width: 240px;
          .picBox {
            width: 200px;
            height: 200px;
            padding: 10px;
            margin: 0 auto;
            .goodsPic {
              width: 200px;
              height: 200px;
            }
          }
          .goodsName {
            width: 220px;
            padding: 0 10px;
            font-size: 14px;
            color: #515151;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
          }
          .sizeAndStock {
            overflow: hidden;
            padding: 10px;
            font-size: 13px;
            color: #7d7d7d;
            .width {
              float: left;
              padding-right: 5px;
            }
            .height {
              float: left;
              padding: 0 5px;
            }
            .deepth {
              float: left;
              padding: 0 5px;
            }
            .stock {
              float: right;
            }
          }
          .avaliableStock {
            text-align: start;
            padding: 0 10px;
            font-size: 13px;
            color: #7d7d7d;
          }
          .price {
            text-align: start;
            padding: 10px 10px;
            font-size: 13px;
            color: #7d7d7d;
          }
          .wholesalePrice {
            text-align: start;
            padding: 0 10px 10px 10px;
            font-size: 13px;
            color: #7d7d7d;
            .red {
              color: #ff0000;
            }
          }
          .del-card{
            display: none;
            background: #000;
            color: #fff;
            opacity:0.47;
            width: 100%;
            height:38px;
            line-height: 38px;
            font-size: 16px;
            position: absolute;
            bottom: 0;
            text-align: center;
          }
          &:hover .del-card{
            display: block;
          }
        }
      }

      .addNewBox {
        cursor: pointer;
        text-align: center;
        border: 1px solid #e0e0e0;
        height: 350px;
        margin: 7px;
        background: #ffffff;
        position: relative;
        width: 240px;
        .addNewGoods {
          width: 70px;
          height: 70px;
          margin-top: 100px;
          cursor: pointer;
        }
        .addANewGood {
          color: #ff6600;
          cursor: pointer;
          margin-top: 10px;
        }
      }
    }
  }
  .searchWrapper {
    display: flex;
    justify-content: center;
    margin-top: 40px;
    .SearchAll {
      margin-right: 10px;
      width: 270px;
    }
    .input-select {
    }
  }
  .productsList {
    margin: 0 auto;
    max-width: 816px;
    margin-top: 50px;
    .scrollBox {
      display: flex;
      flex-wrap: wrap;
      margin-top: 30px;
      height: 520px;
      overflow: scroll;
      box-sizing: content-box;
      padding-bottom: 50px;
      .goodBox {
        position: relative;
        box-sizing: content-box;
        text-align: center;
        border: 1px solid #e0e0e0;
        height: 350px;
        margin: 7px;
        background: #ffffff;

        .picBox {
          width: 200px;
          height: 200px;
          padding: 10px;
          margin: 0 auto;
          .goodsPic {
            width: 200px;
            height: 200px;
          }
        }
        .goodsName {
          width: 220px;
          padding: 0 10px;
          font-size: 14px;
          color: #515151;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
        .sizeAndStock {
          overflow: hidden;
          padding: 10px;
          font-size: 13px;
          color: #7d7d7d;
          .width {
            float: left;
            padding-right: 5px;
          }
          .height {
            float: left;
            padding: 0 5px;
          }
          .deepth {
            float: left;
            padding: 0 5px;
          }
          .stock {
            float: right;
          }
        }
        .avaliableStock {
          text-align: start;
          padding: 0 10px;
          font-size: 13px;
          color: #7d7d7d;
        }
        .price {
          text-align: start;
          padding: 10px 10px;
          font-size: 13px;
          color: #7d7d7d;
        }
        .wholesalePrice {
          text-align: start;
          padding: 0 10px 10px 10px;
          font-size: 13px;
          color: #7d7d7d;
          .red {
            color: #ff0000;
          }
        }
      }
    }
  }
}
</style>

<style scoped>
/deep/ .el-tabs__new-tab{
  margin: 12px;
}

>>> .custormSelect {
  position: absolute;
  top: 20px;
  left: 20px;
}


>>> .el-popover .el-popper {
  min-width: 0 !important;
}
</style>
