<template>
	<view class="personal">
		<u-form
			labelPosition="top"
			:model="userInfo"
			:rules="rules"
			ref="uForm"
			labelWidth="120"
		>
			<u-form-item label="公司名称" prop="orgName" borderBottom>
				<u-input v-model="userInfo.orgName" border="none" placeholder="如: 君营直聘" />
			</u-form-item>
			<u-form-item label="职位名称" prop="job" borderBottom>
				<u-input v-model="userInfo.job" border="none" placeholder="如: 高级软件工程师" />
			</u-form-item>
			<u-form-item label="在职时间" prop="idNo" borderBottom>
				<view class="f_b">
					<view
						class="f_b"
						style="width: 35vw;padding: 10rpx 0;"
						@click="show=true"
					>
						<view v-if="userInfo.startTime" class="form_val">{{userInfo.startTime}}</view>
						<view v-else class="cell-placeholder form_val">入职时间</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 v-if="userInfo.endTime" class="form_val">{{userInfo.endTime}}</view>
							<view v-else class="cell-placeholder form_val">离职时间</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"
					@cancel="show=false"
					@confirm="setStartTime"
				></u-datetime-picker>
				<!-- 离职时间 -->
				<u-datetime-picker
					:show="show2"
					v-model="endTime"
					mode="year-month"
					:minDate="2649600000"
					:maxDate="1786778555000"
					@cancel="show2=false"
					@confirm="setEndTime"
				></u-datetime-picker>
			</u-form-item>
			<u-form-item label="所属行业" prop="industryName">
				<u-cell
					size="large"
					isLink
					@click="showDialog = true"
				>
					<view slot="title">
						<view v-if="userInfo.industryName">{{userInfo.industryName}}</view>
						<view class="cell-placeholder" v-else>选择所属行业</view>
					</view>
				</u-cell>
			</u-form-item>
			<u-form-item label="月薪" prop="money" borderBottom>
				<u-input v-model="userInfo.money" border="none" placeholder="元/月" />
			</u-form-item>
			<u-form-item label="工作描述" prop="descr">
				<u--textarea
					v-model="userInfo.descr"
					placeholder="在任职期间,主要负责**项目,取得了***的成绩,我再整个项目中的主要贡献是***"
					border="bottom"
					height="80"
					maxlength="500"
					@blur="descrBlur"
				></u--textarea>
			</u-form-item>
		</u-form>
		<view class="br"></view>
		<view class="footer">
			<u-button @click="submit" type="primary" shape="circle">保存</u-button>
		</view>
		<well-tree-select3
			@clickThird="clickThird"
			@clickSub="clickSub"
			@clickNav="clickNav"
			:showDialog.sync="showDialog"
			:data="industryList"
			:max-selected="1"
			:selected-values="selectedValues"
			@doConfirm="showDialog = false"
		/>
	</view>
</template>

<script>
	import wellTreeSelect3 from '../../../components/well-treeSelect/well-treeSelect3.vue';
	export default {
		components: {
			wellTreeSelect3
		},
		data() {
			return {
				showDialog: false,
				v1: '',
				v2: '',
				industryList: [],
				userInfo:{},
				show: false,
				startTime: new Date().getTime(),
				show2: false,
				endTime: new Date().getTime(),
			}
		},
		onLoad(e) {
			if (e.id) {
				this.$http.get('/workExperience/details', {id: e.id}).then(res => {
					this.userInfo = res.data
				})
			}
			this.$http.get('/public/industry/l/all', {}).then(res => {
				this.industryList = res.data
			})
		},
		methods: {
			clickNav(item) {
				this.v1 = item.name
			},
			clickSub(item) {
				this.v2 = item.name
				this.userInfo.industryName = `${this.v2}`
				this.showDialog = false
			},
			clickThird(item) {
				this.v3 = item.name
				// this.userInfo.industryName = `${this.v1}-${this.v2}-${this.v3}`
				this.userInfo.industryName = `${this.v3}`
				// industryId
				this.showDialog = false
			},
			descrBlur(e) {
				console.log(e)
			},
			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}`;
			},
			checkWorkDate(startDate, endDate) {
			    const startValue = parseInt(startDate.replace("-", ""), 10);
			    const endValue = parseInt(endDate.replace("-", ""), 10);
			    if (startValue > endValue) {
			        return false;
			    }
				return true
			},
			submit(){
				if (!this.userInfo.orgName) {
					return uni.showToast({
						title: '请输入公司名称',
						icon: 'none'
					})
				}
				if (!this.userInfo.job) {
					return uni.showToast({
						title: '职位名称',
						icon: 'none'
					})
				}
				if (!this.userInfo.startTime) {
					return uni.showToast({
						title: '请输入入职时间',
						icon: 'none'
					})
				}
				if (!this.userInfo.endTime) {
					return uni.showToast({
						title: '请输入离职时间',
						icon: 'none'
					})
				}
				if (!this.checkWorkDate(this.userInfo.startTime,this.userInfo.endTime)) {
					return uni.showToast({
						title: '入职时间不能早于离职时间',
						icon: 'none'
					})
				}
				if (!this.userInfo.industryName) {
					return uni.showToast({
						title: '请输入所属行业',
						icon: 'none'
					})
				}
				if (!this.userInfo.money) {
					return uni.showToast({
						title: '请输入月薪',
						icon: 'none'
					})
				}
				if (!this.userInfo.descr) {
					return uni.showToast({
						title: '请输入工作描述',
						icon: 'none'
					})
				}
				const url = this.userInfo.id ? '/workExperience/u' : '/workExperience/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>
