<template>
  <div @click="handleGoTo(item)" class="flex bg-white items-center h-87px cursor-pointer transform hover:scale-102">
    <div class="relative">
      <img v-if="item.cover" class="w-116px h-65px object-cover" :src="item.coverUrl" />
      <div v-if="item.vip === '1'" class="absolute left-0 top-0 text-white text-size-12px">
        <img class="w-60px h-auto" src="/imgs/cover-tag.png" />
        <span class="absolute top-0 h-full w-full flex items-center  justify-center">{{$t('VIP尊享')}}</span>
      </div>
    </div>
    <div class="w-10px"></div>
    <div class="flex flex-col flex-1 h-full">
      <div class="h-12px"></div>
      <div class="flex-col flex justify-between h-full items-end">
        <div class="w-full text-size-14px text-[#000] font-normal">
           {{item.title}}
        </div>

        <div class="text-[#B8B8B8] text-size-14px font-medium">{{item.viewNum}} {{$t('浏览')}}</div>
      </div>
      <div class="h-14px"></div>
    </div>
    <vip-srv-box ref="vsb"></vip-srv-box>

  </div>
</template>

<script>
  export default {
    components: {},
    props: {
      item: {
        type: Object,
        default() {
          return {};
        }
      }
    },
    data() {
      return {
        dialogVisible: false
      }
    },
    methods: {

      handleGoTo(item) {

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

        if (!this.$store.state.userinfo.exipreVip) {
          this.$refs.vsb.open();
          return;
        }
        this.$router.push('/article-detail?code=' + item.code)
      }

    }
  };
</script>

<style></style>
