<template>
    <view style="height: 100%">
        <index @showauthor="showLoad" @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="selfTipsDialog">
            <view>
                <instruction class="no-fix" type="modal" :config="config" @changecheck="changeCheckbox" />
                <button
                    v-if="smsBtn"
                    class="phone-btn phone-modal"
                    :style="config.loginConfig && config.loginConfig.wxBtnStyle"
                    open-type="getPhoneNumber"
                    @getphonenumber="getPhoneNumber"
                >
                    确认
                </button>
                <index v-if="userBtn" type="modal" @showauthor="showLoad" @smsloginres="smsloginResListener" :config="config" :checkboxChecked="true" />
                <view class="cancel" @tap="reject">我再想想</view>
            </view>
        </view>
        <!-- 底部展示协议授权 -->
        <instruction v-else :config="config" @changecheck="changeCheckbox" />
        <view>
            <canvas class="f8be360ead1f4a3d9afb5e312b845ebb" canvas-id="fbfd3ec3c4ab4213b9a09b5c5e769ceb"></canvas>
        </view>
    </view>
</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,
            selfTipsDialog: false,
            detail: '',
            code: '',
            userBtn: false,
            smsBtn: false,
            wxBtnStyle: ''
        };
    },
    onLoad(options) {
        plugin.onLoginSuccess((data) => {
            console.jdLoginLog(data, '登录成功');
        });
        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 || this.userBtn) {
                util.handleJump(res.detail);
            } else {
                this.showLoad('useBtn');
            }
        },

        showLoad(type) {
            // wx.showToast({
            //   title: '请阅读并勾选页面底部协议',
            //   icon: "none",
            //   duration: 3000
            // })
            // if(type.detail){
            // 	console.log(type.detail)
            // }
            this.selfTipsDialog = true;
            this[type.detail || type] = true;
        },

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

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

        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.data.config;
            // if(rejectReturnPage){
            //   wx[`${rejectPageType}` || 'rejectTo']({url:rejectReturnPage})
            // }else{
            //   wx.navigateBack()
            // }
            this.selfTipsDialog = false;
            this.userBtn = false;
            this.smsBtn = false;
        }
    }
};
</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.6);
}
.dialog-tips > view {
    position: absolute;
    border-radius: 16rpx;
    width: 70%;
    padding: 40rpx 20rpx;
    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.cancel {
    font-size: 30rpx;
    color: rgba(100, 101, 102, 1);
    text-align: center;
    margin-top: 30rpx;
}
.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>text:last-child{
  display: block;
} */
.phone-modal {
    padding: 0;
    width: 320rpx;
    height: 64rpx;
    line-height: 64rpx;
    background: rgba(81, 169, 56, 1);
    border-radius: 32rpx;
    margin: 0 0 0 calc(50% - 160rpx) !important;
    color: #fff;
    text-align: center;
}
</style>
