<template>
    <view class="official-applet">
        <view
            v-if="hasApplets"
            class="info"
            :class="{
                'border-right': hasBaijiahao,
                'justify-content-flex-start': !hasBaijiahao,
            }"
            @tap="goApplet(applets)"
        >
            <c-avatar
                :src="applets.icon"
                :size="17"
                class="c-gap-right-middle"
            />
            <text class="applet-name">
                医院官方小程序
            </text>
        </view>
        <view
            v-if="hasBaijiahao"
            class="info"
            :class="{
                'justify-content-flex-start': !hasApplets,
            }"
            @tap="goApplet(baijiahao, true)"
        >
            <c-image
                has-compress
                class="c-gap-right-middle"
                src="https://med-fe.cdn.bcebos.com/hospital/baijiahao.png"
                :extra="{column: 1}"
                width="0.17rem"
                height="0.17rem"
                mode="widthFix"
                :hack-white-stroke="false"
                :is-round="false"
            />
            <text class="applet-name">
                医院官方百家号
            </text>
        </view>
        <c-icon
            v-if="!hasBaijiahao || !hasApplets"
            name="right"
            font-size="14px"
            class="icon"
        />
    </view>
</template>

<script>
import CImage from '@components/common/image';
import CAvatar from '@baidu/med-ui/components/Avatar/Avatar';
import CIcon from '@baidu/med-ui/components/Icon/Icon';
import {navigate} from '@utils/navigate';
export default {
    config: {
        component: true
    },
    props: {
        /**
         * 医院小程序
        */
        applets: {
            type: Object,
            default: () => ({})
        },
        /**
         * 医院百家号
         */
        baijiahao: {
            type: Object,
            default: () => ({})
        }
    },
    data() {
        return {
            hasApplets: this.applets && !!this.applets.guidePage && !!this.applets.swanUrl,
            hasBaijiahao: this.baijiahao && !!this.baijiahao.guidePage && !!this.baijiahao.swanUrl
        };
    },
    components: {
        CAvatar,
        CIcon,
        CImage
    },
    methods: {
        goApplet(info, isBaiJiaHao = false) {
            let url = process.env.MARS_ENV === 'h5' ? info.guidePage : info.swanUrl;
            let urlType = '1';
            // 由于百家号主页吊起不是小程序的协议，所以改成轻框吊起百家号H5
            if (process.env.MARS_ENV === 'swan' && isBaiJiaHao) {
                url = info.guidePage;
                urlType = '2';
            }
            navigate({
                url,
                urlType,
                extra: {
                    type: 'clk',
                    name: 'applet_' + info.name
                }
            });
        }
    }
};
</script>

<style lang="less" scoped>
    .official-applet {
        height: 0.15rem;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .info {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .border-right {
            border-right: .01rem solid #f1f1f1;
        }

        .justify-content-flex-start {
            justify-content: flex-start;
        }
    }
</style>
