<template>
    <view class="page-bottom">
        <c-image
            has-compress
            class="page-bottom-logo"
            src="https://med-fe.cdn.bcebos.com/yd%2Fyd-logo-line.png?po=0"
            mode="widthFix"
            width="1.4rem"
            height=".26rem"
            :is-round="false"
            :hack-white-stroke="false"
        />
        <view class="page-bottom-add">
            关注我们：
            <c-image
                has-compress
                src="https://medical-kg.cdn.bcebos.com/fe%2Fydinter-baijiaicon-ymz.png"
                width=".27rem"
                height=".27rem"
                @tap="tapUrl(0)"
            />
            <view class="c-gap-left">
                <c-image
                    has-compress
                    src="https://medical-kg.cdn.bcebos.com/fe%2Fydinter-weboicon-ymz.png"
                    width=".27rem"
                    height=".27rem"
                    @tap="tapUrl(1)"
                />
            </view>
        </view>
        <view class="page-bottom-email">
            联系我们：bk-yidian@baidu.com
        </view>
        <view v-if="showModalErWei" class="modal">
            <view class="modal-erwei">
                <view class="modal-erwei-content">
                    <c-icon
                        name="close-circle"
                        font-size="20px"
                        :style="{color: '##555555'}"
                        class="modal-erwei-close"
                    />
                    <view class="modal-erwei-title">
                        扫码关注
                    </view>
                    <view class="modal-erwei-desc">百度健康医典公众号</view>
                    <view class="modal-erwei-tips">长按保存二维码</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
/**
 * @file 页面地步
 * @author yumingzhi
 * @categories
 * @tags
 */
import {navToBdBoxH5, navToH5} from '../../../../utils/navigate';
import Icon from '@baidu/med-ui/components/Icon/Icon';
import CImage from '@components/common/image';
export default {
    config: {
        component: true
    },
    components: {
        CImage,
        CIcon: Icon
    },
    props: {
        /**
         * 这是strongData注释
         */
        strongData: {
            type: Object,
            default: () => {}
        },
        /**
         * mod注释
         */
        mod: {
            type: String,
            default: 'theme-strong-card'
        },
    },
    data() {
        return {
            showModalErWei: false,
            baijiaUrl: 'https://my.mbd.baidu.com/r/5sfjN4mAjC?f=cp&u=2e29b975b40f57c9',
            weiboUrl: 'https://weibo.com/u/7400594657'
        };
    },
    methods: {
        tapUrl(index) {
            if (index === 0) {
                this.$emit('bottomFocus', index);
                // 跳转百家号
                if (process.env.MARS_ENV === 'h5') {
                    navToH5(this.baijiaUrl);
                } else if (process.env.MARS_ENV === 'swan') {
                    navToBdBoxH5(this.baijiaUrl, {
                        module: 'browser',
                        action: 'open',
                        parameters: {
                            simple: '1'
                        }
                    });
                }
            } else if (index === 1) {
                this.$emit('bottomFocus', index);
                // 跳转微博
                navToH5(this.weiboUrl);
            }
        }
    }
};
</script>
<style lang="less" scoped>
.page-bottom {
    background: #f1f1f1;
    text-align: center;
    padding: 20px 0 26px;
    color: #768699;
    font-size: 12px;

    .page-bottom-logo {
        width: 140px;
        display: block;
        margin: 0 auto;
    }

    .page-bottom-add {
        margin-top: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 7px;

        .page-bottom-yuan {
            width: 27px;
            height: 27px;
            border-radius: 50%;
            background: #fff;
            margin-left: 20px;

            &:nth-child(1) {
                margin-left: 2px;
            }
        }
    }
}

.modal {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.6);
    padding: 0 17px;
    box-sizing: border-box;
    z-index: 98;

    .modal-erwei {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        .modal-erwei-content {
            width: 306px;
            padding: 24px 0;
            position: relative;
            background: #fff;
            border-radius: 8px;

            .modal-erwei-close {
                position: absolute;
                right: 14px;
                top: 14px;
            }

            .modal-erwei-title {
                font-size: 18px;
                color: #333;
                font-weight: 500;
            }
        }
    }
}
</style>
