<template>

	<view style="display: flex;flex-direction: column;">

		<NavBar ref="nav" navTitle="个人信息" :showIcon="true" :supportChange="false">
		</NavBar>

		<loading-state ref="pageView" @request="request">

			<view @click="uploadHeadImage()" class="menu-item">
				<text class="text">头像</text>
				<image :src="page.photo" style="width: 70rpx;height: 70rpx;margin-right: 10rpx;"></image>
				<image class="more" src="../../static/more.png"></image>
			</view>
			<view class="line-thin"></view>
			<view @click="remark()" class="menu-item">
				<text class="text">昵称</text>
				<text class="explain">{{page.nick}}</text>
				<image class="more" src="../../static/more.png"></image>
			</view>
			<view class="line-thin"></view>
			<view class="menu-item">
				<text class="text">手机号</text>
				<text class="explain"></text>
				<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">{{page.phone}}</button>
				<image class="more" src="../../static/more.png"></image>
			</view>

		</loading-state>

		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="修改昵称" :value="page.nick" placeholder="请输入内容"
				@confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: {}
			}
		},
		onLoad(options) {
			// this.request()
			this.$refs.pageView.setLoadState(2)
		},
		methods: {
			// 获取数据
			request() {
				let _this = this
				_this.$api.getBaseInfo(getApp().globalData.sid).then((resp) => {
					_this.page = resp
					_this.$nextTick(() => {
						_this.$refs.pageView.setLoadState(2)
					})

				}).catch(e => {
					console.log(e);
				})
			},
			uploadHeadImage() {
				let _this = this
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: _this.$api.headerUpload,
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'userSid': getApp().globalData.sid
							},
							success: (uploadFileRes) => {
								_this.page.photo = JSON.parse(uploadFileRes.data).data;
							}
						});
					}
				});
			},
			// 修改昵称
			remark() {
				this.$refs.inputDialog.open()
			},
			dialogInputConfirm(val) {
				let _this = this
				_this.$api.changeNick({
					userSid: getApp().globalData.sid,
					userNickName: val
				}).then((resp) => {
					_this.page.nick = val
				}).catch(e => {
					console.log(e);
				})
			},
			getPhoneNumber(e) {
				let _this = this
				console.log(e.detail.code)
				_this.$api.getPhone({
					userSid: getApp().globalData.sid,
					code: e.detail.code
				}).then((resp) => {
					_this.page.phone = resp
				}).catch(e => {
					console.log(e);
				})
			}
		}
	}
</script>

<style lang="scss">
	button {
		color: #828282;
		background-color: #fff;
		font-size: 28rpx;
		padding-right: 10rpx;
	}


	button::after {
		border: 0;
	}

	// 修改点击时的样式
	.button-hover {
		color: #F85959;
		background-color: #fff;
	}

	page {
		background-color: #f1f2f3;
	}


	.menu-item {
		height: 112rpx;
		width: auto;
		display: flex;
		flex-direction: row;
		background-color: #fff;
		align-items: center;
		padding-left: 36rpx;
		padding-right: 36rpx;
	}

	.more {
		width: 35rpx;
		height: 35rpx;
		float: right;
	}

	.menu-item .icon {
		width: 69rpx;
		height: 35rpx;
	}

	.menu-item .text {
		font-size: 32rpx;
		color: #101010;
		flex: 1;
		float: left;
	}

	.menu-item .explain {
		font-size: 28rpx;
		color: #828282;
		margin-right: 10rpx;
	}

	.line-thin {
		height: 1rpx;
		width: 100%;
		background-color: #eee;
	}
</style>