<template>
	<view class="page">
		<navBar title="个人资料" :back="true" color="black" background="white" />

		<view class="content">
			<view class="item" style="border-radius: 0rpx 0rpx 0rpx 24rpx;;">
				<view class="line" @click="chooseAvatar">
					<view class="left">
						头像
					</view>
					<view class="right">
						<image :src="userInfo?userInfo.head:picUrl+'/static/other/defaultAvatar.png'" mode=""
							class="avatar"></image>
						<image src="/static/my/arr_r.png" mode="" class="arr"></image>
					</view>
				</view>
				<view class="line">
					<view class="left">
						昵称
					</view>
					<view class="right"
						style="width: 80%;margin-left: 50rpx;display: flex;justify-content: space-between;">
						<input ref='input' type="text" v-model="userInfo.nickname" placeholder="请输入昵称"
							style="width: 90%;text-align: right;">
						<image @click="updateNickName" :src="picUrl+'/static/my/bj.png'" mode="" class=""
							style="width: 24rpx;height: 24rpx;margin-left: 8rpx;"></image>
					</view>
				</view>
				<view class="line" @click="showSex=true">
					<view class="left">
						性别
					</view>
					<view class="right">
						<view class="" style="margin-right: 20rpx;">
							{{userInfo.sex==0?'男':'女'}}
						</view>
						<image src="/static/my/arr_r.png" mode="" class="arr"></image>
					</view>
				</view>
			</view>

			<view class="item" style="">
				<view class="line">
					<view class="left">
						真实姓名
					</view>
					<view class="right" style="width: 70%;">
						<input type="text" v-model="userInfo.name" style="width: 100%;text-align: right;">
					</view>
				</view>
				<view class="line" @click.stop="showDate=true">
					<view class="left">
						生日
					</view>
					<view class="right">
						{{userInfo.birthday}}
					</view>
				</view>
				<view class="line">
					<view class="left">
						手机号
					</view>
					<view class="right" style="width: 70%;">
						<input type="text" v-model="userInfo.phone" style="width: 100%;text-align: right;">
					</view>
				</view>
			</view>
			<u-button text="修改" @click="update" color="#333"></u-button>
		</view>


		<u-action-sheet :actions="list" :title="title" :show="showSex" cancelText="取消" @close="showSex=false"
			@select="handleSelSex"></u-action-sheet>

		<u-datetime-picker @cancel="showDate = false" @confirm="confirmDate" :show="showDate"
			:minDate="new Date('1960-1-1').getTime()" :maxDate="Date.now()" v-model="value1" mode="date"
			confirmColor="#E77817"></u-datetime-picker>
	</view>
</template>

<script>
	import uploadUrl from '@/common/config.js'
	import moment from 'moment'
	import {
		getUserInfoReq,
		updateUserInfoReq,
	} from '@/api/test/index.js'
	export default {
		components: {},
		data() {
			return {
				showDate: false,
				value1: Number(new Date()),
				picUrl: this.$picUrl,
				avatarUrl: '',
				showSex: false,
				nickName: '',
				sex: '男',
				list: [{
						name: '男'
					},
					{
						name: '女'
					}
				],

				userInfo: null
			}
		},
		async onLoad(o) {
			let res = await getUserInfoReq()
			if (res.code == 0) {
				this.userInfo = res.data
			} else {
				uni.showToast({
					title: res.message,
					icon: 'none'
				})
			}
		},
		methods: {
			async update() {
				let res = await updateUserInfoReq({
					nickname: this.userInfo.nickname,
					head: this.userInfo.head,
					phone: this.userInfo.phone,
					sex: this.userInfo.sex,
					name: this.userInfo.name,
					birthday: this.userInfo.birthday
				})
				if (res.code == 0) {
					uni.showToast({
						title: '修改成功',
						icon: 'none'
					})
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/my'
						})
					}, 1500)
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				}
			},
			confirmDate(e) {
				this.userInfo.birthday = moment(e).format("YYYY-MM-DD")
				this.showDate = false
			},
			handleSelSex(e) {
				if (e.name == '男') {
					this.userInfo.sex = 0
				} else {
					this.userInfo.sex = 1
				}
				this.showSex = false
			},

			chooseAvatar() {
				let _this = this
				uni.chooseImage({
					success(res) {
						console.log('res', res.tempFilePaths[0]);
						_this.upImg(res.tempFilePaths[0])
					}
				})
			},
			upImg(file) {
				console.log('upImg的file', file)
				let _this = this
				uni.uploadFile({
					url: uploadUrl.baseUrl,
					filePath: file,
					name: 'file',
					header: {
						'Content-Type': 'multipart/form-data'
					},
					formData: {
						'fileType': 'images',
						'dirName': 'cert',
						'tag': 'lamp'
					},
					success: function(uploadRes) {
						let result = JSON.parse(uploadRes.data)
						if (result.code == 0) {
							_this.userInfo.head = result.data.file
							console.log('上传后的头像url地址', result.data.file)
						}
					},
					fail: function(err) {
						console.log('upload failed:', err)
					}
				})
			},
		},

	}
</script>

<style lang="scss" scoped>
	@import "./index.scss";
</style>