<template>
  <!-- #ifdef H5 -->
  <view>
    <zj-page-layout
      :hasFooter="true"
      :isScroll="true"
      :refresherTriggered="refresherTriggered"
      @refresherrefresh="refresherrefresh"
      @scrolltolower="scrolltolower"
    >
      <view class="list-container">
        <view
          class="goods-item"
          v-for="(item, index) in dataList"
          :key="index"
          @tap="toGoodsDetail(item.goodsId, item.goodsFavoriteId)"
        >
          <image :src="item.imgUrl" mode="aspectFill"></image>
          <view class="main">
            <view class="name">{{ item.goodsName }}</view>
            <view class="bottom">
              <view class="price"><text>¥</text>{{ item.goodsPrice | priceFilter }}</view>
            </view>
          </view>
        </view>
      </view>

      <Loading :loadStatus="loadStatus" :dataList="dataList" />
    </zj-page-layout>
  </view>
  <!-- #endif -->
  <!-- #ifndef H5 -->
  <web-view
    :src="webViewHref(`/packageMine/pages/collection`, pam, crossPagePam)"
    @message="crossPage.$listener"
  ></web-view>
  <!-- #endif -->
</template>

<script>
 // #ifdef H5
export default {
	data() {
		return {
			dataList: [],
			pageNum: 1,
			loadStatus: 0,
			refresherTriggered: false, // 下拉刷新状态
		}
	},

	onLoad() {
		this.getList();
	},

	methods: {
		// 获取商品列表
		getList() {
			this.loadStatus = 1;
			this.$api.get('/goods/favorite/query', {
         pageNum: this.pageNum,
         pageSize: 10,
         userId: this.$store.state.user.userId,
			}).then(res => {
				this.loadStatus = 0;
				let list = res.data.list;
				if (list.length < 10) {
				  this.loadStatus = 2;
				}
				this.dataList = this.dataList.concat(list);
			}).catch(() => {
				this.loadStatus = 2;
			}).finally(res => {
				this.refresherTriggered = false;
			})
		},

		// 滚动到底部
		scrolltolower(e) {
			if (this.loadStatus === 0) {
				this.pageNum++;
				this.getList();
			}
		},

		// 触发下拉刷新
		async refresherrefresh(e) {
			this.refresherTriggered = true;
			this.refreshList();
		},

		refreshList() {
			this.dataList = [];
			this.pageNum = 1;
			this.getList();
		},

    toGoodsDetail(id,id2) {
      setTimeout(() => {
        this.$modal({
          content: '确定要取消收藏吗？',
        }).then(() => {
          this.$api.post('/goods/favorite/del', {
            goodFavoriteId: id2
          }).then(res => {
            this.$successToast('取消收藏成功');
            this.refreshList();
          })
        }).catch(() => {})
      },1000)
      this.$navToPage({
        url: `/packageGoods/pages/detail?id=${id}`
      })
    },
	}
}
 // #endif
 // #ifndef H5
 export default {
   data() {
     return {
       pam: {},
     }
   },

   onLoad(pam) {
     this.pam = pam;
   },
 }
 // #endif
</script>

<style lang="scss">
.list-container {
  padding: 1rpx 20rpx;
  .goods-item {
    @include zj-card;
    padding: 20rpx;
    margin-top: 20rpx;
  }
}
</style>
