<template>
    <view>
        <top-bar
            ref="topbar"
            :title="title"
            :hide-title="showInput"
            :bar-class="barClass"
            :text-color="barClass === 'white' ? '#333' : '#fff'"
            :blank="false"
            :hide-home="isOppoWebview"
            :hide-back="isOppoWebview"
            :yd-show-input="showInput"
            :share-bar="newShareBar"
            :cal-share-bar="calShareBar"
            :delay-set-header-color="delaySetHeaderColor"
            :delay-compate-devices="delayCompateDevices"
            @topbarHeightHandle="topbarHeightHandle"
        >
            <!-- slot="content" -->
            <b-navigate
                v-if="showInput"
                :url="searchUrl"
                :extra="extra"
            >
                <view
                    :style="{
                        height: navigationBarHeight + 'px',
                        paddingRight: isSwan ? '113px' : '17px',
                        paddingLeft: '17px',
                    }"
                    :class="!isSwan ? 'c-gap-inner-top' : ''"
                    class="yd-topbar"
                >
                    <c-icon
                        v-if="navigateBackShow"
                        name="left"
                        :font-size="'20px'"
                        :style="{
                            color: barClass === 'white' ? '#333' : '#fff',
                            visibility: isInApp ? 'hidden' : 'visible',
                            top: backStyle.top || '',
                            left: backStyle.left || '',
                        }"
                        class="icon"
                        @tap.stop="handleIconTap('navigateBack')"
                    />
                    <view
                        v-if="!navigateBackShow && isSwan"
                        :style="{width: '20px'}"
                        class="icon"
                    />
                    <view 
                        :class="isInApp ? 'c-gap-right-xll c-gap-left-xll' : ''"
                        class="yd-input-content c-font-medium-less"
                        @tap="topbarInputHandle"
                    > 搜索疾病/症状/药品 </view>
                </view>
            </b-navigate>
        </top-bar>
    </view>
</template>
<script>
/**
 * @file 医典落地页顶部bar
 * @author yumingzhi
 * @categories
 * @tags
 */
/* global getCurrentPages, getApp, swan*/
import topBar from '@components/common/topbar';
import Navigate from '@components/common/navigate';
import Icon from '@baidu/med-ui/components/Icon/Icon';
import {getSystemInfo} from '@baidu/med-utils/lib/Mars/system';
// import * as core from '@utils/core';
import {navigate, tabBar} from '@utils/navigate';
import {COOKIE_KEY} from '@utils/constant';
import cookie from '@utils/cookie';

export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    components: {
        TopBar: topBar,
        BNavigate: Navigate,
        CIcon: Icon
    },
    props: {
        /**
         * 标题
         */
        title: {
            type: String,
            default: ''
        },
        /**
         * 展示input 输入框
         */
        showInput: {
            type: Boolean,
            default: true
        },
        /**
         * 展示input 输入框
         */
        barClass: {
            type: String,
            default: ''
        },
        /**
         * 跳转地址
         */
        searchUrl: {
            type: String,
            default: ''
        },
        /**
         * 日志参数
         */
        extra: {
            type: Object,
            default: () => ({})
        },
        /**
         * 高度
         */
        navigationBarHeight: {
            type: Number,
            default: 44
        },
        /**
         * 是否小程序
         */
        isSwan: {
            type: Boolean,
            default: true
        },
        /**
         * 页面是否有分享bar
         */
        shareBar: {
            type: Boolean,
            default: false
        },
        /**
         * topbarHeight是否计算sharebar的高度
         */
        calShareBar: {
            'type': Boolean,
            'default': true
        },
        /**
         * 延迟设置文字颜色
         */
        delaySetHeaderColor: {
            type: Boolean,
            default: false
        },
        /**
         * 延迟进行设备兼容
         */
        delayCompateDevices: {
            type: Boolean,
            default: false
        },
    },
    data() {
        let isOppoWebview = false;
        if (process.env.MARS_ENV === 'h5') {
            isOppoWebview = !!cookie(COOKIE_KEY.IS_OPPO_WEBVIEW);
        }
        return {
            navigateBackShow: true,
            isOppoWebview: isOppoWebview,
            isInApp: getApp().globalData.isInApp,
            newShareBar: false,
            backStyle: {
                top: '',
                left: ''
            }
        };
    },
    watch: {
        shareBar(newVal, oldVal) {
            if (newVal.length !== oldVal.length) {
                this.newShareBar = newVal;
            }
        },
        delayCompateDevices(v) {
            !v && this.compateDevices(getSystemInfo());
        },
    },
    created() {
        const pages = getCurrentPages();
        const systemInfoSync = getSystemInfo();
        const curPage = pages && pages.length ? pages[pages.length - 1] : {};
        // 是否有后退按钮
        if (process.env.MARS_ENV === 'swan') {
            // 后退按钮
            // this.isHigherNavigate =
            //     core.compareVersion(systemInfoSync.swanNativeVersion, '2.28.0') >= 0 &&
            //     tabBar.indexOf(curPage.uri) === -1;
            this.navigateBackShow = tabBar.indexOf(curPage.uri) === -1;
        } else if (process.env.MARS_ENV === 'h5') {
            // 后退按钮
            this.navigateBackShow = !this.isOppoWebview && pages.length > 1;
        }
        this.newShareBar = this.shareBar;
        // 判断机型
        !this.delayCompateDevices && this.compateDevices(systemInfoSync);
    },
    methods: {
        compateDevices(systemInfoSync) {
            if (systemInfoSync.platform === 'android') {
                this.backStyle.top = '-0.03rem';
                this.backStyle.left = '-0.02rem';
            }
            if (systemInfoSync.platform === 'ios' || systemInfoSync.platform === 'devtools') {
                this.backStyle.left = '1px';
            }
        },
        handleIconTap(eventName) {
            this[eventName]();
        },
        navigateBack() {
            let pages = getCurrentPages();
            if (pages.length === 1 && process.env.MARS_ENV === 'swan') {
                swan.exit();
            } else {
                navigate({
                    openType: 'navigateBack'
                });
            }
        },
        topbarHeightHandle(e) {
            /**
            * 获取topbar高度
            */
            this.$emit('topbarHeightHandle', e);
        },
        pageScroll(e) {
            this.$refs.topbar && this.$refs.topbar.onPageScroll(e.scrollTop);
        },
        topbarInputHandle() {
            this.$emit('wordsPagesToHome');
        }
    }
};
</script>
<style lang="less" scoped>
.yd-topbar {
    width: 100%;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    .yd-input-content {
        min-width: 0;
        flex: 1;
        height: 38px;
        line-height: 38px;
        border-radius: 19px;
        padding-left: 16px;
        box-sizing: border-box;
        color: #94a2a2;
        background: rgba(255, 255, 255, 0.8);
        text-align: left;
    }
    .icon {
        position: relative;
        top: 1px;
        font-size: 20px;
        display: inline-block;
        margin-right: 15px;
    }
}
</style>
