<template>
  <div class="community-vote mb-16">
    <div class="vote-header w-full h-12 bg-app-drak-1 flex items-center fixed z-50">
      <div class="w-8 h-8" @click="$router.back()">
        <app-icon customize size="32px" type='icon-houtuishangyige'></app-icon>
      </div>
    </div>
    <div class="pt-10">
      <time-line :height="height" />
    </div>
    <div class="mt-3 mx-4 py-5 border-2 border-app-blue-2 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" 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>
</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 AppIcon from '@/components/common/Icon.vue'
import { Input } from 'ant-design-vue'
import Vue from 'vue'
export default Vue.extend({
  components: {
    TimeLine,
    CommunityCard,
    TicketBar,
    AppIcon,
    Input
  },
  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>
  .border-b {
    padding-bottom: 20px;
    border-bottom: 2px solid #666EED;
  }
  .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.4);
    box-shadow: 0px 3px 4px 0px #BCB3DC inset;
  }
  .vote-btn {
    background: #6870F1;
  }
</style>