<template>
    <view>
        <view v-if="!isH5" class="login-block">
            <view
                v-if="hideHeader"
                :style="{
                    top: statusBarHeight + 'px',
                }"
                class="login-block__tit fixed"
            >
                登录
            </view>

            <view 
                :style="{
                    bottom: (isH5 ? 0.55 : 0.5) * screenHeight + 'px',
                }"
                class="login-block__cont"
            >
                <image
                    class="login-block__cont__img"
                    src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=862640574,2469927580&fm=179&app=35&f=PNG?w=769&h=199"
                    mode="aspectFit"
                />
                <view
                    v-if="!agreement.isAgreed"
                    class="login-block__cont__btn"
                    @tap.stop="onTapStart"
                >百度授权登录</view>
                <login-btn
                    v-else
                    class="login-block__cont__btn"
                    :inner-api-login="innerApiLogin"
                    text="百度授权登录"
                    @onTapEnd="onTapEnd"
                />
            </view>

            <view class="login-block__footer">
                <view class="login-block__footer__cbox" @tap="changeAgree">
                    <text v-if="agreement.isAgreed" class="login-block__footer__cbox__icon m-icon m-icon-checkboxselected"/>
                    <text v-else class="login-block__footer__cbox__icon m-icon m-icon-checkbox"/>
                    <text class="login-block__footer__cbox__tit c-font-13 c-gap-left-small">{{ agreement.text }}</text>
                </view>
                <view>
                    <text
                        v-for="(item, index) in agreement.info"
                        :key="index"
                        class="c-font-13"
                        @tap="onTapAgreement(item)"
                    >
                        <text v-if="item.type === 'text'" class="login-block__footer__text c-color-normal">{{ item.text }}</text>
                        <text v-if="item.type === 'link'" style="color: #00c8c8;">{{ item.text }}</text>
                    </text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
/**
 * @file 未登录模块
 * @author wangying51
 * @categories 业务组件
 * @tags [component]
 */

/* global getApp swan */
import LoginBtn from '../common/login-btn';
import * as core from '../../utils/core';
import * as login from '../../utils/login';
import {navigate} from '../../utils/navigate';
import {getSystemInfo} from '@baidu/med-utils/lib/Mars/system';

export default {
    config: {
        component: true
    },
    options: {
        addGlobalClass: true
    },
    props: {
        /**
         * 是否LoginBtn 组件内部调起login登录
         */
        innerApiLogin: {
            type: Boolean,
            default: true
        },
        /**
         * 是否隐藏页面头部
         */
        hideHeader: {
            'type': Boolean,
            'default': false
        },
        /**
         * 是否是未登录中间页/未登录模块
         */
        isMiddlePage: {
            type: Boolean,
            default: false
        },
        /**
         * 未登录中间页data
         */
        data: {
            'type': Object,
            'default': () => {}
        }
    },
    data() {
        const isH5 = process.env.MARS_ENV === 'h5';
        return {
            isH5,
            screenHeight: 0,
            statusBarHeight: 0,
            agreement: {
                isAgreed: false,
                text: '请阅读并勾选页面底部协议',
                info: [
                    {type: 'text', text: '查看'},
                    {type: 'link', text: '《服务协议》', url: '/pages/wz/agreement/index?pd=med&openapi=1&from_sf=1&resource_id=5216&vn=med&title=《服务协议》&type=all&atn=agreement'},
                    {type: 'link', text: '《隐私协议》', url: '/pages/wz/agreement/index?pd=med&openapi=1&from_sf=1&resource_id=5216&vn=med&title=《隐私政策》&type=allsecret&atn=agreement'},
                    {type: 'link', text: '《免责声明》', url: '/pages/wz/agreement/index?pd=med&openapi=1&from_sf=1&resource_id=5216&vn=med&title=《免责声明》&type=allagree&atn=agreement'}
                ]
            }
        };
    },
    components: {
        LoginBtn
    },
    created() {
        const sys = getSystemInfo();
        this.screenHeight = sys.screenHeight;
        this.statusBarHeight = sys.statusBarHeight || 0;
        // 直接调起登录
        let canIUseLoginButton =  false;
        if (process.env.MARS_ENV === 'swan') {
            canIUseLoginButton = swan.canIUse('button.open-type.login');
        }
        if (!canIUseLoginButton) {
            // 暂时不区分是否是中间页
            // if (this.isMiddlePage) {
            //     login.toLoginPage(core.extend({
            //                                       href: this.data && this.data.to ? this.data.to : ''
            //                                   },
            //                                   process.env.MARS_ENV === 'h5'
            //                                       ? {isReplaceUrl: true}
            //                                       : {}
            //     ));
            // }
            // else if (process.env.MARS_ENV === 'swan') {
            //     login.toLoginPage({
            //         href: this.data && this.data.to ? this.data.to : ''
            //     });
            // }
            login.toLoginPage(core.extend({
                                              href: this.data && this.data.to ? this.data.to : ''
                                          },
                                          process.env.MARS_ENV === 'h5'
                                              ? {isReplaceUrl: true}
                                              : {}
            ));
        }
    },
    methods: {
        onTapStart(e) {
            if (!this.agreement.isAgreed) {
                this.$api.showToast({title: '请阅读并勾选页面底部协议', icon: 'none'});
            }
        },
        onTapEnd(e) {
            login.toLoginPage(core.extend({
                                              loginStatus: e,
                                              href: this.data && this.data.to ? this.data.to : ''
                                          },
                                          process.env.MARS_ENV === 'h5'
                                              ? {isReplaceUrl: true}
                                              : {}
            ));
        },
        changeAgree() {
            this.agreement.isAgreed = !this.agreement.isAgreed;
        },
        onTapAgreement(i) {
            navigate({
                url: i.url
            });
        }
    }
};

</script>
<style lang="less" scoped>
/**
 * @file 错误提示组件
 */

.login-block {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 298;
    background: #fff;
    text-align: center;
    &__tit {
        text-align: center;
        height: 44px;
        line-height: 44px;
        font-size: 18px;
        overflow: hidden;
        font-weight: 700;
        color: #333;
        position: fixed;
        left: 0;
        right: 0;
    }
    &__cont {
        position: fixed;
        left: 0;
        right: 0;
        transform: translateY(50%);
        &__img {
            height: .5rem;
            display: inline-block;
        }
        &__btn {
            margin-top: .53rem;
            display: inline-block;
            width: 2.7rem;
            height: .5rem;
            line-height: .5rem;
            text-align: center;
            background: linear-gradient(134deg, #00CFA3 0%, #05CFCD 61%, #00D3EA 100%);
            border-radius: .5rem;
            color: #fff;
            font-family: PingFangSC-Semibold;
            font-size: .2rem;
        }
    }
    &__footer {
        text-align: center;
        position: fixed;
        left: 0;
        right: 0;
        bottom: .8rem;
        &__cbox {
            vertical-align: middle;
            position: relative;
            top: -1px;
            &__icon {
                color: #00c8c8;
                display: inline-block;
                vertical-align: middle;
                font-size: 16px;
            }
            &__tit {
                color: #1f1f1f;
            }
        }
        &__text {
            color: #000;
        }
    }
}
</style>
<style lang="less" target="swan">
// .login-block__tit {
//     font-size: 14px;
//     font-weight: 400;
// }
.login-block__footer {
    bottom: .6rem;
}
</style>
