<template>
	<view class="personal">
		<u-form
			labelPosition="top"
			:model="userInfo"
			:rules="rules"
			ref="uForm"
			labelWidth="120"
		>
			<u-form-item label="最高学历" prop="qualification">
				<u-cell
					size="large"
					:title="userInfo.qualification || '请选择'"
					isLink
					@click="showDialog = true"
				/>
				<u-picker
					keyName="name"
					:show="showDialog"
					:columns="xlList"
					@confirm="confirmSalary"
					@cancel="showDialog = false"
				></u-picker>
			</u-form-item>
			<u-form-item label="学校名称" prop="school" borderBottom>
				<u-input v-model="userInfo.school" border="none" placeholder="如: 清华大学" />
			</u-form-item>
			<u-form-item label="所学专业" prop="major" borderBottom>
				<u-input v-model="userInfo.major" border="none" placeholder="如: 计算机科学与技术"  />
			</u-form-item>
			<u-form-item label="在校时间" borderBottom>
				<view class="f_b">
					<view
						class="f_b"
						style="width: 35vw;padding: 10rpx 0;"
						@click="show=true"
					>
						<view>{{userInfo.startTime || '入学时间'}}</view>
						<u-icon size="18" name="arrow-right"/>
					</view>
					-
					<view class="f_b">
						<view
							class="f_b"
							style="width: 35vw;padding: 10rpx 0;"
							@click="show2=true"
						>
							<view>{{userInfo.endTime || '毕业时间'}}</view>
							<u-icon size="18" name="arrow-right"/>
						</view>
					</view>
				</view>
				<!-- 入职时间 -->
				<u-datetime-picker
					:show="show"
					v-model="startTime"
					mode="year-month"
					:minDate="2649600000"
					:maxDate="1786778555000"
					@close="show=false"
					@confirm="setStartTime"
				></u-datetime-picker>
				<!-- 离职时间 -->
				<u-datetime-picker
					:show="show2"
					v-model="endTime"
					mode="year-month"
					:minDate="2649600000"
					:maxDate="1786778555000"
					@close="show2=false"
					@confirm="setEndTime"
				></u-datetime-picker>
			</u-form-item>
		</u-form>
		<view class="br"></view>
		<view class="footer">
			<u-button @click="submit" type="primary">保存</u-button>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showDialog: false,
				userInfo:{},
				xlList: [],
				show: false,
				startTime: new Date().getTime(),
				show2: false,
				endTime: new Date().getTime(),
			}
		},
		onLoad(e) {
			this.$http.get('/qualification/all', {}).then(res => {
				this.xlList = [res.data.list]
			})
			if (e.id) {
				this.$http.get('/personEducational/details', {id: e.id}).then(res => {
					this.userInfo = res.data
				})
			}
		},
		methods: {
			confirmSalary(e) {
				this.userInfo.qualification = e.value[0].name
				this.userInfo.qualificationId = e.value[0].id
				this.showDialog = false
			},
			setStartTime(e) {
				this.userInfo.startTime = this.formatTimestampToYearMonth(e.value)
				this.show = false
			},
			setEndTime(e) {
				this.userInfo.endTime = this.formatTimestampToYearMonth(e.value)
				this.show2 = false
			},
			formatTimestampToYearMonth(timestamp) {
			  const date = new Date(timestamp);
			  const year = date.getFullYear();
			  const month = String(date.getMonth() + 1).padStart(2, '0');
			  return `${year}-${month}`;
			},
			submit(){
				if (!this.userInfo.qualification) {
					return uni.showToast({
						title: '请输入最高学历',
						icon: 'none'
					})
				}
				const url = this.userInfo.id ? '/personEducational/u' : '/personEducational/c'
				this.$http.post(url, this.userInfo).then(res => {
					uni.showToast({
					  title: `保存成功`,
					  icon: 'none',
					});
					setTimeout(()=>{
						uni.navigateBack()
					},500)
				})
			}
		}
	}
</script>

<style lang="scss">
.personal{
	background: #fff;
	min-height:100vh;
	padding:0 30rpx;
	.br{
		height: calc(200rpx + env(safe-area-inset-bottom));
	}
	.footer{
		position: fixed;
		bottom: calc(env(safe-area-inset-bottom) + 40rpx);
		width: 690rpx;
	}
}
</style>
