<template>
  <view class="goods-list">
    <view class="goods-item" v-for="(item, idx) in list" :key="idx" @click="goToGoodsDetail(item.mid)">
      <view class="image-wrapper">
        <image :src="imgPath + item.iconSpu" mode="aspectFill"></image>
      </view>
      <text class="goods-name">{{ item.nameSpu }}</text>
      <view class="goods-price-wrap">
        <text class="goods-price-old">￥{{ item.priceOldFrom }}</text>
        <text :style="{ '--primary-color': primaryColor }" class="goods-price">￥{{ item.priceFrom }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import { Setting } from '../../index';
import { mapState } from 'vuex';

export default {
  name: 'GoodsList',
  computed: {
    ...mapState({
      primaryColor: state => state.primaryColor,
    }),
  },
  props: {
    // 商品列表数据源
    list: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      imgPath: Setting.getImgPath(),
    };
  },
  watch: {
    list: {
      immediate: true,
      deep: true,
      handler: function (data) {
        console.log('%c [watch list]: ', 'color:#1989fa;', data);
      },
    },
  },
  async mounted() {
    console.log('%c [GoodsList mounted]: ', 'color:#1989fa;');
  },
  methods: {
    goToGoodsDetail(mid) {
      this.$emit('goToGoodsDetail', mid);
    },
  },
};
</script>

<style scoped lang="scss">
$primary-color: #ed6a0c;
.goods-list {
  margin-top: 42px;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  .goods-item {
    display: flex;
    flex-direction: column;
    width: 47%;
    margin-top: 2%;
    background: #fff;
    border-radius: 12px;
    &:nth-child(2n + 1) {
      margin-right: 2%;
      margin-left: 2%;
    }
    &:nth-child(2n) {
      margin-right: 2%;
    }
    .image-wrapper {
      width: 100%;
      height: 330rpx;
      border-radius: 3px;
      overflow: hidden;
      image {
        width: 100%;
        height: 100%;
        opacity: 1;
      }
    }
    .goods-name {
      margin-left: 10px;
      font-size: 15px;
      color: #333;
      margin-top: 10px;
    }
    .goods-price-wrap {
      padding: 10px;
    }
    .goods-price-old {
      text-decoration: line-through;
      color: #999999;
    }
    .goods-price {
      margin: 5px 0 10px 10px;
      font-weight: bold;
      color: $primary-color;
      color: var(--primary-color);
      font-size: 16px;
    }
  }
}
</style>
