<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="pro" :optionId="$route.query.optionId" :voteId="$route.query.voteID"/>
          </div>
        </div>
        <div class="mt-7 px-4">
          <TicketBar key="bar" :ticketNum="ticketNum" :cardStyle="2" ticketText="已投总票数（票）" />
        </div>
        <div class="px-4 mt-5 mb-10">
          <h4 class="text-sm text-white mb-2">投票记录</h4>
          <ul>
            <li v-for="(i, index) in list" :key="index" class="bg-app-dark-2 mb-2">
              <ticket-record :hasTitle="true" :message="i" />
            </li>
          </ul>
        </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 {
      ticketNum: 0,
      list: [],
      community: {} as any
    }
  },
  methods: {
    goVote() {
      if (this.community.status < 3) {
        this.$router.push({ path: '/Square/SquareVote', query: { ...this.$route.query }})
      } else {
        this.$router.push({ path: '/Square/SquareDetails', query: { ...this.$route.query }})
      }
    },
    getDetails() {
      service.voteDetails({
        execer: "user.p.szhtest.rankvote",
        funcName: "GetRankVoteInfo",
        payload: {
          optionId: '',
          voteID: this.$route.query.voteID as string
        }
      }).then(res => {
        this.community = res.data.result
        this.ticketNum = +res.data.result.amount
        const lists = res.data.result.voteOptions
        this.list.forEach(item => {
          const id = (item as any).optionId
          const o = lists.filter((i: { id: string }) => i.id === id)[0]
          this.$set(item, 'name', o?.name || '')
        })
        this.$forceUpdate()
      })
    },
    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 || []
        this.getDetails()
      })
    }
  },
  created() {
    this.getList()
    this.getDetails()
  },
  // watch: {
  //   $route(n, o) {
  //     if (n.path.indexOf('/AttendProject') <= -1) return
  //     if (n.query.voteID !== o.query.voteID && n.path !== o.path) {
  //       this.getList()
  //     }
  //   }
  // }
})
</script>