<template>
	<view class="box fromClass">
		<view class="lanBox">
			<view class="lan border-bottom">
				<view class="left">姓名<text class="redcolor">*</text></view>
				<view class="right">
					<input name="name" type="text" v-model="userInfo.name" placeholder="姓名" />
				</view>
			</view>
			<view class="lan border-bottom">
				<view class="left">手机号<text class="redcolor">*</text></view>
				<view class="right">
					<input name="name" type="text" v-model="userInfo.phone" placeholder="手机号" />
				</view>
			</view>
			<view class="lan border-bottom">
				<view class="left">性别<text class="redcolor">*</text></view>
				<view class="right">
					<picker mode="selector" :range="sexItem" @change="onsexArr">
						<view class="uni-input">{{userInfo.sex==0?'请选择':userInfo.sex==1?'男':userInfo.sex==2?'女':'未知'}}
						</view>
						<uni-icons type="forward" size="20" color="#999"></uni-icons>
					</picker>
				</view>
			</view>
			<view class="lan border-bottom">
				<view class="left">个人照片<text class="redcolor">*</text></view>
				<view class="right touxiang" v-if="userInfo.avatarurl">
					<image :src="userInfo.avatarurl" mode="aspectFit" @click="handleimage(1)" />
					<uni-icons type="close" size="26" class="uni-icons" @click="userInfo.avatarurl=''"
						@click.stop></uni-icons>
				</view>
				<view class="right touxiang size20 bold" v-else @click="handleimage(1)">+</view>
				<text class="size12 c999 desc">请上传1寸蓝底照片，大小不超过2M</text>
			</view>
			<view class="lan border-bottom">
				<view class="left">系统划分<text class="redcolor">*</text></view>
				<view class="right">
					<picker mode="selector" :range="industrylist" range-key="name" :value="userInfo.industryname"
						@change="changeIndustry">
						<view class="uni-input">{{userInfo.industryname?userInfo.industryname:"请选择"}}</view>
						<uni-icons type="forward" size="20" color="#999"></uni-icons>
					</picker>
				</view>
			</view>
			<view class="lan border-bottom">
				<view class="left">所属委员会<text class="redcolor">*</text></view>
				<view class="right">
					<picker mode="selector" :range="orglist" range-key="name" :value="userInfo.orgname"
						@change="changeOrg">
						<view class="uni-input">{{userInfo.orgname?userInfo.orgname:"请选择"}}</view>
						<uni-icons type="forward" size="20" color="#999"></uni-icons>
					</picker>
				</view>
			</view>
			<view class="lan border-bottom">
				<view class="left">沪抖团职务<text class="redcolor">*</text></view>
				<view class="right">
					<picker mode="selector" :range="poslist" range-key="name" :value="userInfo.posname"
						@change="changePos">
						<view class="uni-input">{{userInfo.posname?userInfo.posname:"请选择"}}</view>
						<uni-icons type="forward" size="20" color="#999"></uni-icons>
					</picker>
				</view>
			</view>
			
			<!-- <view class="lan border-bottom">
				<view class="left">出生年月<text class="redcolor">*</text></view>
				<view class="right">
					<picker class="picker" mode="date" :end="endDate" :value="userInfo.birthday"
						@change="bindDateChange">
						<view class="uni-input">{{userInfo.birthday?userInfo.birthday.substring(0,10):"请选择"}}</view>
						<uni-icons type="forward" size="20" color="#999"></uni-icons>
					</picker>
				</view>
			</view> -->
			<!-- <view class="lan border-bottom">
				<view class="left">籍贯</view>
				<view class="right">
					<input name="name" type="text" v-model="userInfo.place" placeholder="籍贯" />
				</view>
			</view> -->
			<view class="lan border-bottom">
				<view class="left">邮箱</view>
				<view class="right">
					<input name="name" type="text" v-model="userInfo.email" placeholder="请输入邮箱" />
				</view>
			</view>
			<view class="lan border-bottom">
				<view class="left">个人爱好</view>
				<view class="right textarea">
					<textarea v-model="userInfo.interests" name="content" />
				</view>
			</view>
			<view class="lan border-bottom">
				<view class="left">加入沪抖团想收获什么</view>
				<checkbox-group @change="checkboxChange" class="checkbox">
					<label v-for="(ite,ind) in addNeeds" :key="ind">
						<checkbox :value="ite" style="transform:scale(0.8)" :checked="checkbox.indexOf(ite)!== -1 " />
						{{ite}}
					</label>
				</checkbox-group>
			</view>
			<view class="lan border-bottom">
				<view class="left">能给平台带来什么</view>
				<view class="right textarea">
					<textarea v-model="userInfo.provide" name="content" maxlength="-1" />
				</view>
			</view>

		</view>
		<view class="btn" @click="confirmInfo">保存</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	export default {
		data() {
			return {
				sexItem: [
					"男",
					"女"
				],
				userInfo: {
					name: "",
					phone: "",
					place: "",
					provide: "",
					orgname: "",
					orgid: "",
					posname: "",
					posid: "",
					industryid: "",
					industryname: "",
					sex: "",
					avatar: "",
					avatarurl: "",
					birthday: "",
					demand: "",
					email: "",
					interests: ""
				},
				checkbox: [],
				addNeeds: []
			};
		},
		computed: {
			...mapState(["user", "HomeContent"]),
			endDate() {
				return this.$tools.getDate('start')
			},
			industrylist() {
				return this.HomeContent.industrylist
			},
			poslist() {
				return this.HomeContent.poslist
			},
			orglist() {
				return this.HomeContent.orglist
			}
		},
		onLoad() {
			let that = this
			this.addNeeds = this.$json.addNeeds
			this.userInfo = this.user.name ? this.user : {}
			this.userInfo.industryname = this.user.industryid ? this.industrylist[that.industrylist.findIndex(ite => ite.id === that.userInfo.industryid)].name : ''
			this.checkbox = this.userInfo.demand ? this.userInfo.demand.split(',') : []
		},
		methods: {
			// 提交
			confirmInfo() {
				if (!this.userInfo.industryname) {
					this.$tools.msg("请选择系统划分")
					return;
				}
				if (!this.userInfo.orgname) {
					this.$tools.msg("请选择所属委员会")
					return;
				}
				if (!this.userInfo.posname) {
					this.$tools.msg("请选择沪抖团职务")
					return;
				}
				if (!this.userInfo.name) {
					this.$tools.msg("请输入姓名")
					return;
				}
				if (!this.userInfo.phone) {
					this.$tools.msg("请输入手机号")
					return;
				}
				if (!this.userInfo.avatarurl) {
					this.$tools.msg("请上传个人照片")
					return;
				}
				if (!this.userInfo.sex) {
					this.$tools.msg("请选择性别")
					return;
				}
				// if (!this.userInfo.birthday) {
				// 	this.$tools.msg("请选择出生日期")
				// 	return;
				// }
				console.log("提交", this.userInfo)
				this.subInfo(this.userInfo);
			},
			subInfo(data) {
				let that = this
				that.$model.getUserSubmit(data).then(res => {
					if (res.code == 0) {
						uni.showToast({
							title: "修改成功",
							duration: 2000
						});
						that.$store.dispatch("getUserInfo")
						setTimeout(function() {
							uni.navigateBack({
								delta: 2
							})
						}, 2000)
					} else {
						that.$tools.msg(res.message);
					}
				});
			},
			handleimage(ind) {
				let that = this
				uni.chooseImage({
					count: 1, //默认9
					sourceType: ['album', 'camera'], //从相册选择
					success: function(res) {
						console.log(res.tempFilePaths[0])
						uni.showLoading({
							title: '识别中...'
						})
						that.$model.getUpLoadimg({
							uploadpath: res.tempFilePaths[0]
						}).then(res => {
							uni.hideLoading()
							if (res.code == 0) {
								that.userInfo.avatarurl = res.data.url
								that.userInfo.avatar = res.data.path
							} else {
								that.$tools.msg("不支持该图像")
							}
						})
					}
				})
			},
			//确定年龄
			bindDateChange(e) {
				this.userInfo.birthday = e.target.value
			},
			//确定性别
			onsexArr(e) {
				this.userInfo.sex = this.sexItem[e.target.value] == "男" ? 1 : 2
			},
			// 所属行业
			changeIndustry(e) {
				this.userInfo.industryname = this.HomeContent.industrylist[e.target.value].name
				this.userInfo.industryid = this.HomeContent.industrylist[e.target.value].id
				console.log("e", e.target.value)
			},
			// 所属委员会
			changeOrg(e) {
				this.userInfo.orgname = this.HomeContent.orglist[e.target.value].name
				this.userInfo.orgid = this.HomeContent.orglist[e.target.value].id
				console.log("e", e.target.value)
			},
			// 制造团职务
			changePos(e) {
				this.userInfo.posname = this.HomeContent.poslist[e.target.value].name
				this.userInfo.posid = this.HomeContent.poslist[e.target.value].id
				console.log("e", e.target.value, this.HomeContent.poslist[e.target.value])
			},
			// 收获
			checkboxChange(e) {
				this.userInfo.demand = e.detail.value.join(',')
				console.log("demand", this.userInfo.demand)
			},
		},
	};
</script>

<style scoped="scoped" lang="scss">
	image {
		width: 100%;
		height: 100%;
	}

	.right {

		/deep/input,
		/deep/picker,
		.regions {
			width: 100%;
		}
	}

	.checkbox {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		label {
			width: 33%;
			display: flex;
			font-size: 12px;
			margin: 5px 0;
			align-items: center;
		}
	}

	.touxiang {
		uni-icons {
			background: #fff;
			border-radius: 50%;
			top: -10px !important;
			font-size: inherit !important;
		}
	}
</style>