<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="请输入昵称" /></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="请输入绑定手机号" /></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">{{ industyname }}</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: [],
			industyname: '请选择行业',
			industyindex: 0,
			// 行业id
			industryId: '',
			// 职业
			// 原数据
			occupationStart: [],
			occupationarray: [],
			occupationindex: 0,
			occupationname: '请选择职业',
			// 职业id
			occupationId: '',
			// 头像
			avatarUrl: '',
			// 昵称
			nickName: '',
			// 手机号
			phone: ''
		};
	},
	methods: {
		//  修改头像
		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.industyname = this.industryarray[e.detail.value];
			uni.setStorageSync('industyname', this.industyname);
			// 获取行业id
			this.industryStart.forEach(ele => {
				if (ele.name == this.industyname) {
					this.getOccupation(ele.id);
					this.industryId = ele.id;
					uni.setStorageSync('industryId', ele.id);
				}
			});
		},
		// 选择职业
		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 t = this;
			let url = '/api/category/category';
			app.post(url).then(res => {
				// 行业原数据
				this.industryStart = res.list;
				res.list.forEach(ele => {
					this.industryarray.push(ele.name);
				});
			});
		},
		// 获取职业列表
		getOccupation(id) {
			let t = this;
			let url = '/api/category/sub_category';
			let params = {
				categoty_id: id
			};
			app.post(url, params).then(res => {
				this.occupationStart = res.list;
				let arr = [];
				res.list.forEach(ele => {
					arr.push(ele.name);
				});
				this.occupationarray = arr;
			});
		},
		// 修改个人信息
		submitPerson() {
			let t = this;
			let url = '/api/user/update';
			if (t.industryId && t.occupationId && t.nickName && t.phone) {
				let params = {
					avatar: t.avatarUrl,
					nickname: t.nickName,
					mobile: t.phone,
					profession: t.industryId,
					occupation: t.occupationId
				};
				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('industyname')) {
			this.industyname = uni.getStorageSync('industyname');
		}
		if (uni.getStorageSync('occupationname')) {
			this.occupationname = uni.getStorageSync('occupationname');
		}
		this.industryId = uni.getStorageSync('industryId');
		this.occupationId = uni.getStorageSync('occupationId');
	},
	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>