<template>
  <div class="">
    <el-popover placement="bottom-start" trigger="click" ref="popover">
      <el-button
        type="primary"
        plain
        class="button-new-tag"
        size="small"
        @click="addProductShow"
        v-if="typeBtn"
        slot="reference"
      >+ 添加商品</el-button>
      <el-button
        v-else
        type="text"
        @click="addProductShow"
        slot="reference"
      >绑定商品</el-button>
      <!-- <i class="el-icon-arrow-down el-icon--right"></i> -->
      <el-card class="box-card">
        <div slot="header" class="clearfix title-card">
          <span class="title-left">选择商品</span>
           <el-checkbox class="title-left20" 
          v-model="productTypeVal" 
          :true-label="1" 
          :false-label="0"
          @change="changeType"
          >{{productType?productType:'商品筛选'}}</el-checkbox>
          <el-checkbox class="title-left2" 
          v-model="onlySeriesVal" 
          :true-label="1" 
          :false-label="0"
          @change="changeType2"
          >只显示同系列</el-checkbox>
          

          <div class="title-right">
            <input class="input" v-model="searchPro" @keyup="handleKeyup" placeholder="搜索关键词" />
            <i class="el-icon-search"></i>
          </div>
        </div>
        <div class="bodybox">
          <div v-for="(item,index) in listdata" :key="index" class="text item"
               @click="typeBtn?proItem(item,index,1):proItem(item,index,2)">

            <div class="left">
              <img :src="item.mainImg" alt="">
            </div>
            <div class="right ellipsis_2">
              {{item.productName}}
            </div>
          </div>
          <p class="loading" v-show="loading" v-loading="loading"></p>
          <p class="undata" v-show="listdata.length==0 && !loading">暂无数据</p>
        </div>
        <pagination
          @eventCurrentChange="eventCurrentChange"
          layout="prev, pager, next"
          :pager-count="5"
          :background="false"
          :total="total"
          :pageSize="pageSize"
          :pageNum="pageNum"
          v-if="listdata.length"
        ></pagination>
      </el-card>
    </el-popover>
  </div>
</template>

<script>
import pagination from "@/components/common/pagination";
export default {
  props:['typeBtn','sku_id','brandId','sku_index','skuList','productType'],
  name:'addpro',
  data() {
    return {
        notInIds:[], //同系列商品的etaoskuid
        searchPro:'',
        listdata:[],
        loading: false,
        productTypeVal:0,
        onlySeriesVal:0,
        type:'',
        total: 200,
        pageNum: 1,
        pageSize: 20
    };
  },
  mounted(){
      // this.getoldData()
  },
  methods: {
    eventCurrentChange(e) {
      this.pageNum = e;
      if(this.typeBtn){
        this.getoldData();
      }else{
        this.getoldData2();
      }
    },
    handleKeyup() {
      this.pageNum = 1
      if(this.typeBtn){
        this.getoldData();
      }else{
        this.getoldData2();
      }
    },
     changeType(e){
      this.productTypeVal = e;
      if(this.productTypeVal==1){
          this.type = this.productType;
      }else{
          this.type = '';
      }
      this.loading = true;
      this.listdata = [];
       this.pageNum = 1;
        if(this.typeBtn){
            this.getoldData();
        }else{
            this.getoldData2();
        }
   
    },
     changeType2(e){
      this.onlySeriesVal = e;
      this.loading = true;
      this.listdata = [];
       this.pageNum = 1;
        if(this.typeBtn){
            this.getoldData();
        }else{
            this.getoldData2();
        }
   
    },
        //获取旧数据
    getoldData(v){
        let skuid ='';
          if(v){
              skuid = v;
          }else{
            skuid = this.sku_id?this.sku_id:'';

          }
          this.notInIds = [];
          if(this.skuList&&this.skuList.length){
                this.skuList.map((r,index)=>{
                if(r.isShow){
                  if(r.etaoSkuId){
                      this.notInIds.push(r.etaoSkuId);
                  }
                }
            })
          }
          let nid = (this.notInIds&&this.notInIds.length)?this.notInIds.toString():'';
          this.$axios.get('/products/oldProductList',{
              params:{
                search:this.searchPro,
                brandId:this.brandId,
                skuId:skuid,
                notInIds:nid,
                productType:this.type,
                pageNum:this.pageNum,
                pageSize:this.pageSize,
                onlySeries:this.onlySeriesVal
              }
            }).then(r => {
              let { code, data } = r.data;
              if(code == 200){
                
                this.listdata = data.list?data.list:'';
                this.total = parseInt(data.total);

              }
              this.loading = false;
            }).catch(r => console.log(r));
      
    },
    //sku设置--绑定商品
     getoldData2(v){
        let skuid ='';
          if(v){
              skuid = v;
          }else{
            skuid = this.sku_id?this.sku_id:'';

          }
          this.notInIds = [];
          if(this.skuList&&this.skuList.length){
                this.skuList.map((r,index)=>{
                if(r.isShow){
                  if(r.etaoSkuId){
                      this.notInIds.push(r.etaoSkuId);
                  }
                }
            })
          }
          let nid = (this.notInIds&&this.notInIds.length)?this.notInIds.toString():'';
          this.$axios.get('/products/subList',{
              params:{
                search:this.searchPro,
                brandId:this.brandId,
                skuId:skuid,
                notInIds:nid,
                productType:this.type,
                pageNum:this.pageNum,
                pageSize:this.pageSize,
                onlySeries:this.onlySeriesVal
              }
            }).then(r => {
              let { code, data } = r.data
              if(code == 200){
                this.listdata = data.list?data.list:'';
                this.total = parseInt(data.total);
              }
            this.loading = false;
            }).catch(r => console.log(r));

    },
    addProductShow(){
      this.loading = true;
      this.listdata = [];
      this.pageNum = 1;
      this.productTypeVal=0;
      this.type = '';
      this.onlySeriesVal = 0;

      if(this.typeBtn){
        if(!this.brandId){
          this.$message.error("请先选择品牌！");
          return false
        }
         this.getoldData()
      }else{
        this.getoldData2(this.sku_id)
      }

      this.searchPro ="";
    },
    //20200515
    proItem(item,index,val){
      this.searchPro="";
      if(val==1){

        this.$emit("selectProFun",item);
        this.$emit("skuListProducts",this.listdata[index]['skuList']);
      }else{
        let obj ={};
        obj.skuIndex = this.sku_index;
        obj.skuid =this.sku_id;
        obj.mainImg=item.mainImg
        obj.subImgs = item.subImgs;
        obj.specJson= item;
        obj.isShow =true;
        obj.isMove =0
        this.$emit("selectProFun2",obj);

      }
      this.$refs['popover'].doClose()
    }
  },
  components: {
    pagination
  }
};
</script>

<style lang="scss" scoped>
.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%;
        }
      }
      &:hover{
        color: #f60;
        cursor: pointer;
      }
    }
    .loading{
      height: 50px;
      overflow-y: hidden;
    }
  }
  >>>.el-pagination{
    text-align: center;
    margin-bottom: 0;
  }
  >>>.el-card__header{
    padding: 0;
  }
  .title-card {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f2f2f2;
    padding: 10px;
    .title-left {
      flex: 1;
    }
       .title-left2 {
      flex: 1.5;
    }
    .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;
      }
    }
  }
}
</style>
