<template>
  <!-- 推荐的商品 -->
  <view v-if="!isLoading && setting.enabled && goodsList.length" :style="appThemeStyle" class="recommended">
    <!-- 商品推荐标题 -->
    <view class="header">
      <view class="left">
        <image class="image"
          src="data:image/png;base64,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">
        </image>
      </view>
      <view class="title">{{ setting.style.title }}</view>
      <image class="image"
        src="data:image/png;base64,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">
      </image>
    </view>
    <!-- 商品列表 -->
    <view class="goods-list" :class="[`display__${setting.style.display}`, `column__${setting.style.column}`]">
      <view class="goods-item" v-for="(dataItem, index) in goodsList" :key="index" @click="onTargetGoods(dataItem.goods_id)">
        <!-- 单列商品 -->
        <block v-if="setting.style.column === 1">
          <view class="dis-flex">
            <!-- 商品图片 -->
            <view class="goods-item_left">
              <image class="image" :src="dataItem.goods_image"></image>
            </view>
            <view class="goods-item_right">
              <!-- 商品名称 -->
              <view v-if="setting.style.show.includes('goodsName')" class="goods-name">
                <text class="twoline-hide">{{ dataItem.goods_name }}</text>
              </view>
              <view class="goods-item_desc">
                <!-- 商品卖点 -->
                <view v-if="setting.style.show.includes('sellingPoint')" class="desc-selling_point dis-flex">
                  <text class="oneline-hide">{{ dataItem.selling_point }}</text>
                </view>
                <!-- 商品销量 -->
                <view v-if="setting.style.show.includes('goodsSales')" class="desc-goods_sales dis-flex">
                  <text>已售{{ dataItem.goods_sales }}件</text>
                </view>
                <!-- 商品价格 -->
                <view class="desc_footer">
                  <text v-if="setting.style.show.includes('goodsPrice')" class="price_x">¥{{ dataItem.goods_price_min }}</text>
                  <text v-if="setting.style.show.includes('linePrice') && dataItem.line_price_min > 0"
                    class="price_y col-9">¥{{ dataItem.line_price_min }}</text>
                </view>
              </view>
            </view>
          </view>
        </block>
        <!-- 多列商品 -->
        <block v-else>
          <!-- 商品图片 -->
          <view class="goods-image">
            <image class="image" mode="aspectFill" :src="dataItem.goods_image"></image>
          </view>
          <view class="detail">
            <!-- 商品标题 -->
            <view v-if="setting.style.show.includes('goodsName')" class="goods-name">
              <text class="twoline-hide">{{ dataItem.goods_name }}</text>
            </view>
            <!-- 商品价格 -->
            <view class="detail-price oneline-hide">
              <text v-if="setting.style.show.includes('goodsPrice')" class="goods-price">￥{{ dataItem.goods_price_min }}</text>
              <text v-if="setting.style.show.includes('linePrice') && dataItem.line_price_min > 0"
                class="line-price col-9 f-24">￥{{ dataItem.line_price_min }}</text>
            </view>
          </view>
        </block>
      </view>
    </view>
  </view>
</template>

<script>
  import * as GoodsApi from '@/api/goods'
  import SettingKeyEnum from '@/common/enum/setting/Key'
  import SettingModel from '@/common/model/Setting'

  export default {
    name: "Recommended",
    data() {
      return {
        // 正在加载
        isLoading: true,
        // 商品列表
        goodsList: [],
        // 推荐商品设置
        setting: {
          enabled: 1,
          style: {
            show: []
          }
        }
      }
    },
    async created() {
      const app = this
      app.isLoading = true
      await app.getSetting()
      if (app.setting.enabled) {
        await app.getRecommended()
      }
      app.isLoading = false
    },
    /**
     * 组件的方法列表
     * 更新属性和数据的方法与更新页面数据的方法类似
     */
    methods: {

      // 获取推荐商品列表
      async getRecommended() {
        const app = this
        await GoodsApi.recommended().then(result => app.goodsList = result.data.goodsList)
      },

      // 获取商城设置
      async getSetting() {
        const app = this
        await SettingModel.item(SettingKeyEnum.RECOMMENDED.value)
          .then(setting => app.setting = setting)
      },

      // 跳转商品详情页
      onTargetGoods(goodsId) {
        this.$navTo(`pages/goods/detail`, { goodsId })
      }

    }

  }
</script>

<style lang="scss" scoped>
  .recommended {
    margin-top: 60rpx;

    .header {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 20rpx;

      .image {
        display: block;
        width: 44rpx;
        height: 44rpx;
      }

      .title {
        margin: 0 26rpx;
        color: #333333;
        letter-spacing: 4rpx;
      }
    }

    .goods-list {
      // background: rgb(246, 246, 246);
      padding: 4rpx;
      box-sizing: border-box;

      &::after {
        clear: both;
        content: " ";
        display: table;
      }

      .goods-item {
        box-sizing: border-box;
        padding: 6rpx;

        .goods-image {
          position: relative;
          width: 100%;
          height: 0;
          padding-bottom: 100%;
          overflow: hidden;
          background: #fff;

          &:after {
            content: '';
            display: block;
            margin-top: 100%;
          }

          .image {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            -o-object-fit: cover;
            object-fit: cover;
          }
        }

        .detail {
          padding: 8rpx;
          background: #fff;

          .goods-name {
            min-height: 68rpx;
            line-height: 1.3;
            white-space: normal;
            color: #484848;
            font-size: 26rpx;
          }

          .detail-price {
            .goods-price {
              margin-right: 8rpx;
              font-size: 30rpx;
              color: $main-bg;
            }

            .line-price {
              text-decoration: line-through;
            }
          }
        }
      }

      &.display__slide {
        white-space: nowrap;
        font-size: 0;

        .goods-item {
          display: inline-block;
        }
      }

      &.display__list {
        .goods-item {
          float: left;
        }
      }

      &.column__2 {
        .goods-item {
          width: 50%;
        }
      }

      &.column__3 {
        .goods-item {
          width: 33.33333%;
        }
      }

      &.column__1 {
        .goods-item {
          width: 100%;
          height: 280rpx;
          margin-bottom: 12rpx;
          padding: 20rpx;
          box-sizing: border-box;
          background: #fff;
          line-height: 1.6;

          &:last-child {
            margin-bottom: 0;
          }
        }

        .goods-item_left {
          display: flex;
          width: 40%;
          background: #fff;
          align-items: center;

          .image {
            display: block;
            width: 240rpx;
            height: 240rpx;
          }
        }

        .goods-item_right {
          position: relative;
          width: 60%;

          .goods-name {
            margin-top: 20rpx;
            min-height: 68rpx;
            line-height: 1.3;
            white-space: normal;
            color: #484848;
            font-size: 26rpx;
          }
        }

        .goods-item_desc {
          margin-top: 8rpx;
        }

        .desc-selling_point {
          width: 400rpx;
          font-size: 24rpx;
          color: #e49a3d;
        }

        .desc-goods_sales {
          color: #999;
          font-size: 24rpx;
        }

        .desc_footer {
          font-size: 24rpx;

          .price_x {
            margin-right: 16rpx;
            color: $main-bg;
            font-size: 30rpx;
          }

          .price_y {
            text-decoration: line-through;
          }
        }
      }
    }
  }
</style>
