<template>
	<h-dark :title="t('user.userInfo')"></h-dark>
	<!-- Main Start -->
	<!-- 头部修改头像 -->
	<view class="header ">
		<view class="flex justify-center pb-5 pt-5">
			<avatar-upload :modelValue="userInfo?.avatar" file-key="url" :round="true"
				@update:modelValue="handleAvatarChange">
			</avatar-upload>
		</view>
	</view>

	<!-- 用户ID -->
	<view class="item text-nr flex justify-between">
		<view class="label">{{t('user.acount')}}</view>
		<view class="content">
			{{ userInfo?.account}}
		</view>
	</view>

	<!-- 性别 -->
	<view class="item text-nr flex justify-between">
		<view class="label">{{t('user.sex')}}</view>
		<view class="content" @click="changeSex">{{ userInfo?.sex=='男'?t('user.sex_m'):t('user.sex_wm') }}<u-icon name="arrow-right" size="22"
				color="#666"></u-icon></view>

	</view>

	<!-- 手机号 -->
	<view class="item text-nr flex justify-between">
		<view class="label">{{t('captcha.mobile')}}</view>
		<view v-if="userInfo?.mobile == ''" class="content" @click="showMobilePop = true">
			{{t('user.noBind')}}
			<u-icon name="arrow-right" size="22" color="#666"></u-icon>
		</view>
		<view v-if="userInfo?.mobile != ''" class="content">
			{{userInfo?.mobile}}
		</view>
	</view>

	<!-- 注册时间 -->
	<view class="item text-nr flex justify-between">
		<view class="label">{{t('user.registerTime')}}</view>
		<view class="content">{{ userInfo?.time }}</view>
	</view>

	<!-- 性别修改组件 -->
	<u-picker :confirm-text="t('common.confirm')" :cancel-text="t('common.cancel')" class="max-w-[750px]" mode="selector" v-model="showPicker" confirm-color="#4173FF" :default-selector="[0]" :range="sexList"
		@confirm="changeSexConfirm" />

	<!-- 绑定手机号组件 -->
	<u-popup class="max-w-[750px]" v-model="showMobilePop" :closeable="true" mode="center" border-radius="20">
		<view class="px-[50rpx] py-[40rpx] bg-white max-w-[680px]" style="width: 85vw">
			<view class="mb-[70rpx] text-xl text-center">{{t('user.bind')}}</view>
			<u-form-item :border-bottom="false">
				<view class="mr-[20rpx]" @click="picker_show=true">
					<text class="mr-[10rpx]">{{country_code.code}}
					</text>
					<u-icon name="arrow-down" size="20"></u-icon>
				</view>
				<u-input class="flex-1" v-model="newMobile" :placeholder="t('captcha.mobileEmpty')" :border="false" />
			</u-form-item>
			<u-form-item :border-bottom="false">
				<u-input class="flex-1" v-model="mobileCode" :placeholder="t('captcha.captchaPlaceholder')" :border="false" />
				<view class="border-l border-solid border-0 border-light pl-3 text-muted leading-4 ml-3 w-[180rpx]"
					@click="sendSms">
					<u-verification-code ref="uCodeRef" :seconds="60" @change="codeChange" :change-text="t('captcha.changeText')" :startText="t('captcha.startText')"
								:endText="t('captcha.endText')" />
					<text :class="newMobile ? 'text-primary' : 'text-muted'">
						{{ codeTips }}
					</text>
				</view>
			</u-form-item>
			<view class="mt-[80rpx]">
				<u-button @click="changeCodeMobile" type="primary" shape="circle"> {{t('common.confirm')}} </u-button>
			</view>
		</view>
	</u-popup>
	<u-picker class="max-w-[750px]" mode="selector" v-model="picker_show" :default-selector="[country_code.default_select]"
		:range="country_code.list" @confirm="handlePicker" :confirm-text="t('common.confirm')" :cancel-text="t('common.cancel')">
	</u-picker>
</template>

<script lang="ts" setup>
	import { ref, reactive, shallowRef } from 'vue'
	import { onShow, onUnload } from '@dcloudio/uni-app'
	import { getUserInfo, userEdit, userBindMobile } from '@/api/user'
	import { smsSend, getCountryCode } from '@/api/app'
	import { FieldType, SMSEnum } from '@/enums/appEnums'
	import { t } from '@/utils/util'

	// 用户信息
	const userInfo = ref<any>({})
	// 用户信息的枚举
	const fieldType = ref(FieldType.NONE)
	//选择性别数据
	const sexList = ref<Array<string> | null>([t('user.sex_m'), t('user.sex_wm')])

	//显示性别选择弹窗
	const showPicker = ref<boolean | null>(false)
	// 显示手机号验证码调整弹窗 非小程序才需要
	const showMobilePop = ref<boolean | null>(false)

	//新的手机号码
	const newMobile = ref<string>('')

	//修改手机验证码
	const mobileCode = ref<string>('')
	const codeTips = ref('')
	const uCodeRef = shallowRef()

	const picker_show = ref(false)
	const country_code = reactive<{
		list : any[]
		default_select : number
		code : string
	}>({
		list: [],
		default_select: 0,
		code: ''
	})
	const getData = async () => {
		let data = await getCountryCode()
		country_code.list = data;
		country_code.code = data[0]
	}
	const handlePicker = (index : number) => {
		country_code.default_select = index;
		country_code.code = country_code.list[index];
	}


	// 获取用户信息
	const getUser = async () : Promise<void> => {
		userInfo.value = await getUserInfo()
		if(userInfo.mobile!="") getData();
	}

	// 获取验证码显示字段
	const codeChange = (text : string) => {
		codeTips.value = text
	}

	// 发送验证码
	const sendSms = async () => {
		if (!newMobile.value) return uni.$u.toast(t('captcha.mobileEmpty'))
		if (uCodeRef.value?.canGetCode) {
			await smsSend({
				scene: userInfo.value.mobile ? SMSEnum.CHANGE_MOBILE : SMSEnum.BIND_MOBILE,
				mobile: newMobile.value,
				country_code: country_code.code
			})
			uni.$u.toast(t('captcha.sendSuccessfully'))
			uCodeRef.value?.start()
		}
	}

	const handleAvatarChange = (value) => {
		fieldType.value = FieldType.AVATAR
		setUserInfoFun(value)
	}

	// 验证码修改手机号
	const changeCodeMobile = async () => {
		await userBindMobile({
			type: userInfo.value.mobile ? 'change' : 'bind',
			mobile: newMobile.value,
			code: mobileCode.value
		})
		uni.$u.toast(t('network.modifySuccessfully'))
		showMobilePop.value = false
		getUser()
	}

	// 修改用户信息
	const setUserInfoFun = async (value : string) : Promise<void> => {
		await userEdit({
			field: fieldType.value,
			value: value
		})
		uni.$u.toast(t('network.modifySuccessfully'))
		getUser()
	}

	// 显示修改用户性别弹窗
	const changeSex = () => {
		showPicker.value = true
		fieldType.value = FieldType.SEX
	}

	// 修改用户性别
	const changeSexConfirm = (value) => {
		setUserInfoFun(value[0] + 1)
		showPicker.value = false
	}

	onShow(async () => {
		getUser()
	})

	onUnload(() => { })
</script>

<style lang="scss">
	.header {
		width: 100%;

		image {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
		}
	}

	.item {
		margin-top: 2rpx;
		padding: 30rpx;

	}
</style>