<template>
  <div class="group-item-component">
    <div v-if="configContent.show" class="group-item-title  text-overflow">
      <div class="title  text-overflow">{{ configContent.groupName }}</div>
      <div class="more-title">
        查看全部
        <i class="el-icon-arrow-right" />
      </div>
    </div>
    <div class="group-list">
      <div v-for="(item, index) in configContentList" :key="index" class="group-item">
        <div class="group-image">
          <img :src="item.src || defaultImg" alt="">
        </div>
        <div class="group-title-1 text-overflow">
          {{ item.categoryList[0]&&item.categoryList[0].categoryName || '列表名称'+(index+1) }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import defaultImg from '@/assets/CreationCamp/group-default.png'

export default {
  props: {
    config: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      defaultImg
    }
  },
  computed: {
    configContent() {
      return this.config.content
    },
    configContentList() {
      const { list, quantity } = this.configContent
      return list.slice(0, quantity)
    }
  }
}
</script>
<style lang="less" scoped>
.group-item-component {
	.group-item-title {
		position: relative;
		display: flex;
		align-items: center;
		height: 45px;
		&::before{
			content: "";
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			height: 1px;
			background:rgba(238,238,238,1);
		}
		.more-title {
			font-size:12px;
			font-family:PingFang SC;
			font-weight:500;
			color:rgba(102,102,102,1);
			i{
				margin-left: 5px;
			}
		}
		.title {
			flex: 1;
			font-size:18px;
			font-family:PingFang SC;
			font-weight:bold;
			color:rgba(51,51,51,1);
		}
	}
	.group-list {
    display: flex;
    flex-flow: wrap;
		width: 100%;
		.group-item {
			margin-right: 6px;
      width: calc((100% - 12px) /3);
      height: 90px;
      padding: 10px;
      text-align: center;
      &:nth-child(3n){
        margin-right: 0;
      }
			.group-image{
				width: 50px;
        height: 50px;
        margin: 0 auto 5px;
				img{
					width: 100%;
					height: 100%;
				}
			}
			.group-title-1{
        margin-bottom: 5px;
        font-size:14px;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(51,51,51,1);
      }
		}
	}
}
</style>
