<template>
	<view class="setting-page">
		<HeaderCom></HeaderCom>
		<scroll-view scroll-y="true" class="scroll-main">
			<view class="main" v-if="isLogin">
				<view class="item" @click="updateAvatar">
					<view class="label">头像</view>
					<view class="info">
						<view class="portrait">
							<image :src="infoDetail.avatarResource ? infoDetail.avatarResource.url : '/static/zy/logo.png'" class="portrait-icon" mode="aspectFit"></image>
						</view>
						<!-- <image src="@/static/new/mine/back.png" mode="" class="back-icon"></image> -->
					</view>
				</view>
				 <!-- @click="editName" -->
				<view class="item" @click="editName">
					<view class="label">昵称</view>
					<view class="info">
						{{infoDetail.nickname}}
						<image src="@/static/new/mine/back.png" mode="" class="back-icon"></image>
					</view>
				</view>
				<!-- <view class="item" @click="bindPhone">
					<view class="label">手机号</view>
					<view class="info" v-if="infoDetail.phone">
						{{infoDetail.phone | mobileFilter(infoDetail.phone)}}
					</view>
					<view class="info" v-else>
						未绑定手机
					</view>
				</view> -->
				<view class="item border-none">
					<view class="label">ID</view>
					<view class="info" @click="copy">
						{{infoDetail.id}}
					</view>
				</view>
			</view>
			<view class="main">
				<view class="item" @click="agreement('index')">
					<view class="label">用户协议</view>
					<view class="info">
						
						<image src="@/static/new/mine/back.png" mode="" class="back-icon"></image>
					</view>
				</view>
				<view class="item" @click="agreement('privacy')">
					<view class="label">隐私政策</view>
					<view class="info">
						<image src="@/static/new/mine/back.png" mode="" class="back-icon"></image>
					</view>
				</view>
				<view class="item" @click="agreement('nonage-rule')">
					<view class="label">儿童个人信息保护规则</view>
					<view class="info">
						<image src="@/static/new/mine/back.png" mode="" class="back-icon"></image>
					</view>
				</view>
				<view class="item" @click="agreement('nonage')">
					<view class="label">支付服务协议</view>
					<view class="info">
						<image src="@/static/new/mine/back.png" mode="" class="back-icon"></image>
					</view>
				</view>
				<view class="item" :class="{'border-none':!isLogin}" @click="about">
					<view class="label">关于我们</view>
					<view class="info">
						<image src="@/static/new/mine/back.png" mode="" class="back-icon"></image>
					</view>
				</view>
				<view class="item" @click="clearCache">
					<view class="label">清除缓存</view>
					<view class="info">
						<image src="@/static/new/mine/back.png" mode="" class="back-icon"></image>
					</view>
				</view>
				<view class="item border-none" @click="customerCk" v-if="isLogin">
					<view class="label">联系客服</view>
					<view class="info">
						<image src="@/static/new/mine/back.png" mode="" class="back-icon"></image>
					</view>
				</view>
			</view>
			<view class="out" @click="logOut" v-if="isLogin">退出登录</view>
		</scroll-view>
		<!-- 退出登录弹框 -->
		<popup-view v-model="logOutvisible" mode="center" border-radius="15" zIndex="1">
			<view class="log-out">
				<view class="log-out-tip">确定要退出登录？</view>
				<view class="log-out-footer">
					<view class="cancel" @click="closeLogOut">取消</view>
					<view class="shu"></view>
					<view class="log-out-submit" @click="submitLogOut">确定</view>
				</view>
			</view>
		</popup-view>
		<!-- 所有页面的弹框 -->
		<page-popup page="/pages/mine/setting"></page-popup>
	</view>
</template>

<script>
	import { myMixins } from "@/mixins/mixins.js";
	import HeaderCom from '@/pages/components/header.vue'
	import { userInfo,customerApi,aliyunUploadTokenApi,updateAvatarApi,versionControlApi } from '@/API/user.js'
	export default{
	mixins: [myMixins],
		data(){
			return{
				infoDetail:{avatarResource:{}},//用户信息
				logOutvisible:false,//退出登录
				customer:'',
				isLogin:false,
				dataObj: {
					policy: "",
					signature: "",
					key: "",
					OSSAccessKeyId: "",
					dir: "",
					host: "",
				  },
			}
		},
		components:{HeaderCom},
		onShow() {
			if(uni.getStorageSync('box-token')){
				this.getUserInfo()
				this.isLogin = true
			}else{
				this.isLogin = false
			}
		},
		filters:{
			// 隐藏手机号
			mobileFilter(val){
				let reg = /^(.{3}).*(.{4})$/
				return val ? val.replace(reg,'$1****$2') : ''
			},
		},
		methods:{
			updateAvatar(){
				uni.chooseImage({
				        count: 1, // 默认9，设置图片的数量
				        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
				        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
				        success: (chooseImageRes) => {
						console.log(chooseImageRes)
				          const tempFiles = chooseImageRes.tempFiles;
				          const tempFilePaths = chooseImageRes.tempFilePaths;
						  let data = {filename:`${new Date().getTime()}${tempFiles[0].name}`,dir:'user/avatar'}
						  aliyunUploadTokenApi(data).then(response => {
							  console.log(response)
							  // updateAvatarApi
							  this.dataObj.policy = response.data.policy;
							  this.dataObj.signature = response.data.signature;
							  this.dataObj.OSSAccessKeyId = response.data.accessId;
							  this.dataObj.key = response.data.key;
							  this.dataObj.dir = response.data.key;
							  this.dataObj.host = response.data.host;
							  uni.uploadFile({
							    url: this.dataObj.host, // 服务器上传接口地址
							    filePath: tempFilePaths[0],
							    name: 'file', // 必须填写，后台用来接收文件
							    formData: this.dataObj,
							    success: (uploadFileRes) => {
									if(uploadFileRes.errMsg === 'uploadFile:ok'){
										updateAvatarApi({avatar:this.dataObj.key}).then(upRes => {
											this.$api.msg(upRes.message)
											if(upRes.code === 200){
												this.getUserInfo()
											}
										})
									}
							      console.log('upload success:', uploadFileRes);
							    },
							    fail: (uploadFileErr) => {
							      console.error('upload fail:', uploadFileErr);
							    }
							  });
						  })
				        },
				        fail: (chooseImageErr) => {
				          console.error('choose image fail:', chooseImageErr);
				        }
				      });
			},
			copy(){
				uni.setClipboardData({
					data: `${this.infoDetail.id}`,
				})
			},
			bindPhone(){
				if(this.infoDetail.phone){
					this.$emit('您已绑定手机')
					return
				}
				uni.navigateTo({
					url:`/pages/login/bindPhone`
				})
			},
			// 获取客服链接
			getCustomer(){
				customerApi().then(res => {
						if(res.code === 200){
							this.customer = res.data
						}else{
							this.$api.msg(res.message)
						}
				})
			},
			// 跳转客服
			customerCk(){
				uni.navigateTo({
					url:`/pages/mine/customer`
				})
				// window.open(this.customer)
			},
			about(){
				uni.navigateTo({
					url:`/pages/mine/about`
				})
			},
			// 获取用户信息
			getUserInfo(){
				userInfo().then(res => {
					if(res.code === 200){
						this.infoDetail = res.data
					}else{
						this.$api.msg(res.message)
					}
				})
			},
			// 修改昵称
			editName(){
				uni.navigateTo({
					url:`/pages/mine/editName?id=${this.infoDetail.id}&nickname=${this.infoDetail.nickname}`
				})
			},
			// 用户协议 隐私政策
			agreement(type){
				uni.navigateTo({
					url:`/pages/agreement/${type}`
				})
			},
			// 清除缓存
			clearCache(){
				uni.showLoading({
					mask:true
				})
				versionControlApi().then(res => {
					uni.hideLoading()
					this.$api.msg(res.message)
					if(res.code === 200){
						let path = window.location.protocol + '//' + res.data.url
						console.log(window.location.protocol)
						
						setTimeout(() => {
							window.location.href = path
						},1000)
					}
				}).catch(err => {
					uni.hideLoading()
				})
			},
			logOut(){
				this.logOutvisible = true
			},
			closeLogOut(){
				this.logOutvisible = false
			},
			submitLogOut(){
				uni.removeStorageSync('box-token')
				uni.reLaunch({
					url:`/pages/login/login`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #F5F5F5;
	}
	.setting-page{
		padding-top: 112rpx;
		.scroll-main{
			height: calc(100vh - 112rpx);
			padding: 0 32rpx;
			.main{
				width: 686rpx;
				background: #FFFFFF;
				border-radius: 24rpx;
				margin-bottom: 24rpx;
				padding: 0 32rpx;
				.item{
					height: 104rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1px solid #F2F2F2;
					.label{
						font-weight: 500;
						font-size: 32rpx;
						color: #000000;
					}
					.info{
						display: flex;
						align-items: center;
						font-weight: 500;
						font-size: 28rpx;
						color: #999999;
						.portrait{
							width: 72rpx;
							height: 72rpx;
							border-radius: 50%;
							border: 2rpx solid #CCCCCC;
							display: flex;
							align-items: center;
							justify-content: center;
							.portrait-icon{
								width: 72rpx;
								height: 72rpx;
								border-radius: 50%;
							}
						}
						.back-icon{
							width: 40rpx;
							height: 40rpx;
						}
					}
				}
				.border-none {
					border: none;
				}
			}
			.out{
				width: 686rpx;
				height: 104rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #FFFFFF;
				border-radius: 24rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #E55353;
			}
		}
		
		.log-out{
			width: 590rpx;
			height: 300rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			.log-out-tip{
				height: 200rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: rgba(0,0,0,0.85);
				line-height: 200rpx;
				text-align: center;
			}
			.log-out-footer{
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-top: 2rpx solid rgba(0,0,0,0.06);
				height: 100rpx;
				.cancel{
					width: 294rpx;
					height: 100rpx;
					line-height: 100rpx;
					font-weight: 500;
					font-size: 32rpx;
					color: #000000;
					text-align: center;
					border-right: 1px solid rgba(0,0,0,0.06);
				}
				.log-out-submit{
					width: 294rpx;
					height: 100rpx;
					line-height: 100rpx;
					font-weight: 500;
					font-size: 32rpx;
					color: #E55353;
					text-align: center;
				}
			}
		}
	}
</style>