<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="{'pb-44': 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 px-3">
              <span class="inline-block" v-if="item.type1 === 0">{{ item.content }}</span>
              <div v-else class="flex items-end" @click="triggle(index, item.type1)">
                <span class="inline-block transition-all duration-300 delay-100 ease-in-out overflow-hidden" :class="{ 'initial-height': item.type1 === 1, 'max-h-52': item.type1 === 2 }">
                  {{ item.content }}
                </span>
                <div class="transition-all duration-300 ease-in-out" :class="{'transform origin-center -rotate-90 mb-0': item.type1 === 2, 'mb-1': item.type1 === 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 bg-app-blue-3 h-10 leading-10 text-center text-sm rounded-lg" @click="vote">{{ voteText }}</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 bg-app-blue-3 h-10 leading-10 text-center text-sm rounded-lg" @click="vote">{{ voteText }}</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: '选项卡-选修课-选修课-选项卡-选修课-选修课-选项卡-选修课-选修课-选项卡-选修课-选修课-选项卡-选修课-选修课-选项卡-选修课-选修课-选项卡-选修课-选修课-'
        }
      ],
      type1: true,
      voteNum: '',
      rest: 1111,
      hide: false,
      voteText: '投票'
    }
  },
  methods: {
    triggle(i: number, v: number) {
      if (v === 1) {
        this.$set(this.lists[i], 'type1', 2)
      } else {
        this.$set(this.lists[i], 'type1', 1)
      }
    },
    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 + ''
    },
    vote() {

    }
  },
  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', 1)
      } else {
        this.$set(this.lists[i], 'type1', 0)
      }
    }
    // 计算底部样式
    // const height = document.body.clientHeight || document.documentElement.clientHeight
    const height = window.innerHeight
    this.hide = false
    console.log(height)
    console.log(box.scrollHeight)
    if (height + 50 < box.scrollHeight) {
      this.hide = true
    } else {
      this.hide = false
    }
    window.onresize = () => {
      console.log(height)
    console.log(box.scrollHeight)
      if (height + 50 < box.scrollHeight) {
        this.hide = true
      } else {
        this.hide = false
      }
    }
  }
})
</script>

<style scoped>
  .type-1 {
    display: -webkit-box;
    overflow: hidden;  
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
  .initial-height {
    max-height: 60px;
  }
</style>