<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="handleCancelCreateProof"
      @next="addProofHandler"
      @select-template="handleClickSelectTemplate"
    ></add-baseinfo>
  </div>
</template>
<script lang="ts">
import {
  Component,
  Prop,
  Vue,
  Inject,
  Mixins,
  Watch,
} from 'vue-property-decorator';
import { ChainStatus } from '@/const/enum';
import { ChainStatusStr } from '@/const/constants';
import MixinProof from '@/mixins/proof.ts';
import ProofItem from './components/ProofItem.vue';
import AddBaseinfo from './components/AddBaseinfo.vue';
import WordsManager from '@/views/template/components/WordsManager.vue';

@Component({
  components: {
    ProofItem,
    AddBaseinfo,
    WordsManager,
  },
})
export default class Index extends Mixins(MixinProof) {
  @Inject('isSy') private isSy!: boolean;

  @Prop() selectTemplateId!: number | undefined;
  @Prop() templateName!: string | undefined;

  private show: boolean = false;
  private showFilterPicker: boolean = false;
  private columns: any[] = [{ text: '全部', status: [] }];
  private chainStatus: number[] | number = [];

  private currentProof: any = {};

  private list: any[] = [];
  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 words = [];
  private wordsManagerVisible = false;
  // private showAddFolder: boolean = false;

  private proofName: string = '';
  private templateInfo: any = {
    id: '',
    name: '',
  };
  private get ChainStatus() {
    return ChainStatus;
  }
  protected resetList() {
    this.list = [];
    this.page = 1;
    this.finished = false;
    this.loading = true;
    this.getList();
  }
  private callbackAction(cb: any) {
    cb.call(this, this.currentProof);
  }

  private handleConfirmWords() {
    console.log(this.words, 'show words');
    this.$router.push({
      name: 'ProofDetail',
      query: {
        templateDetail: this.words,
        templateName: '',
      },
    });
  }

  private async addProofHandler() {
    const { name } = this.templateInfo;
    let query: any = {
      templateId: this.templateInfo.id,
      proofName: this.proofName,
    };
    if (!name) {
      const props = {
        baseProof: this.isZengliang
          ? JSON.stringify(this.baseProof)
          : this.$route.query.baseProof,
        preProof: this.isZengliang
          ? JSON.stringify(this.preProof)
          : this.$route.query.preProof,
        proofName: this.proofName,
      };
      this.$router.push({
        name: 'AddProofFromSelfEditTemplate',
        query: props,
      });
      return;
    }

    if (this.isZengliang) {
      query = {
        ...query,
        baseProof: JSON.stringify(this.baseProof),
        preProof: JSON.stringify(this.preProof),
      };
    } else {
      query = {
        ...query,
        baseProof: this.$route.query.baseProof,
        preProof: this.$route.query.preProof,
      };
    }
    this.$router.push({ name: 'ProofDetail', query });
  }
  get actionList() {
    const {
      blockChain,
      edit,
      del,
      del2,
      copy,
      viewQrCode,
      copyhash,
      zengliang,
      hide,
    } = this.ActionList;
    const obj: any = {
      [ChainStatus.NONE]: [blockChain, edit, copy, del],
      [ChainStatus.CHAINING]: [copy],
      [ChainStatus.SUCCESS]: [viewQrCode, copyhash, del2, zengliang, hide],
      [ChainStatus.FAILURE]: [blockChain, edit, copy, del],
      [ChainStatus.HIDING]: [viewQrCode, copyhash, copy],
      [ChainStatus.HIDED]: [copy],
      [ChainStatus.HIDEFAILURE]: [viewQrCode, copyhash, copy, hide],
    };
    return obj[this.currentProof.status];
  }
  private async getList() {
    const { chainStatus } = this;
    const pageSize = 20;
    const params = {
      status: Array.isArray(chainStatus) ? chainStatus : [chainStatus],
      pageSize,
    };
    const res = await this.$api.proof.list(this.page++, params);
    const currentProofList = res.results || [];
    this.list = [...this.list, ...currentProofList];
    // 加载状态结束
    this.loading = false;

    // 数据全部加载完成
    if (currentProofList < pageSize) {
      this.finished = true;
    }
  }

  private mounted() {
    // 检查是否需要弹出 添加存证 弹出框，若是，则并且准备弹出
    this.checkIfAddProofVisibleAndExe();
    Object.keys(ChainStatusStr).forEach((key: string) => {
      this.columns.push({ text: ChainStatusStr[key], status: Number(key) });
    });
    this.proofName = this.$route.query.proofName as string;
  }
  private checkIfAddProofVisibleAndExe() {
    const templateId = this.selectTemplateId;
    if (templateId && !Number.isNaN(templateId)) {
      this.showAddProof = true;
      this.templateInfo.id = templateId;
      this.templateInfo.name = this.templateName;
    }
  }
  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;
  }

  private handleClickSelectTemplate() {
    const proofName = this.proofName;
    this.$router.push({
      name: 'SelectTemplate',
      query: {
        proofName,
        ...this.$route.query,
      },
    });
  }

  private handleCancelCreateProof() {
    this.showAddProof = false;
    this.proofName = '';
    this.templateInfo = { id: '', name: '' };
    this.$router.push({
      name: 'ProofList',
    });
  }
}
</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 {
  box-sizing: border-box;
  .content {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(3, 100px);
  }
}
</style>
