<template>
  <div class="category-navigation-component">
    <div class="category-list">
      <div
        v-for="(item, index) in configList"
        :key="index"
        class="category-item  text-overflow"
        @click="selectIndex(index)"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="shops-content">
      <div v-for="(item, index) in goods" :key="index" class="shops-item">
        <div class="shop-image">
          <img :src="item.imgs&&item.imgs[0] || categoryDefault" alt="">
        </div>
        <div class="shop-info">
          <div v-if="configContent.sellingPoint" class="shop-name">{{ item.productName }}</div>
          <div v-if="configContent.paymentNumber" class="payment-number">{{ item.buyCount }}人付款</div>
          <div class="shop-price-wrap">
            <div v-if="configContent.sellingPrice" class="concessional-rate">¥ {{ item.price }}</div>
            <div v-if="configContent.originalPrice" class="original-price">¥ {{ item.applyPrice }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import categoryDefault from '@/assets/CreationCamp/category-default.png'
import Goods from '@/api/Goods'
export default {
  props: {
    config: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data () {
    return {
      categoryDefault,
      selectClassIndex: 0,
      goods: []
    }
  },
  computed: {
    configContent() {
      return this.config.content
    },
    configList() {
      const { list } = this.configContent
      return list || []
    }
  },
  watch: {
    'config.content.list': {
      handler() {
        this.selectIndex()
      },
      deep: true
    }
  },
  created() {
    this.selectIndex()
  },
  methods: {
    selectIndex(index = 0) {
      this.selectClassIndex = index
      let currentItem
      this.configContent.list.map((item, index) => {
        if (this.selectClassIndex === index) {
          currentItem = item
        }
      })
      const { categoryList, goodsList } = currentItem
      const categoryIdList = (categoryList || []).map(i => i.id)
      const productIdList = (goodsList || []).map(i => i.id)
      this.findGoods(categoryIdList, productIdList)
    },
    async findGoods(categoryIdList, productIdList) {
      const res = await Goods.findGoods({
        categoryIdList,
        productIdList

      })
      const resData = res.data.data || {}
      const categoryList = resData.categoryList || []
      const goodsList = resData.goodsList || []
      this.goods = goodsList.concat(categoryList)
    }
  }
}
</script>
<style lang="less" scoped>
.category-navigation-component {
  padding: 10px;
  .category-list {
    overflow: auto;
    white-space: nowrap;
    width: 100%;
    overflow-y: hidden;
    height: 45px;
    line-height: 45px;
    .category-item {
      flex: 1;
      display: inline-block;
      font-size: 15px;
      color: #999999;
      padding: 8px;
      position: relative;
    }
  }
  .shops-content{
    display: flex;
    flex-wrap: wrap;
    margin-top: 5px;
    .shops-item{
      width: calc((100% - 5px )/ 2);
      &:nth-child(2n){
        margin-left: 5px;
      }
      .shop-image{
        height:170px;
        line-height: 170px;
        text-align: center;
        img{
          max-width: 100%;
          max-height: 100%;
          vertical-align: middle;
          border-style: none;
        }
      }
      .shop-info{
        padding: 10px;
        .shop-name{
          margin-bottom: 8px;
          font-size:14px;
           font-family:PingFang SC;
          font-weight:500;
           color:rgba(51,51,51,1);
        }
        .payment-number{
          margin-bottom: 15px;
          font-size:12px;
font-family:PingFang SC;
font-weight:500;
color:rgba(153,153,153,1);
        }
        .shop-price-wrap{
          display: flex;
          align-items: flex-end;
          .concessional-rate{
            flex: 1;
                font-size: 18px;
    font-family: Arial;
    font-weight: 400;
    color: #ff7911;
          }
          .original-price{
    margin-left: 20px;
    font-size: 12px;
    font-family: Arial;
    font-weight: 400;
    text-decoration: line-through;
    color: #999999;
          }
        }
      }
    }
  }
}
</style>
