<template>
    <view class="login-1 dir-left-nowrap main-center cross-center" :class="showLoginModal ? 'show' : ''">
        <view class="login-content">
			<image :src="'https://t17.9026.com/web/statics/image/index/auth-default.png'" class="login-img"></image>
            <view>
                <app-hotspot :hotspot="auth_page.hotspot_link">
                    <button class="login-btn" @click="link"></button>
                </app-hotspot>
            </view>
            <view>
                <app-hotspot :hotspot="hotspot_cancel">
                    <button class="login-btn" @click="cancel" ></button>
                </app-hotspot>
            </view>
			<view>
			    <app-hotspot :hotspot="userprivacy">
			        <view class="main-left cross-center login-userprivacy">
						<view class="login-userprivacy-radio" @click="navPrivacyAgreement" :style="{'border':`2px solid ${readUserAgreement?'#A2834F':'#CDCDCD'}`}">
							<view class="login-userprivacy-radio-check" v-show="readUserAgreement"  @click="navPrivacyAgreement"></view>
						</view>
						<text  @click="navPrivacyAgreement">登录即表示同意</text> 
						<text style="color: #A2834F;margin-left: 5rpx;" @click="navPrivacyAgreement">用户隐私协议</text>
					</view>
			    </app-hotspot>
			</view>
            <view>
                <app-hotspot :hotspot="hotspot">
                    <!-- #ifdef MP -->
                    <button class="main-center cross-center hxj-login" v-if="canIUseGetUserProfile" 
                            scope="userInfo"
                            @click="getUserInfoClick"
                    >
					<image style="width: 40rpx;height: 40rpx;margin-right: 10rpx;" src="https://t17.9026.com/web/statics/image/index/wxlogin.png" mode=""></image>立即登录
                    </button>
                    <button class="main-center cross-center hxj-login"  v-else
                            :open-type="openType"
                            scope="userInfo"
                            @getAuthorize="getUserInfo"
                            @getuserinfo="getUserInfo"
                            @click="getUserInfoClick"
                    >
					<image style="width: 40rpx;height: 40px;margin-right: 10rpx;" src="https://t17.9026.com/web/statics/image/index/wxlogin.png" mode=""></image>立即登录
                    </button>
                    <!-- #endif -->
                    <!-- #ifdef H5 -->
                    <view class="main-center cross-center hxj-login" @click="getUserInfo">
						<image style="width: 40rpx;height: 40px;margin-right: 10rpx;" src="https://t17.9026.com/web/statics/image/index/wxlogin.png" mode=""></image>立即登录
					</view>
                    <!-- #endif -->
                </app-hotspot>
				<!-- <app-hotspot :hotspot="hotspot">
					<view class="hxj-login">
						
					</view>
				</app-hotspot> -->
            </view>
        </view>
    </view>
</template>

<script>
    import Vue from 'vue';
    import {mapState} from 'vuex';
    import appHotspot from '../../../basic-component/app-hotspot/app-hotspot.vue';

    export default {
        name: 'app-user-login',
        components: {
            appHotspot,
        },
        data() {
            return {
				isAgreeUserprivacy:false,
				userprivacy:{
					defaultX: "84",
					defaultY: "120",
					height: "80",
					width: "450",
					left: "84",
					link: "",
					open_type: "cancel",
					top: "120",
					
				},
				hotspot:{
					defaultX: "50",
					defaultY: "208",
					height: "80",
					left: "50",
					link: "",
					open_type: "cancel",
					top: "208",
					width: "500",
				},
				hotspot_cancel:{
					defaultX: "72",
					defaultY: "314",
					height: "80",
					left: "50",
					link: "",
					open_type: "cancel",
					top: "314",
					width: "500",
				}
			};
        },
        computed: {
            openType() {
                // #ifdef MP-ALIPAY
                return 'getAuthorize';
                // #endif
                return 'getUserInfo';
            },
            ...mapState('mallConfig', {
                auth_page: state => state.auth_page,
            }),
            ...mapState({
                showLoginModal: function(state) {
                    return state.user.showLoginModal
                },
				readUserAgreement:state=>state.user.readUserAgreement
            }),
			canIUseGetUserProfile() {
				return this.$user.canIUseGetUserProfile();
			}
        },
        created() {
            const vm = this;
            Vue.use({
                install(Vue, options) {
                    Vue.prototype.$layout = {
                        getUserInfo() {
                            vm.showLoginModal = true;
                            return new Promise((resolve, reject) => {
                                vm.getUserInfo = (e) => {
                                };
                            });
                        },
                    };
                },
            });
        },
        methods: {
			navPrivacyAgreement(){
				let url= this.$platDiff.routeWithOption()
				this.$jump({
					// 'open_type':'redirect',
					'open_type':'navigate',
					'url':`/pages/user-center/privacyAgreement/privacyAgreement?url=${url}`,
				})
			},
            link() {
                this.$store.commit('user/showLoginModal', false);
            },
            cancel() {
                this.$store.commit('user/showLoginModal', false);
                this.$user.getUserInfoReject('getUserInfo fail: cancel.');
                let pages = getCurrentPages();
                let list = ['/pages/index/index', '/pages/user-center/user-center'];
                // #ifdef MP
                let url = this.$platDiff.route();
                // #endif
                // #ifdef H5
                let {hash} = window.location;
                hash = hash.split('#')[1];
                let url =hash;
                if (url === '/') {
                    url = '/pages/index/index'
                }
                // #endif

                if (list.includes(url)) {
                    // #ifdef MP
                    url = this.$platDiff.routeWithOption();
                    // #endif
                    // #ifdef H5
                    url = window.location.hash;
                    // #endif
                    uni.redirectTo({
                        url: url
                    });
                } else if (pages.length >= 2) {
                    uni.navigateBack({
                        delta: 1
                    });
                } else {
                    uni.redirectTo({
                        url: '/pages/index/index'
                    });
                }
            },
            // #ifdef MP
            getUserInfoClick(e) {
				if(!this.readUserAgreement){
					uni.showToast({
						title:'请阅读并同意用户隐私协议',
						icon:'none'
					})
					return
				}
				this.$store.commit("user/showLoginModal", false);
                // #ifdef MP-TOUTIAO
                this.getUserInfo(e);
                // #endif
				// #ifdef MP-WEIXIN
				this.$user.getUserProfile(e).then(res => {
					this.getUserInfo(res);
				}).catch(res => {
					console.log(res)
				})
				// #endif
            },
            // #endif
            getUserInfo(e) {
                // #ifdef H5
                if (this.$jwx.isWechat()) {
                    this.$request({
                        url: this.$api.registered.url,
                        method: 'get',
                        data: {
                            scope: 'snsapi_userinfo',
                            response_type: 'code',
                            url: `${window.location.href}`
                        }
                    }).then(res => {
                        if (res.code === 0) {
                            this.$storage.setStorageSync('_USER_SIGN', true);
                            window.location.replace(res.data.url);
                        } else {
                            uni.navigateTo({
                                url: '/pages/registered/sign'
                            });
                        }
                    });
                } else {
                    uni.navigateTo({
                        url: '/pages/registered/sign'
                    });
                }
                // #endif
                // #ifdef MP
                this.$store.commit('user/showLoginModal', false);
                const resolve = this.$user.getUserInfoResolve;
                const reject = this.$user.getUserInfoReject;
                this.$event.on(this.$const.EVENT_USER_LOGIN, true).then(() => {
                    this.$jump({
                        open_type: 'reload'
                    })
                });
                // #ifdef MP-WEIXIN
                if (e.detail.errMsg !== 'getUserInfo:ok') {
                    this.$store.commit('user/showLoginModal', true);
                    return reject(e.detail.errMsg);
                } else {
                    return resolve(e);
                }
                // #endif

                // #ifdef MP-ALIPAY
                my.getOpenUserInfo({
                    success(openUserInfo) {
                        const response = JSON.parse(openUserInfo.response);
                        e.detail = {
                            rawData: JSON.stringify(response.response),
                            encryptedData: '',
                            iv: '',
                            signature: '',
                        };
                        return resolve(e);
                    },
                    fail(failE) {
                        console.log('getOpenUserInfo:', failE);
                    },
                });
                // #endif

                // #ifdef MP-BAIDU
                e.detail.rawData = JSON.stringify(e.detail.userInfo);
                e.detail.encryptedData = '';
                e.detail.iv = '';
                e.detail.signature = '';
                return resolve(e);
                // #endif

                // #ifdef MP-TOUTIAO
                uni.login({
                    success() {
                        uni.getUserInfo({
                            success(result) {
                                e.detail = {
                                    rawData: result.rawData,
                                    encryptedData: '',
                                    iv: '',
                                    signature: '',
                                };
                                return resolve(e);
                            },
                            fail(e) {
                                console.log('getUserInfo fail:', e);
                            },
                        });
                    },
                    fail(e) {
                        console.log('login fail:', e);
                    },
                });
                // #endif
                // #endif
            },
            // #ifdef H5
            getUrlParam(name) {
                let url = window.location.href.split('#')[0];
                let search = url.split('?')[1]
                if (search) {
                    let r = search.substr(0).match(new RegExp('(^|&)' + name + '=([^&]*)(&|$)'))
                    if (r !== null) return unescape(r[2])
                    return null
                } else {
                    return null
                }
            }
            // #endif
        }
    }
</script>

<style scoped lang="scss">
    $login-padding: #{200rpx} #{50rpx};

    .login-1 {
        box-sizing: border-box;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10000;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, .5);
        padding: $login-padding;
        visibility: hidden;
        opacity: 0;
        transition: opacity 200ms;

        .login-btn {
            display: block;
            width: 100%;
            height: 100%;
            opacity: 0;
            padding: 0;
        }

        .login-content {
            position: relative;
            width: #{600rpx};
            height: #{458rpx};
        }

        .login-img {
            width: #{600rpx};
            height: #{458rpx};
        }
		.login-userprivacy{
			font-size: 24rpx;
			font-weight: 500;
			color: #333333;
			.login-userprivacy-radio{
				width: 28rpx;
				height: 28rpx;
				border-radius: 50%;
				border: 2px solid #CDCDCD;
				margin-right: 8rpx;
				position: relative;
				.login-userprivacy-radio-check{
					width: 16rpx;
					height: 16rpx;
					border-radius: 50%;
					background-color: #A2834F;
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%,-50%);
				}
			}
		}
    }

    .login-1.show {
        visibility: visible;
        opacity: 1;
    }
	
	.hxj-login{
		width: 504rpx;
		height: 82rpx;
		background: #A18253!important;
		border-radius: 2rpx;

		font-size: 28rpx;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 82rpx;
		z-index: 100001!important;
	}
</style>