<template>
	<view class="web_box vflex jbetween">
		<!-- <u-navbar height="44" leftIcon="arrow-left" leftIconColor="#000" @leftClick="leftClick" leftText="个人资料" bgColor="#fff">
		</u-navbar> -->
		<view style="width: 100%;box-sizing: border-box;padding: 0 30rpx;">
			<view class="cell hflex acenter jbetween" @click="choose">
				<view class="hflex acenter">
					<view class="label">
						<u-avatar :src="user.headimg" size="104rpx"></u-avatar>
					</view>
					<view class="title">替换头像</view>
				</view>
				<u-icon name="arrow-right" color="#000000" size="14"></u-icon>
			</view>
			<view class="cell hflex acenter jbetween">
				<view class="hflex acenter" @click="change(0)">
					<view class="label">昵称</view>
					<view class="title">{{user.user_name}}</view>
				</view>
				<u-icon name="arrow-right" color="#000000" size="14"></u-icon>
			</view>
			<picker @change="bindSexChange" :value="index" :range="sexList">
				<view class="cell hflex acenter jbetween">
					<view class="hflex acenter">
						<view class="label">性别</view>
						<view class="title">{{sexList[user.sex]}}</view>
					</view>
					<u-icon name="arrow-right" color="#000000" size="14"></u-icon>
				</view>
			</picker>
			<!-- <picker mode="region" @change="changeAddress" :value="index" :range="address">
				<view class="cell hflex acenter jbetween">
					<view class="hflex acenter">
						<view class="label">地址</view>
						<view class="title">{{user.province+user.city+user.area}}</view>
					</view>
					<u-icon name="arrow-right" color="#000000" size="14"></u-icon>
				</view>
			</picker> -->
			<view class="cell hflex acenter jbetween">
				<view class="hflex acenter" @click="change(1)">
					<view class="label">工作单位</view>
					<view class="title">{{user.work_units}}</view>
				</view>
				<u-icon name="arrow-right" color="#000000" size="14"></u-icon>
			</view>
			<view class="cell hflex acenter jbetween">
				<view class="hflex acenter">
					<view class="label">真实姓名</view>
					<view class="title">{{user.real_name}}</view>
				</view>
				<u-icon name="arrow-right" color="#000000" size="14"></u-icon>
			</view>
			<view class="cell hflex acenter jbetween">
				<view class="hflex acenter">
					<view class="label">身份证号</view>
					<view class="title">{{user.id_card}}</view>
				</view>
				<u-icon name="arrow-right" color="#000000" size="14"></u-icon>
			</view>
			<view class="cell hflex acenter jbetween">
				<view class="hflex acenter">
					<view class="label">手机号</view>
					<view class="title">{{user.phone}}</view>
				</view>
				<u-icon name="arrow-right" color="#000000" size="14"></u-icon>
			</view>
			
		</view>
		<view class="bottom hflex acenter jcenter">
			<u-button @click="save">确定修改</u-button>
		</view>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	export default {
		data() {
			return {
				user: {},
				sexList: ['保密','男','女'],
				// address: [],
				// revise: false,
				// show: false
			}
		},
		onLoad(options) {
			var that = this
			this.getUser(options)
			
		},
		methods: {
			// 获取个人信息 
			getUser(options) {
				var that = this
				$api.req({
					url: '/api/User/userinfo'
				}, function(res) {
					console.log("个人信息=",res);
					if (res.code == 1) {
						that.user = res.data
						if(options.data) {
							var data = JSON.parse(decodeURIComponent(options.data))
							if (data.user_name) {
								that.user.user_name = data.user_name
								// that.revise = true
							} else {
								that.user.work_units = data.work_units
								// that.revise = true
							}
							/* setTimeout(() =>{
								
							},500) */
						}
					}
				})
			},
			// 替换头像
			choose() {
				var that = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function (res) {
						// console.log(JSON.stringify(res.tempFilePaths));
						const tempFilePaths = res.tempFilePaths
						uni.uploadFile({
							url: 'https://txjxjy.com/index.php/api/Publics/uploadLocality',
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'user': 'test'
							},
							success: (res) => {
								const data = JSON.parse(res.data)
								if (data.code == 1) {
									that.user.headimg = data.data.url
									$api.req({
										url: '/api/User/edit_user_info',
										data:{
											headimg: that.user.headimg,
										}
									},function(res) {
										console.log("修改头像成功");
									})
								}
							}
						});
					}
				});
				// that.revise = true
			},
			
			// 改变昵称
			change(index) {
				$api.jump('/pages/mine/change?index=' + index)
			},
			// 选择性别
			bindSexChange: function(e) {
				var index = e.detail.value
				this.user.sex = index
				// this.revise = true
			},
			// 选择城市
			changeAddress(e){
				var index = e.detail.value
				this.user.province = index[0]
				this.user.city = index[1]
				this.user.area = index[2]
				// this.revise = true
			},
			save() {
				var that = this
				var user = that.user
				$api.req({
					url: '/api/User/edit_user_info',
					data:{
						headimg: user.headimg,
						user_name: user.user_name,
						sex: user.sex,
						// province: user.province,
						// city: user.city,
						// area: user.area,
						work_units: user.work_units
					}
				}, function(res) {
					console.log("保存成功=",res);
					that.close()
				})
				
			},
			close() {
				// this.show = false
				$api.jump('/pages/mine/mine', 3)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.web_box::v-deep {
		
		
		.u-navbar {
			width: 100%;
			box-sizing: border-box;
			padding: 36px 16px 88rpx 0;
		}
		.cell {
			width: 100%;
			box-sizing: border-box;
			padding: 12rpx 24rpx 12rpx 40rpx;
			margin-top: 20rpx;
			background: #FFFFFF;
			box-shadow: 0px 2px 6px 0px rgba(213,213,213,0.5);
			border-radius: 16rpx;
		}
		.label {
			width: 148rpx;
			font-size: 32rpx;
			font-weight: 400;
			color: #666666;
		}
		.title {
			font-size: 28rpx;
			color: #333333;
		}
		.popup {
			width: 100%;
			box-sizing: border-box;
			padding: 26rpx 30rpx;
			background: #FFFFFF;
			box-shadow: 0px 2px 6px 0px rgba(213,213,213,0.5);
		}
		.popup_title {
			font-size: 36rpx;
			font-weight: 500;
			color: #333333;
		}
		.leftBtn {
			width: 256rpx;
			height: 80rpx;
			background: rgba(41,136,254,0.2);
			border-radius: 20px 0 0 20px;
			font-size: 36rpx;
			font-weight: 500;
			color: #2988FE;
			text-align: center;
			line-height: 80rpx;
		}
		.rightBtn {
			width: 256rpx;
			height: 80rpx;
			background: linear-gradient(135deg, #53BDFF 0%, #2988FE 100%);
			border-radius: 0px 20px 20px 0px;
			font-size: 36rpx;
			font-weight: 500;
			color: #FFFFFF;
			text-align: center;
			line-height: 80rpx;
		}
		.bottom {
			width: 100%;
			box-sizing: border-box;
			padding: 20rpx 86rpx;
			background: #FFFFFF;
		}
		.u-button {
			width: 578rpx;
			margin: 0;
			height: 80rpx;
			background: linear-gradient(135deg, #53BDFF 0%, #2988FE 100%);
			border-radius: 40rpx;
			font-size: 36rpx;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
</style>