<template>
    <view
        class="entry c-gap-inner-left c-gap-inner-right c-gap-top c-gap-inner-top c-gap-inner-bottom c-gap-bottom"
        :class="{entry__gap: gap}"
    >
        <view v-if="data && data.logo" class="entry__logo">
            <c-image
                has-compress
                :src="data.logo"
                :extra="{column: 2}"
                width="0.38rem"
                height="0.38rem"
                :hack-white-stroke="false"
                :is-round="false"
            />
        </view>
        <view v-if="data" class="entry__content">
            <view>
                <view v-if="data.title" class="entry__title">{{ data.title }}</view>
                <view v-if="data.subTitle" class="entry__sub-title">{{ data.subTitle }}</view>
            </view>
            <view
                v-if="data && data.button"
                class="entry__btn"
                :class="{entry__btn__border: borderActive}"
                @tap="onTap"
            >
                {{ data.button }}
            </view>
        </view>
    </view>
</template>

<script>
import CImage from '@components/common/image';
/**
 * @file 第三方入口 健康报 ｜ 国务院
 * @author xueyanhui
 * @categories 核酸
 * @tags [component]
 */
export default {
    config: {
        component: true
    },
    components: {
        CImage
    },
    props: {
        /**
         * 入口数据
         * @params title: '';
                subTitle: '';
                logo: '';
                btn: '';
                xcxParams: {
                    appKey: '';
                    path: '';
                }
                h5Url: '';
         */
        data: {
            type: Object,
            default: () => {}
        },
        borderActive: {
            type: Boolean,
            default: false
        },
        gap: {
            type: Boolean,
            default: false
        }
    },
    methods: {
        onTap() {
            const isSwan = process.env.MARS_ENV === 'swan';
            if (this.data && this.data.xcxParams && isSwan) {
                const {appKey, path} = this.data.xcxParams;
                this.$api.navigateToSmartProgram({
                    appKey,
                    path
                });
            } else if (this.data && this.data.h5Url && !isSwan) {
                window.location.href = this.data.h5Url;
            }
        }
    }
};
</script>

<style lang="less" scoped>
.entry {
    display: flex;
    justify-content: space-around;
    background: #fff;
    align-items: center;
    border-radius: 0.08rem;

    &__gap {
        margin: 0 0.1rem 0.1rem 0.1rem;
    }

    &__content {
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    &__logo {
        width: 0.38rem;
        height: 0.38rem;
        margin-right: 0.12rem;
    }

    &__title {
        font-family: PingFangSC-Medium;
        font-size: 0.16rem;
        color: #1f1f1f;
    }

    &__sub-title {
        font-family: PingFangSC-Regular;
        font-size: 0.14rem;
        color: #858585;
    }

    &__btn {
        background: #6897ff;
        border-radius: 0.165rem;
        width: 0.76rem;
        height: 0.28rem;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;

        &__border {
            color: #6897ff;
            background: #fff;
            border: 0.01rem solid #6897ff;
        }
    }
}
</style>
