<template>
  <div class="commodity-item-component">
    <div v-if="configContent.show" class="commodity-item-title">
      <div class="title  text-overflow">{{ configContent.groupName }}</div>
      <div class="more-title">
        查看全部
        <i class="el-icon-arrow-right" />
      </div>
    </div>
    <div class="commodity-list">
      <template v-if="goods.length">
        <div v-for="(item, index) in goods" :key="index" class="commodity-item">
          <div class="commodity-image">
            <img :src="item.imgs&&item.imgs[0] || defaultImg" alt="">
          </div>
          <div class="commodity-content">
            <div v-if="configContent.sellingPoint" class="commodity-title">{{ item.productName }}</div>
            <!-- <div class="free-shipping">包邮</div> -->
            <div class="payment-number">{{ item.buyCount }}人付款</div>
            <div class="price-wrap">
              <div class="left">
                <div v-if="configContent.sellingPrice" class="price">¥{{ item.price }}</div>
                <div v-if="configContent.originalPrice" class="original-price">¥{{ item.applyPrice }}</div>
              </div>
              <div v-if="configContent.button" class="right">
                <span class="circular" />
                <span class="circular" />
                <span class="circular" />
              </div>
            </div>
          </div>
        </div>
      </template>
      <div v-else class="commodity-item">
        <div class="commodity-image">
          <img :src="defaultImg" alt="">
        </div>
        <div class="commodity-content">
          <div v-if="configContent.sellingPoint" class="commodity-title">商品名称</div>
          <!-- <div class="free-shipping">包邮</div> -->
          <div class="payment-number">0人付款</div>
          <div class="price-wrap">
            <div class="left">
              <div v-if="configContent.sellingPrice" class="price">¥ 10</div>
              <div v-if="configContent.originalPrice" class="original-price">¥100</div>
            </div>
            <div v-if="configContent.button" class="right">
              <span class="circular" />
              <span class="circular" />
              <span class="circular" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import defaultImg from '@/assets/CreationCamp/commodityDefault.png'
import Goods from '@/api/Goods'
export default {
  props: {
    config: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      defaultImg,
      goods: []
    }
  },
  computed: {
    configContent() {
      return this.config.content
    },
    configContentList() {
      return []
    }
  },
  watch: {
    'config.content.categoryList': {
      handler() {
        this.findGoods()
      },
      deep: true
    }
  },
  created() {
    this.findGoods()
  },
  methods: {
    async findGoods() {
      const { categoryList } = this.configContent
      if (categoryList && categoryList.length) {
        const categorys = categoryList.map(i => i.id)
        const res = await Goods.findGoods({
          categoryIdList: categorys
        })
        const resData = res.data.data || {}
        this.goods = resData.categoryList || []
      }
    }
  }
}
</script>
<style lang="less" scoped>
.commodity-item-component {
	.commodity-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);
		}
	}
	.commodity-list {
		width: 100%;
		margin-bottom: 15px;
		.commodity-item {
			display: flex;
			padding: 15px;
			.commodity-image{
				width: 130px;
				height: 130px;
				img{
					width: 100%;
					height: 100%;
				}
			}
			.commodity-content{
				flex: 1;
				margin-left: 15px;
				.commodity-title{
					height: 30px;
					margin-bottom: 45px;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					font-size:14px;
					font-family:PingFang SC;
					font-weight:500;
					color:rgba(51,51,51,1);
				}
				.free-shipping{
					width:35px;
					height:18px;
					line-height: 18px;
					margin-bottom: 15px;
					text-align: center;
					background:rgba(255,121,17,.2);
					font-size:12px;
					font-family:PingFang SC;
					font-weight:500;
					color:#FF7911;
					border-radius:2px;
				}
				.payment-number{
					margin-bottom: 15px;
					font-size:12px;
					font-family:PingFang SC;
					font-weight:500;
					color:rgba(153,153,153,1);
				}
				.price-wrap{
					display: flex;
					.left{
						flex: 1;
						.price{
							display: inline-block;
							font-size:14px;
							font-family:Arial;
							font-weight:400;
							color:rgba(255,121,17,1);
						}
						.original-price{
							display: inline-block;
							margin-left: 5px;
							font-size:12px;
							font-family:PingFang SC;
							font-weight:500;
							text-decoration:line-through;
							color:rgba(153,153,153,1);
						}
					}
					.right{
						display: flex;
						align-items: center;
						justify-content: center;
						width:25px;
						height:25px;
						background:linear-gradient(90deg,rgba(255,162,0,1),rgba(255,121,17,1));
						border-radius:50%;
						.circular{
							width: 3px;
							height: 3px;
							margin: 0 1px;
							background-color: #fff;
							border-radius: 50%;
						}
					}
				}
			}
		}
	}
}
</style>
