<template>
  <div>
    <div class="group container normal-panel normal-margin" v-if="list.length > 0">
      <!-- <el-row style="height:calc(100vh - 336px);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 v-if="list.length > 0" class="content">
        <div class="group-list">
<!--          <div  @click="$router.push({path:'/ProductDetails',query:{id:item.itemid,brandid:params.content.brandids[0]}})" class="group-item" v-for="item in list" :key="item.index">-->
          <div  class="group-item" v-for="item in list" :key="item.index">
            <div class="top">
              <el-image style="width:100%" :src="Object.keys(item.attinfos).length > 0 ? item.attinfos[0].url : ''" fit="contain" />
            </div>
            <div class="bottom">
              <p class="title">{{item.itemname}}</p>
              <p class="descript">商品编号：{{item.itemno}}</p>
              <p class="descript">规格：{{item.spec}}</p>
              <p class="descript">型号：{{item.model}}</p>
<!--              <p class="descript">所属营销分类：<span v-for="cls in item.itemclass" :key="cls.index">{{cls.itemclassname}},</span></p>-->
              <div class="flex-align-center flex-between">
<!--                <p><span class="product-price">¥{{item.gradeprice}}</span>&nbsp;<small class="text-throughline">¥{{item.oldprice}}</small></p>-->
                <p><span class="product-price">¥{{item.marketprice}}</span>&nbsp;<span>/{{item.unitname}}</span></p>
                <div class="shopcart-btn">
                  <i @click.stop="insertToShopCart(item)" style="font-size:1.5rem;color:#666" class="el-icon-shopping-cart-2"
                    v-if="usertype !== 0 && usertype !== 1"></i>
                </div>
              </div>
            </div>
          </div>
            
        </div>
      </div>
      <el-empty description="暂无数据" v-else></el-empty>
      <div style="text-align:center;padding-top:30px">
        <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 - 260px)" class="flex-align-center flex-around" v-else>
      <el-empty :image="emptyUrl" description="暂无商品"></el-empty>
    </div>
  </div>
</template>

<script>
export default {
  props:['brandid'],
  data () {
    return {
      params:{
        "id": 20220924163802,
        "content": {
          "pageNumber": 1,
          "pageSize": 20,
          "where": {
            "condition": ''
          },
          "brandids":[],
          "itemclassids": [],
          "istool": 1,
        }
      },
      emptyUrl:require('../../../assets/Empty.png'),
      list:[],
      total:0,
      currentPage:0,
      usertype:'',
    }
  },
  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": item.sa_brandid, //品牌id
          "itemid": item.itemid, //货品id
          "qty": item.orderminqty, //数量
          "itemno": item.itemno, //货品编号
          "tradefield":item.tradefield
        }
      })
      this.$notify({
        title: res.code === 1?'成功':'失败',
        message: res.code === 1?'添加成功':res.msg,
        type:  res.code === 1?'success':'error'
      })
    }
  },
  mounted () {
    this.$parent.selectClick()
    // this.listData()
    this.usertype = JSON.parse(sessionStorage.getItem('active_account')).usertype
  }
}

</script>
<style>
</style>
<style scoped>
/* @media only screen and (max-width: 1200px) {
  .gtc {
    grid-template-columns: repeat(8, 1fr);
  }
} */
.content{
  height:calc(100vh - 400px);
  overflow-y: scroll;
}
.group .group-list {
  /* display: grid; */
  /* column-gap: 24px; */
  box-sizing: border-box;
  background-color: transparent;
  /* grid-template-columns: repeat(8, 1fr); */
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.group .group-list .group-item {
  width: 261px;
  background: #ffffff;
  transition: all 0.1s ease-in;
  cursor: pointer;
  overflow: hidden;
  margin-bottom: 36px;
  margin-right: 16px;
}
.group .group-list .group-item .el-image {
  transition: transform 0.3s;
}
.group .group-list .group-item:hover .top .el-image {
  transform: scale(1.3);
}
.group .group-list .group-item .top {
  height: 150px;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  overflow: hidden;
  display: flex;
  justify-content: space-around;
}
.group .group-list .group-item .bottom {
  padding: 10px;
  /* border:1px solid #f1f2f3; */
  border-top:none;
}
.group .group-list .group-item .bottom .title {
  font-size: 14px;
  font-family: PingFang SC-Bold, PingFang SC;
  font-weight: bold;
  color: #333333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-line-clamp: 1;
  width: 100%;
  margin-bottom: 5px;
}
.group .group-list .group-item .bottom .descript {
  font-size: 12px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-line-clamp: 1;
  width: 100%;
  margin-bottom: 4px;
}
.group .group-list .group-item .bottom .people {
  font-size: 10px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #999;
}
.group-item{
  border:1px solid #f1f2f3;
  border-radius: 3px;
}
.product-price{
  color:red
}
.text-throughline{
  text-decoration: line-through;
}
</style>