<template>
	<view class="px-40rpx">
		<view
			class="py-20rpx flex justify-between items-center border-b-#E5E5E5 border-b-1px"
		>
			<view>头像</view>
			<view class="overflow-hidden rounded-full w-100rpx h-100rpx">
				<choose-avatar
					:defaultValue="userInfo.avatar"
					@changeAvatar="(url) => (userInfo.avatar = url)"
				/>
			</view>
		</view>
		<view
			class="relative h-130rpx flex justify-between items-center border-b-#E5E5E5 border-b-1px"
		>
			<view
				>昵称 <text class="text-#999 text-24rpx">建议改为真实姓名</text></view
			>
			<input
        v-model="userInfo.nickName"
        @change="handleNickName"
				type="nickname"
				placeholder=""
				inputAlign="right"
				maxlength="20"
				border="0"
			/>
		</view>
		<view
			class="relative h-130rpx flex justify-between items-center border-b-#E5E5E5 border-b-1px"
		>
			<view>手机号</view>
			<button
				hover-class="none"
				open-type="getPhoneNumber"
				@getphonenumber="getPhoneNumber"
				class="absolute right-0 z-10 overflow-hidden !hover:bg-transparent !active:bg-transparent w-80% h-full rounded-md"
			></button>
			<u-input
				v-model="userInfo.phone"
				placeholder=""
				type="number"
				inputAlign="right"
				maxlength="20"
				border="0"
				read-only
			></u-input>
		</view>
		<view
			@click="show = true"
			class="h-130rpx flex justify-between items-center border-b-#E5E5E5 border-b-1px"
		>
			<view>性别</view>
			<view>{{ columns[0][userInfo.gender] }}</view>
		</view>
		<u-picker
			:show="show"
			:columns="columns"
			confirmColor="#FF8CA6"
			@confirm="hadleConfirm"
			@cancel="show = false"
			@close="show = false"
			closeOnClickOverlay
		></u-picker>
		<view
			class="fixed bottom-8 left-0 right-0 text-white pt-12rpx border-t-1px border-solid border-#E5E5E5"
			><view
				@click="$u.throttle(handleSave, 800)"
				class="bg-#FF8CA6 rounded-24rpx w-660rpx h-80rpx text-center leading-80rpx hover:shadow-md mx-auto"
				>修改信息</view
			></view
		>
	</view>
</template>

<script setup>
const instance = getCurrentInstance()
const { $api, $store, $Router, $u,$toast } = instance.proxy
const show = ref(false)
const columns = ref([['男', '女']])
const userInfo = ref(...$store.user.userInfo)
const isEdit = ref($Router.query?.edit || false)

const hadleConfirm = ({ indexs: [index] }) => {
	userInfo.value.gender = index
	show.value = false
}
const getPhoneNumber = async (e) => {
	const { detail } = e
	if (detail.errMsg === 'getPhoneNumber:ok') {
		const res = await $api.getPhone({ code: detail.code })
		if (res.success) {
			userInfo.value.phone = res.msg
		}
	}
}
const handleNickName = (e) => {
  userInfo.value.nickName = e.detail.value
}

const handleSave = async () => {
	const res = await $api.userSave(userInfo.value)
	if (res.success) {
    $store.user.setUserInfo(userInfo.value)
		$toast('保存成功').then(()=>{
      $Router.back()
    })
	}
}
</script>

<style lang="scss" scoped>
page {
	background-color: #fff;
}
input{
  text-align: right;
  padding-right: 6rpx;
}
</style>
