<template>
  <div>
    <child-view>
      <div class="sub-page">
        <div class="mx-4 mb-5 py-3 px-2 text-xs border-app-blue-3 border border-solid rounded-lg bg-app-blue-4">
          <div class="flex items-center justify-between leading-9">
            <div class="text-app-white">哈希</div>
            <div class="flex items-center">
              <span class="inline-block mr-2 tracking-tight">1z9e1beb62e754ff3704d8ba626d6e29f761a1c5a0</span>
              <app-icon customize size="16px" color="#FFBB00" type='icon-fuzhi'></app-icon>
            </div>
          </div>
          <div class="flex items-center justify-between leading-9">
            <div class="text-app-white">区块高度</div>
            <div>88925</div>
          </div>
          <div class="flex items-center justify-between leading-9">
            <div class="text-app-white">投票数</div>
            <div>88925票</div>
          </div>
          <div class="flex items-center justify-between leading-9">
            <div class="text-app-white">投票时间</div>
            <div>88925</div>
          </div>
          <div class="flex items-center justify-between leading-9">
            <div class="text-app-white">手续费</div>
            <div>88925BTY</div>
          </div>
        </div>
        <div class="mx-4 mt-5">
          <p class="mb-3 text-sm font-medium">参与历史</p>
          <div class="border border-app-blue-3 border-solid rounded-lg overflow-hidden">
            <div class="h-9 leading-9 flex items-center justify-between text-sm bg-app-blue-4 px-3">
              <div>个人ID</div>
              <div>票数</div>
              <div>投票HASH</div>
            </div>
            <ul class="hash-list mb-0">
              <li
                v-for="(item, index) in lists"
                :key="index"
                class="leading-9 px-3 text-xs flex items-center justify-between">
                <div class="text-yellow-400">1NyER8tS...KDcL</div>
                <div>3000票</div>
                <div class="text-yellow-400">1NyER8tS...KDcL</div>
              </li>
            </ul>
          </div>
        </div>
        <div>
          <x-pagination :currentPage="currentPage" :totalPage="totalPage" @handleChange="handleChange" />
        </div>
      </div>
    </child-view>
  </div>
</template>

<script lang="ts">
import childView from '@/layouts/childView.vue'
import Vue from 'vue'
import AppIcon from '@/components/common/Icon.vue'
import XPagination from '@/components/common/Pagination.vue'
export default Vue.extend({
  components: { childView, AppIcon, XPagination },
  data() {
    return {
      lists: [1],
      currentPage: 1,
      totalPage: 10
    }
  },
  methods: {
    handleChange() {

    }
  }
})
</script>