<template>
  <div class="browser">
    <child-view>
      <div class="sub-page">
        <div class="mx-4 py-4 border border-app-blue-3 border-solid rounded-lg bg-app-blue-4">
          <div class="px-4 pb-4 border-b">
            <p class="text-sm mb-3">社区名称</p>
            <div class="flex items-center text-yellow-400 mb-0 text-xs">
              <span class="inline-block mr-2 tracking-tight">ID:1z9e1beb62e754ff3704d8ba626d6e29f761a1c5a0</span>
              <div
                v-clipboard:copy="'hahahhahahahhaid'"
                v-clipboard:success="onCopy"
                v-clipboard:error="onError">
                <app-icon customize size="16px" color="#FFBB00" type='icon-fuzhi'></app-icon>
              </div>
            </div>
          </div>
          <p class="mt-4 mb-0 px-4 opacity-60 text-xs flex items-center justify-between">
            <span>当前总票数</span>
            <span>123464654票</span>
          </p>
        </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-xs bg-app-blue-4 px-3">
              <div class="w-1/3">个人ID</div>
              <div class="w-1/3 text-center">票数</div>
              <div class="w-1/3 text-right">投票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="w-1/3 text-yellow-400 " @click="goHashVote">1NyER8tS...KDcL</div>
                <div class="w-1/3 text-center">3000票</div>
                <div class="w-1/3 text-yellow-400 text-right" @click="goPersonVote">1NyER8tS...KDcL</div>
              </li>
            </ul>
          </div>
          <div>
            <x-pagination :currentPage="currentPage" :totalPage="totalPage" @handleChange="handleChange" />
          </div>
          <!-- <div class="w-full flex items-center justify-center mt-6">
            <div class="page-btn text-center text-xs rounded-l-lg flex items-center justify-center border border-solid border-app-blue-3" @click="goPage(1)">
              首页
            </div>
            <van-pagination class="mb-0" v-model="currentPage" :page-count="totalPage">
              <template #prev-text>
                <van-icon name="arrow-left" />
              </template>
              <template #next-text>
                <van-icon name="arrow" />
              </template>
            </van-pagination>
            <div class="page-btn text-center text-xs rounded-r-lg flex items-center justify-center border border-solid border-app-blue-3" @click="goPage(totalPage)">
              尾页
            </div>
          </div> -->
        </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 { Pagination, Icon, Toast } from 'vant';
import XPagination from '@/components/common/Pagination.vue'
import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard);
Vue.use(Pagination)
Vue.use(Icon)
export default Vue.extend({
  components: { childView, AppIcon, XPagination },
  data() {
    return {
      currentPage: 5,
      lists: [1,2,3,4],
      totalPage: 10
    }
  },
  methods: {
    goPersonVote() {
      this.$router.push({ path: '/browser/PersonVote' })
    },
    goHashVote() {
      this.$router.push({ path: '/Browser/VoteHash' })
    },
    onCopy() {
      Toast('复制成功')
    },
    onError() {
      Toast('复制失败')
    },
    goPage(n: number) {
      this.currentPage = n
    },
    handleChange(v: number) {
      this.currentPage = v
    }
  }
})
</script>

<style scoped>
  .border-b {
    border-bottom: 1px solid #666EED;
  }
  .hash-list li:nth-of-type(2n) {
    background: #240080;
  }
  .hash-list li:nth-of-type(2n + 1) {
    background: #0A002E;
  }
  >>> .van-pagination__item {
    min-width: 32px;
    height: 36px;
    background: #1A0270;
    color: #fff;
    border: 1px solid #35379F;
    border-right: none;
    font-size: 12px;
    flex-grow: 0
  }
  >>> .van-pagination__item--active {
    background: #0B0A44;
    color: #FFBB00;
  }

  >>> [class*=van-hairline]::after {
    border-color: #35379F
  }
</style>