<template>
  <div class="main-box">
    <div class="header" ref="elementHeader">
      <div class="container-product">
        <div class="products">
          <div class="productLogo">
            <img :src="brandInfo.brandLogo">
          </div>
        </div>
        <!-- <div class="products" v-for=" item in topProductFor3" :key="item.productId">
          <div class="productImg">
            <img :src="item.productImg">
          </div>
          <div class="productDetial">
            <p>{{item.productName}}</p>

              <p class="money">￥{{item.dealerPrice}}</p>

            <span class="looks">查看详情&gt;</span>
          </div>
        </div> -->
      </div>
      <div class="containerTool">
        <div class="tools" @click="showSelect=!showSelect">
          <div class="active">首页<i class="el-icon-arrow-down"></i></div>
        </div>
        <div class="drop-down" v-show="showSelect">
          <ul @click="showSelect=!showSelect">
            <a :href="'#category'+index" v-for="(category,index) in dataInfo.categories" :key="index" v-show="index!=0"><li>{{category.name}}</li></a>
            <a href="#category99"><li>全部商品</li></a>
          </ul>
        </div>	
      </div>
      <div v-if="dataInfo.pcBanners.length>0">
        <el-carousel :interval="3000" height="500px" arrow="never">
          <el-carousel-item v-for="(img,index) in dataInfo.pcBanners" :key="index">
            <img class="carousel_img" :src="img.path">
          </el-carousel-item>
        </el-carousel>
      </div>
      
    </div>
    <div class="mainBody">
      <div class="center-outer-container auto-center">
        <div v-for="(category,index) in dataInfo.categories" :key="index">
          <div v-if="index!=0 && category.products.length>0">
            <div class="title">
              <img src="@/assets/img/tit-left.png" alt="">
              <span>{{category.name}}</span>
              <img src="@/assets/img/tit-right.png" alt="">
              <span class="point" :id="'category'+index"></span>
            </div>
            <div class="productList">
              <ProductGroup :items="category.products" :span='5' :gutter='10'/>
              <!-- <div class="card">
                <div class="img">
                  <img class="lazy" :src="item.productImg" style="display: inline;">
                </div>                  
                  <div class="container-fluid row">
                    <div class="txt">
                        <el-row class="name">{{item.productName}}</el-row>
                        <el-row>
                          <el-col :span="12" class="sm-txt">W:{{item.width}} H:{{item.height}} D:{{item.depth}}</el-col>
                          <el-col :span="12" class="text-right sm-txt">{{item.deliveryDate}}</el-col>
                        </el-row>
                      <el-row>
                          <el-col :span="12">零售价:￥{{item.productPrice}}</el-col>
                          <el-col :span="12" class="text-right stock">工厂库存:{{item.stock}}</el-col>
                        </el-row>
                        <el-row class="">优惠价:￥{{item.mallSalePrice}}</el-row>
                        <el-row class="">批发价:<span class="red">￥{{item.dealerPrice}}</span></el-row>
                    </div>
                  </div>
              </div> -->
            </div>
          </div>
          <div style="clear: both;"></div>
        </div>
        <div>
          <div class="title">
            <img src="@/assets/img/tit-left.png" alt="">
            <span>全部商品</span>
            <img src="@/assets/img/tit-right.png" alt="">
            <span class="point" id="category99"></span>
          </div>
          <div class="search">
              <ul class="col-xs-6 left left_box">
                <li :class="activeIndex==99?'active':''" @click="sortClick(99)">综合排序</li>
                <li 
                :class="{'sort':true, 'active up': activeIndex==index &&params.sort==item.up, 'active down': activeIndex==index &&params.sort==item.down}"
                v-for="(item,index) in sortTitle" 
                :key="index"
                 @click="sortClick(index)"
                >{{item.name}}</li>
                <!-- <li class="col-xs-3 sort" data-sort="DESC" data-name="productShelfTimeOrder">新品</li>
                <li class="col-xs-3 sort" data-sort="DESC" data-name="sellOrder">销量</li>
                <li class="col-xs-3 sort" data-sort="DESC" data-name="productPriceOrder">价格</li> -->
              </ul>
              <div class="col-xs-6 right">    
                  <div>共&nbsp;<span class="total-num">{{total}}</span>&nbsp;件商品</div>
              </div>
          </div>
          <div class="productList">
           <ProductGroup :items="allProduct" :span='5' :gutter='10'/>
          </div>
          <div style="clear: both;"></div>
          <div class="pagination">
            <pagination
              @eventSizeChange="eventSizeChange"
              @eventCurrentChange="eventCurrentChange"
              :total="total"
              :pageSize="params.pageSize"
              :currentPage="params.page"
            ></pagination>
          </div>
        </div>
      </div>
    </div>

    <div class="saveBtnBox">
      <el-button class="" type="primary" @click="saveBtn()">保存</el-button>
      <el-button class="" type="primary" plain @click="$router.back()">返回</el-button>
    </div>
  </div>
</template>

<script>
import pagination from "@/components/common/pagination";
import { _getStorage} from "@/utils/utils";
import ProductGroup from "@/components/common/ProductGroup"
export default {
  name: "preview",
  data() {
    return {
      brandId: "",
      brandInfo:{},
      showSelect:false,
      dataInfo:{
        pcBanners:[]
      },
      topProductFor3:[],
      allProduct:[],
      params: {
        brandId: '',
        page: 1,
        pageSize: 20,
        sort: 0
      },
      total:0,
      activeIndex:99,
      sortTitle:[
        {
          name:'新品',
          up:1,
          down:2
        },
        {
          name:'销量',
          up:3,
          down:4
        },
        {
          name:'价格',
          up:5,
          down:6
        },
      ]
    };
  },
  methods: {
    sortClick(index){
      if(index==99){
        this.params.sort=0;
      }else{
        this.activeIndex=index;
        var sort=this.params.sort;
        if(sort==this.sortTitle[index].down){
          this.params.sort=this.sortTitle[index].up
        }else{
          this.params.sort=this.sortTitle[index].down
        }
      }

      this.getAllProduct();
    },
    eventSizeChange(e) {
      this.params.pageSize = e;
      this.getAllProduct();
    },
    eventCurrentChange(e) {
      this.params.page = e;
      this.getAllProduct();
    },
    getProductData(){
      this.dataInfo = _getStorage('storePreview');
      for(var i=0;i<3;i++){
        if(this.dataInfo.categories[0].products[i]){
          this.topProductFor3.push(this.dataInfo.categories[0].products[i])
        }
        
      }
    },
    getAllProduct(){
      this.$axios
        .get("/brandstore/previewproducts", {
          params: this.params
        })
        .then(res => {
          let { code, data, message } = res.data;
          if (code == 200) {
            // if (data.list && data.list.length > 0) {
            //   for (let i = 0; i < data.list.length; i++) {
            //     data.list[i]["IsSelect"] = 0;
            //   }
            // }
            this.allProduct = data.list;
            this.total = ~~data.total;
          } else {
            this.$message.error(message);
          }
        });
    },
    getbrandInfo(){
      this.$axios.get('/index/brandInfo/'+this.brandId).then(res=>{
        let {code,data} =res.data;
          if(code ==200){
              this.brandInfo = data;
          }
      })
    },
    //保存
    saveBtn(){
      var saveInfo={
        brandId: this.brandId,
        pcBanners: this.dataInfo.pcBanners,
        appBanners: this.dataInfo.appBanners,
        categories: []
      };
      for( var k in this.dataInfo.categories){
        var obj={
            categoryId: this.dataInfo.categories[k].categoryId,
            productIds: this.dataInfo.categories[k].productIds
          }
          saveInfo.categories.push(obj);
      }
      this.$axios
      .post("/brandstore/save",saveInfo)
      .then(res => {
          if (res.data.code == 200) {
            this.$router.push('/marketing/shoprenovation')
            this.$message.success("保存成功!");

          } else {
              this.$message.error(res.data.message);
          }
      })
      .catch(() => {
      });
    },
  },
  mounted(){
    // 页面创建时设置
    document.querySelector('.el-main').style.overflow = 'hidden';

    let { brandId } = _getStorage('info');
    this.brandId=brandId;
    this.params.brandId=brandId;
    this.getProductData();
    this.getAllProduct();
    this.getbrandInfo();
  },
  beforeDestroy() {
    // console.log(document.querySelector('.el-main'))
    // 页面退出时设置回默认, 如果无这一步的话, 上面修改的样式40px会影响到所有页面
    document.querySelector('.el-main').style.overflow = '';
  },
  components: {
    pagination,ProductGroup
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.saveBtnBox{
    padding: 30px;
    text-align: center;
    background: #fff;
    position: fixed;
    bottom: 0;
    width: 100%;
    margin-left: -340px;
}
.carousel_img{
    height: 100%;
    display: block;
    margin: 0 auto;
}
.drop-down{
    position: absolute;
    top: 30px;
    left: 335px;
    background: #ff6600;
    z-index: 9;
    width: 142px;
    ul{
      display: inline-block;
      margin-top:1px;
      padding:0px;
       width: 100%;
    }
    ul li{
      // width: 100%;
      height: auto;
      padding: 10px 3px;
      border-top: 1px solid #ff6600;
      text-align: center;
      vertical-align: middle;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      word-break: break-all;
      cursor: pointer;
      color: #fff;
      &:hover{
        background: #fff;
        color: #ff6600;
      }
      a{
        color: inherit;
      }
    }
}

    .search{
    	width:1200px;
    	height:53px;
      background:#fff;
      margin:0 auto 20px;
       ul{
        li{
		    line-height: 50px;
		    width: 142px;
		    text-align: center;
		    cursor: pointer;
		    box-sizing: border-box;
		    position: relative;
        float: left;
        }
        li:hover{
            background-color: #ffe8d9;
            border-bottom: 2px solid #ff6600;
        }
        .sort:before{
          display: block;
  		    content: "";
  		    width: 11px;
  		    height: 6px;
  		    background: url(../../../assets/img/up.png) no-repeat center center;
  		    background-size: 100% 100%;
  		    position: absolute;
  		    right: 44px;
  		    top: 18px;          
        }
         .sort.up:before{
             background: url(../../../assets/img/s_up.png) no-repeat center center;
          }
        .sort:after{
          display: block;
  		    content: "";
  		    width: 11px;
  		    height: 6px;
  		    background: url(../../../assets/img/down2.png) no-repeat center center;
  		    background-size: 100% 100%;
  		    position: absolute;
  		    right: 44px;
  		    top: 26px;          
        }
        .sort.down:after{
             background: url(../../../assets/img/s_down.png) no-repeat center center;
          }
     }
     .left{
        padding-left:0;
        float: left;
        .active{
            background-color: #ffe8d9;
            border-bottom: 2px solid #ff6600;
        }
     }
     .right{
	    padding-right:0;
	    height:52px;
      float: right;
      text-align: right;
	    .goodsearch{
        width: 50%;
        float: right;
        margin: 9px;
		    border-width: 1px;
		    border-style: solid;
		    border-color: rgb(255, 107, 8);
		    input{

		    }
		    button{
		       	width: 66px;
			    color: #fff;
			    background-color: #f60;
		    }
	    
      }
      div{
        padding: 20px;
      }
     }
	}
.main-box{
  background-color: #f5f4f5;
}
img{
  max-width: 100%;
  max-height: 100%;
}
.productList{
  .card{
    float: left;
    width: 18.3%;
    padding-right: 5px;
    padding-left: 5px;
    background: #fff;
    margin-bottom: 10px;
    display: block;
    margin-right: 5px;
    margin-left: 5px;
    .img{
      margin: 0 auto;
      display: block;
      position: relative;
      padding: 10px;
      text-align: center;
      .lazy{
          width: 181px;
          height: 181px;
      }
      .video{
		    	width: 36px;
		    	height: 36px;
		    	position: absolute;
		    	top: 50%;
		    	left: 50%;
		    	margin-left:-18px;
		    	margin-right:-18px;
		    }
        label{
          position: absolute;
          left: 10px;
          bottom: 10px;
          margin-bottom: 5px;
          span{
            text-align: center;
            font-size: 12px;
            color: #999;
            border: 1px solid #999;
            background: #fff;
            padding: 0px 2px;
            margin-right: 5px;
            line-height: normal;
            font-weight: normal;
          }
          img{
                vertical-align: middle;
          }
        }
    }
    .txt{
      height: 150px;
      overflow: hidden;
      padding: 0 5px 5px;
      font-size: 12px;
          line-height: 20px;
      .name{
        height: 40px;
        width: 100%;
        margin: 0 auto;
        color: #515151;
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        // line-height: 18px;
        margin-bottom: 5px;
      }
      .sm-txt{
          color: #999;
          white-space: nowrap;
      }
      .text-right{
        text-align: right;
      }
    }
  }
}
.header{
    width: 1920px;
    margin-left: -340px;
    background: #fff;
    padding-top: 30px;
}
.containerTool{
  background: #000;
  position: relative;
  .tools {
    width: 1250px;
    margin: 0 auto;
    overflow: hidden;
    color: #fff;
    div{
    width: 142px;
    text-align: center;
    /* padding: 20px; */
    line-height: 30px;
    display: inline-block;
    cursor: pointer;
    }
    .active{
      background: #ff6600;
    }
    .el-icon-arrow-down{
      padding-left: 10px;
    }
  }
}
.container-product {
    width: 1250px;
    margin: 0 auto;
    height: 100px;
    .products{
      height: 80px;
      width: 25%;
      float: left;
      .productLogo{
        width: 170px;
        height: 80px;
        display: block;
        float: left;
        text-align: center;
        line-height: 76px;
      }
      .productImg{
        width: 80px;
        height: 80px;
        display: block;
        text-align: center;
        line-height: 76px;
        float: left;
      }
      .productDetial{
        display: block;
        margin-left: 10px;
        width: 208px;
        float: right;
        p{
          margin:8px 0px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .money {
          color: #ff6600;
        }
        .looks {
            border: 1px solid;
            border-radius: 15px;
            padding: 0px 5px;
            color: #ff6600;
        }
      }
    }
}

.el-carousel__item h3 {
    color: #475669;
    font-size: 16px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
     background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
     background-color: #99a9bf;
  }
//title
.title{
  padding:50px 0;
  color:#FF6600;
  text-align: center;
  position: relative;
  .point{
    position: absolute;
    top: -110px;
  }
  span{
    padding:0 15px ;
    font-size: 24px;
    font-weight: bold;
    vertical-align: middle;
  }
  img{vertical-align: middle}
}
//main
.main-box{
  position: relative;
  // background: #8b0fd0;
  }
  .sold_out_img{
    padding: 80px 0;
    width: 170px;
  }
  .sold_out{
    position: absolute;
    background: #000;
    height: 100%;
    width: 100%;
    opacity: 0.4;
    text-align: center;
    z-index: 9;
  }

.col-xs-6 {
    width: 49%;
    display: inline-block;
}
.text-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.flex-box {
  display: flex;
  justify-content: center;
  align-items: center;
}

.auto-center {
  margin: 0 auto;
}

.mainBody {
  width: 100%;
  padding-bottom: 100px;
  .price-box{
    padding-top:5px;
    background: #f9f8f8;
    .price{
      padding:4px;
      position: relative;
      background: #fca13d;
    }
    .act-price{
      position: absolute;
      right: 0;
      bottom: 0;
      height: 46px;
      width: 128px;
      padding: 32px 8px 10px;
      background: url(https://img.edsmall.com/ROOT/ETao20190701/images/pc/product-price-bg.png) no-repeat left bottom;
      background-size: 100%;
    }
    .p,.pp{
      color:#fff;
      margin:0;
      height: 16px;
      line-height: 16px;
    }
    .p {
      margin: 3px;
      font-size: 12px;
    }
    .pp{
      margin-top:6px;
      text-align: right;
      font-size: 16px;
      span{font-size: 12px;}
    }
  }
}


</style>
