<template>
  <div>
    <div class="container" v-if="list.length > 0">
      <el-row style="height:calc(100vh - 300px);overflow-y:scroll" :gutter="20">
        <el-col @click.native="$router.push({path:'/ProductDetails',query:{id:item.itemid}})" :span="4" v-for="item in list" :key="item.index">
          <div class="product-card">
            <div class="product-image">
              <img style="width:100%" :src="item.attinfos[0]?item.attinfos[0].url:''" alt="">
            </div>
            <div class="product-info">
              <p>{{item.itemname}}</p>
              <p class="product-itemno">编码:{{item.itemno}}</p>
              <div class="flex-align-center flex-between">
                <p><span class="product-price">¥{{item.gradeprice}}</span>&nbsp;<span class="text-throughline">¥{{item.oldprice}}</span></p>
                <div class="shopcart-btn">
                  <i @click.stop="insertToShopCart(item)" style="font-size:1.5rem;color:#666" class="el-icon-shopping-cart-2"></i>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <div style="margin-top:16px;text-align:center">
        <el-pagination
          background
          small
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="params.content.pageSize"
          layout="total, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
    </div>
    </div>
    <div style="height:calc(100vh - 300px)" class="flex-align-center flex-around" v-else>
      <el-empty :image="emptyUrl" description="暂无商品"></el-empty>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      params:{
        "id": 20220924163802,
        "content": {
          "pageNumber": 1,
          "pageSize": 20,
          "where": {
            "condition": ''
          },
          "brandids":[],
          "itemclassids": [],
        }
      },
      emptyUrl:require('../../../assets/Empty.png'),
      list:[],
      total:0,
      currentPage:0
    }
  },
  methods:{
    async listData () {
      const res = await this.$api.requested(this.params)
      this.list = res.data
      this.total = res.total
      this.currentPage = res.pageNumber
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.params.content.pageSize = val
      this.listData()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.params.content.pageNumber = val
      this.listData()
    },
    async insertToShopCart (item) {
      console.log(item)
      const res = await this.$api.requested({
        "id": 20220924095102,
        "content": {
          "sa_brandid": this.params.content.brandids[0], //品牌id
          "itemid": item.itemid, //货品id
          "qty": item.orderminqty, //数量
          "itemno": item.itemno //货品编号
        }
      })
      this.$notify({
        title: res.code === 1?'成功':'失败',
        message: res.code === 1?'添加成功':res.msg,
        type:  res.code === 1?'success':'error'
      })
    }
  },
  mounted () {
    // this.listData()
  }
}

</script>
<style>
</style>
<style scoped>
.product-card{
  padding: 10px;
  margin-bottom: 20px;
  background: #fff;
  transition: all .2s linear;
  cursor: pointer;
}
.product-image{
  display: flex;
  align-items: center;
  height: 150px;
  overflow: hidden;
}
.product-info{
  padding:10px
}
.product-card:hover{
  box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
  transform: translate3d(0,-2px,0);
}
.product-price {
  color: red;
}
.product-itemno{
  font-size: 12px;
  color:#888;
  margin-bottom: 20px;
}
.text-throughline{
  font-size: 14px;
  text-decoration: line-through;
  color:#999
}
.shopcart-btn{
  height:40px;width:40px;text-align:right;line-height:45px
}
.shopcart-btn:hover i{
  color:#4F7BFD !important;
}
</style>