<template>
  <view class="HistoryList">
    <!-- 有足迹 -->
    <view class="goodsList" v-if="lists.length>0">
      <view class="date">以往足迹</view>
      <view class="lists">
        <view class="lists-item" v-for="(item,index) in lists" :key="index" @click="goGoods(item.goods_id)">
          <image class="goods-img" :src="item.cover" mode="aspectFill" />
          <view class="money"><span class="tags" v-if='item.tags'>{{item.tags[0].name}}</span><span>￥</span>{{item.price}}</view>
        </view>
      </view>
    </view>

    <!-- 没有任何足迹 -->
    <no-list v-if="lists.length === 0" name='no-foot' txt="您还没有产生任何足迹哦~" />

    <!-- <u-toast ref="uToast" /> -->
    <u-toast ref="uToast" />
  </view>
</template>

<script>
  import {
    browsers
  } from '@/apis/interfaces/mine'
  export default {
    data() {
      return {
        lists: [],
        page: 1,
        has_more: true
      }
    },
    onLoad() {
      this.getLists()
    },
    onReachBottom() {
      if (this.has_more) {
        this.page = this.page + 1
        this.getLists()
      } else {
        this.$refs.uToast.show({
          title: '吼吼吼~我是有底的~',
          type: 'primary',
          duration: 3000
        })
      }
    },
    methods: {
      getLists() {
        browsers(this.page).then(res => {
          this.lists = this.lists.concat(res.data)
          if (res.page.has_more) {
            this.has_more = true
          } else {
            this.has_more = false
          }
        }).catch(err => {
          this.$refs.uToast.show({
            title: err.message,
            type: 'primary',
            duration: 3000
          })
        })
      },
      // 跳转到商品详情
      goGoods(id) {
        console.log(id)
        uni.navigateTo({
          url: '/pages/goods/details?id=' + id
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .HistoryList {
    .goodsList {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      box-sizing: border-box;
      padding: 20rpx 10rpx 20rpx 15rpx;
      border-bottom: solid 1rpx #f7f7f7;

      .date {
        margin-left: 10rpx;
        font-size: $title-size * 1.12;
        font-weight: bold;
      }

      .lists {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        box-sizing: border-box;
        flex-wrap: wrap;
        width: 100%;

        .lists-item {
          margin: 20rpx 10rpx 10rpx 10rpx;
          width: 220rpx;

          .goods-img {
            width: 220rpx;
            height: 220rpx;
            border-radius: 10rpx;
          }

          .money {
            color: #FA3534;
            font-size: $title-size*0.9;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            box-sizing: border-box;

            .tags {
              background-color: #FA3534;
              color: #fff;
              padding: 2rpx 12rpx;
              border-radius: 6rpx;
              font-size: $title-size * 0.7 !important;
              margin-right: 10rpx;
            }

            span {
              font-size: $title-size * 0.8;
            }
          }
        }
      }
    }
  }
</style>
