<template>
  <div class="details mb-20">
    <child-view>
      <div class="sub-page">
        <div>
          <time-line v-if="result.type === 2" :status="status" :count="count" />
        </div>
        <div class="mt-3 mb-2 mx-4 py-4 bg-app-dark-2 border border-app-blue-3 border-solid rounded-lg">
          <div class="border-0 border-b border-app-blue-3 border-solid px-4">
            <CommunityCard :community="community" :showIntro="false" :voteId="$route.query.voteId" />
          </div>
          <div class="pt-7 px-4">
            <div class="mb-5">
              <TicketBar :ticketNum="ticketNum" />
            </div>
            <div>
              <p class="opacity-80 text-sm">{{ result.type === 1 ? '项目' : '社区'}}简介</p>
              <p class="text-xs font-medium leading-6 opacity-80 mb-0 break-all">
                {{ community.description }}
              </p>
            </div>
          </div>
        </div>
      </div>
    </child-view>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import TimeLine from '@/components/home/TimeLine.vue'
import CommunityCard from '@/components/home/CommunityCard.vue'
import TicketBar from '@/components/home/TicketBar.vue'
import ChildView from '@/layouts/childView.vue'
import { service } from '@/service/index'
export default Vue.extend({
  components: {
    TimeLine,
    CommunityCard,
    TicketBar,
    // AppIcon,
    ChildView
  },
  data() {
    return {
      height: 0,
      ticketNum: 0,
      community: {} as any,
      result: {} as any,
      status: 0,
      count: 0,
      endHeight: 0
    }
  },
  methods: {
    getDetails() {
      service.voteDetails({
        execer: "user.p.szhtest.rankvote",
        funcName: "GetRankVoteInfo",
        payload: {optionId: this.$route.query.optionId as string, voteID: this.$route.query.voteID as string}
      }).then(res => {
        this.result = res.data.result
        this.status = this.result.status
        if (this.result.type === 1) {
          this.community = res.data.result
          this.ticketNum = +this.community.amount
        } else {
          this.community = res.data.result.voteOptions[0]
          this.community.description = this.community.desc
          this.ticketNum = this.community.score
        }
        if (this.status === 1) {
          this.height = +res.data.result.startHeight
        } else {
          this.height = +res.data.result.endHeight
        }
        this.getRest()
      })
    },
    getRest() {
      service.voteRest({
        execer: 'user.p.szhtest.rankvote',
        funcName: 'GetRankVoteAccountInfo',
        payload: {
          id: this.$route.query.voteID as string,
          // addr: test.addr
          addr: this.$store.state.app.address
        }
      }).then(res => {
        const lists =  res.data.result && res.data.result.dayAccount || []
        let o = []
        o = lists.filter((item: any) => item.isToday)
        this.endHeight = +o[0].endHeight
        this.getHeight()
      })
    },
    getHeight() {
      service.getHeight().then(res => {
        const height = +res.data.result.mainHeight
        if (this.status === 1) {
          this.count = Math.abs(this.height - height)
        } else {
          this.count = Math.abs(this.endHeight - height)
        }
      })
    },
  },
  created() {
    this.getDetails()
  },
  watch: {
    $route(n, o) {
      if (n.query.optionId !== o.query.optionId) {
        this.getDetails()
      }
    }
  }
})
</script>
