<template>
    <view class="act-article-item" @tap.stop="onJump(article, 'article')">
        <view v-if="article.title" class="act-article-item-title" :style="{color: item.color, background: item.bgcolor}">
            <text class="c-bold">{{article.title}}</text>
            <text class="c-font-small">
                <text>{{article.subtitle}}</text>
                <text class="m-triangle c-gap-left-small" :style="{borderColor: 'transparent transparent transparent ' + item.color }"></text>
            </text>
        </view>
        <view
            class="act-article-item-cont c-padding-h c-gap-inner-top-ll c-gap-inner-bottom-ll"
        >
            <image class="act-article-item-img c-gap-right-ll" :src="article.img" lazy-load/>
            <view>
                <view class="c-font-medium act-article-item-text-title c-bold">{{article.text}}</view>
                <view class="act-article-item-text" v-if="(Array.isArray(article.subtext))">
                    <view v-for="(text, textIndex) in article.subtext" :key="textIndex">
                        {{text}}
                    </view>
                </view>
                <view v-else  class="act-article-item-text">{{article.subtext}}</view>
                <view class="c-color-orange">
                    <text v-if="article.price" class="c-font-15 c-bold">{{article.price}}</text>
                    <text v-if="article.unit" class="c-font-small">{{article.unit}}</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
/**
 * @file 活动文章卡片
 * @author chenshuo04
 */
import {navigate, navToBdBoxH5} from '../../utils/navigate';
import * as Log from '../../utils/log';

export default {
    config: {
        component: true
    },
    props: {
        article: Object,
        log: Object
    },
    methods: {
        onJump(data, log) {
            if (data.tcUrl) {
                Log.send({
                    type: 'b',
                    action: 'navigate',
                    extra: log || {}
                });
                navToBdBoxH5(data.tcUrl);
            } else {
                navigate({
                    url: data.url || data,
                    extra: log || {}
                });
            }
        }
    }
};
</script>
<style lang="less" scoped>
.act-article-item {
    background: #fff;
    border-radius: 14px;
} 
.act-article-item-title {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 5px 15px;
    border-radius: 14px 14px 0 0;
}
.act-article-item-cont {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}
.act-article-item-text-title {
    margin-top: -5px;
}
.act-article-item-text {
    font-size: 12px;
    line-height: 16px;
    color: #666;
}
.act-article-item-img {
    width: 73px;
    height: 73px;
    min-width: 73px;
    border-radius: 3px;
}
</style>