<template>
    <view style="position: relative;">
        <view 
            v-if="canIUseLoginButton && !disabled" 
            @tap.stop="onTap"
        >
            <view>{{ text }}</view>
            <button
                :style="{
                    zIndex,
                }"
                type="primary"
                open-type="login"
                class="login-btn"
                @login="onLoginCb"
            ></button>
        </view>
        <view 
            v-else-if="!disabled"
        >
            <view>{{ text }}</view>
            <view
                :style="{
                    zIndex,
                }"
                class="login-btn-text"
                @tap.stop="onApiLogin"
            />
        </view>
        <!-- 自定义内容区 -->
        <slot></slot>
    </view>
</template>

<script>
/**
 * @file 登录按钮
 * @author wangying51
 * @categories 业务组件
 * @tags [component]
 */
/* global getApp swan */
import Cookie from '@utils/cookie';

export default {
    config: {
        component: true
    },
    props: {
        /**
        * 登录按钮文案
        */
        text: {
            type: String,
            default: ''
        },
        /**
        * 禁止点击button触发登录
        */
        disabled: {
            type: Boolean,
            default: false
        },
        /**
        * 是否内部发起ApiLogin
        */
        innerApiLogin: {
            type: Boolean,
            default: true
        },
        /**
        * 指定LoginBtn层级
        */
        zIndex: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            canIUseLoginButton: false
        };
    },
    created() {
        // TODO 兼容独立分包
        let canIUseLoginButton =  false;
        if (process.env.MARS_ENV === 'swan') {
            canIUseLoginButton = swan.canIUse('button.open-type.login');
        }
        this.canIUseLoginButton = canIUseLoginButton;
    },
    methods: {
        /*
        * 点击loginBtn实时触发的事件，新旧均能监听
        */
        onTap() {
            this.$emit('onTapStart');
        },
        /*
        * loginButton 登录回调事件
        * 注意：登录弹窗关闭时，会触发页面 onShow 事件
        */
        onLoginCb(e) {
            if (e && e.detail && e.detail.errMsg === 'login:ok') {
                /**
                 * 登录成功回调
                 * @event onLoginSuccess
                 */
                this.$emit('onLoginSuccess', e);
                this.$emit('onTapEnd', true);
            }
            else {
                /**
                 * 登录失败回调（取消登录 + 登录失败）
                 * @event onLoginFail
                 */
                this.$emit('onLoginFail', e);
                this.$emit('onTapEnd', false);
            }
        },
        /*
        * api登录 回调事件
        * 注意：登录弹窗关闭时，会触发页面 onShow 事件
        */
        onApiLogin() {
            this.$emit('onTapStart');
            const isInApp = getApp().globalData.isInApp;
            if (((process.env.MARS_ENV === 'swan' || isInApp) && this.innerApiLogin)) {
                this.$api.login().then(e => {
                    // APP 手动注入登录Cookie Bduss
                    if (isInApp) {
                        document && e && e.code && Cookie('BDUSS', e.code,
                                                          { 
                                                              domain: '.baidu.com', 
                                                              path: '/' 
                                                          }
                        );
                    }
                    this.$emit('onLoginSuccess', e);
                    !isInApp && this.$emit('onTapEnd', true);
                }).catch(e => {
                    this.$emit('onLoginFail', e);
                    !isInApp && this.$emit('onTapEnd', false);
                });
            }
            else {
                /**
                 * 说明：
                 * 1. 非小程序环境，如H5，此处并未登录，为保证调用统一性，此处默认输出false
                 * 2. 不在登录组件内发起登录，默认输出false
                */
                this.$emit('onTapEnd', false);
                /**
                 * 和小程序登录fail区分下 ps:有时候只有h5下需要处理一些未登录情况
                */
                this.$emit('onTapEndH5', false);
            }
        }
    }
};
</script>

<style scoped>
.login-btn-text {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}
.login-btn { 
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    opacity: 0;
}
</style>
