<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 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 vote-btn h-10 leading-10 text-center text-sm rounded-lg">{{ voteText }}</button>
        </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) + ''
    }
  }
})
</script>

<style scoped>
  .community-vote {
    background-image: url(../../assets/home/banner.png);
    background-position-x: 50%;
    background-position-y: 0%;
    background-size: 100%;
    background-repeat: no-repeat;
  }
  .border-b {
    padding-bottom: 20px;
    border-bottom: 2px solid #35379F;
  }
  .x-input {
    width: 100%;
    height: 40px;
    border-radius: 10px;
    margin-bottom: 10px;
    padding-left: 12px;
    padding-right: 12px;
    font-weight: 500;
    color: rgba(36, 36, 37, 0.8);
    box-shadow: 0px 3px 4px 0px #BCB3DC inset;
  }
  .vote-btn {
    background: #6870F1;
  }
</style>