<template>
  <div @click="handleGoTo(item)" v-bind="$attrs" class="relative  border-t-1rem  border-[#B8B8B8]">
    <div class="flex  mt-22rem mb-22rem  items-center h-165rem">
      <div class="relative">
        <img class="w-270rem h-160rem object-cover" :src="item.coverUrl" />
        <div v-if="item.vip === '1'" class="absolute left-0 top-0 text-white text-size-20rem">
          <img class="w-100rem h-auto" src="/imgs/h5-vip-tag.png" />
          <span class="absolute top-0 h-full w-full flex items-center justify-center">{{$t('VIP尊享')}}</span>
        </div>
      </div>
      <div class="w-19rem"></div>
      <div class="flex flex-col flex-1 h-full justify-between">
<!--        <div class="h-18rem"></div>-->
        <div class="text-size-30rem text-[#000A04] font-normal">
           {{item.title}}
        </div>

        <div class="h-22rem"></div>
        <div class="text-[#B8B8B8] text-size-24rem font-normal">{{item.author ? item.author : $t("匿名")}}</div>
<!--        <div class="h-10rem"></div>-->
        <div class="flex w-full items-center">
          <div class="flex items-center ">
            <img class="w-26rem h-auto" src="/imgs/time.png" />
            <div class="text-[#B8B8B8] text-size-24rem font-normal ml-5rem">{{item.publishTimeStr}}</div>
          </div>
          <div v-if="!$slots.right" class="text-[#B8B8B8] text-size-24rem font-normal ml-auto">
            {{item.viewNum ? item.viewNum : 0}} {{$t('浏览')}}
          </div>
          <slot name="right"></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props:{
      item:{
          type:Object,
          default(){
            return {};
          }
      }
  },
    methods:{
        async handleGoTo(item) {

            if(item.outLink === '1'){
                window.open(item.link);
                return;
            }

            if(!this.$store.state.userinfo.code){
                this.$toast(this.$t('当前为付费资源，需登录后再阅读'));
                this.$router.push('/login?routeBack=true');
                return;
            }

            if (!this.$store.state.userinfo.exipreVip) {
                await this.$dialog.confirm( {
                    message:'当前为付费资源,需开通VIP才能阅读',
                    title:'提示',
                    confirmButtonText: '去开通',
                    cancelButtonText: '取消',
                });
                this.$router.push('/open-vip');
                return;
            }
            this.$router.push('/article-detail?code=' + item.code)
        }
    }
};
</script>

<style>

</style>
