<template>
  <div class="group container normal-panel normal-margin">
    <selectClass @brandChange="brandChange" @Search="Search" @clearSearch="clearSearch" :default="true"></selectClass>
    <div class="content" v-if="Object.keys(productGroup).length > 0">
      <div class="group-list">
        <div class="group-item" v-for="item in productGroup" :key="item.sa_itemgroupid" @click="itemClick(item)">
          <div class="top">
            <el-image :src="Object.keys(item.attinfos).length > 0 ? item.attinfos[0].url : ''" fit="fill" />
          </div>
          <div class="bottom">
            <p class="title">商品组名称：{{item.groupname}}</p>
            <p class="descript">商品组编号：{{item.groupnum}}</p>
            <p class="descript">所属营销分类：{{item.itemclassname}}</p>
          </div>
        </div>
      </div>
      <div class="page">
        <pagination style="padding-bottom:0" :total="total" :pageSize="params.content.pageSize" :currentPage="params.content.pageNumber"
          @pageChange="pageChange">
        </pagination>
      </div>
      
    </div>
    <el-empty description="暂无数据" v-else></el-empty>
    
  </div>
</template>

<script>
import selectClass from './modules/Select'
import Pagination from '@/components/pagination/Pagination'
import { log } from '@antv/g2plot/lib/utils';
export default {
  name: '',
  data() {
    return {
      brandList:'',
      brandId:0,
      tablecols:[],
      productGroup:'',
      params: {
        "id": "20220926142203",
        "version":1,
        "content": {
          "pageSize":20,
          "pageNumber":1,
          "nocache":true,
          "brandids":[],
          "where":{
              "condition":""
          }
        }
      },
      total:0,
    };
  },
  components:{selectClass,Pagination},
  computed:{
  },
  watch:{
  },
  created() {
    this.getbrandList()
    this.tablecols = this.tool.tabelCol(this.$route.name).productGroupTable.tablecols
  },
  methods: {
    /* 获取品牌数据 */
    async getbrandList() {
      let res = await this.$api.requested({
        "id": "20220922085103",
        "version":1,
        "content": {
          "nocache":true,
          "where":{
              "condition":""
          }
        }
      })
      this.brandList = res.data.map(item => {
        return {
          label:item.brandname,
          value:item.sa_brandid
        }
      })
      this.brandId = this.brandList ? [this.brandList[0].value] : [0]
      this.getProductGroup()
      console.log(this.brandList,'品牌');
    },
    async getProductGroup() {
      this.params.content.brandids = this.brandId
      let res = await this.$api.requested(this.params)
      this.productGroup = res.data
      this.total = res.total
      console.log(this.productGroup);
    },
    itemClick(id) {
      this.$router.push({
        path:'/groupDetail',
        query: {
          id:id.sa_itemgroupid,
          brandid:id.sa_brandid
        }
      })
    },
    brandChange(id) {
      this.brandId = id
      this.getProductGroup()
    },
    pageChange(n) {
      this.params.content.pageNumber = n
      this.getProductGroup()
    },
    Search(data) {
      this.params.content.where.condition = data
      this.params.content.pageNumber = 1
      this.getProductGroup()
    },
    clearSearch() {
      this.params.content.where.condition = ''
      this.params.content.pageNumber = 1
      this.getProductGroup()
    }
  },
};
</script>

<style scoped>
*{
  box-sizing: border-box;
}
.group .group-list {
  display: flex;
  flex-wrap: wrap;
  margin-top: 16px;
}
.group .group-list .group-item {
  width: 212px;
  height: 250px;
  background: #ffffff;
  transition: all 0.1s ease-in;
  margin: 0 16px 16px 0;
  cursor: pointer;
  border: 1px solid rgb(0,0,0,0.5);
  overflow: hidden;
}
.group .group-list .group-item:hover {
  border-color: red;
}
.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 {
  width: 212px;
  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 18px 10px 16px;
}
.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;
  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;
  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: #999999;
}
.page {
  display: flex;
  flex-direction: row-reverse;
}
</style>
