<template>
	<view>
		<view class="hm-header-xian"></view>
		<view class="avatar">
			<view class="avatar-image">
				<image :src="user.avatar"></image>
				<view class="mask" @click="chooseLogo()">编辑头像</view>
			</view>
		</view>
		<view class="form-box hm-m-t-20">
			<u--form :model="formData" ref="form">
				<u-form-item label="用户ID" labelWidth="80" borderBottom>
					<u--input v-model="user.user_id" color="#999" border="none" readonly></u--input>
				</u-form-item>
				<u-form-item label="姓名昵称" labelWidth="80" borderBottom @click="nickname_show = true">
					<u--input v-model="formData.userInfo.nickname" color="#999" border="none" readonly></u--input>
					<u-icon slot="right" name="arrow-right" color="#999"></u-icon>
				</u-form-item>
				<u-form-item label="用户性别" labelWidth="80" borderBottom @click="gender_show = true">
					<u--input v-model="formData.userInfo.gender" color="#999" readonly border="none"></u--input>
					<u-icon slot="right" name="arrow-right" color="#999"></u-icon>
				</u-form-item>
				<u-form-item label="手机号码" labelWidth="80" borderBottom ref="item1">
					<u--input v-model="user.phone" color="#999" border="none" readonly></u--input>
				</u-form-item>
				<u-form-item label="出生日期" labelWidth="80" @click="birthdayShow" ref="item1">
					<u--input v-model="formData.userInfo.birthday" color="#999" placeholderStyle="color:#fa3534;"
						placeholder="完善生日，享生日好礼" readonly border="none"></u--input>
					<u-icon slot="right" name="arrow-right" color="#999"></u-icon>
				</u-form-item>
			</u--form>
		</view>
		<view class="hm-p-lr-20">
			<view class="hm-m-t-20">
				<u-button plain type="info" @click="outLogin" text="退出登录"></u-button>
			</view>
			<view class="hm-m-t-20">
				<u-button type="success" @click="action" text="保存修改"></u-button>
			</view>
		</view>
		<u-modal :show="nickname_show" title="修改姓名昵称" @confirm="confirmNickname" @cancel="cancelNickname"
			confirmColor="#19be6b" :show-cancel-button="true">
			<view class="nickname">
				<u--input v-model="new_nickname" input-align="center" border="none" clearable placeholder="请输入姓名" />
			</view>
		</u-modal>
		<u-picker :show="gender_show" @cancel="gender_show = false" :columns="gender" title="选择性别"
			confirmColor="#19be6b" @confirm="setGender">
		</u-picker>
		<u-datetime-picker :show="birthday_show" v-model="user.birthday" mode="date" title="选择您的生日"
			confirmColor="#19be6b" :minDate="minDate" :maxDate="maxDate" @confirm="setBirthday"
			@cancel="birthday_show = false"></u-datetime-picker>
		<!-- 技术支持 -->
		<view class="hm">
			{{applet.copyright}} <text class="v">V{{applet.version}}</text>
		</view>
	</view>
</template>

<script>
	const App = getApp();

	export default {
		data() {
			return {
				applet: {},
				formData: {
					userInfo: {
						nickname: '',
						gender: '',
						avatar: '',
						birthday: ''
					},
				},
				user: {
					user_id: '',
					avatar: '',
					phone: '',
					birthday: ''
				},
				nickname_show: false,
				new_nickname: '',
				gender_show: false,
				gender: [
					['未知', '先生', '女士']
				],
				maxDate: 0,
				minDate: 0,
				birthday_show: false,
				is_birthday: false,
			};
		},

		components: {},
		props: {},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			let _this = this;
			_this.applet = uni.getStorageSync('applet');
		},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow() {
			let _this = this;
			_this.getUserDetail();
		},
		created: function() {
			let _this = this;
			// 监听从裁剪页发布的事件，获得裁剪结果
			uni.$on('cropper', path => {
				App._upload_file(path, {}, function(result) {
					_this.formData.userInfo.avatar = result.data.file_path;
					_this.user.avatar = result.data.url;
				});
			})
		},
		methods: {
			/**
			 * 选择图片
			 */
			chooseLogo: function() {
				let _this = this;
				// 此为uView的跳转方法，详见"文档-JS"部分，也可以用uni的uni.navigateTo
				_this.$u.route({
					// 关于此路径，请见下方"注意事项"
					url: 'pages/cropper/cropper',
					params: {
						destWidth: 400, // 输出图片宽度，单位px
						destHeight: 400, // 输出图片高度，单位px
						rectWidth: 400, // 裁剪框宽度，单位px
						rectHeight: 400, // 裁剪框高度，单位px
						fileType: 'jpg', // 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
					}
				})
			},
			/**
			 * 安全退出
			 */
			outLogin: function() {
				let _this = this;
				uni.showModal({
					title: "提示",
					content: "确定要退出登录？",
					success: function(o) {
						if (o.confirm) {
							App._get('user/logout', {}, result => {
								App.showSuccess(result.msg, function() {
									let user = App.getUser();
									user.is_login = false;
									uni.setStorageSync('user',user);
									App.goTo('user/index');
								});
							});
						}
					}
				});
			},
			/**
			 * 获取当前用户信息
			 */
			getUserDetail() {
				let _this = this;
				App._get('user/detail', {}, result => {
					_this.user.avatar = result.data.detail.avatar.url;
					_this.user.user_id = result.data.detail.user_id;
					_this.user.phone = result.data.detail.phone;
					_this.formData.userInfo.nickname = result.data.detail.nickname;
					_this.formData.userInfo.avatar = result.data.detail.avatar.path;
					_this.formData.userInfo.gender = result.data.detail.gender.text;
					_this.new_nickname = result.data.detail.nickname;
					if (result.data.detail.birthday == '') {
						_this.maxDate = Number(new Date()) - (10 * 60 * 60 * 24 * 360 * 1000);
						_this.minDate = _this.maxDate - (60 * 60 * 60 * 24 * 360 * 1000);
						_this.user.birthday = Date.parse(new Date('1990-06-15'));
						_this.is_birthday = true;
					} else {
						_this.formData.userInfo.birthday = result.data.detail.birthday;
					}
				});
			},
			/**
			 * 修改昵称
			 */
			confirmNickname() {
				let _this = this;
				if (_this.new_nickname != '') {
					_this.formData.userInfo.nickname = _this.new_nickname;
				}
				_this.nickname_show = false;
			},
			cancelNickname() {
				let _this = this;
				_this.new_nickname = _this.formData.userInfo.nickname;
				_this.nickname_show = false;
			},

			/**
			 * 修改性别
			 */
			setGender(e) {
				let _this = this;
				_this.formData.userInfo.gender = e.value[0];
				_this.gender_show = false;
			},
			birthdayShow: function() {
				let _this = this;
				if (!_this.is_birthday) {
					App.showError('不可修改');
					return false;
				}
				_this.birthday_show = true;
			},
			setBirthday(e) {
				let _this = this;
				_this.formData.userInfo.birthday = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
				_this.birthday_show = false;
			},
			/**
			 * 提交保存
			 */
			action() {
				let _this = this,
					userInfo = _this.formData.userInfo,
					gender = _this.gender[0];
				for (let n = 0; n < gender.length; n++) {
					if (gender[n] == userInfo.gender) {
						userInfo.gender = n;
						break;
					}
				}
				if(userInfo.nickname == ''){
					App.showError('请输入姓名昵称');
					return false;
				}
				if(userInfo.gender == 0){
					App.showError('请选择性别');
					return false;
				}
				App._post_form('user/detail', userInfo, function(result) {
						App.showSuccess(result.msg, function() {
							uni.navigateBack(); //返回上一页
						});
					}, false,
					function() {});
			}

		}
	};
</script>
<style lang="scss" scoped>
	.avatar {
		background-color: #fff;
		padding: 40rpx;
		text-align: center;
		.avatar-image{
			width: 200rpx;
			height: 200rpx;
			z-index: 1;
			position:relative;
			display: inline-block;
			image {
				width: 200rpx;
				height: 200rpx;
				border-radius: 50%;
			}
			.mask{
				display: inline-block;
				z-index: 100;
				position: absolute;
				top: 0rpx;
				left: 0rpx;
				width: 200rpx;
				height: 200rpx;
				border-radius: 50%;
				background: rgba(0, 0, 0, 0.3);
				color: #fff;
				line-height: 200rpx;
				text-align: center;
				font-size: 24rpx;
			}
		}
		
	}

	.form-box {
		padding: 0rpx 20rpx;
		border-radius: 8rpx;
		background-color: #fff;
	}

	.nickname {
		width: 100%;
	}

	.nickname input {
		background-color: #f7f7f7;
		padding: 20rpx 0rpx;
	}
</style>
