<template>
    <view class="card-act-ticket">
        <view class="ticket-cont">
            <view class="ticket-info">
                <image :src="ticket.icon" class="ticket-icon" lazy-load />
                <view class="c-gap-left">
                    <view v-if="ticket.title" class="ticket-title">{{ticket.title}}</view>
                    <rich-text v-if="ticket.text" :nodes="ticket.text" class="ticket-text"></rich-text>
                    <view v-if="ticket.time" class="ticket-time c-font-tiny c-color-gray">有效期：{{ticket.time}}</view>
                </view>
            </view>
            <view
                class="ticket-btn"
                :class="[ticket.status == 2 && 'ticket-btn-done']"
                @tap.stop="onTap"
            >
                <rich-text v-if="ticket.status == 0" :nodes="nodeText"></rich-text>
                <view v-else-if="ticket.status == 1">去使用</view>
                <view v-else-if="ticket.status == 2">已使用</view>
            </view>
        </view>
    </view>
</template>

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

export default {
    config: {
        component: true
    },
    props: {
        ticket: Object,
        log: {
            type: Object,
            default: {}
        }
    },
    data() {
        return {
            nodeText: '点击<br/>领取'
        }
    },
    methods: {
        onTap() {
            if (this.ticket.status == 0) {
                send({
                    type: 'b',
                    action: 'navigate',
                    extra: {
                        ...this.log,
                        status: this.ticket.status
                    }
                });
                this.$emit('onTicketTap', Object.assign({cardtype: 'ticket'}, this.ticket));
                return;
            }
            if (this.ticket.status == 2) {
                return;
            }
            if (this.ticket.tcUrl) {
                send({
                    type: 'b',
                    action: 'navigate',
                    extra: {
                        ...this.log,
                        status: this.ticket.status
                    }
                });
                navToBdBoxH5(this.ticket.tcUrl);
            } else {
                navigate({
                    url: this.ticket.url,
                    extra: {
                        ...this.log,
                        status: this.ticket.status
                    }
                });
            }
        }
    }
};
</script>
<style lang="less" scoped>
.card-act-ticket {
    .ticket-cont {
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        width: 85vw;
        height: 26vw;
        background-image: url(https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=874044001,2247830864&fm=179&app=35&f=PNG?w=1067&h=322);
        background-size: 100% auto;
        background-position: 0 0;
        background-repeat: no-repeat;
        position: relative;
        padding: 0 24px;
    }
    .ticket-info {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .ticket-title, .ticket-text {
        color: #49534b;
        font-weight: 500;
    }
    .ticket-icon {
        width: 54px;
        height: 54px;
    }
    .ticket-btn {
        width: 64px;
        height: 64px;
        display: flex;
        justify-content: center;
        align-items: center;
        // line-height: 64px;
        color: #fff;
        font-size: 15px;
        text-shadow: 1px 1px rgba(234,89,6,.9);
        background: linear-gradient(-110deg, #fc813d, #ffbb62);
        border-radius: 100%;
    }
    .ticket-btn-done {
        background: linear-gradient(-70deg, #feb56e, #fdc883);
    }
}
@media only screen and (max-width: 375px) {
    .card-act-ticket {
        .ticket-cont {
            padding: 0 20px 0 12px;
        }
        .ticket-icon {
            width: 48px;
            height: 48px;
        }
    }
}
@media only screen and (max-width: 340px) {
    .card-act-ticket {
        .ticket-cont {
            padding: 0 16px 0 12px;
        }
        .ticket-title, .ticket-text {
            font-size: 13px;
        }
    }
}
</style>
