<template>
  <child-view>
    <div ref="box" class="sub-page mx-4">
      <div class="bg-app-dark-2 border border-app-blue-3 border-solid rounded-lg">
        <div class="p-4 border-0 border-b border-app-blue-3 border-solid">
          <community-card />
        </div>
        <div class="p-4 border-0 border-b border-app-blue-3 border-solid" :class="{'mb-40': hide}">
          <div
            v-for="(item, index) in lists"
            :key="index"
            class="mb-3 px-3 py-4 flex items-start border border-app-blue-3 border-solid rounded-lg"
            :class="{'opacity-50': !canVote}"
            >
            <img v-show="!item.selected" class="w-4 h-4 mr-2 mt-0.5 flex-shrink-0" src="@/assets/unselect.png" alt="" @click="changeHandle(index)">
            <img v-show="item.selected" class="w-4 h-4 mr-2 mt-0.5 flex-shrink-0" src="@/assets/selected.png" alt="" @click="changeHandle(index)">
            <div ref="content" class="text-sm">
              <span class="inline-block" v-if="!item.type1">{{ item.content }}</span>
              <div v-else class="flex items-end" @click="item.type1 = false">
                <span class="inline-block type-1">
                  {{ item.content }}
                </span>
                <div class="mb-1">
                  <app-icon customize type='icon-arrow-right-copy-copy'></app-icon>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-if="!hide" class="p-4">
          <input v-show="canVote" class="x-input text-sm" type="text" v-model="voteNum" @input="checkInput">
          <div class="flex items-center justify-between">
            <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>
          <button class="w-full vote-btn h-10 leading-10 text-center text-sm rounded-lg">投票</button>
          <p class="text-xs mt-2.5 mb-0 text-yellow-600 flex items-center justify-between">
            <span>投票成功后需要支付</span>
            <span>0.002BTY</span>
          </p>
        </div>
      </div>
      <div v-if="hide" class="fixed bottom-0 left-0 z-40 w-full bg-app-drak-1 p-4">
        <input v-show="canVote" class="x-input text-sm" type="text" v-model="voteNum" @input="checkInput">
          <div class="flex items-center justify-between">
            <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>
          <button class="w-full vote-btn h-10 leading-10 text-center text-sm rounded-lg">投票</button>
          <p class="text-xs mt-2.5 mb-0 text-yellow-600 flex items-center justify-between">
            <span>投票成功后需要支付</span>
            <span>0.002BTY</span>
          </p>
      </div>
    </div>
  </child-view>
</template>

<script lang="ts">
import CommunityCard from '@/components/home/CommunityCard.vue'
import childView from '@/layouts/childView.vue'
import AppIcon from '@/components/common/Icon.vue'
import Vue from 'vue'
export default Vue.extend({
  components: {
    childView,
    CommunityCard,
    AppIcon
  },
  data() {
    return {
      canVote: true,
      lists: [
        {
          selected: true,
          content: '选项卡-选修课-选修课-'
        },
        {
          selected: false,
          content: '选项卡-选修课-选修课-'
        },
        {
          selected: false,
          content: '选项卡-选修课-选修课-选项卡-选修课-选修课-选项卡-选修课-选修课-选项卡-选修课-选修课-选项卡-选修课-选修课-选项卡-选修课-选修课-选项卡-选修课-选修课-'
        },
        {
          selected: false,
          content: '选项卡-选修课-选修课-'
        },
      ],
      type1: true,
      voteNum: '',
      rest: 1111,
      hide: false
    }
  },
  methods: {
    changeHandle(i: number) {
      if (!this.canVote) return
      this.lists.forEach((item, index) => {
        item.selected = false
        if (i === index) {
          item.selected = true
        }
      })
    },
    checkInput() {
      if (!parseInt(this.voteNum)) {
        this.voteNum = ''
        return
      }
      const num = +this.voteNum
      if (num > this.rest) {
        this.voteNum = this.rest + ''
      }
      this.voteNum = parseInt(this.voteNum) + ''
    },
    inAll() {
      this.voteNum = this.rest + ''
    },
  },
  mounted() {
    const box = this.$refs.box as any
    const content = this.$refs.content as any[]
    for (let i = 0; i < content.length; i++) {
      if (content[i].offsetHeight > 72) {
        this.$set(this.lists[i], 'type1', true)
      }
    }
    const height = window.innerHeight
    if (height < box.scrollHeight) {
      this.hide = true
    } else {
      this.hide = false
    }
    window.onresize = () => {
      if (height < box.scrollHeight) {
        this.hide = true
      } else {
        this.hide = false
      }
    }
    console.log(height)
    console.log(box.scrollHeight)
  }
})
</script>

<style scoped>
  .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;
  }
  .type-1 {
    display: -webkit-box;
    overflow: hidden;  
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
</style>