<template>
    <div class="card flex flex-col">
        <div class="header bg-app-blue-4 flex items-center px-5 py-3 rounded-tl-xl rounded-tr-xl ">
            <div v-if="showRank" class="medals h-14 w-16 relative flex-grow-0 flex-shrink-0">
                <img v-if="cardContent.rank < 3" class="w-10 h-12" :src="lists[cardContent.rank - 1]" alt="">
                <div v-else-if="cardContent.rank <= 5 && cardContent.rank >= 3" class='w-10 h-12 text-center flex items-center relative'>
                    <img class="w-10 h-12 absolute top-0" src="@/assets/03.svg" alt="">
                    <div class="w-full absolute top-1.5 z-50 text-app-blue-3 text-bolder">{{ '0'+cardContent.rank }}</div>
                </div>
                <div v-else class='w-10 h-10 rounded-full border border-app-blue-2 border-solid text-app-blue-1 text-center text-white absolute left-1 top-1 leading-10'>
                    {{ cardContent.rank >= 10 ? cardContent.rank : '0'+cardContent.rank }}
                </div>
                <!-- <div class="cycle rounded-full w-10 h-10 z-40 absolute top-0 text-center" :class='medalsColor'>
                    <div class='inside w-8 h-8 bg-app-white-2 rounded-full text-app-blue-1 absolute left-1 top-1 leading-8'>
                        01
                    </div>
                </div>
                <div class="trangle w-3  h-5 bg-app-red absolute top-7 left-2 z-30 transform  rotate-45 "></div>
                <div class="trangle w-3  h-5 bg-app-red absolute top-7 left-6 z-30 transform  -rotate-45 shadow-lg "></div> -->
            </div>
            <div class=" text-sm text-left justify-items-start flex-grow overflow-hidden">
                <div class="mb-1 card-content">{{ cardContent.name }}</div>
                <div class=' text-xs'>当前票数 <span>{{ cardContent.score }}</span></div>
            </div>
            <div class='flex-grow-0 flex-shrink-0'>
                <div v-if="showClose" class="" @click.stop="goClose(cardContent.id)">
                    <app-btn :text='status === 4 ? "已关闭" : isClose === true ? "已关闭" : "关闭"' class="bg-app-blue-2 rounded" border="border-none"></app-btn>
                </div>
                <app-btn v-else :text='voteText' class="bg-app-blue-2 rounded" border="border-none"></app-btn>
                <!-- <app-btn :text='voteText' class="bg-app-blue-2 rounded" border="border-none"></app-btn> -->
            </div>
        </div>
        <div class="bottom bg-app-blue-3 rounded-bl-xl rounded-br-xl  px-5 py-5">
            <div class=" text-xs text-app-white">{{ cardContent.description && cardContent.description.length > 50 ? cardContent.description.slice(0, 50) + '...' : cardContent.description }}</div>
        </div>
    </div>
</template>

<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
  props: {
      medalsColor:{
        type:String,
        default:'bg-app-yellow-1'
      },
      index: {
          type: Number
      },
      cardContent: {
          type: Object
      },
      status: {
          type: Number,
          default: 2
      },
      showClose: {
          type: Boolean,
          default: false
      },
      showRank: {
          type: Boolean,
          default: true
      },
      isClose: {
          type: Boolean
      }
  },
  data() {
      return {
          lists: [require('@/assets/1.png'),require('@/assets/2.png')],
          voteText: '投票',
          optionId: ''
      }
  },
  methods:{
      goClose(id: string) {
          if (this.status === 4) return
          if (this.status < 4 && this.isClose) return
          this.$emit('closeOption', id)
      }
  },
    components:{
        'app-btn':()=>import('@/components/common/Btn.vue'),
        // 'app-icon':() => import('@/components/common/Icon.vue')
    },
    watch: {
        status(n) {
            if (n === 1 || n === 0) {
                this.voteText = this.cardContent?.isClose ? '已关闭' : '未开始'
            } else if (n === 2) {
                this.voteText = this.cardContent?.isClose ? '已关闭' :  '投票'
            } else if (n === 3) {
                this.voteText = this.cardContent?.isClose ? '已关闭' :  '已结束'
            } else {
                this.voteText = '已关闭'
            }
        }
    },
    mounted() {
        if (this.status === 1 || this.status === 0) {
            this.voteText = this.cardContent?.isClose ? '已关闭' :  '未开始'
        } else if (this.status === 2) {
            this.voteText = this.cardContent?.isClose ? '已关闭' :  '投票'
        } else if (this.status === 3) {
            this.voteText = this.cardContent?.isClose ? '已关闭' :  '已结束'
        } else {
            this.voteText = '已关闭'
        }
    }
});
</script>

<style scoped>
    .under {
        z-index: -1;
    }
    .card-content {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>

