<template>
    <view 
        v-if="base"
        :class="show ? '' : 'hidden'"
        class="med-share c-gap-inner-left-boundary c-gap-inner-right-boundary"
    >
        <view class="left">
            <img :src="base.logo" class="left-img" />
            <text class="left-text c-font-small">{{ base.text }}</text>
        </view>
        <view 
            class="right"
            :style="{
                width: base.closeMark ? '100px' : 'auto'
            }"
        >
            <view class="right-btn c-font-15" @tap.stop="onInvokeApp">{{ base.btnText }}</view>
            <view v-if="base.closeMark" @tap="onCloseShareBar"><img src="https://med-fe.bj.bcebos.com/images/sharebar-close.png" class="right-img"/></view>
        </view>
    </view>
</template>

<script>
/**
* @file H5分享头部
* @author  wangying51
* @categories 业务组件
* @tags [component]
*/
import {invokeApp} from '@baidu/ug-invoke-app';
// import {request} from '@utils/request';
// import * as Conf from '../../utils/conf';

export default {
    config: {
        component: true
    },
    options: {
    },
    props: {
        /**
         * 组件展现控制
         */
        show: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            base: null,
            sinfo: null
        };
    },
    methods: {
        onInvokeApp() {
            invokeApp({
                appName: 'bdhealthapp',
                scheme: 'bdhealthapp://app/na/web?url=http%3A%2F%2Fexpert.baidu.com%2F%23%2Fpages%2Fdoctor%2Frobotanalysis%2Findex%3Fpd%3Dmed%26openapi%3D1%26from_sf%3D1%26resource_id%3D5216%26vn%3Dmed%26word%3D%E9%97%AE%E5%8C%BB%E7%94%9F%26atn%3Dantiepidemictest%26questionnaire%3Dimmunity%26title%3D%E7%BB%93%E6%9E%9C%E5%88%86%E6%9E%90%26aiQid%3D11639486%26risk%3Dhigh_risk%26lid%3D8138442741%26sf_ref%3Dshare_antiepidemic%26referlid%3D4241172736%26_%3Dc3cxuslxolo%26c%3D333%26d%3D245',
                apkUrl: 'https://med-fe.cdn.bcebos.com/js/download-test-app.zip',
                failedUrl: 'http://exp-macc.bcc-szwg.baidu.com:8500/med/template/#/pages/brand/download/index'
            }).then(res => {
                alert(JSON.stringify(res));
            }).catch(e => {
                alert(JSON.stringify(e));
            });
        },
        onCloseShareBar() {
            this.$emit('onCloseShareBar');
        }
    },
    mounted() {
        // request({
        //     url: Conf.apiHost + '/skip/app/na',
        //     data: {},
        //     isNeedLogin: false,
        //     isFirstScreen: false
        // }).then(res => {
            
        // })
        // .catch(res => {
        // });
        setTimeout(() => {
            let res = {
                base: {
                    logo: 'https://med-fe.cdn.bcebos.com/images/sharebar-logo.png',
                    text: '文案待定待定',
                    closeMark: false,
                    btnText: '打开'
                },
                sinfo: {
                    appName: 'bdhealthapp',
                    scheme: 'bdhealthapp://app/home',
                    downloadUrl: 'https://med-fe.cdn.bcebos.com/js/download-test-app.zip',
                    failedUrl: 'https://expert.baidu.com/#/pages/brand/home/index'
                }
            };
            this.base = res.base || null;
            this.sinfo = res.sinfo || null;
        }, 500);
    }
};
</script>
<style lang="less" scoped>
.med-share {
    width: 100%;
    display: flex;
    // height: 60px;
    // TODO 
    height: 0px;
    background: rgba(0, 0, 0, .79);
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    // transition: all .1s cubic-bezier(.2, 0, .2, 1) ;
    overflow: hidden;
    transform: translateY(0);
    position: relative;
    z-index: 99;
    &.hidden {
        height: 0;
        transform: translateY(-10px);
    }
    .left {
        position: relative;
        width: calc(100% - 105px);
        &-img {
            height: 40px;
            display: block;
        }
        &-text {
            position: absolute;
            top: 22px;
            left: 48px;
            color: #fff;
        }
    }
    .right {
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        align-items: center;
        &-btn {
            padding: 0 18px;
            color: #fff;
            background-image: linear-gradient(134deg, #00CFA3 0%, #05CFCD 61%, #00D3EA 100%);
            border-radius: 15px;
            height: 30px;
            line-height: 30px;
        }
        &-img {
            width: 22px;
            height: 22px;
            display: block;
        }
    }
}
</style>
