<template>
	<view style=" width: 100%;height: 100%; display: flex;background-color: #F7F7F7;"  :style="vuex_theme">
		<view class="wrap_box">
			<view>
				<u-form :model="form" :error-type="errorType" ref="uForm">
					<c-input-item label="公司名称" type="text1" name="company" v-model="form.company" :rightIcon="false">
					</c-input-item>
					<c-input-item label="职位名称" type="text1" name="job" v-model="form.job" :rightIcon="false">
					</c-input-item>
					<!-- <c-input-item label="工作起止时间" type="date2" name="job_start_time" v-model="form.job_start_time" :rightIcon="true">
					</c-input-item> -->
					<view class="event_box" style="margin: 30rpx 0;" @click="calendarPicker">
						<text class="text1">工作起止日期</text>
						<view class="" style="display: flex;margin-top: 40rpx; align-items: center;">
							<view v-if='job_start_time' class="text2" style="text-align: center;" @click="showCalendar('start')">{{job_start_time}}</view>
							<view v-else class="text3" @click="showCalendar('start')">请选择开始日期</view>
	
							<view class="text1" style="flex: 1;text-align: center;">至</view>
							
							<view v-if='job_end_time' class="text2" style="flex: 3;" @click="showCalendar('end')">{{job_end_time}}</view>
							<view v-else class="text3" @click="showCalendar('end')">请选择结束日期</view>
						</view>
					</view>
					<view style="width: 100%;height: 1rpx;background-color: ;"></view>
					<view style="margin-top: 30rpx;">
						<view class="text_gray_26">工作内容</view>
						<view style="min-height: 300rpx;width: 100%;padding: 20rpx 0;">
							<u-input v-model="form.job_content" type="textarea" :maxlength='maxLength'
								placeholder="请输入内容" :custom-style="text_black_30" :placeholder-style="text_gray_30"/>
						</view>
						<!-- <view class="text_gray_30" style="text-align: right;">
							{{form.job_content?form.job_content.length:0}}/{{maxLength}}
						</view> -->
						<view style="height: 2rpx;margin: 30rpx 0;background-color: #e5e5e5;"></view>
					</view>
				</u-form>
			</view>
		</view>
		<!-- <u-calendar v-model="show" :mode="'range'" :active-bg-color="''" range-color=""
			:btn-type="'success'" @change="change" :toolTip="'请选择工作起止时间'"></u-calendar> -->
		<u-calendar v-model="show" :mode="mode" :active-bg-color="'var(--primary-color)'" range-color="var(--primary-color)"
			:btn-type="'success'" @change="change">
				<view slot="tooltip">
					<view v-if="showBtn" class="btn_calendar" @click="setEndDate(data)">至今</view>
					<view class="title">{{calendar_title}}</view>
				</view>
			</u-calendar>
		<view class="footer">
			<view style="width: 100%;height: 1rpx;border: 1rpx solid #f7f7f7;"></view>
			<view style="padding: 20rpx 40rpx">
				<view class="confirm" @click="confirm">确认</view>
				<view v-if="index!=-1" class="del" @click="goDel">删除</view>
				<view v-else style="height: 50rpx;width: 100%;"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				maxLength: 300,
				curLength: 0,
				index: -1,
				experienceObj: {},
				job_start_time: "",
				job_end_time: "",
				form: {
					company: "",
					job_content: "",
					job: "",
					job_start_time: 0,
					job_end_time:0,
				},
				mode:'date',
				calendar_title:"",
				showBtn:false
			}
		},

		onLoad(option) {
			console.log("option", option)
			if (option.index && option.experienceObj) {
				this.index = option.index
				this.experienceObj = JSON.parse(option.experienceObj)
				this.form = this.experienceObj
				this.job_start_time = this.timeFormat(this.form.job_start_time) 
				this.job_end_time = this.form.job_end_time==0?"至今":this.timeFormat(this.form.job_end_time)
			}
		},

		methods: {
			timeFormat(value, format = 'yyyy-mm-dd') {
				return this.$u.timeFormat(value, format)
			},

			showCalendar(type){
				console.log(type)
				this.show = true
				this.showBtn = (type=='end'?true:false)
				this.calendar_title = (type=='end'?'结束日期':'开始日期')
			},

			change(e) {
				console.log(e);
				if(this.showBtn){
					this.job_end_time = e.result
					this.form.job_end_time = (new Date(e.result)).getTime() / 1000;
				}else{
					this.job_start_time = e.result
					this.form.job_start_time = (new Date(e.result)).getTime() / 1000;
				}
				this.show = false
			},

			calendarPicker() {
				this.show = true
				console.log("show--", this.show)
			},
			
			setEndDate(data){
				console.log("至今..",data)
				this.show = false
				this.job_end_time = '至今'
				this.form.job_end_time = 0
			},

			goDel() {
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2];
				
				console.log("del1",prevPage.$vm.work_exps,prevPage.$vm.detailObj.work_exps)
				if(prevPage.$vm.work_exps&&prevPage.$vm.work_exps.length>0&&this.index>-1){
					let array = []
					array=prevPage.$vm.work_exps.filter((item,index)=>{
						if (this.index !=index ) {
							return item
						}
					})
					prevPage.$vm.work_exps = array
				}
				
				prevPage.$vm.detailObj.work_exps = prevPage.$vm.work_exps
				console.log("del2",prevPage.$vm.detailObj.work_exps)
				
				uni.navigateBack({
					delta: 1
				})
			},

			confirm() {
				console.log("confirm1", this.form)
				if (this.form.company && this.form.job && this.form.job_content && this.form.job_start_time&& this.form.job_end_time>-1) {
					if(this.form.job_end_time!=0&&this.form.job_end_time<this.form.job_start_time){
						uni.showToast({
							title: "工作起止日期错误",
							icon:'none'
						})
						return;
					}
					let pages = getCurrentPages();
					let prevPage = pages[pages.length - 2];
					this.experienceObj.company = this.form.company
					this.experienceObj.job = this.form.job
					this.experienceObj.job_content = this.form.job_content
					this.experienceObj.job_start_time = this.form.job_start_time
					this.experienceObj.job_end_time = this.form.job_end_time

					if(prevPage.$vm.work_exps&&prevPage.$vm.work_exps.length>0&&this.index>-1){//编辑
						let array = []
						array=prevPage.$vm.work_exps.map((item,index)=>{
							if (this.index ==index ) {
								return this.experienceObj
							}else{
								return item
							}
						})
						prevPage.$vm.work_exps = array
					}else{//添加
						prevPage.$vm.work_exps.push(this.experienceObj)
					}
					prevPage.$vm.detailObj.work_exps = prevPage.$vm.work_exps
					
					console.log("confirm2", prevPage.$vm.detailObj.work_exps)
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.showToast({
						title: "请完善工作经历",
						icon:'none'
					})
				}
			}

		}
	}
</script>

<style lang="scss" scoped>
	.wrap_box {
		padding: 20rpx;
		background-color: #fff;
		margin: 20rpx 20rpx 0 20rpx;
		width: 100%;

		.text_black_30 {
			font-size: 30rpx;
			font-family:' PingFangSC-Regular, PingFang SC';
			font-weight: 500;
			color: #000000;
		}

		.text_gray_26 {
			font-size: 26rpx;
			line-height: 26rpx;
			color: #000000;
			margin-top: 16rpx;
		}

		.text_gray_30 {
			font-size: 30rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.45);
		}
	}

	.event_box {
		display: flex;
		flex-direction: column;
		width: 100%;
	
		.text1 {
			font-size: 26rpx;
			line-height: 26rpx;
			color: #000000;
		}
	
		.text2 {
			font-size: 30rpx;
			font-family:' PingFangSC-Regular, PingFang SC';
			font-weight: 500;
			color: #000000;
			line-height: 30rpx;
		}
		
		.text3{
			font-size: 30rpx;
			color:rgba(0,0,0,0.45);
			line-height: 30rpx;
		}
	
	}

	.footer {
		width: 100%;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 99;
	
		.del {
			width: 100%;
			font-size: 30rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 500;
			color: rgba(0, 0, 0, 0.65);
			padding: 24rpx;
			text-align: center;
		}
	
		.confirm {
			width: 100%;
			background: linear-gradient(180deg, var(--primary-color000) 0%, var(--primary-color) 100%);
			box-shadow: 0px 2px 20px 0px var(--primary-color03);
			border-radius: 24px;
			padding: 24rpx;
			text-align: center;
			font-size: 34rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}
	}
	
	.btn_calendar{
		position: absolute;
		width: fit-content;
		padding: 20rpx	40rpx;
		text-align: left;
		font-size: 34rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 400;
		color: var(--primary-color);
	}
	
	.title{
			color: #333;
			text-align: center;
			padding: 20rpx 0 0 0;
		}
</style>