<template>
  <div class="single-item-component">
    <div class="single-item-title">
      <div class="recommend">推荐</div>
      <div class="title">商城好物</div>
    </div>
    <div class="single-item-content">
      <img :src="goods.imgs[0]||defaultImg" />
    </div>
    <div class="single-item-footer">
      <div v-if="configContent.sellingPoint" class="shop-name">{{ goods.productName || '商品A' }}</div>
      <div class="shop-bottom">
        <div class="shop-price-wrap">
          <div v-if="configContent.sellingPrice" class="concessional-rate">¥ {{ goods.price || 0 }}</div>
          <div v-if="configContent.originalPrice" class="original-price">¥ {{ goods.applyPrice || 0 }}</div>
        </div>
        <div v-if="configContent.button" class="shop-btn">立即购买</div>
      </div>
    </div>
  </div>
</template>
<script>
import defaultImg from '@/assets/CreationCamp/defaultSingle.png'
import Goods from '@/api/Goods'
export default {
  props: {
    config: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      defaultImg,
      goods: []
    }
  },
  computed: {
    configContent() {
      return this.config.content
    }
  },
  watch: {
    'config.content.goodsList': {
      handler() {
        this.findGoods()
      },
      deep: true
    }
  },
  created() {
    this.findGoods()
  },
  methods: {
    async findGoods() {
      const { goodsList } = this.configContent
      if (goodsList && goodsList.length) {
        const productIdList = goodsList.map(i => i.id)
        const res = await Goods.findGoods({
          productIdList
        })
        const resData = res.data.data || {}
        const goods = resData.goodsList || []
        this.goods = goods[0] || {}
        console.log(this.goods, '23')
      }
    }
  }
}
</script>
<style lang="less" scoped>
.single-item-component {
	padding: 15px;
	.single-item-title {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
		.recommend {
			width: 30px;
			height: 18px;
			line-height: 18px;
			font-size: 12px;
			text-align: center;
			background: rgba(255, 121, 17, 1);
			color: #fff;
			border-radius: 9px 1px 9px 1px;
		}
		.title {
			margin-left: 5px;
			font-size: 18px;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(51, 51, 51, 1);
		}
	}
	.single-item-content {
		width: 100%;
		height: 230px;
		margin-bottom: 15px;
		img {
			width: 100%;
			height: 100%;
		}
	}
	.single-item-footer {
		.shop-name {
			margin-bottom: 5px;
			font-size: 15px;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(51, 51, 51, 1);
		}
		.shop-bottom {
			display: flex;
			.shop-price-wrap {
				display: flex;
				align-items: flex-end;
				flex: 1;
				.concessional-rate {
					font-size: 18px;
					font-family: Arial;
					font-weight: 400;
					color: rgba(255, 121, 17, 1);
				}
				.original-price {
					margin-left: 20px;
					font-size: 12px;
					font-family: Arial;
					font-weight: 400;
					text-decoration: line-through;
					color: rgba(153, 153, 153, 1);
				}
			}
			.shop-btn {
				width: 70px;
				height: 24px;
				line-height: 24px;
				text-align: center;
				font-size: 12px;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(255, 255, 255, 1);
				background: rgba(255, 121, 17, 1);
				border-radius: 12px;
			}
		}
	}
}
</style>
