<template>
  <div class="proof-list">
    <van-image src="@/assets/addproof.png" width="50px" fit="contain" class="add-proof" @click="showAddProof = true;"></van-image>
    <header>
      <span style="font-size:18px;">存证列表</span>
      <div @click="showFilterPicker = true">
        <common-svg name="shaixuan"></common-svg>
        <span>筛选</span>
      </div>
    </header>
    <van-list
      v-model="loading"
      :finished="finished"
      @load="getList"
    >
      <van-image v-if="!list.length && !loading && isSy" src="@/assets/emptyProof.png" fit="contain"></van-image>
      <van-empty 
        v-if="!list.length && !loading"
        description="您还未添加存证"
        image="@/assets/empty.png">
      </van-empty>
      <proof-item 
        v-else   
        v-for="(proof) of list" 
        :proof="proof"
        :key="proof.id"
        @show-more-action="showMoreAction"
        @click.native="goProofDetail(proof)"
        @edit-increment-proof="editIncrementProof"
        ></proof-item>
    </van-list>
    <more-action :show.sync="show" :menuList="actionList" @cb="callbackAction"></more-action>
    <van-popup v-model="showFilterPicker" :close-on-popstate="true" round position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        @cancel="showFilterPicker = false"
        @confirm="onConfirmFilter"
      />
    </van-popup>
    <add-baseinfo v-if="showAddProof" v-model="proofName" :templateInfo.sync="templateInfo" @cancle="showAddProof = false;proofName='';templateInfo = {id:'',name: ''}" @next="addProofHandler" @select-template="showSelectTemplate = true;"></add-baseinfo>
    <select-template v-if="showSelectTemplate" @next="nextSelectedTemplate" @cancel="showSelectTemplate = false;" @preview="preview" @add-folder="showAddFolder = true;"></select-template>
    <transition name="van-slide-up">
      <add-folder v-if="showAddFolder" @cancel="showAddFolder = false" @next="addFolder"></add-folder>
    </transition>
    <transition name="van-slide-up">
      <preview-template :data="detail" v-if="showPreview" @cancel="showPreview = false" @employ="employ"></preview-template>
    </transition> 
  </div>
  
</template>
<script lang="ts">
import { Component, Prop, Vue, Inject, Mixins } from 'vue-property-decorator';
import { List, Popup, Button, Image, Picker, Grid, GridItem, Empty, Dialog } from 'vant';
import { ChainStatus } from '@/const/enum';
import { ChainStatusStr } from '@/const/constants';
import MixinProof from '@/mixins/proof.ts';
import SelectTemplate from '@/views/template/components/SelectTemplate.vue';
import PreviewTemplate from '@/views/template/components/PreviewTemplate.vue';
import AddFolder from '@/views/template/components/AddFolder.vue';
import AddBaseinfo from './components/AddBaseinfo.vue';
@Component({
  components: {
    [Picker.name]: Picker,
    [Image.name]: Image,
    [Button.name]: Button,
    [List.name]: List,
    [Popup.name]: Popup,
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
    [Empty.name]: Empty,
    [Dialog.Component.name]: Dialog.Component,
    SelectTemplate,
    PreviewTemplate,
    AddFolder,
    AddBaseinfo,
  },
})
export default class Index extends  Mixins(MixinProof) {

  @Inject('isSy') private isSy!: boolean;
  private show: boolean = false;
  private showFilterPicker: boolean = false;
  private columns: any[] =  [{text: '全部', status: []}];
  private chainStatus: number[] | number = [];

  private currentProof: any = {};

  private list: any[] = [];
  private total: number = 0;
  private page: number = 1;

  private loading: boolean = false;
  private finished: boolean = false;

  private showSelectTemplate: boolean = false;
  private showPreview: boolean = false;
  private currentTemplate: any = {};
  private detail: any = {};

  private showAddFolder: boolean = false;

  private proofName: string = '';
  private templateInfo: any = {
    id: '',
    name: '',
  };
  private get ChainStatus() {
    return ChainStatus;
  }
  protected resetList() {
    this.total = 0;
    this.list = [];
    this.finished = false;
    this.page = 1;
    this.loading = true;
    this.getList();
  }
  private callbackAction(cb: any) {
    cb.call(this, this.currentProof);
  }
  private async addProofHandler() {
    const { name } = this.templateInfo;
    if (!name) {
      return this.$router.push({path: 'addTemplate'});
    }
    let query: any = {
      templateId: this.templateInfo.id,
      proofName: this.proofName,
    };
    if ( this.isZengliang ) {
      query = {...query, baseProof: JSON.stringify(this.baseProof), preProof: JSON.stringify(this.preProof)};
    }
    this.$router.push({ name: 'ProofDetail', query});
  }
  private async addFolder( { folderName }: any) {
     this.showAddFolder = false ;
     await this.$api.template.addFolder(folderName);
     this.showSelectTemplate = false;
  }
  private nextSelectedTemplate({ templateId, templateName }: any) {
    this.templateInfo.id = templateId;
    this.templateInfo.name = templateName;
    this.showPreview = false;
    this.showSelectTemplate = false;
  }
  private preview(currentTemplate: any) {
    this.currentTemplate = currentTemplate;
    this.detail = JSON.parse(this.currentTemplate.detail)[0];
    this.showPreview = true;
  }
  private employ() {
    this.nextSelectedTemplate({
      templateId: this.currentTemplate.id,
      templateName: this.currentTemplate.name,
    });
    this.showSelectTemplate = false;
  }
  get actionList() {
    const {blockChain, edit, del, del2, copy, blockquery , copyhash, zengliang, hide } = this.ActionList;
    const obj: any = {
      [ChainStatus.NONE]: [blockChain, edit, copy, del],
      [ChainStatus.CHAINING]: [ copy],
      [ChainStatus.SUCCESS]: [ blockquery, copyhash, del2, zengliang, hide],
      [ChainStatus.FAILURE]: [ blockChain, edit, copy, del],
      [ChainStatus.HIDING]: [ blockquery, copyhash, copy ],
      [ChainStatus.HIDED]: [ copy ],
      [ChainStatus.HIDEFAILURE]: [ blockquery, copyhash, copy, hide],
    };
    return obj[this.currentProof.status];
  }
  private async getList() {
    const { chainStatus } = this;
    const params = {
      status: Array.isArray(chainStatus) ? chainStatus : [ chainStatus ],
    };
    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 mounted() {
    Object.keys(ChainStatusStr).forEach((key: string) => {
      this.columns.push(
        { text: ChainStatusStr[key],
          status: Number(key),
        });
    });
  }
  private editIncrementProof(data: any) {
    const { incrementProof, preProof, baseProof } = data;
    this.$router.push({
      name: 'ProofDetail',
      query: {
        proofId: incrementProof.id,
        preProof: JSON.stringify(preProof),
        baseProof: JSON.stringify(baseProof),
      },
    });
  }
  private showMoreAction(data: any) {
    this.show = true;
    this.currentProof = data;
  }
  private onConfirmFilter(value: any) {
    this.chainStatus = value.status;
    this.resetList();
    this.showFilterPicker = false;
  }

}
</script>
<style scoped lang="scss">
  .proof-list{
    position: relative;
    box-sizing: border-box;
    padding: 11px 14px;
    background: #F9FBFF;
    margin-bottom: calc( #{ $tabHeight } + 50px);
  }
  .add-proof{
    position: fixed;
    right: 20px;
    bottom: 60px;
    z-index: 500;
  }
  header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 13px;
    color: #353535;
    font-size: 14px;
  }
  .more-action{
    padding: 20px;
    box-sizing: border-box;
    .content{
      display: grid;
      grid-gap: 10px;
      grid-template-columns: repeat(3,100px);
    }
  }
</style>
