<template>
	<view class="content">
		<!-- 头像 -->
		<view class="headimg" @click="uploadAvatar()"><image :src="avatarUrl" mode=""></image></view>

		<view class="enterbox">
			<view class="enteritem flextwo">
				<view class="enterleft">昵称</view>
				<view class="enterright flexone">
					<view class="enterword"><input type="text" v-model="nickName" placeholder="请输入昵称" @input="entername"/></view>
					<!-- <view class="yourow"><image src="../../static/yourow.png" mode=""></image></view> -->
				</view>
			</view>

			<view class="enteritem flextwo">
				<view class="enterleft">绑定手机号</view>
				<view class="enterright flexone">
					<view class="enterword"><input type="number" v-model="phone" maxlength="11" placeholder="请输入绑定手机号" @input="enterphone"/></view>
					<!-- <view class="yourow"><image src="../../static/yourow.png" mode=""></image></view> -->
				</view>
			</view>

			<picker @change="bindindustyChange" :value="industryindex" :range="industryarray">
				<view class="picker">
					<!-- 当前选择：{{array[index]}} -->
					<view class="enteritem flextwo">
						<view class="enterleft">所属行业</view>
						<view class="enterright flexone">
							<view class="enterword">{{industryName}}</view>
							<view class="yourow"><image src="../../static/yourow.png" mode=""></image></view>
						</view>
					</view>
				</view>
			</picker>
			<picker @change="bindoccupationchange" :value="occupationindex" :range="occupationarray">
				<view class="picker">
					<!-- 当前选择：{{array[index]}} -->
					<view class="enteritem flextwo">
						<view class="enterleft">职业</view>
						<view class="enterright flexone">
							<view class="enterword">{{ occupationName }}</view>
							<view class="yourow"><image src="../../static/yourow.png" mode=""></image></view>
						</view>
					</view>
				</view>
			</picker>
		</view>

		<view class="botbtn" @click="submitPerson()">提交</view>
	</view>
</template>

<script>
import app from '../../App.vue';
export default {
	data() {
		return {
			// 行业
			// 原数据
			industryStart: [],
			industryarray: [],
			industryName: '请选择行业',
			industyindex: 0,
			// 行业id
			industryId: '',
			// 职业
			// 原数据
			occupationStart: [],
			occupationarray: [],
			occupationindex: 0,
			occupationName: '请选择职业',
			// 职业id
			occupationId: '',
			// 头像
			avatarUrl: '',
			// 昵称
			nickName: '',
			// 手机号
			phone: '',
			userinfo:'',
			
		};
	},
	methods: {
		// 输入姓名
		entername(e){
			this.nickName=e.detail.value
		},
		enterphone(){
			this.phone=phone
		},
		
		// 获取用户信息
		getuserinfo(){
			 let that = this;
			    var url = '/api/index/user_info';
			    var params = {
			     
			     
			    }
			    app.post(url, params,"post").then((res) => {
			      console.log(res);
				  that.userinfo=res;
				  that.avatarUrl=res.avatar;
				  that.userName=res.nickname;
				  that.nickName=res.nickname;
				  console.log('89900',that.nickname)
				  that.phone=res.mobile;
				  if(res.profession!=null){
					  that.industryName=res.profession
				  }
				  if(res.profession!=0){
					  that.occupationName=res.occupation
				  }
			     
			     
			
			    }).catch((err) => {
			
			    })
		},
		
		//  修改头像
		uploadAvatar() {
			let t = this;
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album'], //从相册选择
				success: function(res) {
					console.log(JSON.stringify(res.tempFilePaths));
					let imgPath = res.tempFilePaths[0];
					uni.uploadFile({
						url: 'http://fnsxcx.w.brotop.cn/api/common/upload',
						filePath: imgPath,
						name: 'file',
						header: {
							token: uni.getStorageSync('token')
						},
						success: uploadFileRes => {
							let res = JSON.parse(uploadFileRes.data);
							// 上传路径
							t.avatarUrl = 'http://fnsxcx.w.brotop.cn' + res.data.url;
							uni.setStorageSync('avatarUrl', t.avatarUrl);
						}
					});
				}
			});
		},
		// 选择行业
		bindindustyChange: function(e) {
			this.industryName = this.industryarray[e.detail.value];
			uni.setStorageSync('industryName', this.industryName);
			// 获取行业id
			this.industryStart.forEach(ele => {
				if (ele.name == this.industryName) {
					this.getOccupation(ele.id);
					this.industryId = ele.id;
					uni.setStorageSync('industryId', ele.id);
				}
			});
			this.occupationName="请选择职业";
		},
		// 选择职业
		bindoccupationchange: function(e) {
			this.occupationName = this.occupationarray[e.detail.value];
			uni.setStorageSync('occupationName', this.occupationName);
			// 获取职业id
			this.occupationStart.forEach(ele => {
				if (ele.name == this.occupationName) {
					this.occupationId = ele.id;
					uni.setStorageSync('occupationId', ele.id);
				}
			});
		},
		// 获取行业列表
		getIndustry() {
			this.industryarray = [];
			let that = this;
			let url = '/api/category/category';
			app.post(url).then(res => {
				// 行业原数据
				that.industryStart = res.list;
				let arr=[]
				
				res.list.forEach(function(value, index, array) {
					arr.push(value.name);
					if (value.name == that.industryName) {
						that.industyindex = index;
						let id = value.id;
						that.getOccupation(id)
					}
				});
				
				that.industryarray=arr
				
			});
		},
		// 获取职业列表
		getOccupation(id) {
			let that = this;
			let url = '/api/category/sub_category';
			let params = {
				categoty_id: id
			};
			app.post(url, params).then(res => {
				console.log(res)
				this.occupationStart = res.list;
				let arr = [];
				
				res.list.forEach(function(value, index, array) {
					arr.push(value.name);
					if (value.name == that.occupationName) {
						that.occupationindex = index;
				
					}
				
				});
				this.occupationarray = arr;
				console.log(this.occupationarray)
			});
		},
		// 修改个人信息
		submitPerson() {
			let t = this;
			let url = '/api/user/update';
			if(t.industryName=='请选择行业'){
				uni.showToast({
					title:'请选择行业',
					icon:'none'
				})
				
				return false
			}
			if(t.occupationName=='请选择职业'){
				uni.showToast({
					title:'请选择职业',
					icon:'none'
				})
				
				return false
			}
			
			if (t.nickName!='' && t.phone!='') {
				let params = {
					avatar: t.avatarUrl,
					nickname: t.nickName,
					mobile: t.phone,
					profession: t.industryName,
					occupation: t.occupationName
				};
				app.post(url, params).then(res => {
					uni.showToast({
						title: '提交成功',
						icon: 'none',
						duration: 1500
					});
					setTimeout(function() {
						uni.navigateBack({
							delta: 1
						});
					}, 1500);
				});
			} else {
				uni.showToast({
					title: '请填写完整信息',
					icon: 'none'
				});
			}
		}
	},

	onLaunch: function() {},
	onShow: function() {
		// 获取行业
		this.getIndustry();
	},
	onLoad: function() {
		this.avatarUrl = uni.getStorageSync('avatarUrl');
		this.nickName = uni.getStorageSync('nickName');
		this.phone = uni.getStorageSync('phone');
		if (uni.getStorageSync('industryName')) {
			this.industryName = uni.getStorageSync('industryName');
		}
		if (uni.getStorageSync('occupationName')) {
			this.occupationName = uni.getStorageSync('occupationName');
		}
		this.industryId = uni.getStorageSync('industryId');
		this.occupationId = uni.getStorageSync('occupationId');
		this.getuserinfo()
	},
	onHide: function() {}
};
</script>

<style lang="scss">
.headimg {
	width: 160upx;
	height: 160upx;
	font-size: 0;
	margin: 62upx auto 0;
	image {
		width: 100%;
		border-radius: 50%;
	}
}

.enterleft {
	color: #06121e;
	font-size: 32rpx;
	font-weight: bold;
}

.enterbox {
	padding: 0 32upx;
	box-sizing: border-box;
	margin-top: 70upx;
}

.enteritem {
	padding: 32upx 0;
	box-sizing: border-box;
	border-bottom: 1upx solid #f5f5f5;
}

.enterword {
	color: #8c9198;
	font-size: 28upx;
	margin-right: 16upx;
	width: 450upx;
	text-align: right;
}

.enterword input {
	color: #8c9198;
	font-size: 28upx;
	text-align: right;
}

.shuru {
	color: #8c9198;
	font-size: 28upx;
}
</style>