import Vue from "vue";
import { message } from "ant-design-vue";
import { getRpc } from "ycc-api/dist/cmjs/service/Rpc";
import { iBlockInBlockMixin, iGetBlocksRetResultItem } from "@/types/block";
import { yccApi } from "@/service/api";
const Rpc = getRpc(yccApi);

export default Vue.extend({
  data() {
    return {
      searchValue: "",
      maxHeight: 0,
      startHeight: 0,
      endHeight: 0,
      Loading: false,
      Timer: 0,
      pages: {
        currentPage: 1,
        pageSize: 20,
        total: 10,
      },
      Blocks: [] as iBlockInBlockMixin[],
    };
  },
  mounted() {
    this.getLastBlock();
  },
  methods: {
    getLastBlock() {
      if (this.Loading) return;
      this.Loading = true;
      Rpc.getLastHeader().then((data) => {
        if (data.error === null) {
          if (data.result.height !== this.endHeight) {
            this.maxHeight = data.result.height;
            this.$store.commit("saveMaxHeight", this.maxHeight);
            this.pages.total = this.maxHeight;
            this.getBlocks(this.maxHeight);
            return;
          }
          this.Loading = false;
        } else {
          this.Loading = false;
          message.warning({
            content: data.error as string,
          });
        }
      });
    },
    pageChange(page: number) {
      clearTimeout(this.Timer);
      this.pages.currentPage = page;
      const newHeight =
        this.maxHeight - (this.pages.currentPage - 1) * this.pages.pageSize;
      this.endHeight = 0;
      this.Blocks = [];
      this.getBlocks(newHeight);
    },
    sizeChange(size: number) {
      this.pages.pageSize = size;
      this.pageChange(1);
    },
    getBlocks(endHeight: number) {
      this.Loading = true;
      Rpc.getBlocks(
        endHeight - this.pages.pageSize >= 0
          ? endHeight - this.pages.pageSize
          : 0,
        endHeight,
        true
      ).then((data) => {
        if (data.error === null) {
          const info = (data.result.items as iGetBlocksRetResultItem[])
            .reverse()
            .map((i) => ({
              height: i.block.height,
              blockTime: i.block.blockTime,
              minerHash: i.block.txs[0].from,
              txCount: i.block.txs.length,
            }));
          this.Blocks = [...info];

          info.map((i) => {
            Rpc.getBlockHash(i.height).then((ret) => {
              const the = this.Blocks.find(
                (block) => block.height === i.height
              );
              the && (the.hash = ret.result.hash);
              this.Blocks = [...this.Blocks];
            });
          });
          this.Loading = false;
        } else {
          this.Loading = false;
          message.warning({
            content: data.error,
          });
        }
      });
    },
  },
  watch: {
    Loading(val) {
      if (val === false && this.pages.currentPage === 1) {
        this.Timer = window.setTimeout(() => {
          this.getLastBlock();
        }, 15000);
      }
    },
  },
  beforeDestroy() {
    //清除定时器
    clearTimeout(this.Timer);
  },
});
