<template>
  <div class="recycle-list">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text=""
      @load="getList"
    > 
      <empty v-if="!list.length" name="huishouzhan1" tip="暂无记录" style="margin-top:30vh;"></empty>
      <div v-for="item in list" :key="item.id" class="item" @click="goToBrowser(item)">
         <div style="color:#353535;font-size:16px;margin-bottom:9px;">{{item.name}}</div>
         <div>删除理由 {{item.abandon_remark}}</div>
         <div>删除时间 {{item.update_time |timeFormat}}</div>
      </div>
    </van-list>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Inject } from 'vue-property-decorator';
import { List, Popup, Button, Image, Picker, Grid, GridItem, Empty } from 'vant';
import { VALID } from '@/const/enum';
@Component({
  components: {
    [List.name]: List,
  },
})
export default class RecycleList extends Vue {
  @Inject('goToBrowser') private goToBrowser!: (proof: any) => void;
  private list: any[] = [];
  private total: number = 0;
  private page: number = 1;

  private loading: boolean = false;
  private finished: boolean = false;
  private async getList() {
    const params = {
      is_valid: VALID.UNUSABLE, // 1不可用
    };
    const res = await this.$api.proof.list(this.page++, params);
    this.total = res.total;
    this.list = [...this.list, ...(res.results || [])];
    // 加载状态结束
    this.loading = false;

    // 数据全部加载完成
    if (this.list.length >= this.total) {
      this.finished = true;
    }
  }
}
</script>
<style scoped lang="scss">
  .recycle-list{
    padding:15px;
    .item{
      display: flex;
      flex-direction: column;
      padding: 14px;
      margin-bottom: 15px;
      text-align: left;
      font-size:12px;
      font-weight:400;
      color:rgba(115,117,130,1);
      background:rgba(255,255,255,1);
      box-shadow:0px 2px 10px 0px rgba(218,218,218,0.6);
      border-radius:5px;
    }
  }
</style>