<template>
    <ui-shadow-box @click="handleGoTo(item)" v-bind="$attrs" class="relative shadow-md hover:transform hover:scale-102">
        <div class="flex bg-white pl-16px pr-14px items-center h-165px">
            <div class="relative">
                <img class="w-250px h-140px 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-19px"></div>
            <div class="flex flex-col flex-1 h-full">
                <div class="h-18px"></div>
                <div class="text-size-20px text-[#000A04] font-thin " style="font-weight: normal">
                    {{item.title}}
                </div>
                <div class="h-24px"></div>
                <div class="text-[#686868] text-size-16px font-normal leading-20px  description-ec" style="line-height: 1.5">
                    {{item.description ? item.description : ''}}
                </div>
                <div class="h-24px"></div>
                <div class="flex w-full items-center">
                    <div class="text-[#B8B8B8] text-size-14px font-normal w-100px">{{item.author ? item.author :'匿名'}}
                    </div>
                    <div class="flex items-center ml-76px">
                        <img class="w-18px h-auto" src="/imgs/time.png"/>
                        <div class="text-[#B8B8B8] text-size-14px font-normal ml-5px">{{item.publishTimeStr}}</div>
                    </div>
                    <div
                            v-if="!$slots.right"
                            class="text-[#B8B8B8] text-size-14px font-medium ml-auto"
                    >
                        {{item.viewNum ? item.viewNum : 0}} {{$t('浏览')}}
                    </div>
                    <slot name="right"></slot>
                </div>
            </div>
        </div>

        <vip-srv-box ref="vsb"></vip-srv-box>

    </ui-shadow-box>
</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.code){
                    this.$message.warning(this.$t('当前为付费资源，需登录后再阅读'));
                    // this.$router.push('/login?routeBack=true');
                    this.$store.commit('SHOW_LOGIN_BOX');
                    return;
                }

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

        }
    };
</script>

<style scoped>

    .description-ec {
        word-break: break-all;
        text-overflow: ellipsis;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2; /* 这里是超出几行省略 */
    }

    .relative {
        cursor: pointer;
    }

</style>
