<template>
    <view @tap="onTap">
        <view class="c-line-clamp1 at-wrap">
            <c-label
                v-if="item.tag"
                :text="item.tag"
                :color="item.bg || '#00c8c8'"
                solid
                custom
                class="c-gap-right-small at-tag"
            ></c-label>
            <text
                v-if="item.title"
                class="c-color-333 c-font-17"
            >{{ item.title }}</text>
        </view>
        <view
            v-if="item.abstract"
            class="c-color-gray c-line-clamp1 c-font-13 at-wrap"
        >{{ item.abstract }}</view>
    </view>
</template>

<script>
/**
* @file 推荐文章
* @author haoyan
* @categories 业务组件
* @tags [component]
*/
import Label from '@baidu/med-ui/components/Label/LabelOld';
import {navigate} from '@baidu/med-utils/lib/Mars/navigate';
import {navToBdBoxH5} from '../../utils/navigate';
import {ubcSend} from '@utils/log';

export default {
    config: {
        component: true
    },
    props: {
        /**
         * 组件的数据
         */
        item: {
            type: Object,
            default() {
                return {};
            }
        },
        qid: {
            'type': [Number, String],
            default() {
                return '';
            }
        }
    },
    data() {
        return {
        };
    },
    components: {
        'CLabel': Label
    },
    created() {
        ubcSend({
            type: 'view',
            value: 'im-article',
            ext: {
                qid: this.qid,
                abstract: this.item.abstract
            }
        });
    },
    methods: {
        onTap() {
            ubcSend({
                type: 'clk',
                value: 'im-article',
                ext: {
                    qid: this.qid,
                    abstract: this.item.abstract
                }
            });
            if (this.item.urlType && this.item.url) {
                navigate({
                    url: this.item.url,
                    urlType: this.item.urlType
                });
            }
            else {
                navToBdBoxH5(this.item.url);
            }
        }
    }
};
</script>

<style lang="less" scoped>
.at-wrap {
    margin-bottom: 0;
}

.at-tag {
    margin-top: -2px;
}
</style>
