<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 justify-between text-xs">
              <span class="inline-block mr-2 tracking-tight">{{ message.txHash ? message.txHash.slice(0, 25) + '...' + message.txHash.slice(-4) : '' }}</span>
              <div
                v-clipboard:copy="message.txHash"
                v-clipboard:success="onCopy"
                v-clipboard:error="onError">
                <app-icon customize size="16px" color="#FFBB00" type='icon-fuzhi'></app-icon>
              </div>
            </div>
          </div>
          <div class="flex items-center justify-between leading-9">
            <div class="text-app-white">区块高度</div>
            <div>{{ message.height }}</div>
          </div>
          <div class="flex items-center justify-between leading-9">
            <div class="text-app-white">投票数</div>
            <div>{{ message.amount }}票</div>
          </div>
          <div class="flex items-center justify-between leading-9">
            <div class="text-app-white">投票时间</div>
            <div>{{ timer() }}</div>
          </div>
          <div class="flex items-center justify-between leading-9">
            <div class="text-app-white">手续费</div>
            <div>{{ 0.002 }}BTY</div>
          </div>
          <div v-if="type === 2" class="flex flex-col items-start justify-between leading-9">
            <div class="text-app-white">简介</div>
            <div class="leading-normal">{{ community.desc }}</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-xs bg-app-blue-4 px-3">
              <div>投票HASH</div>
              <div>票数</div>
              <div>参与项目ID</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" @click="goHash(item)">{{ sliceStr(item.txHash) }}</div>
                <div>{{ item.amount }}票</div>
                <div class="text-yellow-400" @click="goId(item)">{{ item.voteID.slice(0,3) + '...' + item.voteID.slice(-10) }}</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'
import VueClipboard from 'vue-clipboard2'
import { Toast } from 'vant'
import { service } from '@/service'
Vue.use(VueClipboard)
export default Vue.extend({
  components: { childView, AppIcon, XPagination },
  data() {
    return {
      lists: [],
      all: [],
      count: 10,
      currentPage: 1,
      totalPage: 10,
      message: {},
      community: {} as any,
      type: 1
    }
  },
  methods: {
    goHash(item: any) {
      this.$router.replace({ path: '/Browser/VoteHash', query: {...this.$route.query, item: JSON.stringify(item), addr: item.txHash }})
    },
    goId(item: any) {
      this.$router.replace({ path: '/Browser/index', query: {voteID: item.voteID, optionId: item.optionId}})
    },
    sliceStr(i: string) {
      if (!i) return ''
      return i.slice(0,9) + '...' + i.slice(-4)
    },
    handleChange(v: number) {
      this.currentPage = v
      this.getpage(v)
    },
    onCopy() {
      Toast('复制成功')
    },
    onError() {
      Toast('复制失败')
    },
    getpage(i: number) {
      this.lists = this.all.slice(10*(i-1), 10*(i-1) + this.count)
    },
    getList() {
      service.tradeList({
        execer: 'user.p.szhtest.rankvote',
        funcName: 'GetCommitInfoList',
        payload: {
          id: this.$route.query.voteID as string,
          optId: this.$route.query.optionId as string,
          addr: '',
          count: -1,
          direction: 0,
          height: 0,
          index: 0
        }
      }).then(res => {
        this.all = res.data.result && res.data.result.list || []
        this.getpage(this.currentPage)
        this.totalPage = Math.ceil(this.all.length/this.count) <= 0 ? 1 : Math.ceil(this.all.length/this.count)
      }).catch(() => {
        this.all = []
        this.lists = []
      })
    },
    getDetails() {
      service.voteDetails({
        execer: 'user.p.szhtest.rankvote',
        funcName: 'GetRankVoteInfo',
        payload: {
          voteID: this.$route.query.voteID as string,
          optionId: this.$route.query.optionId as string
        }
      }).then(res => {
        this.type = res.data.result?.type
        this.community = res.data.result?.voteOptions[0] || {}
      })
    },
    timer() {
      const timeStamp = +(this.message as any).blockTime
      return (new Date(timeStamp*1000).getFullYear()) + '/' + (new Date(timeStamp*1000).getMonth() + 1) + '/' + (new Date(timeStamp*1000).getDate())
    },
  },
  created() {
    this.getList()
    this.getDetails()
    this.message = JSON.parse(this.$route.query.item as any)
  },
  watch: {
    $route(n, o) {
      if (n.path.indexOf('/MyAttend') <= -1) return
      if (n.query.optionId !== o.query.optionId) {
        this.getList()
        this.message = JSON.parse(this.$route.query.item as any)
      }
    }
  },
})
</script>

