<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)">
        <common-svg
          name="cunzhengliebiao-gengduo"
          class="icon"
          width="30px" height="15px"
          v-on="$listeners"
          @click.stop="showMoreActionHandler(item)"></common-svg>
        <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>
    <more-action :show.sync="showMoreAction" @cb="callbackAction" :menuList="actionList"></more-action>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Inject, Mixins } from 'vue-property-decorator';
import { VALID, ChainStatus } from '@/const/enum';
import MixinProof from '@/mixins/proof.ts';
@Component({
  components: {
  },
})
export default class RecycleList extends Mixins(MixinProof) {
  private showMoreAction: boolean = false;
  private currentProof: any = {};
  get actionList() {
    const { blockquery , copyhash, hide } = this.ActionList;
    const obj: any = {
      [ChainStatus.SUCCESS]: [ hide, copyhash, blockquery ],
      [ChainStatus.HIDING]: [  copyhash, blockquery ],
      [ChainStatus.HIDED]: [ copyhash ],
      [ChainStatus.HIDEFAILURE]: [ hide, copyhash, blockquery ],
    };
    return obj[this.currentProof.status];
  }
  private list: any[] = [];
  private total: number = 0;
  private page: number = 1;

  private loading: boolean = false;
  private finished: boolean = false;
  private callbackAction(cb: any) {
    cb.call(this, this.currentProof);
  }
  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;
    }
  }
  private showMoreActionHandler(data: any) {
    this.showMoreAction = true;
    this.currentProof = data;
  }
}
</script>
<style scoped lang="scss">
  .recycle-list{
    padding:15px;
    .item {
      position:relative;
      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;
      .icon {
        position:absolute;
        top: 0; 
        right: 0;
        margin: 10px;
      }
    }
  }
</style>