<template>
    <div class="card flex flex-col">
        <div class="header  ">
            <div class='w-full relative rounded-t-xl overflow-hidden'>
            
                <img :src="cardContent.type === 1 ? backUrl[1] : backUrl[0] " class="h-36 object-center w-full rounded-tl-xl rounded-tr-xl" :class="[cardContent.type === 1 ? 'object-cover' : 'object-scale-down']">
                <div class='cover w-full h-36 absolute top-0 left-0 z-40 bg-black bg-opacity-65'>
              
                </div>
                <div class='overlay w-full h-36 absolute top-0 left-0 z-50 p-5 '>
                    <div>{{ title }}</div>
                    <div>
                        <app-timeBox :times='timeStamp' :showNum="3" bgColor='bg-app-blue-2'></app-timeBox>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom bg-app-blue-3 rounded-bl-xl rounded-br-xl  ">
            <div class="bottom-upside" :class="{'bor-b': cardContent.type === 1}">
                <div class="px-5 py-3">
                    <div class='py-2 flex items-center justify-between'>
                        <span>{{ cardContent.name }}</span>
                        <!-- <div v-if="showEdit" @click.stop="goEdit(cardContent.ID)">
                            <app-icon customize size="16px" color="#fff" type='icon-bianji'></app-icon>
                        </div> -->
                        <div v-if="cardContent.type !== 1" @click.stop="closeCommunity(cardContent.ID, cardContent.status)">
                            <app-btn :text='cardContent.status < 4 ? "关闭" : "已关闭"' class="bg-app-blue-2 rounded" border="border-none"></app-btn>
                        </div>
                    </div>
                    <div class="text-xs text-app-white">{{ cardContent.description && cardContent.description.length > 50 ? cardContent.description.slice(0, 50) + '...' : cardContent.description }}</div>
                </div>
            </div>
            <div v-if="cardContent.type === 1" class=" bottom-footside flex items-center justify-between px-5">
                <div class='text-xs text-app-white'>当前票数<span class="ml-3 text-lg text-white">{{ cardContent.amount }}</span></div>
                <div>
                    <div v-if="showEdit && cardContent.status < 3" class="py-3" @click.stop="goEdit(cardContent.ID)">
                        <app-icon customize size="16px" color="#fff" type='icon-bianji'></app-icon>
                    </div>
                    <app-btn v-else :text='text' class="bg-app-blue-2 rounded" border="border-none"></app-btn>
                    <!-- <app-btn :text='text' class="bg-app-blue-2 rounded" border="border-none"></app-btn> -->
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
  props: {
      showEdit: {
          type: Boolean,
          default: false
      },
      cardContent: {
          type: Object
      },
      blockHeight: {
          type: String
      },
      blockTime: {
          type: Number
      }
  },
  data() {
      return {
          text: '投票',
          timeStamp: '',
          title: '',
          backUrl: [require('../assets/demo2.png'), require('../assets/demo.png')]
      }
  },
  methods:{
      goEdit(id: string) {
          this.$router.push({path: '/Mine/MineEdit', query: { voteID: id }})
      },
      getContext() {
          const t = this.cardContent.status
          if (t === 3) {
              this.text = '已结束'
              this.title = '投票已结束'
          } else if (t === 1) {
              this.text = '未开始'
              this.title = '离投票开始还有约'
          } else if ( t === 2){
              this.text = '投票'
              this.title = '离投票截止还有约'
          } else {
              this.text = '已关闭'
              this.title = '投票已关闭'
          }
      },
      getTimeStamp() {
        const stampStart = this.blockTime + '000'
        if (this.cardContent.status === 1) {
            this.timeStamp = (+this.cardContent.startHeight - +this.blockHeight) * 5000 + +stampStart + ''
        } else {
            this.timeStamp = (+this.cardContent.endHeight - +this.blockHeight) * 5000 + +stampStart + ''
        }
        // 已关闭的情况，清除倒计时
        if (this.cardContent.status === 4) {
            this.timeStamp = Date.now() + ''
        }
      },
      closeCommunity(id: string, s: number) {
          if (s === 4) return
          this.$emit('closeCommunity', id)
      }
  },
    components:{
        'app-btn':()=>import('@/components/common/Btn.vue'),
        'app-timeBox':()=>import('@/components/Timebox.vue'),
        'app-icon':() => import('@/components/common/Icon.vue')
    },
    mounted() {
        this.getContext()
        this.getTimeStamp()
    },
    watch: {
        blockTime() {
            this.getTimeStamp()
        }
    }
});
</script>

<style scoped>
    .bor-b {
        border-bottom: 1px solid #35379F;
    }
    .bg-opacity-65 {
        opacity: 0.65;
    }
</style>

