<template>
  <div>
    <child-view rightText="参与投票" @rightHandle="goVote">
      <div class="sub-page">
        <div class="mt-0.5 mx-4 py-5 bg-app-dark-2 border border-app-blue-3 border-solid rounded-lg">
          <div class="px-4">
            <community-card :community="community" type="community" :optionId="$route.query.optionId" :voteId="$route.query.voteID"/>
          </div>
        </div>
        <div class="mt-7 px-4">
          <TicketBar :ticketNum="ticketNum" :cardStyle="2" ticketText="已投总票数（票）" />
        </div>
        <div class="px-4 mt-5 mb-10">
          <h4 class="text-sm text-white mb-2">投票记录</h4>
          <ul v-if="list.length > 0" class="text-sm">
            <li v-for="(i, index) in list" :key="index" class="bg-app-dark-2 mb-2">
              <ticket-record :hasTitle="false" :message="i" />
            </li>
          </ul>
          <div v-else class="w-full h-24 flex items-center justify-center test-xs">暂无数据</div>
        </div>
      </div>
    </child-view>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import CommunityCard from '@/components/home/CommunityCard.vue'
import TicketBar from '@/components/home/TicketBar.vue'
import TicketRecord from '@/components/mine/TicketRecord.vue'
import ChildView from '@/layouts/childView.vue'
import { service } from '@/service/index'

export default Vue.extend({
  components: {
    CommunityCard,
    TicketBar,
    TicketRecord,
    ChildView,
  },
  data() {
    return {
      community: {} as any,
      ticketNum: 0,
      list: []
    }
  },
  methods: {
    goVote() {
      this.$router.push({ path: '/Home/CommunityVote', query: { ...this.$route.query }})
    },
    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.community = res.data.result.voteOptions[0]
        this.community.description = this.community.desc
        this.ticketNum = +(this.community as any).score
      })
    },
    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.list = res.data.result && res.data.result.list || []
      })
    }
  },
  created() {
    this.getList()
    this.getDetails()
  },
  watch: {
    $route(n, o) {
      if (n.path.indexOf('/AttendCommunity') <= -1) return
      if (n.query.voteID !== o.query.voteID) {
        this.getDetails()
        this.getList()
      }
    }
  }
})
</script>