ygoa_miniapp/pages/work/edit/index.vue

<template>
	<page-meta root-font-size="system" />
	<view class="process_container">
		<!-- 主表单 -->
		<uni-card spacing="0">
			<view class="main_container">
				<uni-forms ref="$mainForm" :modelValue="mainFormValue" :rules="$mainFormRules" label-position="left"
					:label-width="125" :border="true">
					<view v-for="(elem, index) in formElements" :key="index">
						<uni-forms-item v-if="'0' != elem.canEdit && '8' != elem.type" :name="elem.elementId"
							:label="elem.elementName">
							<!-- 关联变量输入框 -->
							<!-- 计算出差天数 -->
							<uni-easyinput v-if="undefined != elem.bindTimeRange && elem.elementName == '出差天数'"
								:type="fieldTypeDict[elem.fieldType] || 'text'"
								:value="calculateBusinessDifference(elem, formElements)" placeholder=""
								:disabled="true"></uni-easyinput>

							<uni-easyinput v-else-if="undefined != elem.bindTimeRange"
								:type="fieldTypeDict[elem.fieldType] || 'text'"
								:value="calculateTimeDifference(elem, formElements)" placeholder=""
								:disabled="true"></uni-easyinput>
							<!-- 金额转大写 -->
							<uni-easyinput v-else-if="elem.elementName.endsWith('大写')" placeholder=""
								:value="computedNumberToChineseCurrency(elem, formElements)" :disabled="true" ></uni-easyinput>
							<!-- 主表关联变量输入框 -->
							<!-- 数值输入框 -->
							<uni-easyinput v-else-if="'1' == elem.fieldType && elem.BddzText" type="digit"
								:value="computedBddzTextValue(elem)" @input="digitInput($event, elem)" placeholder=""
								:disabled="true"></uni-easyinput>
							<!-- 输入框 -->
							<uni-easyinput v-else-if="elem.BddzText" :type="fieldTypeDict[elem.fieldType] || 'text'"
								:value="computedBddzTextValue(elem)" placeholder="" :disabled="true"></uni-easyinput>
							<!-- 数值输入框 -->
							<uni-easyinput v-else-if="'0' == elem.type && '1' == elem.fieldType"
								:disabled="'0' == elem.canEdit" type="digit"
								:placeholder="'0' == elem.canEdit ? '' : '请输入内容'" @input="digitInput($event, elem)"
								v-model="elem.defaultValue"
								placeholderStyle="font-size: calc(14px + 1.2*(1rem - 16px))"></uni-easyinput>
							<!-- 输入框 -->
							<uni-easyinput v-else-if="'0' == elem.type" :disabled="'0' == elem.canEdit"
								:type="fieldTypeDict[elem.fieldType] || 'text'"
								:placeholder="'0' == elem.canEdit ? '' : '请输入内容'" v-model="elem.defaultValue"
								placeholderStyle="font-size: calc(14px + 1.2*(1rem - 16px))"></uni-easyinput>
							<!-- 富文本输入框 -->
							<uni-easyinput v-else-if="'1' == elem.type" :disabled="'0' == elem.canEdit"
								:placeholder="'0' == elem.canEdit ? '' : '请输入内容'" v-model="elem.defaultValue"
								placeholderStyle="font-size: calc(14px + 1.2*(1rem - 16px))"
								type="textarea"></uni-easyinput>
							<!-- 下拉框 -->
							<picker class="picker_container" v-else-if="'2' == elem.type"
								@change="bindPickerChange($event, elem)" :value="elem.defaultValue"
								:range="formatDict(elem.typeDetail.enum)">
								<view class="uni-input input_text">
									<!-- 设置默认值为第一个选项 -->
									{{ elem.defaultValue ? elem.defaultValue : elem.defaultValue =
										elem.typeDetail.enum[0].enumVname }}
								</view>
							</picker>
							<!-- 数据选择器 -->
							<uni-data-checkbox v-else-if="'4' == elem.type" v-model="elem.defaultValue"
								:localdata="formatCheckbox(elem)"
								@change="changeDataSingleCheckBox($event, elem)"></uni-data-checkbox>
							<uni-data-checkbox v-else-if="'5' == elem.type" multiple v-model="elem.defaultValue"
								:localdata="formatCheckbox(elem)"
								@change="changeDataCheckBox($event, elem)"></uni-data-checkbox>
							<!-- 开始时间选择器 -->
							<uni-datetime-picker :end="formElements[elem.endElemIndex].defaultValue"
								@change="setTimeRange(elem)"
								v-else-if="'9' == elem.type && undefined != elem.endElemIndex"
								v-model="elem.defaultValue" :clear-icon="false" type="datetime" />
							<!-- 结束时间选择器 -->
							<uni-datetime-picker :start="formElements[elem.startElemIndex].defaultValue"
								@change="setTimeRange(elem)"
								v-else-if="'9' == elem.type && undefined != elem.startElemIndex"
								v-model="elem.defaultValue" :clear-icon="false" type="datetime" />
							<!-- 其他时间选择器 -->
							<!-- 年月日 时分秒 -->
							<uni-datetime-picker v-else-if="'9' == elem.type && BUKA_MODELID != processInfo.modelId"
								v-model="elem.defaultValue" type="datetime" />
							<!-- 补卡流程专用 -->
							<uni-datetime-picker v-else-if="'9' == elem.type && BUKA_MODELID == processInfo.modelId"
								v-model="elem.defaultValue" type="datetime"
								:start="`${formElements[0].defaultValue} 00:00:00`"
								:end="`${formElements[0].defaultValue} 23:59:59`" @change="bukaTimeChange" />
							<!-- 年月日 -->
							<uni-datetime-picker v-else-if="'3' == elem.type" v-model="elem.defaultValue" type="date" />
							<!-- 签名 -->
							<view v-else-if="'13' == elem.type">
								<view v-if="elem.defaultValue == ''">
									<uni-row>
										<uni-col :span="24">
											<button type="primary" @click="handleSignature(index)">手动签名</button>
										</uni-col>
										<uni-col :span="24">
											<button style="margin-top: 5px;" type="primary" @click="onclickAutosealButton(index)">一键签名</button>
										</uni-col>
									</uni-row>
								</view>
								<view v-else class="signature_img">
									<img style="width: 100%;" mode="widthFix" @click="handleSignature(index)"
										:src="config.baseUrlPre + elem.sealImgPath"
										:alt="elem.elementName + '签名'" />
								</view>
							</view>
						</uni-forms-item>
					</view>
				</uni-forms>
			</view>
		</uni-card>
		<!-- 重复表单 -->
		<view v-if="repeatingForm.elementItem.length > 0" class="repeating_table">
			<uni-card v-for="(form, tableIndex) in repeatingForm.elements" spacing="0" :key="tableIndex">
				<uni-forms :ref="(el) => $repeatingForms[tableIndex] = el" :modelValue="repeatingFormsValue[tableIndex]"
					:rules="$repFormRules" label-position="left" :label-width="125" :border="true">
					<uni-forms-item :name="elem.tableField" v-for="(elem, itemIndex) in form"
						:label="repeatingForm.elementItem[itemIndex].elementName.slice(3)" :key="itemIndex">
						<!-- 自定义关联变量 -->
						<uni-easyinput v-if="repeatingForm.elementItem[itemIndex].bddzText" :placeholder="''"
							:type="fieldTypeDict[repeatingForm.elementItem[itemIndex].fieldType.value] || 'text'"
							placeholderStyle="font-size: calc(14px + 1.2*(1rem - 16px))"
							:value="calculateRepeatingFormExpression(elem, form)" :disabled="true"></uni-easyinput>
						<!-- 数值输入框 -->
						<uni-easyinput v-else-if="'1' == repeatingForm.elementItem[itemIndex].fieldType.value"
							placeholder="请输入内容" v-model="elem.defaultValue" @input="digitInput($event, elem)"
							placeholderStyle="font-size: calc(14px + 1.2*(1rem - 16px))" type="digit"></uni-easyinput>
						<!-- 输入框 -->
						<uni-easyinput v-else placeholder="请输入内容" v-model="elem.defaultValue"
							placeholderStyle="font-size: calc(14px + 1.2*(1rem - 16px))" type="text"></uni-easyinput>
					</uni-forms-item>
				</uni-forms>
				<view class="repeating_table_button_container">
					<uni-row>
						<uni-col :span="10" :offset="1">
							<button @click="addRepeatingFormItem(tableIndex)" type="primary">新增</button>
						</uni-col>
						<uni-col :span="10" :offset="2">
							<button @click="delRepeatingFormItem(tableIndex)"
								:disabled="repeatingForm.elements.length <= 1" type="warn">删除</button>
						</uni-col>
					</uni-row>
				</view>
			</uni-card>
		</view>
		<!-- 上传附件 -->
		<view class="file_picker_container">
			<uni-card title="上传附件" :extra="`${fileList.length}/50`" spacing="0">
				<uni-file-picker ref="filePicker" v-model="fileList" :auto-upload="true" mode="list" :limit="50"
					:limitLength="50" file-mediatype="all" @select="handleFileSelect" @progress="handleFileProgress"
					@success="handleFileSuccess" @fail="handleFileFail" @delete="handleFileDelete" />
			</uni-card>
		</view>
		<view class="submit_button_container">
			<uni-card spacing="0" padding="0">
				<button :disabled="!button_state" :loading="!button_state" type="primary" class="submit_button"
					@click="submitProcess">提交</button>
			</uni-card>
		</view>
	</view>
	<view style="height: 5px; margin-top: 10px;"></view>
	<!-- 签字版弹出层 -->
	<uni-popup ref="signaturePopup" @maskClick="closeSignaturePopup">
		<view class="signature_container" :class="{ 'signature_container_landscape': isLandscape }">
			<view class="signature_content">
				<l-signature ref="signatureRef" v-if="signaturePopupShow" :landscape="isLandscape" :penSize="8"
					:minLineWidth="4" :maxLineWidth="12" :openSmooth="true" :preferToDataURL="true"
					backgroundColor="#ffffff" penColor="black"></l-signature>
			</view>
			<view class="signature_button_container">
				<uni-row :gutter="10">
					<uni-col :span="6">
						<button type="warn" @click="onclickSignatureButton('undo')">撤销</button>
					</uni-col>
					<uni-col :span="6">
						<button type="warn" @click="onclickSignatureButton('clear')">清空</button>
					</uni-col>
					<uni-col :span="6">
						<button type="primary" @click="onclickSignatureButton('save')">保存</button>
					</uni-col>
					<uni-col :span="6">
						<button @click="onclickSignatureButton('landscape')">全屏</button>
					</uni-col>
					<!-- <uni-col :span="24">
						<button type="primary" @click="onclickAutosealButton()">一键签名</button>
					</uni-col> -->
				</uni-row>
			</view>
		</view>
	</uni-popup>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, computed, nextTick } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useUserStore } from '@/store/user.js'
import $modal from '@/plugins/modal.js'
import $tab from '@/plugins/tab.js'
import { convertToChineseCurrency } from '@/utils/ygoa.js'
import { calCommonExp } from '@/utils/rpn.js'
import { getProcessInfo, getProcessForm, submitProcessForm, uploadFile, getAttendanceSegment } from '@/api/work.js'
import { useConfigStore } from '@/store/config.js'
import { getProcessFlowInfo, getProcessFormInfo, getProcessFormInfoInFlow, getProcessFlow, submitProcessFlow, cancelProcessFlow, uploadSignatureImg, uploadSignatureBoardImg, getSeal } from '@/api/process.js'
import config from '@/config.js'

const configStore = useConfigStore()
const fieldTypeDict = {
	'0': 'text',
	'1': 'digit'
}
//补卡申请流程模板id
const BUKA_MODELID = ref('995804554666003')
let processInfo = reactive({
	modelName: '流程申请',
	reqOffice: 0,
	control: '',
	formId: '',
	modelId: '',
	tmodelId: '',
	isMoreIns: '',
	pathJudgeType: '',
	form: []
})
const userStore = useUserStore()
const title = ref('')
//考勤页面传入的补卡信息
const bukaObj = ref({
	bukaDate: '',
	bukaType: '',
	bukaTime: ''
})
onLoad((options) => {
	const { modelName, modelId, control, bukaDate, bukaType } = options
	processInfo.modelName = modelName
	processInfo.modelId = modelId
	processInfo.control = control
	title.value = userStore.user.name + '的' + processInfo.modelName
	// 设置导航栏标题
	uni.setNavigationBarTitle({
		title: title.value
	});
	if (bukaDate && bukaType) {
		const workStartTime = configStore.signInTimeRange?.[1] || "09:00:00"
		const workEndTime = configStore.signOutTimeRange?.[0] || "17:30:00"
		const bukaTime = bukaDate + ' ' + ('上班' == bukaType ? workStartTime : workEndTime)
		bukaObj.value = { bukaDate, bukaType, bukaTime }
	}
})

onMounted(() => {
	initProcessInfo().then(() => {
		initProcessForm()
	})
})

function initProcessInfo() {
	return new Promise<void>((resolve, reject) => {
		getProcessInfo(processInfo)
			.then(({ returnParams }) => {
				const { formId, tmodelId, isMoreIns, pathJudgeType, reqOffice } = returnParams.flow[0]
				processInfo.formId = formId
				processInfo.tmodelId = tmodelId
				processInfo.isMoreIns = isMoreIns
				processInfo.pathJudgeType = pathJudgeType
				processInfo.reqOffice = reqOffice
				resolve()
			})
	})
}

const formElements = ref([])
const repeatingForm = ref({
	elementItem: [],
	elements: []
})
const hideArr=['冲','借款','借款单号','结余','申请日期']
function initProcessForm() {
	getProcessForm(userStore.user, processInfo).then(({ returnParams }) => {
		returnParams.formElements.forEach(element => {
			if (hideArr.includes(element.elementName)) {
				element.type = "8";
			}
		});
		//对补卡申请的时间选择器进行处理
		if (BUKA_MODELID.value == processInfo.modelId) {
			returnParams.formElements.forEach(element => {
				if (element.type === "9" || "日期" == element.elementName) {
					element.type = "8";
				}
				if ("补卡类型" == element.elementName) {
					element.defaultValue = bukaObj.value.bukaType
				}
			});
			const dateElement = {
				defaultValue: bukaObj.value.bukaDate || new Date().toISOString().substring(0, 10),
				elementName: '补卡日期',
				type: '3'
			}
			const timeElement = {
				defaultValue: bukaObj.value.bukaTime,
				elementName: '补卡时间',
				type: '9'
			}
			returnParams.formElements.splice(0, 0, dateElement)
			returnParams.formElements.splice(8, 0, timeElement)
			formElements.value = returnParams.formElements
		} else {
			formElements.value = returnParams.formElements
		}
		repeatingForm.value = returnParams.repeatingForm
		// console.log('formElements', formElements.value);
		getValidateRules()
		computedMainFormValue()
		// 生成第一个重复表数据
		if (repeatingForm.value) {
			addRepeatingFormItem(0)
		}
		bindTimeRangeData()
	})
}

//单选框(补卡类型)
function changeDataSingleCheckBox(e, elem) {
	// console.log('单选框切换事件',e.detail.value);
	const workStartTime = configStore.signInTimeRange[0]?.[1] || "09:00:00"
	const workEndTime = configStore.signOutTimeRange[1]?.[0] || "17:30:00"
	// console.log(workStartTime)
	if (BUKA_MODELID.value == processInfo.modelId && '' != formElements.value[0].defaultValue) {
		if ('上班' == e.detail.value) {
			formElements.value[8].defaultValue = formElements.value[0].defaultValue + ' ' + workStartTime
		} else if ('下班' == e.detail.value) {
			formElements.value[8].defaultValue = formElements.value[0].defaultValue + ' ' + workEndTime
		}
	}
}

const timeRangeItems = ref([
	['开始时间', '结束时间', '多少小时'],
	['出发时间', '预计返回时间'],
	['出差时间', '返回时间', '出差天数'],
	['出门时间', '预计返回时间'],
	['开始时间', '结束时间', '合计小时'],
])
// 关联时间变量
function bindTimeRangeData() {
	return new Promise<void>((resolve) => {
		timeRangeItems.value.forEach((range) => {
			const [startName, endName, bindName] = range;

			// 找到 startName 和 endName 的索引
			const startIndex = formElements.value.findIndex((item) => item.elementName === startName);
			const endIndex = formElements.value.findIndex((item) => item.elementName === endName);

			const formatDate = (date) => {
				const pad = (num) => num.toString().padStart(2, '0');
				return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`;
			}

			// 只有找到 startName 和 endName 后，才检查 bindName
			if (startIndex !== -1 && endIndex !== -1) {
				formElements.value[startIndex].defaultValue = formatDate(new Date())
				if (bindName) {
					const bindIndex = formElements.value.findIndex((item) => item.elementName === bindName);
					if (bindIndex !== -1) {
						// 所有匹配项都存在，保存索引
						formElements.value[startIndex].endElemIndex = endIndex;
						formElements.value[endIndex].startElemIndex = startIndex;
						formElements.value[bindIndex].bindTimeRange = {
							startIndex,
							endIndex
						};
						setAttendanceSegment() // 获取班次信息
					}
				} else {
					// 没有 bindName，仅保存 start 和 end 的索引
					formElements.value[startIndex].endElemIndex = endIndex;
					formElements.value[endIndex].startElemIndex = startIndex;
				}
				// TODO 加班开始时间默认当天下班时间 请假时间默认当天上班时间
			}
		});
		resolve(); // 返回一个 resolved 状态的 Promise
	});
}
// 计算时间差
function calculateBusinessDifference(item, form) {
	return item.defaultValue = (calculateTimeDifference(item, form) / 7).toFixed(2)
}
function calculateTimeDifference(item, form) {
	// 获取 开始时间 和 结束时间
	const { startIndex, endIndex } = item.bindTimeRange;
	const startTime = new Date(form[startIndex].defaultValue);
	const endTime = new Date(form[endIndex].defaultValue);

	// 检查时间是否合法
	if (isNaN(startTime.getTime()) || isNaN(endTime.getTime())) {
		return item.defaultValue = 0
	}
	// 请假申请的时间差 表单项为合计小时
	const type = item.elementName == '合计小时' ? '非工作时间' : '工作时间'
	// 计算时间差
	const timeDifferenceInHours = calculateWorkingHours(startTime, endTime, type);
	// const timeDifferenceInMs = endTime - startTime;
	// let timeDifferenceInHours = (timeDifferenceInMs / (1000 * 60 * 60)).toFixed(1);
	// let timeDifferenceInHours = (timeDifferenceInMs / (1000 * 60 * 60))
	// // 计算小数部分
	// const decimalPart = timeDifferenceInHours - Math.floor(timeDifferenceInHours)
	// if (decimalPart >= 0.5) {
	// 	// 如果小数部分大于等于 0.5，向上取整到 0.5 的倍数
	// 	timeDifferenceInHours = Math.floor(timeDifferenceInHours) + 0.5;
	// } else {
	// 	// 如果小数部分小于 0.5，向下取整到 0.5 的倍数
	// 	timeDifferenceInHours = Math.floor(timeDifferenceInHours);
	// }
	// 保存到 defaultValue
	return item.defaultValue = Number(timeDifferenceInHours.toFixed(2));
}
let workingPeriods = []
let workDays = [] // 0为周日
function setAttendanceSegment() {
	getAttendanceSegment(userStore.user.unitId).then(({ returnParams }) => {
		const workTime = returnParams[0].work_time.split(';')
		workDays = returnParams[0].work_days.split(',')
		for (const time of workTime) {
			if (time == '') continue
			const times = time.split(',')
			const obj = {
				start: times[0],
				end: times[1]
			}
			workingPeriods.push(obj)
		}
		if (workingPeriods.length == 0) {
			workingPeriods = [
				{ start: "09:00", end: "12:00" }, // 上午
				{ start: "13:30", end: "17:30" }, // 下午
			]
		}
		workDays = workDays.map(item => Number(item))
		const sundayIndex = workDays.findIndex(item => item == 7)
		// console.log('workDays: ',workDays);
		if (sundayIndex != -1) {
			workDays[sundayIndex] = 0
		}
		if (workDays.length == 0) {
			workDays = [1, 2, 3, 4, 5, 6, 0] // 0为周日
		}
	})
}
function calculateWorkingHours(startTime, endTime, type) {
	// 将时间字符串解析为分钟数
	const formatTime = (timeString) => {
		const [hours, minutes] = timeString.split(":").map(Number)
		return hours * 60 + minutes
	};
	// 计算两个时间段的重叠部分
	const calculateOverlap = (start1, end1, start2, end2) => {
		const overlapStart = Math.max(start1, start2)
		const overlapEnd = Math.min(end1, end2)
		return Math.max(0, overlapEnd - overlapStart) // 如果无重叠返回 0
	};
	// 将 Date 转化为当天的分钟数
	const dateToMinutes = (date) => date.getHours() * 60 + date.getMinutes()
	// 判断日期是否是工作日
	const isRestdays = (date) => !workDays.includes(date.getDay())
	// 确保 startTime 和 endTime 是 Date 类型
	if (!(startTime instanceof Date) || !(endTime instanceof Date)) {
		throw new Error("startTime 和 endTime 必须是 Date 类型")
	}

	// 将时间范围分解为每天的计算
	const startDate = new Date(startTime)
	const endDate = new Date(endTime)
	startDate.setHours(0, 0, 0, 0)
	endDate.setHours(0, 0, 0, 0)

	let totalMinutes = 0
	// 遍历时间范围的每一天
	for (
		let currentDate = new Date(startDate);
		currentDate <= endDate;
		currentDate.setDate(currentDate.getDate() + 1)
	) {

		const isStartDay = currentDate.getTime() === startDate.getTime();
		const isEndDay = currentDate.getTime() === endDate.getTime();

		// 当天的起始和结束时间
		const dayStart = isStartDay ? dateToMinutes(startTime) : 0;
		const dayEnd = isEndDay ? dateToMinutes(endTime) : 1440; // 1440 = 24 * 60
		// TODO 改为配置选择
		if (type == "工作时间") {
			// 如果当前日期不是工作日，跳过
			if (isRestdays(currentDate)) continue;
			// 计算工作时间段内的时间
			workingPeriods.forEach((period) => {
				const periodStart = formatTime(period.start);
				const periodEnd = formatTime(period.end);
				totalMinutes += calculateOverlap(dayStart, dayEnd, periodStart, periodEnd);
			});
		} else if (type == "非工作时间") {
			if (isRestdays(currentDate)) {
				// 计算非工作日时间差
				const midnight = new Date(currentDate)
				midnight.setHours(24, 0, 0, 0)
				const timeDiffInMs = dayEnd - dayStart
				totalMinutes += timeDiffInMs
				continue
			}
			// 计算非工作时间段的时间
			let nonWorkingMinutes = 0;
			let current = dayStart;
			for (const period of workingPeriods) {
				const periodStart = formatTime(period.start);
				const periodEnd = formatTime(period.end);

				if (current < periodStart) {
					nonWorkingMinutes += calculateOverlap(current, dayEnd, current, periodStart);
				}
				current = Math.max(current, periodEnd);
			}
			if (current < dayEnd) {
				nonWorkingMinutes += dayEnd - current;
			}
			totalMinutes += nonWorkingMinutes;
		}
	}

	// 转换为小时
	return totalMinutes / 60;
}
function setTimeRange(e) {
	// console.log('setTimeRange', e)
}
// 生成人民币大写
function computedNumberToChineseCurrency(item, form) {
	const elem = form.find(elem => !elem.elementName.endsWith('大写') && (elem.BddzText == item.BddzText || elem.elementName == item.BddzText.slice(3)))
	if(elem != null) {
		return item.defaultValue = convertToChineseCurrency(elem.defaultValue);
	} else {
		return '';
	}
}
function computedBddzTextValue(item) {
	const mainIndex = formElements.value.findIndex(({ elementName }) => elementName == item.BddzText.slice(3))
	const reIndex = repeatingForm.value.elementItem.findIndex(({ elementName }) => elementName == item.BddzText)
	if (mainIndex != -1) {
		return item.defaultValue = formElements.value[mainIndex].defaultValue
	}
	if (reIndex != -1) {
		return computedValueToRepeatingForm(item)
	}
}
//合计金额计算
function computedValueToRepeatingForm(item) {
	const index = repeatingForm.value.elementItem.findIndex(({ elementName }) => elementName.slice(3) == item.BddzText.slice(3))
	let result = 0
	for (const formItem of repeatingForm.value.elements) {
		result += Number(formItem[index].defaultValue) || 0
	}
	return item.defaultValue = Number(result.toFixed(2))
}

// 下拉框
function bindPickerChange(e, item) {
	const index = e.detail.value;
	item.defaultValue = item.typeDetail.enum[index].enumVname
}
function formatDict(dict) {
	return dict.map(({ enumVname }) => enumVname)
}
//数据选择器
function formatCheckbox(elem) {
	let dict = elem.typeDetail.enum
	// elem['checkBox'] = ''
	return dict.map((item, index) => ({
		text: item.enumVname,
		value: item.enumVname
	}));
}

function changeDataCheckBox(e, elem) {
	elem['checkBox'] = e.detail.value.join(",")
}


// 新增重复表表单
function addRepeatingFormItem(index) {
	const form = repeatingForm.value.elementItem.map(({ tableField, bddzText }) => {
		const item = {
			name: tableField,
			defaultValue: '',
			bddzText
		}
		return item
	})
	repeatingForm.value.elements.splice(index + 1, 0, form)
}
// 删除重复表表单
function delRepeatingFormItem(index) {
	$modal.confirm('', '确认删除该详情表数据')
		.then(() => {
			repeatingForm.value.elements.splice(index, 1)
			$repeatingForms.value.splice(index, 1)
		})
		.catch(() => { })
}
function digitInput(event, item) {
	// 获取输入框当前的值
	let currentValue = event;

	// 过滤非数字和小数点的字符
	currentValue = currentValue.replace(/[^0-9.]/g, '');

	// 处理前导零的情况：
	// 如果当前值没有小数点（即是整数），去掉前导零
	if (currentValue.indexOf('.') === -1) {
		currentValue = currentValue.replace(/^0+(?=\d)/, ''); // 只有当有数字跟随时才去掉前导零
	} else {
		// 如果包含小数点，处理整数部分的前导零，保留小数部分
		let parts = currentValue.split('.');
		parts[0] = parts[0].replace(/^0+(?=\d)/, ''); // 只去掉整数部分的前导零
		currentValue = parts.join('.'); // 重新拼接
	}

	// 防止多个小数点
	const parts = currentValue.split('.');
	let finalValue;
	if (parts.length > 2) {
		// 如果有多个小数点，保留第一个小数点及后续数字
		finalValue = parts[0] + '.' + parts[1];
	} else {
		finalValue = currentValue;
	}

	// 更新最终结果到 item
	nextTick(() => {
		item.defaultValue = finalValue;
		event = finalValue; // 更新输入框的值
	});

	return event;
}
// 计算重复表关联变量表达式结果值
function calculateRepeatingFormExpression(item, form) {
	// 提取表达式中的变量名
	const variablePattern = /my:[\u4e00-\u9fa5]+/g;
	let match;
	let expression = item.bddzText
	// 替换表达式中的变量
	while ((match = variablePattern.exec(item.bddzText)) !== null) {
		const variableName = match[0]; // 完整变量名
		// 找到 重复表 中对应的索引
		const index = repeatingForm.value.elementItem.findIndex(item => item.elementName === variableName);
		if (index !== -1) {
			const value = form[index]?.defaultValue || 0;
			expression = expression.replace(match[0], value);
		} else {
			// 未匹配到的变量替换为 0
			expression = expression.replace(match[0], 0);
		}
	}
	if (/[^0-9\+\-\*\/\(\)\.]/.test(expression)) {
		console.error('错误的表达式:', expression);
		$modal.msg('自动计算错误，请手动输入')
		return item.defaultValue = 0;
	}
	return item.defaultValue = Number(calCommonExp(expression).toFixed(2)); // 返回填充后的表达式
}

const fileList = ref([]) // 文件列表
const fileSeqs = ref([])
const filePicker = ref(null)
async function handleFileSelect(files) { // 新增文件
	// console.log('handleFileSelect', files.tempFiles)
	files.tempFiles.forEach(file => {
		const data = {
			name: file.name,
			filePath: file.path,
		}
		uploadFile(data)
			.then(res => {
				file.seq = res.returnParams
				fileSeqs.value.push({ 'seq': res.returnParams, 'path': file.path })
				fileList.value.push(file)
				$modal.msgSuccess('文件' + data.name + '上传成功')
				// console.log('handleFileSelect fileList: ',fileList);
				// file.seq = res.returnParams
			})
			.catch(err => {
				$modal.msgError('文件' + data.name + '上传失败,请删除重新上传')
				switch (err) {
					case -201:
						console.log('文件上传失败 未找到该文件');
						break;
					case -20201:
						console.log('文件上传失败 返回值不是JSON字符串');
						break;
				}
			})
	})
	// console.log('UploadFiles', files.tempFiles);
}
function handleFileProgress(file, progress) {
	// console.log('handleFileProgress', file, progress);
}
function handleFileSuccess(file, res) {
	// console.log('handleFileSuccess', file, res);
}
function handleFileFail(file, err) {
	// console.log('handleFileFail', file, err);
}
function handleFileDelete(file) { // 移除文件
	// console.log('handleDelete', file)
	fileSeqs.value.splice(fileSeqs.value.findIndex(({ path }) => path == file.tempFilePath))
}

//表单校验
const $mainForm = ref(null)
const mainFormValue = ref({})
const $repeatingForms = ref([])
const repeatingFormsValue = ref([])
const formatTypeDict = {
	'0': 'string',
	'1': 'number'
}
// 校验重复表
function validateRepeatingForm() {
	// 设置重复表校验数据
	repeatingFormsValue.value = repeatingForm.value.elements.map((item, index) => {
		return computed(() => {
			const obj = {};
			item.forEach(({ name, defaultValue }) => {
				obj[name] = defaultValue;
			});
			return obj;
		}).value
	})
	// console.log('$repeatingForms: ',$repeatingForms.value);
	// console.log('repeatingFormsValue: ',repeatingFormsValue.value);
	// 重复表数据校验
	// BUG validate()校验无效
	$repeatingForms.value.forEach((form) => {
		// console.log('form: ',form);
		form.validate().then(res => {
			console.log('验证成功：', res);
		}).catch(err => {
			console.log('验证失败：', err);
		});
	})
}
function validateRepeatingForm2() {
	// 设置重复表校验数据
	repeatingFormsValue.value = repeatingForm.value.elements.map((item, index) => {
		return computed(() => {
			const obj = {};
			item.forEach(({ name, defaultValue }) => {
				obj[name] = defaultValue;
			});
			return obj;
		}).value
	})
	let flag = false
	repeatingFormsValue.value.forEach((item, index) => {
		let ItemIndex = 0
		for (const elem in item) {
			if (item[elem] == '') {
				const name = repeatingForm.value.elementItem[ItemIndex].elementName.slice(3)
				$modal.msgError(`详情表${name}数据填写错误`)
				flag = false
				return
			}
			ItemIndex++
		}
		flag = true
	})
	return flag
}
// 设置表单校验规则
const $mainFormRules = ref({})
const $repFormRules = ref({})
function getValidateRules() {
	$repFormRules.value = computed(() => {
		const obj = {};
		repeatingForm.value.elementItem.forEach(elem => {
			obj[elem.tableField] = {
				rules: [
					{
						required: true,
					},
					// {
					// 类型判断 数值型使用string会出错
					// formatTypeDict: formatTypeDict[elem.fieldType.value] || 'string',
					// }
				],
				label: elem.elementName.slice(3)
			};
		});
		return obj;
	}).value
	$mainFormRules.value = computed(() => {
		const obj = {};
		formElements.value.forEach(elem => {
			if (!('0' != elem.canEdit && '8' != elem.type)) return
			obj[elem.elementId] = {
				rules: [
					{
						required: '1' == elem.noNull,
					},
					// {
					// 	format: formatTypeDict[elem.fieldType] || 'string',
					// }
				],
				label: elem.elementName
			};
		});
		return obj;
	}).value
}

const button_state = ref(true)
function computedMainFormValue() {
	// 设置主表校验数据
	mainFormValue.value = computed(() => {
		const obj = {};
		formElements.value.forEach(elem => {
			if (!('0' != elem.canEdit && '8' != elem.type)) return
			obj[elem.elementId] = elem.defaultValue;
		});
		return obj;
	}).value
}
function submitProcess() { // 提交表单
	// 禁用提交按钮
	button_state.value = false
	// validateMainForm()
	computedMainFormValue()
	// console.log('mainFormValue: ',mainFormValue.value);
	// console.log('$mainFormRules: ',$mainFormRules.value);
	// console.log('$mainForm: ',$mainForm.value);
	// 主表数据校验
	$mainForm.value.validate().then(res => {

		// 重复表数据校验
		// validateRepeatingForm()
		if (!validateRepeatingForm2()) {
			button_state.value = true
			return
		}
		// 保存表单数据

		// processInfo.form = formElements.value.map(({ checkBox, tableField, defaultValue }) => {
		// 	// console.log('tableField: ',checkBox,tableField,defaultValue);
		// 	if(checkBox!==''){
		// 		const arr =testValue.value.split(",")
		// 		arr.forEach(item=>{
		// 			processInfo.form.push({name: tableField+"_showfxx", value: item})
		// 		})
		// 		return { name: tableField, value: testValue.value }
		// 	}
		// 	return { name: tableField, value: defaultValue }
		// })
		//补卡时间处理
		if (BUKA_MODELID.value == processInfo.modelId) {
			const workStartIndex = formElements.value.findIndex(element => element.elementName === "上班时间")
			const workEndIndex = formElements.value.findIndex(element => element.elementName === "下班时间")
			const workTypeIndex = formElements.value.findIndex(element => element.elementName === "补卡类型")
			const workTimeIndex = formElements.value.findIndex(element => element.elementName === "补卡时间")
			const workDateIndex = formElements.value.findIndex(element => element.elementName === "补卡日期")
			const DateIndex = formElements.value.findIndex(element => element.elementName === "日期")
			formElements.value[DateIndex].defaultValue = formElements.value[workDateIndex].defaultValue
			if ('上班' == formElements.value[workTypeIndex].defaultValue) {
				formElements.value[workStartIndex].defaultValue = formElements.value[workTimeIndex].defaultValue
			} else if ('下班' == formElements.value[workTypeIndex].defaultValue) {
				formElements.value[workEndIndex].defaultValue = formElements.value[workTimeIndex].defaultValue
			}
			// formElements.value.splice(workTimeIndex,1)
			// formElements.value.splice(workDateIndex,1)
			// console.log('f1',formElements.value);
		}
		const formArray = [];

		formElements.value.forEach(({ checkBox, tableField, defaultValue }) => {
			// if (checkBox) {
			// 	const items = checkBox.split(",").filter(item => item.trim() !== '');
			// 	items.forEach(item => {
			// 		formArray.push({ name: `${tableField}_showfxx`, value: item.trim() });
			// 	});
			// 	formArray.push({ name: tableField, value: checkBox });
			// } else {
			// 	formArray.push({ name: tableField, value: defaultValue });
			// }
			if (tableField != undefined) {
				formArray.push({ name: tableField, value: defaultValue });
			}
		});

		processInfo.form = formArray;
		console.log('f2', formArray);
		repeatingForm.value.elements.forEach((item, index) => {
			const newItem = item.map(({ name, defaultValue }) => {
				return {
					name: name + '_' + (index + 1),
					value: defaultValue
				}
			})
			processInfo.form.push(...newItem)
		})
		// 保存附件ID
		const seqs = fileSeqs.value.map(({ seq }) => seq)
		if (processInfo.reqOffice == 1 && seqs.length == 0) {
			button_state.value = true
			$modal.msgError('请上传附件')
			return
		}
		submitProcessForm(userStore.user, processInfo, seqs).then(res => {
			if (res.returnMsg.includes('提交失败')) {
				// 启用提交按钮
				button_state.value = true
				$modal.msgError(res.returnMsg)
			} else {
				$modal.msgSuccess(res.returnMsg)
				// 通知列表刷新数据
				uni.$emit('ReloadProcessData');
				setTimeout(() => {
					// 返回上一页
					$tab.navigateBack();
				}, 1000)
			}
		})
	}).catch(err => {
		button_state.value = true
		$modal.msgError('表单填写错误')
	});
}

	const signaturePopup = ref(null)
	const signatureRef = ref(null)
	const signaturePopupShow = ref(false)
	const isLandscape = ref(false)
	const signatureItemIndex = ref(-1)
	function handleSignature(index) {
		signatureItemIndex.value = index
		signaturePopup.value.open()
		initSignature()
	}
	// 初始化签字板
	function initSignature() {
		signaturePopupShow.value = false
		setTimeout(() => {
			signaturePopupShow.value = true
		}, 100)
	}
	// 点击签字板按钮
	function onclickSignatureButton(event) {
		// console.log('onclickSignatureButton: ', event);
		switch (event) {
			case 'undo':
				signatureRef.value.undo()
				break;
			case 'clear':
				signatureRef.value.clear()
				break;
			case 'save':
				signatureRef.value.canvasToTempFilePath({
					success: (res : LSignatureToFileSuccess) => {
						if (res.isEmpty) {
							$modal.msgError('签名不能为空!')
							return
						}
						// 判断上传文件是否是base64
						if (res.tempFilePath.substring(0, 'data:image/png;base64,'.length) == 'data:image/png;base64,') {
							const _fileData = res.tempFilePath
							uploadSignatureBoardImg(userStore.user.useId, _fileData, formElements.value[signatureItemIndex.value].tableField)
								.then(({ returnParams }) => {
									formElements.value[signatureItemIndex.value].defaultValue = returnParams.sealInsID
									formElements.value[signatureItemIndex.value].sealImgPath = returnParams.path
									signatureItemIndex.value = -1
									signaturePopupShow.value = false
									signaturePopup.value.close()
								})
						} else {
							// 转 base64
							wx.getFileSystemManager().readFile({
								filePath: res.tempFilePath,
								encoding: 'base64',
								success: fileData => {
									const _fileData = 'data:image/png;base64,' + fileData.data
									uploadSignatureBoardImg(userStore.user.useId, _fileData, formElements.value[signatureItemIndex.value].tableField)
										.then(({ returnParams }) => {
											formElements.value[signatureItemIndex.value].defaultValue = returnParams.sealInsID
											formElements.value[signatureItemIndex.value].sealImgPath = returnParams.path
											signatureItemIndex.value = -1
											signaturePopupShow.value = false
											signaturePopup.value.close()
										})
								}
							})
						}
					}
				} as LSignatureToTempFilePathOptions)
				break;
			case 'landscape':
				isLandscape.value = !isLandscape.value
				initSignature()
				break;
		}
	}
	function onclickAutosealButton(index) {
		if (signatureItemIndex.value != -1) index = signatureItemIndex.value
		getSeal(userStore.user.useId).then(({ returnParams }) => {
			formElements.value[index].defaultValue = returnParams.sealFileId.universalid
			formElements.value[index].sealImgPath = returnParams.sealFileId.path
			signaturePopupShow.value = false
			signaturePopup.value.close()
		})
	}
	function closeSignaturePopup() {
		signatureItemIndex.value = -1
		signaturePopupShow.value = false
	}
</script>

<style lang="scss" scoped>
.process_container {
	position: relative;

	::v-deep .uni-forms {
		.uni-forms-item__label {
			font-size: calc(1rem + 0px) !important;
			line-height: calc(1rem + 0px) !important;
			font-weight: 600;
		}

		.uni-forms-item__content {
			.uni-easyinput__content-textarea {
				font-size: calc(14px + 1.2*(1rem - 16px)) !important;
				font-weight: 500;
			}

			.uni-easyinput__content-input {
				font-size: calc(14px + 1.2*(1rem - 16px)) !important;
				font-weight: 500;
				color: #333;
			}

			.uni-date {
				.uni-icons {
					font-size: calc(22px + 1.2*(1rem - 16px)) !important;
					font-weight: 500;
				}

				.uni-date__x-input {
					height: auto;
					font-size: calc(14px + 1.2*(1rem - 16px)) !important;
					font-weight: 500;
				}
			}
		}
	}

	::v-deep button {
		font-size: calc(18px + .5*(1rem - 16px));
	}

	.main_container {
		// min-height: 30vh;
	}

	.picker_container {
		border: 1px solid #e5e5e5;
		background-color: #fff;
		border-radius: 4px;

		// box-sizing: border-box;
		.input_text {
			color: #333;
			font-size: calc(14px + .5*(1rem - 16px));
			line-height: 35px;
			height: 35px;
			padding: 0 0 0 10px;
		}
	}

	.repeating_table {
		::v-deep .uni-forms-item--border {
			padding: 5px 0 !important;
		}

		.repeating_table_button_container {
			margin-top: 5px;

			button {
				height: 36px;
				line-height: 36px;
				color: #fff;
			}

			.add {
				background-color: #1ca035;
			}

			.del {
				background-color: #e64340;
			}
		}
	}

	.file_picker_container {
		::v-deep .uni-card {
			.uni-card__header-content-title {
				font-size: calc(15px + .5*(1rem - 16px));
				font-weight: 700;
			}

			.uni-card__header-extra-text {
				font-size: calc(15px + .5*(1rem - 16px));
			}
		}
	}

	.is-disabled {
		color: #666 !important;
	}

	.submit_button_container {
		position: sticky;
		z-index: 10;
		width: 100%;
		bottom: 10px;

		.submit_button {
			background-color: #007aff !important;
			color: #fff !important;
		}

		.submit_button::after {
			border: 1px solid rgba(0, 0, 0, .2);
			border-radius: 10px;
			box-sizing: border-box;
			content: " ";
			height: 200%;
			left: 0;
			position: absolute;
			top: 0;
			-webkit-transform: scale(.5);
			transform: scale(.5);
			-webkit-transform-origin: 0 0;
			transform-origin: 0 0;
			width: 200%;
			border-top-width: 1px;
			border-right-width: 1px;
			border-bottom-width: 1px;
			border-left-width: 1px;
			border-top-style: solid;
			border-right-style: solid;
			border-bottom-style: solid;
			border-left-style: solid;
			border-top-color: rgba(0, 0, 0, 0.2);
			border-right-color: rgba(0, 0, 0, 0.2);
			border-bottom-color: rgba(0, 0, 0, 0.2);
			border-left-color: rgba(0, 0, 0, 0.2);
			border-image-source: initial;
			border-image-slice: initial;
			border-image-width: initial;
			border-image-outset: initial;
			border-image-repeat: initial;
			border-top-left-radius: 10px;
			border-top-right-radius: 10px;
			border-bottom-right-radius: 10px;
			border-bottom-left-radius: 10px;
		}
	}
}

::v-deep .uni-calendar__content {
	margin: -20px;
	margin-top: 20px;

	.uni-calendar__header {
		.uni-calendar__header-text {
			font-size: calc(14px + .5*(1rem - 16px)) !important;
		}

		.uni-calendar__backtoday {
			padding: 2px 8px 2px 10px !important;
			font-size: calc(0.75rem + 0px) !important;
		}
	}

	.uni-calendar__box {
		.uni-calendar__weeks {
			.uni-calendar__weeks-day {
				.uni-calendar__weeks-day-text {
					font-size: calc(14px + .5*(1rem - 16px)) !important;
				}
			}

			.uni-calendar__weeks-item {
				.uni-calendar-item__weeks-box-item {
					.uni-calendar-item__weeks-box-circle {
						width: calc(8px + .5*(1rem - 16px)) !important;
						height: calc(8px + .5*(1rem - 16px)) !important;
						top: calc(5px - .25*(1rem - 16px)) !important;
						right: calc(5px - .25*(1rem - 16px)) !important;
					}

					.uni-calendar-item__weeks-box-text {
						font-size: calc(14px + .5*(1rem - 16px)) !important;
					}

					.uni-calendar-item__weeks-lunar-text {
						font-size: calc(12px + .5*(1rem - 16px)) !important;
					}
				}
			}
		}
	}

	.uni-date-changed {
		.uni-date-changed--time-date {
			font-size: calc(14px + 1*(1rem - 16px)) !important;
		}

		.uni-datetime-picker-text {
			font-size: calc(14px + 1*(1rem - 16px)) !important;
		}
	}
}
</style>