<template>
  <scroll-view style="height: 100%" scroll-y refresher-enabled="true" refresher-background="none" :refresher-threshold="100" :refresher-triggered="refreshTriggered" @refresherrefresh="refresh" @scrolltolower="getData">
    <view class="vod-container">
      <vod-item v-for="(vod, vodIndex) in list" :key="vodIndex" :item="vod" />
    </view>
    <view class="load-more">
      <u-loadmore :status="loadStatus" loading-icon="semicircle" :line="true" />
    </view>
  </scroll-view>
</template>

<script>
import vodItem from '@/components/vod-item-row.vue'
import { app } from '@/utils/api'

export default {
  components: {
    vodItem
  },
  props: {
    wd: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      list: [],
      page: 1,
      refreshTriggered: false,
      loadStatus: 'loadmore',
      loading: true
    }
  },
  methods: {
    search() {
      this.loadStatus = 'loadmore'
      this.page = 1
      this.list = []
      this.getData()
    },
    async getData() {
      if (this.loadStatus === 'nomore' || this.loadStatus === 'loading') {
        return
      }
      this.loadStatus = 'loading'
      await app.searchList(this.wd, this.page).then(res => {
        if (res.code == 1) {
          if (res.data.page < res.data.page_total) {
            this.loadStatus = 'loadmore'
            this.page++
          } else {
            this.loadStatus = 'nomore'
          }
          this.list = this.list.concat(res.data.list)
        } else {
          this.$emit('empty')
        }
      }).catch(e => {
        this.$emit('empty')
      })
      this.refreshTriggered = false
    },
    refresh() {
      this.refreshTriggered = true
      this.loadStatus = 'loadmore'
      this.page = 1
      this.list = []
      this.getData()
    }
  }
}
</script>

<style>
</style>