<!-- 劳动合同续签 -->
<template>
	<view class="form-page">
		<scroll-view scroll-y class="form-scroll">
			<uni-forms :modelValue="formData" label-width="230rpx" ref="customForm" :rules="customRules">
				<!-- 审批状态卡片 -->
				<view class="form-card" v-if="formData.ticket_">
					<ticketd :ticket_="formData.ticket_"></ticketd>
				</view>

				<!-- 员工信息 -->
				<view class="form-card">
					<view class="form-card-title">员工信息</view>
					<uni-forms-item label="员工" required>
						<searchSelect
							v-model="formData.employee"
							:apiobjs="EmpApiobj"
							@change="handleEmpChange"
							v-if="mode == 'add'" />
						<span v-else>{{formData.employee_name}}</span>
					</uni-forms-item>
					<uni-forms-item label="部门">
						<uni-easyinput v-model="formData.belong_dept_name" disabled />
					</uni-forms-item>
					<uni-forms-item label="岗位">
						<uni-easyinput v-model="formData.post_name" disabled />
					</uni-forms-item>
					<uni-forms-item label="身份证号">
						<uni-easyinput v-model="formData.id_number" disabled />
					</uni-forms-item>
					<uni-forms-item label="联系方式">
						<uni-easyinput v-model="formData.phone" disabled />
					</uni-forms-item>
				</view>

				<!-- 原合同信息 -->
				<view class="form-card">
					<view class="form-card-title">原合同信息</view>
					<uni-forms-item label="合同类型" required name="contract_type">
						<uni-data-select
							v-if="mode != 'show'"
							v-model="formData.contract_type"
							:localdata="contractTypeList"
							placeholder="请选择合同类型"
						/>
						<span v-else>{{getLabel(contractTypeList, formData.contract_type)}}</span>
					</uni-forms-item>
					<uni-forms-item label="原合同开始日期" required name="original_start_date">
						<uni-datetime-picker
							type="date"
							:clear-icon="false"
							v-model="formData.original_start_date"
							v-if="mode != 'show'" />
						<span v-else>{{formData.original_start_date}}</span>
					</uni-forms-item>
					<uni-forms-item label="原合同结束日期" required name="original_end_date">
						<uni-datetime-picker
							type="date"
							:clear-icon="false"
							v-model="formData.original_end_date"
							v-if="mode != 'show'" />
						<span v-else>{{formData.original_end_date}}</span>
					</uni-forms-item>
				</view>

				<!-- 续签信息 -->
				<view class="form-card">
					<view class="form-card-title">续签信息</view>
					<uni-forms-item label="续签开始日期" required name="renew_start_date">
						<uni-datetime-picker
							type="date"
							:clear-icon="false"
							v-model="formData.renew_start_date"
							v-if="mode != 'show'" />
						<span v-else>{{formData.renew_start_date}}</span>
					</uni-forms-item>
					<uni-forms-item label="续签结束日期" required name="renew_end_date">
						<uni-datetime-picker
							type="date"
							:clear-icon="false"
							v-model="formData.renew_end_date"
							v-if="mode != 'show'" />
						<span v-else>{{formData.renew_end_date}}</span>
					</uni-forms-item>
					<uni-forms-item label="续签期限(年)" required name="renew_years">
						<uni-number-box v-model="formData.renew_years" :min="1" :max="10" v-if="mode != 'show'" />
						<span v-else>{{formData.renew_years}}年</span>
					</uni-forms-item>
					<uni-forms-item label="续签原因" required name="reason">
						<textarea
							placeholder-style="color:#c0c4cc"
							v-model="formData.reason"
							placeholder="请输入续签原因"
							class="form-textarea"
							v-if="mode != 'show'" />
						<span v-else>{{formData.reason}}</span>
					</uni-forms-item>
					<uni-forms-item label="备注" name="remark">
						<textarea
							placeholder-style="color:#c0c4cc"
							v-model="formData.remark"
							placeholder="请输入备注"
							class="form-textarea"
							v-if="mode != 'show'" />
						<span v-else>{{formData.remark}}</span>
					</uni-forms-item>
					<uni-forms-item label="上传附件">
						<xtUpload v-model="formData.file" xtype="path" :disabled="mode == 'show'"></xtUpload>
					</uni-forms-item>
				</view>
			</uni-forms>
		</scroll-view>

		<!-- 底部操作 -->
		<view class="footer_fixed">
			<button v-if="mode == 'edit'" class="form-btn form-btn-danger" @click="handleDel" :loading="saveLoading" :disabled="saveLoading">
				删除
			</button>
			<button v-if="mode != 'show'" class="form-btn form-btn-primary" @click="handleSave" :loading="saveLoading" :disabled="saveLoading">
				提交审批
			</button>
			<ticketd_b :workflow_key="'wf_empcontract'" v-if="formData.ticket_ && mode == 'show'" :t_id="formData.id" :ticket_="formData.ticket_"
				:ticket_data="ticket_data" @success="()=>{uni.navigateBack()}" ref="ticketd_b"></ticketd_b>
		</view>
	</view>
</template>

<script>
import ticketd_b from "../wf/ticketd_b.vue"
import ticketd from "../wf/ticketd.vue"
import searchSelect from "@/components/searchselect.vue"

export default {
	components: { ticketd_b, ticketd, searchSelect },
	data() {
		return {
			saveLoading: false,
			mode: 'show',
			t_id: null,
			formData: {
				employee: '',
				employee_name: '',
				belong_dept_name: '',
				post_name: '',
				id_number: '',
				phone: '',
				contract_type: '',
				original_start_date: '',
				original_end_date: '',
				renew_start_date: '',
				renew_end_date: '',
				renew_years: 1,
				reason: '',
				remark: '',
				file: '',
			},
			ticket_data: {},
			EmpApiobj: this.$api.employeeList,
			contractTypeList: [
				{ value: 10, text: '固定期限劳动合同' },
				{ value: 20, text: '无固定期限劳动合同' },
				{ value: 30, text: '以完成一定工作任务为期限的劳动合同' },
			],
			customRules: {
				contract_type: {
					rules: [{
						required: true,
						errorMessage: '合同类型不能为空'
					}]
				},
				original_start_date: {
					rules: [{
						required: true,
						errorMessage: '原合同开始日期不能为空'
					}]
				},
				original_end_date: {
					rules: [{
						required: true,
						errorMessage: '原合同结束日期不能为空'
					}]
				},
				renew_start_date: {
					rules: [{
						required: true,
						errorMessage: '续签开始日期不能为空'
					}]
				},
				renew_end_date: {
					rules: [{
						required: true,
						errorMessage: '续签结束日期不能为空'
					}]
				},
				renew_years: {
					rules: [{
						required: true,
						errorMessage: '续签期限不能为空'
					}]
				},
				reason: {
					rules: [{
						required: true,
						errorMessage: '续签原因不能为空'
					}]
				},
			},
		}
	},
	async onLoad(options) {
		let that = this;
		that.mode = options.mode ? options.mode : 'show';
		that.t_id = options.t_id ? options.t_id : null;
		if (that.t_id) {
			const res = await that.$api.empcontractItem(that.t_id);
			Object.assign(that.formData, res);
			if (that.formData.ticket_.state_.type == 1 && that.formData.create_by == uni.getStorageSync("userInfo").id) {
				that.mode = "edit";
			} else {
				that.mode = "show";
			}
		} else {
			that.fillNames();
		}
	},
	methods: {
		async fillNames() {
			const employee = await this.$api.employeeInfo();
			this.formData.employee_name = employee.name;
			this.formData.belong_dept_name = employee.belong_dept_name;
			this.formData.post_name = employee.post_name;
			this.formData.id_number = employee.id_number;
			this.formData.phone = employee.phone;
			this.formData.employee = employee.id;
			this.mode = "add";
		},
		async handleEmpChange(id) {
			if (!id) return;
			const obj = await this.$api.employeeItem(id);
			Object.assign(this.formData, {
				employee_name: obj.name,
				belong_dept_name: obj.belong_dept_name,
				post_name: obj.post_name,
				id_number: obj.id_number,
				phone: obj.phone,
			});
		},
		getLabel(list, value) {
			if (!list || value === undefined || value === null) return '';
			const item = list.find(i => String(i.value) === String(value));
			return item ? item.text : '';
		},
		async handleSave() {
			let that = this;
			that.saveLoading = true;
			try {
				await that.$refs.customForm.validate();
				await that.$api.empcontractCreate(that.formData);
				uni.showToast({ title: '提交成功', icon: 'success' });
				uni.navigateBack();
			} catch (err) {
				console.log('err', err);
			} finally {
				that.saveLoading = false;
			}
		},
		async handleDel() {
			let that = this;
			uni.showModal({
				title: '提示',
				content: '确定删除该续签申请吗？',
				success: async (res) => {
					if (res.confirm) {
						await that.$api.empcontractDelete(that.formData.id);
						uni.navigateBack();
					}
				}
			});
		},
	}
}
</script>

<style lang="scss" scoped>
.form-page {
	min-height: 100vh;
	background: #FAF8FF;
}

.form-scroll {
	padding: 0;
	padding-bottom: 180rpx;
}

.form-card {
	background: #FFFFFF;
	border-radius: 0;
	padding: 24rpx;
	margin-bottom: 0;
}

.form-card-title {
	font-size: 30rpx;
	font-weight: 600;
	color: #191B23;
	margin-bottom: 16rpx;
	padding-left: 16rpx;
	border-left: 6rpx solid #2BA471;
}

.form-textarea {
	width: 100%;
	min-height: 160rpx;
	border: 2rpx solid #C4C6D0;
	border-radius: 12rpx;
	padding: 16rpx;
	font-size: 28rpx;
	color: #191B23;
	box-sizing: border-box;
	background: #FFFFFF;
}

.form-btn {
	flex: 1;
	height: 80rpx;
	line-height: 80rpx;
	border-radius: 14rpx !important;
	font-size: 28rpx;
	font-weight: 500;
	border: none !important;
	letter-spacing: 2rpx;
}

.form-btn-primary {
	background: linear-gradient(135deg, #1F8C5E, #2BA471) !important;
	color: #fff !important;
}

.form-btn-danger {
	background: linear-gradient(135deg, #EF4444, #DC2626) !important;
	color: #fff !important;
}
</style>
