<template>
	<layout>
		<!-- #ifdef MP-WEIXIN -->
		<uv-navbar :fixed="false" :title="title" left-arrow @leftClick="$onClickLeft" />
		<!-- #endif -->
		<view class="bg-white my-2">
			<uv-cell-group :border="false">
				<uv-cell :border="false">
					<!-- 自定义右侧值 -->
					<template v-slot:value>
						<text @click="selectFile" style="font-size: 26rpx;">修改头像</text>
					</template>
					<!-- 自定义左侧图标 -->
					<template v-slot:icon>
						<uv-avatar :src="avatar"></uv-avatar>
					</template>
					<!-- 自定义右侧图标 -->
					<template v-slot:right-icon>
						<uv-icon size="30rpx" name="arrow-right"></uv-icon>
					</template>
				</uv-cell>
			</uv-cell-group>
		</view>
		<view style="background-color: #ffffff; padding: 0rpx 30rpx 30rpx 30rpx;">
			<uv-form labelPosition="left" :model="model1" :rules="rules" ref="uForm" labelWidth="60" :errorType="errorType">
				<uv-form-item label="昵称" prop="nickname" borderBottom required>
					<uv-input v-model="model1.nickname" border="none">
					</uv-input>
				</uv-form-item>
				<uv-form-item label="手机号" prop="mobile" borderBottom required>
					<uv-input v-model="model1.mobile" border="none">
					</uv-input>
				</uv-form-item>
				<uv-form-item label="邮箱" prop="email" borderBottom>
					<uv-input v-model="model1.email" border="none">
					</uv-input>
				</uv-form-item>
				<uv-form-item label="性别" prop="sex" borderBottom @click="showSexSelect">
					<uv-radio-group v-model="model1.sex">
						<uv-radio v-for="(item, index) in sexList" :key="index" :name="item.name" :customStyle="{margin: '8rpx'}">
							{{ item.text }}
						</uv-radio>
					</uv-radio-group>
				</uv-form-item>
				<uv-button text="保存" customStyle="margin-top: 10px" color="#09b4f1" @click="submit"></uv-button>
			</uv-form>
		</view>
	</layout>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		updateUser
	} from '@/api/user'
	import {
		VUE_APP_UPLOAD_URL2
	} from '@/config'
	import {
		formatDateTime
	} from '@/utils/util'
	import {
		useMainStore
	} from '@/store/store'
	import {
		storeToRefs
	} from 'pinia'
	import cookie from '@/utils/cookie'
	const main = useMainStore()
	const {
		member
	} = storeToRefs(main)
	const title = ref('编辑个人信息')
	const errorType = ref('message')
	const rules = ref({
		'nickname': {
			type: 'string',
			required: true,
			message: '请填写昵称',
			trigger: ['blur', 'change']
		},
		'mobile': {
			type: 'string',
			required: true,
			message: '请填写手机号',
			trigger: ['blur', 'change']
		},
	})

	const model1 = ref({
		nickname: member.value.nickname,
		mobile: member.value.mobile,
		email: member.value.email,
		sex: member.value.sex,
	})

	const avatar = ref(member.value.avatar)

	const sexList = ref([{
			name: 1,
			text: '男',
		},
		{
			name: 2,
			text: '女',
		},
		{
			name: 0,
			text: '未知',
		},
	])

	onLoad((option) => {

	})

	const selectFile = () => {
		const token = cookie.get('accessToken')
		uni.chooseImage({
			count: 1,
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ['album'], //从相册选择
			success: function(res) {
				uni.uploadFile({
					header: {
						Authorization: 'Bearer ' + token,
					},
					url: VUE_APP_UPLOAD_URL2,
					filePath: res.tempFilePaths[0],
					name: 'avatarFile',
					success: res => {
						console.log('res:', JSON.parse(res.data).data)
						avatar.value = JSON.parse(res.data).data
					},
					fail: e => {

					},
					complete: res => {

					}
				});
			}
		});
	}

	const uForm = ref()
	const submit = () => {
		uForm.value.validate().then(res => {
			onSubmit()
		}).catch(errors => {
			uni.showToast({
				icon: 'error',
				title: '校验失败'
			})
		})
	}

	const onSubmit = async () => {
		let data = await updateUser(model1.value)
		if (data) {
			uni.showToast({
				title: "保存成功",
				icon: 'success',
				duration: 2000
			})
		}
	}
</script>

<style lang="scss" scoped>

</style>