<template>
  <div>
    <!-- 下面是弹出窗口 -->
    <!--     width="60%" center -->
    <el-dialog
      :title="title"
      :visible.sync="dialogVisiblePro"
      width="1060px"
      :close-on-click-modal="click_modal"
      :close-on-press-escape="press_escape"
      :before-close="handleClose"
      :lock-scroll="lockScroll"
    >
      <div class="searchWrapper">
        <el-input placeholder="商品名称/商品编号" v-model="params.keyword" class="SearchAll"></el-input>
        <el-button class="searchbtn" type="primary" icon="el-icon-search" @click="search"></el-button>
        <el-select
          v-model="sortType"
          @change="sortListener"
          slot="prepend"
          placeholder="请选择排序方式"
          class="input-select"
        >
          <el-option label="上架时间由高到低" value="0"></el-option>
          <el-option label="上架时间由低到高" value="1"></el-option>
        </el-select>
      </div>
      <div class="productsList">
        <ul v-if="productsList.length>0">
          <el-checkbox-group class="scrollBox" v-model="checkIds" @change="bindCheckBox">
            <li
              :class="{'goodBox':true,'goodBoxact':item.IsSelect}"
              v-for="(item,index) in productsList"
              :key="index"
            >
              <!-- <el-checkbox
                    v-model="item.selected"
                    @change="customerSelectedListener(item.skuId,item.selected)"
                    class="custormSelect"
              ></el-checkbox>-->
              
              <div class="picBox">
                <el-checkbox class="" :label="item.productId" @change="checkChange(item)">
                  <div class="goodsPic">
                   <img class="" :src="item.productImg" alt />
                  </div>
                </el-checkbox>
              </div>
              <p class="goodsName">{{item.productName}}</p>
              <div class="sizeAndStock">
                <!-- <p class="width">W:{{item.width}}</p>
                <p class="height">H:{{item.height}}</p>
                <p class="deepth">D:{{item.depth}}</p> -->
                <p class="avaliableStock">可用库存： {{item.stock}}</p>
                <p class="stock">{{item.deliveryDate}}</p>
              </div>
              <p class="price line_over_1" v-if="item.productNum">
                型号：{{item.productNum}}
              </p>
              <!-- <p class="price">
                零售价：
                <span class="red">￥{{item.productPrice}}</span>
              </p> -->
              <p class="price">
                优惠价：
                <span class="red">￥{{item.mallSalePrice}}</span>
              </p>
              <p class="wholesalePrice">
                批发价：
                <span class="red">￥{{item.dealerPrice}}</span>
              </p>
            </li>
          </el-checkbox-group>
        </ul>
        <div v-else class="nodata">暂无商品</div>
        <div class="pagination">
          <!-- <pagination
            @eventSizeChange="eventSizeChange"
            @eventCurrentChange="eventCurrentChange"
            :total="total"
            :page-sizes="[8, 16, 24]"
            :pageSize="params.pageSize"
            :currentPage="params.page"

          ></pagination> -->
          <el-pagination
            :background="true"
            @size-change="eventSizeChange"
            @current-change="eventCurrentChange"
            :current-page="params.page"
            :page-sizes="[8, 16, 24]"
            :page-size="params.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="saveChange">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 上面是弹出窗口 -->
  </div>
</template>

<script>
import pagination from "@/components/common/pagination";
import { _getStorage } from "@/utils/utils";
export default {
  name: "selectProductDialog",
  props:{
    dialogVisiblePro: {
      type: Boolean,
      default:false
    },
    title:{
      type: String,
      default:'选择推荐商品'
    },
    ids:{
      type: Array,
      default:() => {
        return []
      }
    },
    list:{
      type: Array,
      default:() => {
        return []
      }
    },
    max:{ //最多选择商品数量 0不限制
      type: Number,
      default: 0
    },
    min:{ //最少选择商品数量 0不限制
      type: Number,
      default: 0
    },
    isMultiple:{
      type: Boolean,
      default:true
    },
  },
  data() {
    return {
      checkIds: [],
      checkList: [],
      total: 0,
      click_modal: false,
      press_escape: false,
      lockScroll: true,
      params: {
        brandId: 1,
        page: 1,
        pageSize: 8,
        sort: 0,
        keyword: ""
      },
      productsList: [],
      sortType: "",
      sectid: ""
    };
  },
  components: {
    // 传入组件
    pagination
  },
  watch: {
    // ids (newName, oldName) {
    //   this.checkIds = Object.assign([], this.ids);
    // },
    // list (newName, oldName) {
    //   this.checkList = Object.assign([], this.list);
    // },
    dialogVisiblePro(newName, oldName){
      this.checkIds = Object.assign([], this.ids)
      this.checkList = Object.assign([], this.list)
    }
  },
  mounted() {
    // 时间钩子
    this.getData();
  },
  methods: {
    bindCheckBox(value){
      // 单选
      if(!this.isMultiple){
        if(this.checkIds.length > 1){
          this.checkIds.splice(0,1);
          this.checkList.splice(0,1);
        }
      }
    },
    setData(){
      // console.log(this.ids)
      // this.checkIds=this.ids;
      // this.checkList=this.list;
      // var ids=this.ids;
      // ids.forEach(element => {
      //   this.checkIds.push(element)
      // });
      // var list=this.list;
      // list.forEach(element => {
      //   this.checkList.push(element)
      // });
    },
    checkChange(e){
      if(this.checkIds.includes(e.productId)){
        //勾选操作
        this.checkList.push(e);
      }else{
        //取消勾选操作
        var newArr = this.checkList.filter(item => item.productId!=e.productId);
        this.checkList=newArr;
      }
    },
    eventSizeChange(e) {
      this.params.pageSize = e;
      this.getData();
    },
    eventCurrentChange(e) {
      this.params.page = e;
      this.getData();
    },
    getData() {
      let { brandId } = _getStorage("info");
      this.params.brandId = brandId;
      this.$axios
        .get("/products/listForChoose", {
          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.productsList = data.list;
            this.total = ~~data.total;
          } else {
            this.$message.error(message);
          }
        });
    },
    sortListener(e) {
      this.params.sort = e;
      this.params.page = 1;
      this.getData();
    },
    search() {
      this.params.page = 1;
      this.getData();
    },
    //    选择商品
    //  aClickPro(id,index){
    //      for(let i=0; i<this.productsList.length;i++){
    //          if(this.productsList[i]['productId'] == id){

    //              if(this.productsList[index]["IsSelect"]){
    //                   this.$set(this.productsList[index],"IsSelect",0)
    //              }else{
    //                  this.$set(this.productsList[index],"IsSelect",1);
    //                  this.sectid = id;
    //              }
    //          }else{
    //               this.$set(this.productsList[i],"IsSelect",0)
    //          }
    //      }
    //  },
    handleClose(done) {
      this.params.keyword = "";
      this.$emit("changeDia", false);
    },
    saveChange() {
      if(this.checkIds.length==0){
          this.$message.error("选择商品不得少于1个");
          return false;
      }
      if(this.min>0){
        if(this.checkIds.length<this.min){
            this.$message.error("选择商品不得少于" + this.min + "个");
            return false;
        }
      }
      if(this.max>0){
        if(this.checkIds.length>this.max){
            this.$message.error("选择商品不得多于" + this.max + "个");
            return false;
        }
      }
      // var productList=[];
      // for (var i = 0; i < this.checkIds.length; i++) {
      //   if(this.checkIds[i].productId==)
      //     productIds.push(this.checkIds[i].productId)
      // }
      
      this.$emit("changeDia", false, this.checkIds,this.checkList);
    }
  }
};
</script>
<style scoped>
>>> .el-dialog__body {
  padding-bottom: 0;
}
</style>
<style lang="scss" scoped>
.pagination {
  // position: fixed;
  // right: 50px;
  // bottom: 30px;
  text-align: right;
  margin: 8px 0;
}
img{
  max-width: 100%;
  max-height: 100%;
}
.nodata {
  text-align: center;
  padding: 50px;
}
.searchWrapper {
  display: flex;
  //   justify-content: center;
  //   margin-top: 40px;
  .SearchAll {
    // margin-right: 10px;
    width: 270px;
  }
  .searchbtn {
    margin-right: 20px;
    margin-left: -4px;
    z-index: 1;
    width: 60px;
  }
  .input-select {
  }
}
.productsList {
  margin: 0 auto;
  //   max-width: 816px;
  margin-top: 20px;
  .scrollBox {
    display: flex;
    flex-wrap: wrap;
    // margin-top: 30px;
    height: 520px;
    overflow: auto;
    box-sizing: content-box;
    // padding-bottom: 50px;
    .goodBox {
      position: relative;
      box-sizing: content-box;
      // text-align: center;
      border: 1px solid #e0e0e0;
      height: 350px;
      margin: 4px;
      background: #ffffff;
      .custormSelect {
        position: absolute;
        left: 10px;
        top: 10px;
      }
      .picBox {
        width: 200px;
        height: 200px;
        padding: 10px;
        // margin: 0 auto;
        .goodsPic {
          width: 200px;
          height: 200px;
          vertical-align: top;
          margin-left: -15px;
          display: inline-block;
        }
      }
      .goodsName {
        width: 220px;
        padding: 0 10px;
        font-size: 14px;
        color: #515151;
        margin-bottom: 6px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
      .sizeAndStock {
        overflow: hidden;
        padding: 10px 10px;
        font-size: 14px;
        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: 12px;
        color: #7d7d7d;
        float: left;
      }
      .price {
        text-align: start;
        width: 220px;
        padding: 0px 12px 8px 10px;
        font-size: 12px;
        color: #7d7d7d;
      }
      .wholesalePrice {
        text-align: start;
        padding: 0 10px 10px 10px;
        font-size: 12px;
        color: #7d7d7d;
        .red {
          color: #ff0000;
        }
      }
    }
    .goodBoxact {
      border: 1px solid #f60;
    }
  }
}
.line_over_1{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
