<template>
	<view>
		<view class="accredit_model">
			<view class="model_container">
				<view class="model_top">
					<image class="model_icon" src="@/static/images/model_img.png"></image>
				</view>
				<view class="model_content">
					<view class="model_title">授权提示</view>
					<view class="model_desc">{{content}}</view>
					<view class="model_btns">
						<view class="mbtn cancel_btn" @click="modelCancel()">取消</view>
						<view class="mbtn confirm_btn" @click="modelConfirm()" v-if="locationType">确定</view>
						<!-- <view class="mbtn confirm_btn" @click="modelConfirm()" v-if="userPhoneType">确定</view> -->
						<button class="mbtn confirm_btn" v-if="userPhoneType" open-type="getPhoneNumber" @getphonenumber="getphonenumber">确定</button>
					</view>
				</view>
			</view>
		</view>
		<view class="mask"></view>
	</view>
</template>
<script>
	const app = getApp();
	import Routine from '@/libs/routine';
	import {loginMobile,registerVerify,getCodeApi,getUserInfo} from "@/api/user";
	import { getLogo, getUserPhone } from '@/api/public';
	export default {
		name:'',
		props:{
			locationType:{
				type:Boolean,
				default:false
			},
			userPhoneType:{
				type:Boolean,
				default:false
			},
			authKey:{
				type:String,
				default:'',
			},
			isPhoneBox:{
				type:Boolean,
				default:false,
			},
			content:{
				type:String,
				default:'申请获取用于完整服务',
			}
		},
		data() {
			return {
				isStatus:false
			}
		},
		methods:{
			modelCancel(){
				this.$emit('closeModel',{isStatus:this.isStatus});
			},
			modelConfirm(){
				this.$emit('confirmModel');
			},
			// #ifdef MP
			// 小程序获取手机号码
			getphonenumber(e){
				uni.showLoading({ title: '加载中' });
				Routine.getCode()
					.then(code => {
						this.getUserPhoneNumber(e.detail.encryptedData, e.detail.iv, code);
					})
					.catch(error => {
						uni.hideLoading();
					});
			},
			// 小程序获取手机号码回调
			getUserPhoneNumber(encryptedData, iv, code) {
				getUserPhone({
					encryptedData: encryptedData,
					iv: iv,
					code: code,
					key:this.authKey,
					type: 'routine'
				})
					.then(res => {
						this.$store.commit('LOGIN', {
							token: res.data.token
						});
						this.$store.commit("SETUID", res.data.uid);
						this.getUserInfo();
					})
					.catch(res => {
						uni.hideLoading();
						this.$util.Tips({
							title: res
						});
					});
			},
			/**
			 * 获取个人用户信息
			 */
			getUserInfo: function() {
				let that = this;
				getUserInfo().then(res => {
					uni.hideLoading();
					that.$store.commit("UPDATE_USERINFO", res.data);
					that.isStatus = true
					this.modelCancel();
				});
			},
			// #endif
		}
	}
</script>

<style scoped lang="scss">
	.accredit_model{
		/* position: relative; */
		width: 560rpx;
		height: 660rpx;
		position: fixed;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		z-index: 999;
	}
	.model_container{
		width: 100%;
		height: 660rpx;
	}
	.model_top{
		width: 100%;
		height: 270rpx;
		// background: #D64532;
		@include main_bg_color(theme);
		border-radius: 20rpx 20rpx 0 0;
		background-image: url(data:image/png;base64,[encoded data, 6196 characters]);
		background-size: cover;
		display: flex;
		justify-content: center;
		align-items: flex-end;
	}
	.model_icon{
		width: 230rpx;
		height: 210rpx;
	}
	.model_content{
		width: 100%;
		height: 390rpx;
		background-color: #fff;
		border-radius: 0 0 20rpx 20rpx;
		padding: 32rpx;
		box-sizing: border-box;
	}
	.model_title{
		text-align: center;
		font-size: 36rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #333333;
		line-height: 50rpx;
	}
	.model_desc{
		width: 448rpx;
		height: 96rpx;
		margin: 20rpx auto 0;
		font-size: 32rpx;
		text-align: center;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 48rpx;
	}
	.model_btns{
		width: 448rpx;
		height: 82rpx;
		margin: auto;
		display: flex;
		justify-content: space-between;
	}
	.mbtn{
		width: 208rpx;
		height: 82rpx;
		border-radius: 42rpx;
		margin-top: 44rpx;
	}
	.cancel_btn{
		background: #F5F5F5;
		font-weight: 400;
		color: #666666;
		line-height: 82rpx;
		text-align: center;
		font-size: 32rpx;
	}
	.confirm_btn{
		@include linear-gradient(theme);
		font-weight: 400;
		color: #fff;
		line-height: 82rpx;
		text-align: center;
		font-size: 32rpx;
	}
	.mask{
		z-index: 900;
	}
</style>