<template>
	<view class="page-container">
		<view class="content">
			<view class="content-input">
			    <view class="input-titile">公司名称</view>
			    <input class="input-con" v-model="formData.companyName" maxlength="200" placeholder-style="font-size: 16px" placeholder="请输入公司名称" />
			</view>
			<view class="content-input">
				<view class="input-titile">职位名称</view>
			    <input class="input-con" v-model="formData.position" maxlength="100" placeholder-style="font-size: 16px" placeholder="请输入职位名称" />
			</view>
			<view class="content-input">
				<view class="input-titile">工作时间</view>
				<view class="date-range-container">
					<picker mode="date" :value="startDate === '至今' ? currentDate : startDate" :start="minDate" :end="currentDate" @change="bindStartDateChange">
						<view class="date-picker-item">
							<text class="date-label">开始时间</text>
							<view class="date-display" :class="{ 'current-text': startDate === '至今' }">{{startDate || '请选择开始时间'}}</view>
						</view>
					</picker>
					<view class="date-separator">至</view>
					<picker mode="date" :value="endDate === '至今' ? currentDate : endDate" :start="startDate === '至今' ? minDate : startDate" :end="currentDate" @change="bindEndDateChange">
						<view class="date-picker-item">
							<text class="date-label">结束时间</text>
							<view class="date-display" :class="{ 'current-text': endDate === '至今' }">{{endDate}}</view>
						</view>
					</picker>
				</view>
			</view>
			<view class="content-input">
				<view class="input-titile">工作描述</view>
			    <!-- <input class="input-con" placeholder="请输入工作描述" /> -->
				<textarea class="textarea-con" v-model="formData.description" placeholder-style="font-size: 16px" maxlength="500" placeholder="请输入工作描述"/>
			</view>
		</view>
		
		<!-- 底部确认按钮 -->
		<view class="bottom-confirm-btn">
			<view class="confirm-btn" @click="handleConfirm">确认</view>
		</view>
	</view>
</template>

<script setup>
	import { reactive, inject, watch, ref, onMounted, computed } from 'vue';
	import { onLoad, onShow } from '@dcloudio/uni-app';
	import SelectJobs from '@/components/selectJobs/selectJobs.vue';
	import useUserStore from '@/stores/useUserStore';
	
	const { $api, navTo, navBack, config } = inject('globalFunction');
	const { userInfo } = useUserStore();
	
	// 页面参数
	const pageType = ref('add'); // add: 添加, edit: 编辑
	const editData = ref(null); // 编辑时的数据
	
	// 获取当前日期
	const getDate = (options = {}) => {
		const date = new Date();
		const year = date.getFullYear();
		const month = String(date.getMonth() + 1).padStart(2, '0');
		const day = String(date.getDate()).padStart(2, '0');
		
		if (options.format) {
			return `${year}-${month}-${day}`;
		}
		return date;
	};
	
	const currentDate = getDate({ format: true });
	const minDate = '1990-01-01';  // 开始时间最早只能选择到1990年
	
	// 定义响应式数据
	const startDate = ref('');  // 开始时间需要选择
	const endDate = ref('至今');  // 结束时间默认为"至今"
	
	// 表单数据
	const formData = reactive({
		companyName: '',
		position: '',
		userId: '', // 将在确认时动态获取
		startDate: '',
		endDate: '至今', // 设置默认值为"至今"
		description: ''
	});
	
	// 页面加载时解析参数
	onLoad((options) => {
		console.log('页面参数:', options);
		
		// 解析页面类型
		if (options.type) {
			pageType.value = options.type;
		}
		
		// 如果是编辑模式，解析传递的数据
		if (options.type === 'edit' && options.data) {
			try {
				editData.value = JSON.parse(decodeURIComponent(options.data));
				console.log('编辑数据:', editData.value);
				
				// 回显数据到表单
				if (editData.value) {
					formData.companyName = editData.value.companyName || '';
					formData.position = editData.value.position || '';
					formData.startDate = editData.value.startDate || '';
					formData.endDate = editData.value.endDate || '至今';
					formData.description = editData.value.description || '';
					
					// 同步日期选择器的显示
					startDate.value = editData.value.startDate || '';
					endDate.value = editData.value.endDate || '至今';
				}
			} catch (error) {
				console.error('解析编辑数据失败:', error);
				$api.msg('数据解析失败');
			}
		}
	});
	
	const state = reactive({
	    lfsalay: [2, 5, 10, 15, 20, 25, 30, 50],
	    risalay: [2, 5, 10, 15, 20, 25, 30, 50], // 修复未定义的salay变量
	    salayText: '',
	    areaText: '',
	    jobsText: []
	});
	
	// 开始日期选择器变化事件
	const bindStartDateChange = (e) => {
		const selectedDate = e.detail.value;
		if (selectedDate === currentDate) {
			// 如果选择的是今天，设置为"至今"
			startDate.value = '至今';
			formData.startDate = '至今';
		} else {
			startDate.value = selectedDate;
			formData.startDate = selectedDate;
		}
		// 如果结束日期早于开始日期且结束日期不是"至今"，清空结束日期
		if (endDate.value && endDate.value !== '至今' && endDate.value < startDate.value) {
			endDate.value = '至今';
			formData.endDate = '至今';
		}
	};
	
	// 结束日期选择器变化事件
	const bindEndDateChange = (e) => {
		const selectedDate = e.detail.value;
		if (selectedDate === currentDate) {
			// 如果选择的是今天，设置为"至今"
			endDate.value = '至今';
			formData.endDate = '至今';
		} else {
			endDate.value = selectedDate;
			formData.endDate = selectedDate;
		}
	};
	
	// 确认保存工作经历
	const handleConfirm = async () => {
		// 表单验证
		if (!formData.companyName.trim()) {
			$api.msg('请输入公司名称');
			return;
		}
		if (!formData.position.trim()) {
			$api.msg('请输入职位名称');
			return;
		}
		if (!formData.startDate) {
			$api.msg('请选择开始时间');
			return;
		}
		if (!formData.description.trim()) {
			$api.msg('请输入工作描述');
			return;
		}
		console.log(userInfo.userId)
		// 调试：打印表单数据
		console.log('表单数据:', formData);
		console.log('结束时间:', formData.endDate);
		
		try {
			// 处理结束时间：如果是"至今"，则使用当前日期
			const endDateValue = formData.endDate === '至今' ? currentDate : formData.endDate;
			console.log('处理后的结束时间:', endDateValue);
			
			// 准备请求参数（不包含userId，让后端通过token获取）
			const params = {
				companyName: formData.companyName.trim(),
				position: formData.position.trim(),
				startDate: formData.startDate,
				endDate: endDateValue, // 使用处理后的结束时间
				description: formData.description.trim()
			};
			
			console.log('请求参数:', params);
			console.log('页面类型:', pageType.value);
			
			let resData;
			// 根据页面类型调用不同的接口
			if (pageType.value === 'edit' && editData.value?.id) {
				// 编辑模式：调用更新接口
				resData = await $api.createRequest(`/app/userworkexperiences/edit`, {...params, id: editData.value.id}, 'put');
				console.log('编辑接口响应:', resData);
			} else {
				// 添加模式：调用新增接口
				resData = await $api.createRequest('/app/userworkexperiences/add', params, 'post');
				console.log('新增接口响应:', resData);
			}
			
			if (resData.code === 200) {
				$api.msg(pageType.value === 'edit' ? '工作经历更新成功' : '工作经历保存成功');
				// 返回上一页
				navBack();
			} else {
				$api.msg(resData.msg || '操作失败');
			}
		} catch (error) {
			console.error('保存工作经历失败:', error);
			$api.msg('保存失败，请重试');
		}
	};
	
</script>

<style lang="stylus" scoped>
.page-container {
    min-height: 100vh;
    background-color: #ffffff;
    position: relative;
}

.content{
    padding: 28rpx;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-bottom: 120rpx;
}
.content-input
    margin-bottom: 52rpx
    .input-titile
        font-weight: 400;
        font-size: 28rpx;
        color: #6A6A6A;
    .input-con
        font-weight: 400;
        font-size: 32rpx;
        color: #333333;
        line-height: 80rpx;
        height: 80rpx;
        border-bottom: 2rpx solid #EBEBEB
        position: relative;
    .triangle::before
        position: absolute;
        right: 20rpx;
        top: calc(50% - 2rpx);
        content: '';
        width: 4rpx;
        height: 18rpx;
        border-radius: 2rpx
        background: #697279;
        transform: translate(0, -50%) rotate(-45deg) ;
    .triangle::after
        position: absolute;
        right: 20rpx;
        top: 50%;
        content: '';
        width: 4rpx;
        height: 18rpx;
        border-radius: 2rpx
        background: #697279;
        transform: rotate(45deg)
	.textarea-con
		border:  2rpx solid #EBEBEB
		width: 95%
		height: 400rpx
		margin-top: 20rpx
		padding: 15rpx
	
	.date-range-container
		display: flex
		align-items: flex-end
		justify-content: space-between
		margin-top: 20rpx
		position: relative
		border-bottom: 2rpx solid #EBEBEB
		
		.date-picker-item
			flex: 1
			display: flex
			flex-direction: column
			align-items: center
			
			.date-label
				font-size: 24rpx
				color: #999999
				margin-bottom: 10rpx
				
			.date-display
				width: 100%
				height: 80rpx
				line-height: 80rpx
				font-size: 32rpx
				color: #333333
				text-align: center
				position: relative
				
				&.current-text
					color: #256BFA
					font-weight: 500
		
		.date-separator
			position: absolute
			left: 50%
			bottom: 40rpx
			transform: translateX(-50%)
			font-size: 28rpx
			color: #666666
			background-color: #ffffff
			padding: 0 10rpx
			z-index: 2
			height: 20rpx
			line-height: 20rpx
			display: flex
			align-items: center

// 底部确认按钮样式
.bottom-confirm-btn
	position: fixed
	bottom: 0
	left: 0
	right: 0
	background-color: #ffffff
	padding: 20rpx 28rpx
	border-top: 2rpx solid #EBEBEB
	z-index: 999
	
	.confirm-btn
		width: 100%
		height: 90rpx
		background: #256BFA
		border-radius: 12rpx
		font-weight: 500
		font-size: 32rpx
		color: #FFFFFF
		text-align: center
		line-height: 90rpx
		button-click: true

// .content-sex
//     height: 110rpx;
//     display: flex
//     justify-content: space-between;
//     align-items: flex-start;
//     border-bottom: 2rpx solid #EBEBEB
//     margin-bottom: 52rpx
//     .sex-titile
//         line-height: 80rpx;
//     .sext-ri
//         display: flex
//         align-items: center;
//         .sext-box
//             height: 76rpx;
//             width: 152rpx;
//             text-align: center;
//             line-height: 80rpx;
//             border-radius: 12rpx 12rpx 12rpx 12rpx
//             border: 2rpx solid #E8EAEE;
//             margin-left: 28rpx
//             font-weight: 400;
//             font-size: 28rpx;
//         .sext-boxactive
//             color: #256BFA
//             background: rgba(37,107,250,0.1);
//             border: 2rpx solid #256BFA;
//     .next-btn
//         width: 100%;
//         height: 90rpx;
//         background: #256BFA;
//         border-radius: 12rpx 12rpx 12rpx 12rpx;
//         font-weight: 500;
//         font-size: 32rpx;
//         color: #FFFFFF;
//         text-align: center;
//         line-height: 90rpx
// .input-nx
//     position: relative
//     border-bottom: 2rpx solid #EBEBEB
//     padding-bottom: 30rpx
//     display: flex
//     flex-wrap: wrap
//     .nx-item
//         padding: 20rpx 28rpx
//         width: fit-content
//         border-radius: 12rpx 12rpx 12rpx 12rpx;
//         border: 2rpx solid #E8EAEE;
//         margin-right: 24rpx
//         margin-top: 24rpx
</style>
