<template>
  <div class="community-vote mb-16">
    <child-view>
      <div class="sub-page">
        <div>
          <time-line ref="timeline" :status="status" :count="count" :isEnd="isEnd" />
        </div>
        <div class="mt-3 mx-4 py-5 bg-app-dark-2 border border-app-blue-3 border-solid rounded-lg">
          <div class="border-b border-app-blue-3 border-solid pb-5 px-4">
            <CommunityCard :community="community" type="community" :optionId="$route.query.optionId" :voteId="$route.query.voteID" />
          </div>
          <div class="pt-7 px-4">
            <div class="mb-5">
              <TicketBar :ticketNum="ticketNum" />
            </div>
            <input class="x-input text-sm" placeholder="请输入投票数量" v-model="useNum" @input="checkInput" />
            <div class="flex items-center justify-between mt-3">
              <p class="text-sm text-gray-400">可用余票 <span class="inline-block text-white opacity-100">{{ rest }}</span></p>
              <p class="text-xs" @click="inAll">全部填入</p>
            </div>
          </div>
        </div>
        <div class="px-4 mt-5">
          <button
            class="w-full h-10 leading-10 text-center text-sm rounded-lg"
            :class="[status === 2 ? 'bg-app-blue-2' : 'bg-app-blue-5 text-app-white', rest === 0 ? 'bg-app-blue-5' : 'bg-app-blue-3', community.isClose ? 'bg-app-blue-5' : 'bg-app-blue-3']"
            @click="vote">{{ voteText }}</button>
          <p v-if="fail" class="pt-2.5 text-sm text-yellow-600 text-center">投票失败，请重新投票</p>
        </div>
      </div>
    </child-view>
  </div>
</template>

<script lang="ts">
import TimeLine from '@/components/home/TimeLine.vue'
import CommunityCard from '@/components/home/CommunityCard.vue'
import TicketBar from '@/components/home/TicketBar.vue'
import Vue from 'vue'
import ChildView from '@/layouts/childView.vue'
import { service } from '@/service/index'
// import { test } from '@/constants/test'
import { Toast } from 'vant'
export default Vue.extend({
  components: {
    TimeLine,
    CommunityCard,
    TicketBar,
    ChildView
  },
  name: 'CommunityVote',
  data() {
    return {
      height: 0,
      ticketNum: 0,
      rest: 0,
      useNum: '',
      community: {} as any,
      voteText: '投票',
      isToday: true,
      numType: 1,
      status: 0,   // 以此为依据 设置投票按钮状态
      fail: false,
      count: 0,
      endHeight: 0,    // 下次投票的参数
      end: 0,           // 最终结束时间
      isEnd: 0
    }
  },
  methods: {
    getContent() {
      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.numType = res.data.result.numType
        this.status = res.data.result.status
        this.isEnd = res.data.result.status
        this.community = res.data.result.voteOptions[0]
        this.community.description = this.community.desc
        this.ticketNum = +this.community.score
        this.end = +res.data.result.endHeight
        if (this.status === 1) {
          this.height = +res.data.result.startHeight
          // this.getHeight(this.height + '')
        } else {
          this.height = +res.data.result.endHeight
        }
        this.getRest()
        // this.getLast()
        this.setBtn()
      })
    },
    // getLast() {
    //   chainService.getLastBlocks().then(res => {
    //     if (this.status === 1) {
    //       this.count = Math.abs(res.data.result.height - this.height)
    //     } else {
    //       this.count = Math.abs(this.height - res.data.result.height)
    //     }
    //   })
    // },
    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.isToday = o[0]?.isToday
        if (this.community.isClose) {
          this.rest = 0
        } else {
          this.rest = +o[0]?.balance || 0
        }
        this.endHeight = +o[0]?.endHeight || 0
        // 结束时间或下次投票
        if (Math.abs(this.endHeight - +this.end) < 5) {
          this.isEnd = 3
        } else {
          this.isEnd = this.status
        }
        console.log(this.end)
        console.log(this.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)
        }
      })
    },
    setBtn() {
      if (this.status  === 3) {
        this.voteText = this.community.isClose === true ? '投票已关闭' : '投票已结束'
      } else if (this.status === 2) {
        this.voteText = this.community.isClose === true ? '投票已关闭' : '投票'
      } else if (this.status === 1) {
        this.voteText = this.community.isClose === true ? '投票已关闭' : '投票'
      } else {
        this.voteText = '投票已关闭'
      }
    },
    inAll() {
      this.useNum = this.rest + ''
    },
    checkInput() {
      if (!parseInt(this.useNum)) {
        this.useNum = ''
        return
      }
      const num = +this.useNum
      if (num > this.rest) {
        this.useNum = this.rest + ''
      }
      this.useNum = parseInt(this.useNum) + ''
    },
    vote() {
      if (this.community.isClose) return
      if (this.rest === 0) return
      if (!this.useNum) {
        Toast('请输入投票数')
        return
      }
      if (this.isToday) {
        this.$store.commit('app/SET_TEXT', '提交的投票')
        service.memberVote({
          optionId: this.$route.query.optionId as string,
          voteId: this.$route.query.voteID as string,
          amount: +this.useNum
        }, () => {
          // Toast('投票成功')
          this.$store.commit('app/SET_TEXT1', '投票')
          this.$router.push({path: '/Home', query: {t: Date.now() + ''}})
        })
      } else {
        if (this.numType === 1) {
          Toast('已完成投票')
        } else {
          Toast('今日已投票')
        }
        this.fail = true
      }
    }
  },
  created() {
    this.getContent()
    // this.getRest()
  },
  // watch: {
  //   $route(n) {
  //     if (n.path.indexOf('/CommunityVote') <= -1) return
  //     // if (n.query.optionId !== o.query.optionId) {
  //       this.getContent()
  //       this.getRest()
  //       this.useNum = ''
  //     // }
  //   }
  // }
})
</script>

<style scoped>
  /* .vote-btn {
    background: #6870F1;
  } */
</style>