<template>
  <div class="recommendMainStyleDiv">
    <img class="recommendImg" src="//img10.360buyimg.com/imgzone/jfs/t1/142691/37/18162/14431/5fd5ce53Eefd0e962/d5bd2ed54aeb4e6d.png" />
    <div class="goodList">
      <div class="gridsView">
        <div class="girdView" v-for="(item, index) in recommendListData" :key="index">
          <div class="goodImgDiv" v-if="keyData.goodImg"><img class="goodImg" src="//img10.360buyimg.com/imgzone/jfs/t1/176451/36/20711/68622/60f7fa7cE0e56aecf/aa8754102dc19767.png" /></div>
          <div class="goodNameDiv" v-if="keyData.goodName">{{ item[keyData.goodName] }}</div>
          <div class="goodDetail" v-if="keyData.goodPrice">
            <span>
              ￥
              <span class="prize">{{ item[keyData.goodPrice] }}</span>
            </span>
            <span class="buySpan" v-if="datas[keyData.isShowBuy] == 'true'">购买</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import dataJson from '../../../data.json';

export default {
  props: ['isTemplate', 'datas', 'styleData', 'keyData'],
  // goodImg:'goodImg',
  // goodName:'goodName',
  // goodPrice:'goodPrice',
  // isShowBuy:'isShowBuy',//是否显示购买按钮
  // goodDetailUrl:'goodDetailUrl',
  components: {},
  data() {
    return {
      recommendListData: [
        {
          goodName: '商品13',
          goodPrice: '12.12'
        },
        {
          goodName: '商品13',
          goodPrice: '12.12'
        },
        {
          goodName: '商品13',
          goodPrice: '12.12'
        },
        {
          goodName: '商品13',
          goodPrice: '12.12'
        }
      ]
    };
  },
  created() {
    this.initData();
  },

  methods: {
    initData() {
      if (this.isTemplate == true) {
        this.recommendListData = [
          {
            goodName: '商品13',
            goodPrice: '12.12'
          },
          {
            goodName: '商品13',
            goodPrice: '12.12'
          },
          {
            goodName: '商品13',
            goodPrice: '12.12'
          },
          {
            goodName: '商品13',
            goodPrice: '12.12'
          }
        ];
      } else {
        //去请求接口
        this.recommendListData = [
          {
            goodName: '商品13',
            goodPrice: '12.12'
          }
        ];
      }
    }
  }
};
</script>

<style lang="scss">
.recommendMainStyleDiv {
  background: url(//img10.360buyimg.com/imgzone/jfs/t1/138437/4/18003/6491/5fd33bffE5cf0f2c0/b5f2b3540d5ea09a.png) no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 5.24rem;
  margin-top: 1.2rem;
  .recommendImg {
    width: 4.42rem;
    height: 1.26rem;
    margin-top: -0.74rem;
  }
  .goodList {
    margin: 0 0.34rem;
    height: 4.36rem;
    overflow-y: scroll;
    .gridsView {
      display: flex;
      flex-wrap: wrap;
      margin-top: 0.28rem;
      .girdView {
        margin: 0.17rem 0.17rem;
        display: flex;
        flex-direction: column;
        width: 45%;
        background: #fd1d25;
        font-size: 0.28rem;
        padding: 0 0 0.34rem 0;
        border-radius: 0.08rem;
        .goodImgDiv {
          background: #eee;
          margin: 0.1rem;
          .goodImg {
            width: 2.57rem;
            height: 2.45rem;
          }
        }
        .goodNameDiv {
          margin: 0 0.1rem;
          text-align: left;
          font-size: 0.22rem;
          color: #fff;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        .goodDetail {
          margin: 0.24rem 0.1rem 0 0.1rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
          color: #fff;
          font-size: 0.18rem;
          .prize {
            font-size: 0.3rem;
          }
          .buySpan {
            background: #fff;
            padding: 0.05rem 0.22rem;
            font-size: 0.22rem;
            border-radius: 0.25rem;
            color: #fd1d25;
          }
        }
      }
    }
  }
}
</style>
