<template>
	<view v-if="authStore.user" class="w-body">
		<w-public />
		<w-navbar fixed left-back title="个人设置"></w-navbar>
		
		<view class="item-group" style="position: static;">
			<view class="item" hover-class="w-hover-before" @click="avatarStart()">
				<view class="item-title">头像</view>
				<view class="item-body"><u-avatar mode="aspectFill" size="2.5rem" :src="$w.url(authStore.user.avatar)"></u-avatar></view>
				<view class="item-right">
					<u-icon name="arrow-right" size=".6rem" color="var(--w-text-light)"></u-icon>
				</view>
			</view>
			<view class="item" :hover-class="bindName?'w-hover-before':''" @click="doBindName()">
				<view class="item-title">账户</view>
				<view class="item-body">{{bindName?'去绑定':authStore.user.userName}}</view>
				<view class="item-right">
					<u-icon v-if="bindName" name="arrow-right" size=".6rem" color="var(--w-text-light)"></u-icon>
				</view>
			</view>
			<view class="item" hover-class="w-hover-before" @click="pInput = {...nicknameInput};pInput.value = authStore.user?.nickName;">
				<view class="item-title">昵称</view>
				<view class="item-body">{{authStore.user?.nickName}}</view>
				<view class="item-right">
					<u-icon name="arrow-right" size=".6rem" color="var(--w-text-light)"></u-icon>
				</view>
			</view>
			<view v-if="false" class="item" hover-class="w-hover-before" @click="doCopy(authStore.user?.dept?.deptName)" >
				<view class="item-title">部门</view>
				<view class="item-body">{{authStore.user?.dept?.deptName}}</view>
				<view class="item-right">
				</view>
			</view>
		</view>
		
		<view class="item-group">
			<view class="item" hover-class="w-hover-before" @click="if(authStore.user?.phonenumber){doCopy(authStore.user?.phonenumber);}else{popupPhone = true;}">
				<view class="item-title">手机号码</view>
				<view class="item-body">{{authStore.user?.phonenumber?authStore.user?.phonenumber:'去绑定'}}</view>
				<view class="item-right">
					<u-icon v-if="!authStore.user?.phonenumber" name="arrow-right" size=".6rem" color="var(--w-text-light)"></u-icon>
				</view>
			</view>
			<view class="item" hover-class="w-hover-before" @click="if(authStore.user?.email){doCopy(authStore.user?.email);}else{pInput = {...emailInput};}">
				
				<view class="item-title">电子邮箱</view>
				<view class="item-body">{{authStore.user?.email?authStore.user?.email:'去绑定'}}</view>
				<view class="item-right">
					<u-icon v-if="!authStore.user?.email" name="arrow-right" size=".6rem" color="var(--w-text-light)"></u-icon>
				</view>
			</view>
		</view>
		
		
		<view class="item-group">
			<view class="item" hover-class="w-hover-before" @click="doCopy(authStore.user?.loginDate)">
				<view class="item-title">最后登录时间</view>
				<view class="item-body">{{authStore.user?.loginDate}}</view>
				<view class="item-right"></view>
			</view>
			<view class="item" hover-class="w-hover-before" @click="doCopy(authStore.user?.loginIp)">
				<view class="item-title">最后登录ip</view>
				<view class="item-body">{{authStore.user?.loginIp}}</view>
				<view class="item-right"></view>
			</view>
		</view>
		

		
		<view class="w-btn" hover-class="w-hover-before" style="--color-1:var(--w-success-dark);--color-2:var(--w-success-dark);" @click="$w.to('set-pwd')">重置密码</view>
		
		<view class="w-btn" hover-class="w-hover-before" style="--color-1:var(--w-main);--color-2:var(--w-main);" @click="logout()">退出登录</view>
		
		<ksp-cropper mode="fixed" :width="400" :height="400"  :maxWidth="1024" :maxHeight="1024" :url="avatar" @cancel="avatar=''" @ok="avatarOk"></ksp-cropper>
	
		<w-popup-input @submit="doPopupInput()" :type="pInput.type" :h2="pInput.h2" :placeholder="pInput.placeholder" :h3="pInput.h3" :label="pInput.label" v-model:open="pInput.open" v-model="pInput.value"></w-popup-input>
			
		<w-bind-phone v-model="popupPhone"></w-bind-phone>
	
	</view>
</template>

<script setup>
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { ref,computed } from 'vue'
	import { useAuthStore } from '@/store'
	import { doCopy } from '@/util'
	
	import { bindUserName,update,avatar as uploadAvatar } from '@/api/system/user/profile.js'
	

	
	const popupPhone = ref(false);//是否显示绑定手机popup
	
	
	
	// import WSetAvatar from './components/w-set-avatar.vue'

	
	const authStore = useAuthStore();
	// authStore.user.phonenumber = "";
	
	const logout = ()=>{
		uni.showModal({
			title: '退出提示',
			content: '您确定要安全退出吗?',
			success: function (res) {
				if(res.confirm) {
					authStore.logout().finally(()=>{
						uni.reLaunch({url: "/pages/index/login"});
					});
				}
			}
		});
	}
	
	/**
	 * 头像处理
	 */
	const avatar = ref("");
	/**
	 * 头像裁剪后的回调
	 */
	const avatarOk = (res) => {
		avatar.value = "";
		authStore.user.avatar = res.path;
		console.debug("头像",res.path);
		uploadAvatar(res.path).then(r=>{
			console.debug("头像上传后",r);
			authStore.user.avatar = r.imgUrl;
		});
	}
	/**
	 * 头像选择
	 */
	const avatarStart = () => {
		uni.chooseImage({
			count: 1,
			success: (res) => {
				avatar.value=res.tempFilePaths[0];
			}
		})
	}
	
	
	/**
	 * 输入框
	 */
	const pInput = ref({open:false,value:""});
	
	/**
	 * 输入框回调处理
	 */
	const doPopupInput = async()=>{
		let value = pInput.value.value;
		if(pInput.value.h2 == nameInput.h2) {//账户绑定回调处理
			if(!value){
				uni.showToast({
					title:"账号必填"
				})
				return;
			}
			if(!/^[a-zA-Z]\w{2,19}$/.test(value)){
				uni.showToast({
					title:"账号不规范"
				})
				return;
			}
			await bindUserName(value);
			authStore.user.userName = value;
			pInput.value.open=false;
			uni.showToast({
				title:"修改成功"
			});
			
		}else if(pInput.value.h2 == nicknameInput.h2) {
			if(!value) {
				uni.showToast({
					title:"昵称必填"
				})
				return;
			}
			if(!/^.{1,20}$/.test(value)){
				uni.showToast({
					title:"昵称不规范"
				})
				return;
			}
			await update({nickName:value});
			authStore.user.nickName = value;
			pInput.value.open=false;
			uni.showToast({
				title:"修改成功"
			});
		}else if(pInput.value.h2 == emailInput.h2) {
			if(!/^\S+@\S+$/.test(value)){
				uni.showToast({
					title:"邮箱不规范"
				})
				return;
			}
			await update({email:value});
			authStore.loadInfo();
			pInput.value.open=false;
			uni.showToast({
				title:"邮箱绑定成功"
			});
		}
	}
	
	
	
	/**
	 * 账号绑定是否需要绑定
	 */
	const bindName = computed(()=>authStore.user?.userName?.startsWith('_'));
	/**
	 * 账号绑定
	 */
	const nameInput = {
		open:true,
		value:"",
		h2:"账号绑定",
		h3:"输入的账号必须由3-20位的单词组成,并且首字符必须为字母",
		label:"账号",
		placeholder:"请输入账号",
		type:"input"
	};
	
	const doBindName = ()=>{
		if(!bindName.value){
			return;
		}
		pInput.value = {...nameInput};
	}
	
	
	/**
	 * 修改昵称
	 */
	const nicknameInput = {
		open:true,
		value:"",
		h2:"修改昵称",
		h3:"输入的昵称必须由1-20个字符组成",
		label:"昵称",
		placeholder:"请输入昵称",
		type:"input"
	};
	
	/**
	 * 绑定邮箱
	 */
	const emailInput = {
		open:true,
		value:"",
		h2:"绑定邮箱",
		h3:"输入的邮箱必须符合邮箱格式,如:10000@qq.com",
		label:"邮箱",
		placeholder:"请输入邮箱",
		type:"email"
	};
	
	
	

	
</script>

<style lang="scss" scoped>
	.w-body {
		min-height: 100vh;
		background-color: var(--w-bg);
		
		.w-btn {
			margin: .6rem .5rem 0;
		}
		
	}
</style>