<template>
  <div class="the-block min-w-1200 md:w-bodySet mx-auto mb-16 flow-root">
    <chain-search
      class="mt-7"
      :placeholder="searchInputPlaceholder"
    ></chain-search>
    <div class="pc-block inner-box">
      <div class="title flex items-center justify-between">
        <span class="total-block">
          {{ $t('lang.block.title') }}（{{ maxHeight | filterNum
          }}{{ $t('lang.block.count') }}）
        </span>
        <page-container
          @pageChange="pageChange"
          @sizeChange="sizeChange"
          :currentPage="pages.currentPage"
          :pageSize="pages.pageSize"
          :total="pages.total"
        ></page-container>
      </div>
      <!-- 表格部分 -->
      <el-table
        :data="Blocks"
        stripe
        style="width: 100%;"
        class="data-table"
        v-loading="Loading"
        element-loading-text="Loading..."
        element-loading-spinner="el-icon-loading"
      >
        <template slot="empty">
          <div>
            <!-- <div
              v-if="Loading"
              class="loading-line"
              v-loading="Loading"
              element-loading-text="Loading..."
              element-loading-spinner="el-icon-loading"
            ></div> -->
            <span v-if="!Loading">{{ $t('lang.page.nodata') }}</span>
          </div>
        </template>
        <el-table-column :label="$t('lang.block.height')" width="180">
          <template slot-scope="item">
            <router-link
              :to="`/blockDetail?height=${item.row.height}`"
              class="light"
            >
              {{ item.row.height }}
            </router-link>
          </template>
        </el-table-column>
        <el-table-column
          prop="blockTime"
          :label="$t('lang.block.time')"
          width="220"
        >
          <template slot-scope="item">
            <count :time="item.row.blockTime" class="light2"></count>
          </template>
        </el-table-column>
        <el-table-column prop="hash" :label="$t('lang.block.hash')">
          <template slot-scope="item">
            <router-link
              :to="`/blockDetail?height=${item.row.height}`"
              class="light"
            >
              {{ item.row.hash | filterHash(12) }}
            </router-link>
          </template>
        </el-table-column>
        <el-table-column :label="$t('lang.block.mineRevenue')">
          <template slot-scope="block">
            <div class="light2">
              {{ block.row.height | branchIncome('BTY') }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="txCount"
          :label="$t('lang.block.txCount')"
          width="100"
        >
          <template slot-scope="item">
            <span class="light">{{ item.row.txCount }}</span>
          </template>
        </el-table-column>
      </el-table>
      <!-- 底部分页 -->
      <div class="bottom-page flex justify-end">
        <page-container
          @pageChange="pageChange"
          @sizeChange="sizeChange"
          :currentPage="pages.currentPage"
          :pageSize="pages.pageSize"
          :total="pages.total"
        ></page-container>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import ChainSearch from '@/components/pc/BlockChainBrowser/ChainSearch.vue'
import PageContainer from '@/components/pc/BlockChainBrowser/PageContainer.vue'
import Count from '@/components/pc/BlockChainBrowser/Count.vue'
import { getRpc } from 'ycc-api/dist/cmjs/service/Rpc'
import { searchInputPlaceholder } from '@/constant'

const Rpc = getRpc('/yccApi')
export default Vue.extend({
  components: { ChainSearch, PageContainer, Count },
  data() {
    return {
      maxHeight: 0,
      startHeight: 0,
      endHeight: 0,
      Loading: false,
      Timer: 0,
      pages: {
        currentPage: 1,
        pageSize: 20,
        total: 10,
      },
      Blocks: [],
      searchInputPlaceholder,
    }
  },
  computed: {
    ParallelChain() {
      return this.$store.getters.isParallelChain
    },
  },
  activated() {
    this.getLastBlock()
  },
  mounted() {
    this.getLastBlock()
  },
  methods: {
    getLastBlock() {
      console.log(this.Loading, 'show loading')
      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.pages.total = this.maxHeight
            this.getBlocks(this.maxHeight)
            return
          }
          this.Loading = false
        } else {
          this.Loading = false
          this.$notify.warning({
            title: this.$t('components.tip'),
            message: data.error,
          })
        }
      })
    },
    pageChange(page) {
      clearTimeout(this.Timer)
      this.pages.currentPage = page
      let newHeight =
        this.maxHeight - (this.pages.currentPage - 1) * this.pages.pageSize
      this.endHeight = 0
      this.Blocks = []
      this.getBlocks(newHeight)
    },
    sizeChange(size) {
      this.pages.pageSize = size
      this.pageChange(1)
    },
    getBlocks(endHeight) {
      this.Loading = true
      // 首次更新
      if (this.endHeight === 0) {
        this.endHeight = endHeight
        this.startHeight =
          this.endHeight - this.pages.pageSize + 1 > 0
            ? this.endHeight - this.pages.pageSize + 1
            : 0 // 尾页判断
      } else {
        // 非首次请求获取更新的区块
        this.startHeight = this.endHeight + 1
        this.endHeight = this.maxHeight
      }

      Rpc.getHeaders(this.startHeight, this.endHeight).then((data) => {
        if (data.error === null) {
          let info = data.result.items.reverse()
          if (this.pages.currentPage === 1) {
            this.Blocks = [...info, ...this.Blocks]
            this.Blocks.length = this.pages.pageSize
          } else {
            this.Blocks = info
          }
          this.Loading = false
        } else {
          this.Loading = false
          this.$notify.warning({
            title: this.$t('components.tip'),
            message: data.error,
          })
        }
      })
    },
  },
  beforeDestroy() {
    //清除定时器
    clearTimeout(this.Timer)
  },
})
</script>

<style scoped>
.title {
  margin-top: 30px;
}
.total-block {
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #1f3470;
}

.data-table {
  margin-top: 15px;
  box-shadow: 0 0.5rem 1.2rem rgba(189, 197, 209, 0.2);
  border-radius: 2px;
  border: 1px solid rgba(235, 239, 241, 1);
  color: black;
}
.el-table__header thead tr {
  height: 60px;
}
.loading-line {
  height: 60px;
  line-height: 18px;
}
.bottom-page {
  margin-top: 23px;
}
.el-table td:nth-of-type(1) .cell,
.el-table th:nth-of-type(1) .cell {
  padding-left: 20px;
}

.the-block {
  margin-top: 70px;
}

.light2 {
  color: #1f3470;
}
.light {
  /* font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #7c88ad; */

  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #2545cb;
}
</style>
