<template>
	<view class="page">
		<view class="block">
			<view class="p-title">
				<image class="icon" src="https://eduvessel.com/images/occupationlab/user.svg" mode="widthFix"></image> 账号信息
			</view>
			<view class="form-list">
				<button class="avatar-btn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					<view class="avatar-left">
						<image class="avatar" :src="hrUserInfo.avatar" mode=""></image>
					</view>
					<view class="val">修改头像</view>
					<uni-icons class="arrow" type="right" size="18" color="#ababab"></uni-icons>
				</button>
				<view class="line">
					<view class="name">账号</view>
					<view class="readonly">{{ userAccount.account }}</view>
				</view>
				<view class="line">
					<view class="name">学号</view>
					<input type="text" placeholder="请输入学号" v-model="userAccount.workNumber" />
				</view>
				<view class="line">
					<view class="name">手机号</view>
					<view class="val">{{ userAccount.phone }}</view>
					<view class="action" @click="$util.to('/user/phone/phone')">更换</view>
				</view>
				<view class="line">
					<view class="name">邮箱</view>
					<view class="val">{{ hrUserInfo.email }}</view>
					<view class="action" @click="$util.to('/user/email/email')">{{ hrUserInfo.email ? '更换' : '添加'}}</view>
				</view>
				<view class="line">
					<view class="name">密码</view>
					<view class="val">xxxxxx</view>
					<view class="action" @click="$util.to('/user/password/password')">更换</view>
				</view>
			</view>
		</view>
		
		<view class="block">
			<view class="p-title">
				<image class="icon" src="https://eduvessel.com/images/occupationlab/basic.svg" mode="widthFix"></image> 基本信息
			</view>
			<view class="form-list">
				<view class="line">
					<view class="name">姓名</view>
					<input type="text" placeholder="请输入姓名" v-model="hrUserInfo.userName" />
				</view>
				<view class="line">
					<view class="name">性别</view>
					<uni-data-picker class="picker-input" placeholder="请选择性别" popup-title="请选择性别" preload :clear-icon="false" :localdata="sex" v-model="hrUserInfo.sex"></uni-data-picker>
				</view>
				<view class="line">
					<view class="name">出生日期</view>
					<uni-datetime-picker class="picker-date" type="date" placeholder="请选择出生日期" :clear-icon="false" v-model="hrUserInfo.dateBirth" />
					<!-- <uni-icons class="arrow" type="right" size="18" color="#ababab"></uni-icons> -->
				</view>
				<view class="line">
					<view class="name">身份证号</view>
					<input type="text" placeholder="请输入身份证号" v-model="hrUserInfo.idNumber" />
					<uni-icons class="arrow" type="right" size="18" color="#ababab"></uni-icons>
				</view>
				<view class="line">
					<view class="name">所在国家</view>
					<view class="readonly">中国</view>
				</view>
				<view class="line">
					<view class="name">所在省份</view>
					<uni-data-picker class="picker-input" placeholder="请选择省份" popup-title="请选择省份" preload :clear-icon="false" :localdata="provinces" v-model="hrUserInfo.provinceId" @change="getCity"></uni-data-picker>
				</view>
				<view class="line">
					<view class="name">所在城市</view>
					<uni-data-picker class="picker-input" placeholder="请选择城市" popup-title="请选择城市" preload :clear-icon="false" :localdata="cities" v-model="hrUserInfo.cityId" :readonly="!hrUserInfo.provinceId"></uni-data-picker>
				</view>
				<view class="line">
					<view class="name">受教育程度</view>
					<uni-data-picker class="picker-input" placeholder="请选择受教育程度" popup-title="请选择受教育程度" preload :clear-icon="false" :localdata="educationDegreeList" v-model="hrUserInfo.educationDegree"></uni-data-picker>
				</view>
				<view class="line">
					<view class="name">当前所在学校</view>
					<view class="readonly">{{ hrUserInfo.schoolName }}</view>
				</view>
			</view>
		</view>
		
		<view class="block">
			<view class="arch-title">
				<view class="p-title">
					<image class="icon" src="https://eduvessel.com/images/occupationlab/files.svg" mode="widthFix"></image> &nbsp;个人档案
				</view>
				<uni-icons class="plus" type="plus" size="20" color="#007EFF" @click="addArch"></uni-icons>
			</view>
			
			<view class="archives">
				<view v-for="(archive, i) in archivesList" :key="i" class="form-list archive" v-show="!i || showArch">
					<view class="line">
						<view class="name">职业</view>
						<uni-data-picker class="picker-input" placeholder="请选择职业" popup-title="请选择职业" preload :clear-icon="false" :localdata="occupationList" v-model="archive.personalCareerId"></uni-data-picker>
					</view>
					<view class="line">
						<view class="name">所在国家</view>
						<view class="readonly">中国</view>
					</view>
					<view class="line">
						<view class="name">学校名称</view>
						<uni-data-picker class="picker-input" placeholder="请选择学校" popup-title="请选择学校" preload :clear-icon="false" :localdata="schoolList" v-model="archive.schoolId"></uni-data-picker>
					</view>
					<view class="line">
						<view class="name">专业学科</view>
						<uni-data-picker class="picker-input" placeholder="请选择专业学科" popup-title="请选择专业学科" preload :clear-icon="false" :localdata="subjectList" v-model="archive.disciplineId" @change="e => getItemProfessionalClass(e, i)"></uni-data-picker>
					</view>
					<view class="line">
						<view class="name">专业类</view>
						<uni-data-picker class="picker-input" placeholder="请选择专业类" popup-title="请选择专业类" preload :clear-icon="false" :localdata="archive.ProfessionalClassList" v-model="archive.professionalClassId" :readonly="!archive.disciplineId" @change="e => getItemProfessional(e, i)"></uni-data-picker>
					</view>
					<view class="line">
						<view class="name">专业</view>
						<uni-data-picker class="picker-input" placeholder="请选择专业" popup-title="请选择专业" preload :clear-icon="false" :localdata="archive.ProfessionalList" v-model="archive.professionalId" :readonly="!archive.professionalClassId"></uni-data-picker>
					</view>
					<uni-icons v-if="i" class="del" type="trash" size="20" color="#ccc" @click="delArchive(i)"></uni-icons>
				</view>
			</view>
			<view class="fold" id="fold" v-if="archivesList.length > 1">
				<view :class="['fold-inner', { active: showArch }]" @click="showArch = !showArch">
					展开更多
					<uni-icons class="icon" type="bottom" size="20" color="#007EFF"></uni-icons>
				</view>
			</view>
		</view>
		
		<view class="btn-wrap">
			<view class="btn" @click="submit">保存</view>
		</view>
	</view>
</template>

<script>
	import OSS from '@/libs/Oss/upload'
	import { queryProvince, queryCity, querySchool, queryUserInfoDetails, updateAvatars, courseDiscipline, courseProfessionalClass, courseProfessional, updatePersonCenter, deleteProfile } from '@/apis/modules/user.js'
	export default {
		data() {
			return {
				hrUserInfo: {
					name:'',
					workNumber:'',
					password:"",
					phone:'',
					email:'',
					provinceName:'',
					cityName:'',
					schoolName:'',
					professionalName:'',
					experimentName:'',
					sex: 1,
					dateBirth: '',
					educationDegree: '',
					userId: '',
				},
				userAccount: {
					account: '',
				},
				sex: [{
					text: '男',
					value: 1
				}, {
					text: '女',
					value: 2
				}],
				occupationList: [{
					value: 1,
					text: '学生'
				},{
					value: 2,
					text: '老师'
				}],
				provinces:[],
				cities: [],
				educationDegreeList: [
					{
						text: '专科',
						value: 1
					},
					{
						text: '本科',
						value: 2
					},
					{
						text: '硕士',
						value: 3
					},
					{
						text: '博士',
						value: 4
					},
					{
						text: '其他',
						value: 5
					}
				],
				subjectList: [], //专业学科
				schoolList: [],
				showArch: false,
				archivesList: [],
				archivesForm: {
					personalCareerId: '',
					schoolId: '',
					schoolName: '',
					ProfessionalClassList: [],
					professionalClassId: '',
					professionalClassName: '',
					ProfessionalList: [],
					disciplineId: '',
					disciplineName: '',
					professionalId: '',
					professionalName: '',
				},
			}
		},
		onShow() {
			this.getInfo()
			this.getProvince()
			this.getSchool()
			this.getSubject()
		},
		methods: {
			// 获取个人信息
			async getInfo() {
				const { result } = await queryUserInfoDetails()
				const { hrUserInfo: u, personalFileList: p } = result
				u.avatar = u.userAvatars || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
				this.hrUserInfo = u
				uni.setStorageSync('userId', u.userId)
				this.userAccount = result.userAccount
				
				u.provinceId && this.getCity()
				
				if (p.length) {
					p.forEach(async (e, k) => {
						e.ProfessionalClassList = []
						e.ProfessionalList = []
					  this.$set(e, 'subjectList', this.subjectList)
					  this.$set(e, 'disciplineId', e.disciplineId ? e.disciplineId : '')
					  this.$set(e, 'disciplineName', e.disciplineName ? e.disciplineName : '')
					  this.$set(e, 'professionalClassId', e.professionalClassId ? e.professionalClassId : '')
					  this.$set(e, 'professionalClassName', e.professionalClassName ? e.professionalClassName : '')
					  this.$set(e, 'professionalId', e.professionalId ? e.professionalId : '')
					  this.$set(e, 'professionalName', e.professionalName ? e.professionalName : '')
					  this.$set(e, 'schoolId', e.schoolId ? e.schoolId : '')
					  this.$set(e, 'schoolName', e.schoolName ? e.schoolName : '')
				
					  if (e.disciplineId) {
						const { list } = await courseProfessionalClass({ disciplineId: e.disciplineId })
						list.forEach(e => {
						  	e.value = e.professionalClassId
						  	e.text = e.professionalClassName
						})
						this.$set(e, 'ProfessionalClassList', list)
					  }
					  if (e.professionalClassId) {
						const { list } = await courseProfessional({ professionalClassId: e.professionalClassId })
						list.forEach(e => {
							e.value = e.professionalId
							e.text = e.professionalName
						})
						this.$set(e, 'ProfessionalList', list)
					  }
					})
					this.archivesList = p
				} else {
					this.concatArch()
				}
			},
			
			// 获取省份
			async getProvince() {
				const { list } = await queryProvince()
				list.forEach(e => {
					e.value = e.provinceId
					e.text = e.provinceName
				})
				this.provinces = list
			},
			// 获取城市
			async getCity(val) {
				if (this.hrUserInfo.provinceId) {
					const { list } = await queryCity({
						provinceId: this.hrUserInfo.provinceId
					})
					list.forEach(e => {
						e.value = e.cityId
						e.text = e.cityName
					})
					this.cities = list
				} else {
					this.cities = []
				}
				if (val) this.hrUserInfo.cityId = ''
			},
			// 获取学校
			async getSchool(){
				const { list } = await querySchool()
				list.forEach(e => {
					e.value = e.schoolId
					e.text = e.schoolName
				})
				this.schoolList = list
			},
			// 上传头像回调
			onChooseAvatar(e) {
				OSS(e.detail.avatarUrl, ({ url }) => {
					updateAvatars(url).then(res => {
						this.getInfo()
					}).catch(e => {})
				})
			},
			
			
			foldArch() {
				this.showArch = !this.showArch
			},
			// 获取学科类别
			async getSubject(){
				const { list } = await courseDiscipline()
				list.forEach(e => {
					e.value = e.disciplineId
					e.text = e.disciplineName
				})
				this.subjectList = list
			},
			// 清除学科类别
			clearClass(){
				this.archivesForm.professionalClassId = '',
				this.archivesForm.professionalId = ''
			},
			clearItemClass(index){
				this.archivesList[index].professionalClassId = ''
				this.archivesList[index].professionalClassName = ''
				this.archivesList[index].professionalId = ''
				this.archivesList[index].professionalName = ''
			},
			async getItemProfessionalClass(e, index){
				this.clearItemClass(index)
				if(e.detail.value.length){
					const id = e.detail.value[0].value
					let obj = {}
					obj = this.subjectList.find(r =>{
						return r.disciplineId === id
					});
					const { list } = await courseProfessionalClass({ disciplineId: id })
					list.forEach(e => {
						e.value = e.professionalClassId
						e.text = e.professionalClassName
					})
					this.archivesList.map(e =>{
						if(e.disciplineId == id){
							e.ProfessionalClassList = list
							e.disciplineName = obj.disciplineName
						}
					})
				}
			},
			// 清除专业类
			clearProfess(){
				this.archivesForm.professionalId = ''
			},
			clearItemProfess(index){
				this.archivesList[index].professionalId = ''
				this.archivesList[index].professionalName = ''
			},
			async getItemProfessional(e, index){
				this.clearItemProfess(index)
				if(e.detail.value.length){
					const id = e.detail.value[0].value
					const { list } = await courseProfessional({ professionalClassId: id })
					list.forEach(e => {
						e.value = e.professionalId
						e.text = e.professionalName
					})
					this.archivesList.map(e =>{
						if(e.professionalClassId == id){
							let obj = {}
							obj = e.ProfessionalClassList.find(r =>{
								return r.professionalClassId === id
							})
							e.ProfessionalList = list
							e.professionalClassName = obj.professionalClassName
						}
					})
				}
			},
			getItemStuGrade(item){
				if(item){
					this.archivesList.map(e =>{
						if(e.professionalId == item){
							let obj = {}
							obj = e.ProfessionalList.find(r =>{
								return r.professionalId === item;
							})
							e.professionalName = obj.professionalName
						}
					})
				}
			},
			concatArch() {
				this.archivesList = this.archivesList.concat({
					countries: '中国',
					personalCareerId: '',
					schoolId: '',
					schoolName: '',
					subjectList: this.subjectList,
					disciplineId: '',
					disciplineName: '',
					ProfessionalClassList: [],
					professionalClassId: '',
					professionalClassName: '',
					ProfessionalList: [],
					professionalId: '',
					professionalName: '',
					personalFileId: ''
				})
			},
			addArch() {
				let isEmpty = false
				this.archivesList.forEach((n,k) => {
					if(!n.personalCareerId) isEmpty = true
				})
				if(isEmpty) return this.$util.errMsg('请选择职业')
				this.showArch = true
				
				this.$nextTick(() => {
					uni.pageScrollTo({
						duration: 300,
						selector: '#fold' 
					})
				})
				this.concatArch()
			},
			delArchive(i) {
				const that = this
				uni.showModal({
					title: '提示',
					content: '确定要删除吗？',
					success(res) {
						if (res.confirm) {
							const id = that.archivesList[i].personalFileId
							that.archivesList.splice(i, 1)
							id && deleteProfile(id)
						}
					}
				})
			},
			
			// 保存
			async submit() {
				const { hrUserInfo: u, userAccount: a } = this
				if (u.idNumber && !/(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)/.test(u.idNumber)) return this.$util.errMsg('请输入正确的身份证号码！')
				let personalFileList = []
				this.archivesList.forEach((n,k) => {
					n.personalCareerId && personalFileList.push({
						disciplineId: n.disciplineId,
						disciplineName: n.disciplineName,
						personalCareerId: n.personalCareerId,
						personalFileId: n.personalFileId,
						professionalClassId: n.professionalClassId,
						professionalClassName: n.professionalClassName,
						professionalId: n.professionalId,
						professionalName: n.professionalName,
						provinceId: n.provinceId,
						provinceName: n.provinceName,
						schoolId: n.schoolId,
						schoolName: n.schoolName,
						userId: u.userId
					})
				})
				const data = {
					userId: u.userId,
					userAccountList: [{
						id: a.accountId,
						account: a.account,
						userId: a.userId,
					}],
					hrUserInfo: {
						provinceId: u.provinceId,
						cityId: u.cityId,
						countries: '中国',
						dateBirth: u.dateBirth,
						educationDegree: u.educationDegree,
						idNumber: u.idNumber,
						schoolId: u.schoolId,
						sex: u.sex,
						userId: u.userId,
						userName: u.userName,
						wechatId: u.wechatId
					},
					personalFileList,
				}
				updatePersonCenter(data)
				this.$util.sucMsg('保存成功')
				setTimeout(() => {
					uni.switchTab({
						url: '/pages/person/person'
					})
				}, 1500)
			},
		}
	}
</script>

<style scoped lang="scss">
.page {
	padding-bottom: 130rpx;
}
.avatar-btn {
	position: relative;
	display: flex;
	align-items: center;
	padding: 14rpx 0;
	line-height: 0;
	text-align: left;
	border: 0;
	border-bottom: 1px solid #E6E8ED;
	background-color: transparent;
	border-radius: 0;
	outline: none;
	&:after {
		display: none;
	}
	.avatar-left {
		width: 200rpx;
	}
	.avatar {
		width: 60rpx;
		height: 60rpx;
		margin-right: 20rpx;
		border: 0;
		border-radius: 50%;
	}
	.val {
		color: #7d7d7d;
	}
	.arrow {
		position: absolute;
		top: 44rpx;
		right: 20rpx;
	}
}
.arch-title {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.archives {
	padding-bottom: 20rpx;
	.archive {
		position: relative;
		padding: 30rpx;
		margin-bottom: 30rpx;
		border: 1px dashed #d2d2d2;
		border-radius: 20rpx;

		.del {
			position: absolute;
			top: 10rpx;
			right: 10rpx;
		}
	}
}
.fold {
    padding-bottom: 20rpx;
    text-align: center;
    font-size: 24rpx;
    color: #006EFF;

    .fold-inner {
		display: flex;
		justify-content: center;
		align-items: center;
        .icon {
			transition: .5s;
        }
        &.active .icon {
			transform: rotate(180deg);
        }
    }
}
</style>
