<template>
  <div>
    <!-- 下面是弹出窗口 -->
    <!--     width="60%" center -->
    <el-dialog
      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="SPU ID/商品型号" v-model="params.search" class="SearchAll"></el-input>
        <el-button class="searchbtn" type="primary" icon="el-icon-search" @click="search"></el-button>
      </div>
      <div class="productsList">
        <ul v-if="productsList.length>0">
          <el-checkbox-group class="scrollBox" v-model="checkIds" :max='max'>
            <li
              :class="{'goodBox':true,'goodBoxact':item.IsSelect}"
              v-for="(item,index) in productsList"
              :key="index"
            >
              <div class="picBox">
                <el-checkbox class="" :label="item.spuId" @change="checkChange(item)">
                  <div class="goodsPic">
                   <img class="" :src="item.productImg || item.mainImg || item.skuImg" alt />
                  </div>
                </el-checkbox>
              </div>
              <p class="goodsName">{{item.productName||item.title}}</p>
              <div class="sizeAndStock">
                <p class="avaliableStock">可用库存： {{item.stock}}</p>
                <p class="stock">{{item.deliveryDate}}</p>
              </div>
              <p class="price">
                优惠价：
                <span class="red">￥{{item.mallSalePrice||item.salePrice}}</span>
              </p>
              <p class="wholesalePrice">
                批发价：
                <span class="red">￥{{item.dealerPrice||item.purchasePrice}}</span>
              </p>
            </li>
          </el-checkbox-group>
        </ul>
        <div v-else class="nodata">暂无商品</div>
        <div class="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",
     "isAddNew",
     "ids",
     "list",
     "max",//最多选择商品数量 0不限制
     "min",//最少选择商品数量 0不限制
     "goodsListUrl",//列表接口
  ],
  data() {
    return {
      checkIds: [],
      checkList: [],
      total: 0,
      click_modal: false,
      press_escape: false,
      lockScroll: true,
      params: {
        brandId: "",
        pageNum: 1,
        pageSize: 8,
        search:"",
      },
      productsList: [],
    };
  },
  components: {
    // 传入组件
    pagination
  },
  watch: {
    ids (newName, oldName) {
      this.checkIds = Object.assign([], this.ids)
    },
    list (newName, oldName) {
      this.checkList = Object.assign([], this.list)
    }
  },
  mounted() {
    // 时间钩子
    this.getData();
  },
  methods: {
    checkChange(e){
      if(this.checkIds.includes(e.spuId)){
        //勾选操作
        this.checkList.push(e);
      }else{
        //取消勾选操作
        var newArr = this.checkList.filter(item => item.spuId!=e.spuId);
        this.checkList=newArr;
      }
    },
    eventSizeChange(e) {
      this.params.pageSize = e;
      this.getData();
    },
    eventCurrentChange(e) {
      this.params.pageNum = e;
      this.getData();
    },
    getData() {
      let { brandId } = _getStorage("info");
      this.params.brandId = brandId;
      this.$axios
        .post(this.goodsListUrl, 
           this.params
        )
        .then(res => {
          let { code, data, message } = res.data;
          if (code == 200) {
            this.productsList = data.list;
            this.total = ~~data.total;
          } else {
            this.$message.error(message);
          }
        });
    },
    search() {
      this.params.pageNum = 1;
      this.getData();
    },
    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;
        }
      }
      
      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;
        height: 28px;
        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;
        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;
    }
  }
}
</style>
