<template>
    <block>
        <index @smsloginres="smsloginResListener" :config="config" :checkboxChecked="checkboxChecked" />
        <view v-if="config.hiddenLoginType != 2">
            <button
                v-if="!stopClick && checkboxChecked"
                class="phone-btn"
                open-type="getPhoneNumber"
                @getphonenumber="getPhoneNumber"
                :style="config.loginConfig && config.loginConfig.wxBtnStyle"
            >
                微信手机号快捷登录
            </button>
            <!-- 防止连续点击触发获取微信用户信息 -->
            <button class="phone-btn" :style="config.loginConfig && config.loginConfig.wxBtnStyle" v-else @tap="needAuthor">微信手机号快捷登录</button>
        </view>
        <!-- 弹窗类型展示协议授权 -->
        <view class="dialog-tips" v-if="config.selfTipsDialog">
            <view>
                <instruction class="no-fix" :config="config" @changecheck="changeCheckbox" />
                <p>
                    <button class="phone-btn bg-btn" @tap="reject">拒绝</button>
                    <button v-if="!stopClick && checkboxChecked" class="phone-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">同意</button>
                </p>
            </view>
        </view>
        <!-- 底部展示协议授权 -->
        <instruction v-else :config="config" @changecheck="changeCheckbox" />
        <view>
            <canvas class="f8be360ead1f4a3d9afb5e312b845ebb" canvas-id="fbfd3ec3c4ab4213b9a09b5c5e769ceb"></canvas>
        </view>
    </block>
</template>

<script>
import util from '../util.js';
let plugin = requirePlugin('loginPlugin');

let fm = require('../fm.min.js');

let config = util.getLoginConfig();
export default {
    components: {},
    data() {
        return {
            config,
            stopClick: false,
            checkboxChecked: !config.author,
            detail: '',
            code: '',
            wxBtnStyle: ''
        };
    },
    onLoad(options) {
        let { riskFail } = options;
		this.config = util.getLoginConfig(options)  //风控失败不重置缓存

        if (!riskFail) {
            util.setLoginParamsStorage(options);
        }

        plugin.setLog({
            url: 'pages/login/index/index',
            pageId: 'WLogin_Diversion'
        });
        util.setCustomNavigation();
        this.getWxcode();
        this.setFingerData();
    },
    onShow() {
        plugin.pvLog();
    },
    methods: {
        smsloginResListener(res = {}) {
            if (this.checkboxChecked) {
                util.handleJump(res.detail);
            } else {
                this.showLoad();
            }
        },

        showLoad() {
            uni.showToast({
                title: '请阅读并勾选页面底部协议',
                icon: 'none',
                duration: 3000
            });
        },

        changeCheckbox(e) {
			this.checkboxChecked = e.detail
        },

        needAuthor() {
            if (!this.checkboxChecked) {
                this.showLoad();
            }
        },

        getPhoneNumber(event = {}) {
            let { stopClick } = this;

            if (stopClick) {
                uni.showToast({
                    icon: 'none',
                    title: '请不要重复点击'
                });
                return;
            }

			this.stopClick = true
            let { detail } = event;
            let { iv, encryptedData } = detail;
            plugin.clickLog({
                event,
                eid: 'WLogin_Diversion_Wechat'
            });

            if (!iv || !encryptedData) {
				this.stopClick = false
                return;
            }

            uni.showLoading({
                title: '加载中'
            });
			this.detail = detail
            this.mobileLogin();
            plugin.clickLog({
                event,
                eid: 'WLogin_DiversionWechat_Allow'
            });
        },

        mobileLogin() {
            let { code, detail } = this;
            let { iv, encryptedData } = detail;

            if (!code || !iv || !encryptedData) {
                return;
            }

            const startClick = () => {
                uni.hideLoading();
				this.stopClick = false
            };

            plugin
                .WXMobileLogin({
                    iv,
                    encryptedData,
                    code
                })
                .then((res) => {
                    if ([32, 33].indexOf(res.err_code) >= 0) {
                        return plugin.loginRequest({});
                    }

                    if (res.err_code == 124) {
                        return this.getWxcode();
                    } // 风控提示用户去浏览器解除 重新获取code

                    return res;
                })
                .then((res) => {
                    let { pt_key, rsa_modulus, guid } = res;

                    if (!pt_key && rsa_modulus && guid) {
                        // login 返回
                        res.pluginUrl = plugin.formatPluginPage('main');
                    } // startClick()

                    util.handleJump(res);
                })
                .catch((res) => {
                    startClick();
                    console.jdLoginLog(res);
                });
        },

        getWxcode() {
            uni.login({
                success: (res = {}) => {
					this.code = res.code
                }
            });
        },

        setFingerData() {
            fm.config(this, {
                bizKey: plugin.bizKey
            });
            fm.init();
            fm.getEid((res = {}) => {
                plugin.setJdStorageSync('finger_tk', res.tk);
            });
        },

        // 拒绝协议
        reject() {
            let { rejectReturnPage, rejectPageType } = this.config;

            if (rejectReturnPage) {
                uni[`${rejectPageType}` || 'rejectTo']({
                    url: rejectReturnPage
                });
            } else {
                uni.navigateBack();
            }
        }
    }
};
</script>
<style>
/* pages/login/login.wxss */
.phone-btn {
    margin: 40rpx auto 152rpx auto;
    width: 658rpx;
    height: 92rpx;
    line-height: 92rpx;
    border-radius: 100rpx;
    background-color: #1aad19;
    color: #fff;
    font-size: 32rpx;
}
.phone-btn::after {
    border: none;
}
.f8be360ead1f4a3d9afb5e312b845ebb {
    position: absolute;
    width: 100%;
    height: 100%;
    border: solid 1px #cdcdcd;
    opacity: 0;
    left: -100%;
    top: -100%;
    z-index: -2147483648;
}
/* 协议弹窗样式 */
.dialog-tips {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
}
.dialog-tips > view {
    position: absolute;
    border-radius: 16rpx;
    width: 80%;
    padding: 60rpx 40rpx;
    background-color: #fff;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.dialog-tips view button {
    display: inline-block;
    width: 45%;
    margin: 0;
}
.dialog-tips view button.phone-btn {
    margin-left: 10%;
}
.dialog-tips view button.bg-btn {
    background: rgba(242, 242, 242, 1);
    border-radius: 50rpx;
    color: rgba(136, 136, 136, 1);
    margin: 0;
}
.dialog-tips .no-fix > view {
    position: static;
    margin-bottom: 20rpx;
    text-align: left;
}
.dialog-tips .no-fix > view > view {
    font-size: 28rpx;
    line-height: 50rpx;
    color: #1269e2;
}
.dialog-tips .no-fix > view > view:first-child {
    color: #000;
}
.dialog-tips .no-fix > view > text:last-child {
    display: block;
}
</style>
