<template>
	<view class="container" style="padding-top: 20rpx;">
		<view class="flex-center-center mt-50">
			<view class="wh-226" style="position: relative;">
				<image class="wh-226 br-113" style="object-fit: cover;" :src="user_avatar"></image>
				<image class="wh-62 br-31" src="/static/icon_txbj.png"
					style="position: absolute;bottom: 0px;right: 0px;" @click="showPhoto = true"></image>
			</view>
		</view>
		<view class="flex ml-24 mt-80" style="align-items: center;">
			<image class="wh-54" src="/static/icon_jbzl.png"></image>
			<text style="color: white;font-size: 42rpx;margin-left: 10rpx;">基本资料</text>
		</view>
		<view class="flex-column mar-24 fs-28 br-20" style="color: #fff; background: #191919;">
			<view class="flex-center-center mlr-24 mtb-30" @click="$wskj.to('/pagesMine/pages/user_edit_name')">
				<text class="flex-1">昵称：</text>
				<text style="color: #878787;">{{user_name}}</text>
				<image class="w-18 h-26 ml-10" src="/static/icon_wd_right.png"></image>
			</view>
			<view class="flex-center-center mlr-24 mtb-30" @click="birthdaySow=true">
				<text class="flex-1">出生日期：</text>
				<text style="color: #878787;">{{user_birthday}}</text>
				<image class="w-18 h-26 ml-10" src="/static/icon_wd_right.png"></image>
			</view>
			<view class="flex-center-center mlr-24 mtb-30">
				<text class="flex-1">年龄：</text>
				<text style="color: #878787;">{{user_age}}</text>
				<image class="w-18 h-26 ml-10" src="/static/icon_wd_right.png"></image>
			</view>
			<view class="flex-center-center mlr-24 mtb-30" @click="ageShow=true">
				<text class="flex-1">性别：</text>
				<text style="color: #878787;">{{user_sex}}</text>
				<image class="w-18 h-26 ml-10" src="/static/icon_wd_right.png"></image>
			</view>
		</view>
		<!-- 生日选择 -->
		<u-datetime-picker :show="birthdaySow" v-model="value" mode="date" @confirm="onBirthday"
			@cancel="birthdaySow=false" @close="birthdaySow=false" :minDate="-570752296000"></u-datetime-picker>
		<!-- 性别选择 -->
		<u-picker :show="ageShow" :columns="ageList" @confirm="onSex" @cancel="ageShow=false"
			@close="ageShow=false"></u-picker>
		<!--头像上传弹出层-->
		<u-action-sheet @select="onHeadSelect" @close="showPhoto=false" :actions="pupList" :show="showPhoto"
			cancelText="取消"></u-action-sheet>

	</view>



</template>

<script>
	export default {
		data() {
			return {
				showPhoto: false,
				currentTimestamp: 0,
				birthdaySow: false,
				value: Number(new Date()),
				user_avatar: '',
				user_name: '',
				user_birthday: '',
				user_age: '',
				user_sex: '',
				ageList: [
					['男', '女', '未知']
				],
				ageShow: false,
				pupList: [{
						name: "拍照",
						index: 0
					},
					{
						name: "从我的相册选择",
						index: 1
					}
				],
			};
		},
		onLoad() {

		},
		onShow() {
			this.getUserInfo()
		},
		methods: {
			getUserInfo() {
				const params = {
					url: '/system/member/getMemberInfo',
					method: "GET",
					data: {}
				}
				this.$request(params).then(res => {
					this.user_avatar = res.data.avatar
					this.user_name = res.data.nickname
					this.user_birthday = res.data.birthday
					this.user_age = getAgeFromDateString(res.data.birthday);
					this.user_sex = res.data.sex == "1" ? '女' : '男'
				})
			},
			editUserInfo(data) {
				const params = {
					url: '/system/member/editInfo',
					data: data
				}
				this.$request(params).then(res => {
					this.$u.toast(res.msg || '修改成功')
				}).catch(err => {
					this.$u.toast(err.msg || '修改失败')
				})
			},
			// 选择上传头像某一项触发
			onHeadSelect(item) {
				const {
					index
				} = item
				console.log(index)
				if (index === 0) { // 拍摄
					this.chooseImage('camera')
				} else if (index === 1) { // 从相册选择
					this.chooseImage('album')
				}
			},
			chooseImage(type) {
				uni.chooseImage({
					sourceType: [type],
					count: 1,
					sizeType: 'original',
					success: async (res) => {
						// console.log(res)
						const tempFilePaths = res.tempFilePaths[0];
						console.log(tempFilePaths, "tempFilePaths")
						// 请求后端接口获取完整图片地址
						const imgUrl = await this.$wskj.uploadImg(tempFilePaths)
						console.log(imgUrl, "imgUrlimgUrlimgUrlimgUrl")
						this.user_avatar = imgUrl.url
						const data = {
							avatar: imgUrl.url
						}
						this.editUserInfo(data)
					}
				})
			},

			getTimestamp() {
				const currentDate = new Date(); // 创建一个表示当前时间的Date对象
				this.currentTimestamp = currentDate.getTime(); // 获取当前时间的时间戳并赋值给变量
				console.log(currentDate.getTime())
			},
			onSex(e) {
				console.log(e);
				this.user_sex = e.value[0]
				this.ageShow = false;
				const data = {
					sex: e.indexs[0]
				}
				this.editUserInfo(data)
			},
			onBirthday(e) {
				this.birthdaySow = false;
				this.user_birthday = this.$wskj.timeFormat(e.value, 'yyyy-mm-dd')
				this.$emit('onBirthday', this.user_birthday)
				const age = getAgeFromDateString(this.user_birthday);
				console.log(age)
				this.user_age = age;
				const data = {
					birthday: this.user_birthday
				}
				this.editUserInfo(data)
			},

		}
	};

	function getAgeFromDateString(dateString) {
		const today = new Date(); // 当前日期
		const birthDate = new Date(dateString); // 出生日期
		let age = today.getFullYear() - birthDate.getFullYear(); // 计算年龄
		// 如果今天的日期还没到出生年份的下一个 birthDate.getMonth() + 1 月份和 birthDate.getDate() 日期，则年龄减一
		if (today.getMonth() < birthDate.getMonth() || (today.getMonth() === birthDate.getMonth() && today.getDate() <
				birthDate.getDate())) {
			age--;
		}
		return age;
	};
</script>

<style>
	.container {
		width: 100%;
		height: 100%;
		background: #0F0F0F;
	}

	/deep/.u-cell--clickable {
		background-color: #191919;
	}
</style>