<template>
  <scroll-view class="shop-find-container" :style="{ height: windowHeight + 'px' }" scroll-y enable-back-to-top @scrolltolower="handleLower">
    <view v-if="dataList.length === 0 && status !== 'loading'" class="empty-find">
      <text class="wanl-gray">{{ $t('shop.noDynamics') }}</text>
    </view>
    <view v-if="dataList.length > 0" class="find-list">
      <view class="item margin-bj" v-for="item in dataList" :key="item.id">
        <view class="time">
          <text class="day text-xxl text-bold margin-right-xs">{{ item.createtime_date || '' }}</text>
        </view>
        <view class="main">
          <view class="title text-cut-2">
            <view class="cu-tag sm radius margin-right-xs" :class="[typeList[item.type] || 'wanl-bg-blue']">{{ item.type_text || '' }}</view>
            {{ item.content || '' }}
          </view>
          <view v-if="item.images && item.images.length > 0" class="container margin-top-sm">
            <view v-for="(img, kes) in item.images" :key="kes" class="list radius-bock"
              :style="{ backgroundImage: 'url(' + img + ')' }" @tap="previewImage(item.images, kes)" />
          </view>
        </view>
      </view>
    </view>
    <view class="load-more" v-if="dataList.length > 0">
      <text v-if="status === 'loading'">{{ $t('common.loading') }}</text>
      <text v-else-if="status === 'noMore'">{{ $t('common.noMore') }}</text>
    </view>
  </scroll-view>
</template>

<script>
import { pullMallShopFindList } from '@/features/mall/mall-gateway'

export default {
  props: {
    windowHeight: { type: Number, default: 0 },
    tabbarHeight: { type: Number, default: 0 },
    userNo: { type: String, default: '' }
  },
  data() {
    return {
      dataList: [],
      current_page: 1,
      last_page: 1,
      status: 'loading',
      typeList: { live: 'wanl-bg-pink', video: 'wanl-bg-purple', goods: 'wanl-bg-orange', article: 'wanl-bg-blue' }
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    async loadData() {
      try {
        this.status = 'loading'
        const res = await pullMallShopFindList({ user_no: this.userNo, page: this.current_page })
        this.dataList = this.current_page === 1 ? res.list : this.dataList.concat(res.list)
        this.last_page = res.lastPage
        this.status = this.current_page >= this.last_page ? 'noMore' : 'more'
      } catch (e) {
        this.status = 'noMore'
      }
    },
    handleLower() {
      if (this.current_page < this.last_page) {
        this.current_page += 1
        this.loadData()
      }
    },
    previewImage(images, index) {
      uni.previewImage({ urls: images, current: images[index], indicator: 'number' })
    }
  }
}
</script>

<style lang="scss" scoped>
.shop-find-container {
  background-color: #f9f9f9;
}
.empty-find {
  display: flex;
  justify-content: center;
  padding: 200rpx 0;
  font-size: 28rpx;
}
.find-list {
  .item {
    background: #fff;
    border-radius: 16rpx;
    padding: 20rpx;
    margin-bottom: 20rpx;
    .time { margin-bottom: 15rpx; }
    .main {
      .title { font-size: 28rpx; line-height: 1.5; }
      .container {
        display: flex;
        flex-wrap: wrap;
        .list {
          width: 200rpx;
          height: 200rpx;
          margin-right: 10rpx;
          margin-bottom: 10rpx;
          background-size: cover;
          background-position: center;
        }
      }
    }
  }
}
.load-more {
  text-align: center;
  padding: 30rpx 0;
  color: #999;
  font-size: 24rpx;
}
</style>