<script setup>
	/**
	 * name：
	 * user：sa0ChunLuyu
	 * date：2022-04-23 21:25:04
	 */

	import {
		ref,
		onMounted
	} from 'vue'
	import config from '@/config.js'

	import {
		bindUserPhoneAction,
		setUserAccountAction,
		editUserNicknameAction,
		uploadUserAvatarAction,
		getUserInfoAction,
		getConfigAction
	} from '@/api/index.js'
	import {
		loginJump
	} from '@/tool/login.js'
	import {
		useStore
	} from 'vuex'
	const $store = useStore()

	const user_info = ref(false)
	const edit_nickname = ref(false)
	onMounted(() => {
		getUserInfo()
	})

	const getConfigPhone = () => {
		getConfigAction("'设置手机号'", (list) => {
			if (Number(list["设置手机号"].content) === 1) {
				uni.$lu.toast('根据规定，请绑定手机号');
			}
		})
	}

	const getUserInfo = () => {
		getUserInfoAction((info) => {
			user_info.value = info
			if (!user_info.value.phone) getConfigPhone()
			if (user_info.value.account) user_account.value = user_info.value.account.account
		})
	}

	const uploadUserAvatar = (toast = true) => {
		$store.commit('loadingStart')
		uploadUserAvatarAction(user_info.value.info.avatar, () => {
			$store.commit('loadingDone')
			if (toast) uni.$lu.toast('上传成功');
			getUserInfo()
		}, () => {
			$store.commit('loadingDone')
		})
	}

	const onChooseAvatar = (e) => {
		checkAvatarUrl(e.detail.avatarUrl)
	}

	const checkAvatarUrl = (avatar, toast = true) => {
		if (avatar.indexOf('thirdwx.qlogo.cn') === -1) {
			wx.getFileSystemManager().readFile({
				filePath: avatar,
				encoding: 'base64',
				success: res => {
					let base64 = 'data:image/png;base64,' + res.data;
					user_info.value.info.avatar = base64
					uploadUserAvatar(toast)
				}
			});
		} else {
			uni.request({
				url: avatar,
				method: 'GET',
				responseType: 'arraybuffer',
				success: res => {
					let base64 = 'data:image/png;base64,' + uni.arrayBufferToBase64(res.data);
					user_info.value.info.avatar = base64
					uploadUserAvatar(toast)
				}
			});
		}
	}

	const updateUserInfo = (res) => {
		wx.getUserProfile({
			desc: '新用户完善用户资料',
			success: (res) => {
				let d = res.userInfo
				user_info.value.info.nickname = d.nickName
				editUserNickname()
				user_info.value.info.avatar = d.avatarUrl
				checkAvatarUrl(user_info.value.info.avatar, false)
			}
		})
	}

	const phoneLoginButtonClick = (e) => {
		uni.login({
			provider: 'weixin',
			success: (loginRes) => {
				bindUserPhone({
					code: loginRes.code,
					iv: e.detail.iv,
					encrypted_data: e.detail.encryptedData,
				})
			},
		});
	}

	const user_account = ref('')
	const edit_account = ref(false)
	const user_password = ref('')
	const check_password = ref('')
	const old_password = ref('')

	const editAccountClick = () => {
		if (!user_info.value.account) {
			edit_account.value = true
		}
	}

	const editUserNickname = () => {
		$store.commit('loadingStart')
		editUserNicknameAction(user_info.value.info.nickname, () => {
			$store.commit('loadingDone')
			uni.$lu.toast('设置成功');
			getUserInfo()
		}, () => {
			$store.commit('loadingDone')
		})
	}

	const editNicknameDone = () => {
		edit_nickname.value = false
		editUserNickname()
	}

	const bindUserPhone = (data) => {
		$store.commit('loadingStart')
		bindUserPhoneAction(data, () => {
			$store.commit('loadingDone')
			uni.$lu.toast('设置成功');
			getUserInfo()
			let jump_path = uni.getStorageSync('JUMP_PATH')
			if (jump_path) loginJump()
		}, () => {
			$store.commit('loadingDone')
		})
	}

	const setUserAccount = () => {
		if (!user_password.value) return uni.$lu.toast('请输入密码');
		if (user_password.value.length < 6 || user_password.value.length > 40) return uni.$lu.toast('密码长度应在6-20字符之间');
		if (user_password.value !== check_password.value) return uni.$lu.toast('两次输入的密码不一致');
		let data = {}
		if (user_info.value.account) {
			data.old_password = old_password.value
			data.password = user_password.value
		} else {
			if (!user_account.value) return uni.$lu.toast('请输入账号');
			if (user_account.value.length < 2 || user_account.value.length > 20) return uni.$lu.toast(
				'账号长度应在2-20字符之间');
			data.account = user_account.value
			data.password = user_password.value
		}
		$store.commit('loadingStart')
		setUserAccountAction(data, () => {
			$store.commit('loadingDone')
			uni.$lu.toast('设置成功');
			old_password.value = ''
			user_password.value = ''
			check_password.value = ''
			getUserInfo()
		}, () => {
			$store.commit('loadingDone')
		})
	}
</script>
<template>
	<Loading></Loading>
	<view v-if="user_info">
		<view class="info_line_wrapper user_avatar_wrapper">
			<view class="info_title_wrapper">头像</view>
			<view class="user_info_avatar_wrapper">
				<u-image :src="user_info.info.avatar" width="140rpx" height="140rpx">
				</u-image>
				<button class="opentype_button_wrapper" open-type="chooseAvatar"
					@chooseavatar="onChooseAvatar">获取头像</button>
			</view>
		</view>
		<view class="info_line_wrapper user_nickname_wrapper">
			<view class="info_title_wrapper">昵称</view>
			<view class="info_content_wrapper">
				<view v-if="!edit_nickname" @click="edit_nickname = true">
					{{ user_info.info.nickname?user_info.info.nickname:'未设置' }}
				</view>
				<view v-else>
					<input :focus="edit_nickname" @blur="editNicknameDone()" type="nickname"
						v-model="user_info.info.nickname" placeholder="请输入昵称" />
				</view>
			</view>
		</view>

		<view>
			<view class="primary_button_wrapper get_wx_info_wrapper">
				<button class="opentype_button_wrapper" @tap="updateUserInfo" withCredentials="true">获取信息</button>
				授权获取微信头像和昵称
			</view>
		</view>

		<view class="info_line_wrapper user_nickname_wrapper">
			<button class="opentype_button_wrapper" open-type="getPhoneNumber" @getphonenumber="phoneLoginButtonClick"
				withCredentials="true">获取手机号</button>
			<view class="info_title_wrapper">手机号</view>
			<view class="info_content_wrapper">
				<view>
					{{ user_info.phone?user_info.phone.account:'未设置，点击此处设置' }}
				</view>
			</view>
		</view>

		<view class="info_line_wrapper user_nickname_wrapper">
			<view class="info_title_wrapper">账号</view>
			<view class="info_content_wrapper">
				<view v-if="!edit_account" @click="editAccountClick()">
					{{ user_account?user_account:'未设置' }}
				</view>
				<view v-else>
					<input :focus="edit_account" @blur="edit_account = false" v-model="user_account"
						placeholder="请输入账号" />
				</view>
			</view>
		</view>
		<view v-if="user_info.account" class="info_line_wrapper user_nickname_wrapper">
			<view class="info_title_wrapper">旧密码</view>
			<view class="info_content_wrapper">
				<input v-model="old_password" placeholder="请输入旧密码" />
			</view>
		</view>
		<view class="info_line_wrapper user_nickname_wrapper">
			<view class="info_title_wrapper">{{ user_info.account?'新密码':'密码' }}</view>
			<view class="info_content_wrapper">
				<input v-model="user_password" placeholder="请输入密码" />
			</view>
		</view>
		<view class="info_line_wrapper user_nickname_wrapper">
			<view class="info_title_wrapper">确认密码</view>
			<view class="info_content_wrapper">
				<input v-model="check_password" placeholder="请确认密码" />
			</view>
		</view>

		<view>
			<view @click="setUserAccount()" class="primary_button_wrapper get_wx_info_wrapper">
				{{ user_info.account?'修改密码':'创建账号' }}
			</view>
		</view>
	</view>
	<view class="info_line_wrapper user_phone_wrapper"></view>
</template>
<style scoped>
	.get_wx_info_wrapper {
		margin: 50rpx auto;
	}

	.info_content_wrapper {
		text-align: right;
	}

	.user_info_avatar_wrapper {
		width: 140rpx;
		height: 140rpx;
		position: relative;
	}

	.info_title_wrapper {
		font-weight: bold;
	}

	.info_line_wrapper {
		position: relative;
		padding: 30rpx;
		display: flex;
		min-height: 110rpx;
		align-items: center;
		justify-content: space-between;
	}
</style>
