<template>
    <div class="card flex flex-col">
        <div class="header  ">
            <div class='w-full relative'>
            
                <img src="@/assets/demo.png" class="object-cover h-36 object-center w-full rounded-tl-xl rounded-tr-xl">
                <div class='cover w-full h-36 absolute top-0 left-0 z-40 bg-black bg-opacity-20'>
              
                </div>
                <div class='overlay w-full h-36 absolute top-0 left-0 z-50 p-5 '>
                    <div>离投票截止还有约</div>
                    <div>
                        <app-timeBox times='1626359264197' :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 border-b border-gray-400">
                <div class="px-5 py-3">
                    <div class='py-2 flex items-center justify-between'>
                        <span>这里是投票项目的名称</span>
                        <div v-if="showEdit" @click.stop="goEdit">
                            <app-icon customize size="16px" color="#fff" type='icon-bianji'></app-icon>
                        </div>
                    </div>
                    <div  class=" text-xs text-app-white">这里是投票项目的介绍</div>
                </div>
            </div>
            <div 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">230</span></div>
                <div>
                    <app-btn 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
      }
  },
  methods:{
      goEdit() {
          this.$router.push('/Mine/MineEdit')
      }
  },
    components:{
        'app-btn':()=>import('@/components/common/Btn.vue'),
        'app-timeBox':()=>import('@/components/Timebox.vue'),
        'app-icon':() => import('@/components/common/Icon.vue')
    }
});
</script>

