<template>
  <div class="community-vote mb-16">
    <child-view>
      <div class="sub-page">
        <div>
          <time-line :height="height" />
        </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" />
          </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 bg-app-blue-2 h-10 leading-10 text-center text-sm rounded-lg" @click="vote">{{ voteText }}</button>
          <p 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'
export default Vue.extend({
  components: {
    TimeLine,
    CommunityCard,
    TicketBar,
    ChildView
  },
  name: 'CommunityVote',
  data() {
    return {
      height: 12070,
      ticketNum: 22202,
      rest: 2121,
      useNum: '',
      community: {
        id: 1
      },
      testList: [

      ],
      voteText: '投票'
    }
  },
  methods: {
    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() {
      
    }
  }
})
</script>

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