<!--
 * @Description: 专题广场卡片组件
 * @Author: yumingzhi
 * @Date: 2020-03-30 14:12:36
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-02-24 16:32:19
 -->
<template>
    <view
        class="spe-topic__card"
        @tap.stop="tapUrl(cardInfo)"
    >
        <view v-if="cardInfo.orderTitle" class="spe-topic__card__num">
            {{ cardInfo.orderTitle }}
        </view>
        <!--:class="cardType === 3 ? 'spe-topic__card__image-open' : ''"-->
        <view
            class="spe-topic__card__image"
            :style="{
                'background-image': 'url(' + cardInfo.imgUrl + ')',
            } | imgCompress('background-image')"
        />
        <view class="spe-topic__card__line">
            <view v-if="cardInfo.name" class="c-line-clamp1 spe-topic__card__title">
                {{ cardInfo.name }}
            </view>
            <view v-if="cardInfo.statusText || cardInfo.statusTime" class="spe-topic__card__bottom">
                <view
                    class="spe-topic__card__bottom__label"
                    :class="cardInfo.statusColor === '#999999'
                        ? 'gray' : (cardInfo.statusColor === '#FE7C6C' ? 'orange' : 'blue')"
                >
                    {{ cardInfo.statusText }}
                </view>
                <view class="c-line-clamp1 spe-topic__card__bottom__time">
                    {{ cardInfo.timeStr }}
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import {navigate, navToBdBoxH5} from '../../../utils/navigate';
import {ubcSend} from '@utils/log';
export default {
    config: {
        component: true
    },
    props: {
        cardInfo: {
            type: Object,
            default: () => ({})
        },
        cardType: {
            type: Number,
            default: 1
        },
        commonPage: {
            type: String,
            default: ''
        },
        pageType: {
            type: String,
            default: ''
        },
        currentPage: {
            type: String,
            default: ''
        }
    },
    methods: {
        tapUrl(data) {
            const {cardType, pageType, commonPage, currentPage} = this;
            if (commonPage) {
                const dotValue = cardType && cardType === 4 ? 'nhdys_dangeneirong' : 'ztgc_dangezhuanti';
                ubcSend({
                    type: 'clk',
                    value: dotValue,
                    page: currentPage,
                    ext: {
                        page_type: pageType
                    }
                });
            }
            switch (data.jumpType) {
                case 'xcx':
                    this.$api.navigateToSmartProgram({
                        appKey: data.xcx.appKey,
                        path: data.xcx.url
                    });
                    break;
                case 'h5Url':
                    if (data.duWord) {
                        this.$api.setClipboardData({
                            data: data.duWord,
                            complete: () => {
                                window.location.href = data.jumpUrl;
                            }
                        });
                    }
                    else {
                        window.location.href = data.jumpUrl;
                    }
                    break;
                case 'tcUrl':
                    if (process.env.MARS_ENV === 'h5') {
                        window.location.href = data.jumpUrl;
                    }
                    else if (process.env.MARS_ENV === 'swan') {
                        navToBdBoxH5(data.jumpUrl);
                    }
                    break;
                case 'unifiUrl':
                    navigate({url: data.jumpUrl});
                    break;
                case 'unifiUrlxcx':
                    navigate({url: data.jumpUrl});
                    break;
                default:
                    navigate({url: data.jumpUrl});
                    break;
            }
        },
    }
};
</script>

<style lang="less" scoped>
    .spe-topic__card {
        width: 100%;
        border-radius: 8px;
        box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.06);
        margin-bottom: 15px;
        position: relative;
        box-sizing: border-box;

        &__num {
            position: absolute;
            right: 0;
            top: 0;
            border-radius: 0 8px 0 8px;
            background: rgba(1, 141, 135, 0.7);
            color: #fff;
            font-size: 12px;
            padding: 4px 10px;
        }

        &__image {
            width: 100%;
            padding-top: 41.7%;
            background-size: cover;
            background-position: center;
            border-radius: 8px 8px 0 0;
        }

        &__line {
            width: 100%;
            padding: 12px 0;
        }

        &__image-open {
            padding-top: 50.6%;
        }

        &__title {
            padding: 0 12px;
            box-sizing: border-box;
            color: #555;
            font-size: 0.16rem;
        }

        &__bottom {
            display: flex;
            align-items: center;
            margin-top: 4px;
            padding-left: 12px;
            box-sizing: border-box;

            &__label {
                margin-right: 4px;
                padding: 3px 5px;
                font-size: 10px;
                border-radius: 20px;
                line-height: 1;
            }

            .gray {
                color: #999;
                border: 1px solid #f2f2f2;
            }

            .orange {
                color: #fe7c6c;
                border: 1px solid rgba(254, 124, 108, 0.3);
            }

            .blue {
                color: #00d1c8;
                border: 1px solid rgba(0, 209, 200, 0.3);
            }

            &__time {
                color: #999;
                font-size: 0.14rem;
            }
        }
    }
</style>
