ygoa_miniapp/pages/process/detail/index.vue

<template>
	<page-meta root-font-size="system" />
	<view class="process_detail_container">
		<uni-card>
			<view class="main_container">
				<uni-section titleFontSize="1.3rem" title="申请内容" type="line"></uni-section>
				<uni-forms ref="$mainForm" :rules="$mainFormRules" :modelValue="mainFormValue" label-position="left"
					:label-width="125" :border="true">
					<view v-for="(elem, index) in formElements" :key="index">
						<uni-forms-item
							v-if="!(elem.elementName.endsWith('审批') && '' == elem.defaultValue && ['0', undefined].includes(elem.canEdit)) && ('' != elem.defaultValue || 1 == elem.canEdit) && !(elem.elementName.endsWith('单号') || elem.elementName.endsWith('申请人'))"
							:label="elem.elementName" :name="elem.elementId">
							<view class="element_value_container">
								<view v-if="'1' == elem.canEdit && '8' != elem.type" class="element_value">
									<!-- 关联变量输入框 -->
									<!-- 计算出差天数 -->
									<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"
										placeholderStyle="font-size: calc(14px + 1.2*(1rem - 16px))" placeholder="请输入内容"
										v-model="elem.defaultValue" type="text"></uni-easyinput>
									<!-- 富文本框 -->
									<uni-easyinput v-else-if="'1' == elem.type"
										placeholderStyle="font-size: calc(14px + 1.2*(1rem - 16px))" placeholder="请输入内容"
										v-model="elem.defaultValue" 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" v-model="elem.defaultValue"
										type="datetime" />
									<!-- 年月日 -->
									<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>
								</view>
								<view
									v-else-if="typeof elem.sealImgPath === 'string' && elem.sealImgPath.startsWith('/shares')"
									class="signature_img">
									<img style="width: 100%;" mode="widthFix"
										:src="config.baseUrlPre + elem.sealImgPath" />
								</view>
								<view
									v-else-if="typeof elem.defaultValue === 'string' && elem.defaultValue.startsWith('/shares')"
									class="signature_img">
									<img style="width: 100%;" mode="widthFix"
										:src="config.baseUrlPre + elem.defaultValue" />
								</view>
								<text class="element_value" v-else>{{ Array.isArray(elem.defaultValue) ? elem.defaultValue.join(',') : elem.defaultValue }}</text>
							</view>
						</uni-forms-item>
					</view>
				</uni-forms>
			</view>
		</uni-card>
		<view class="repeating_table">
			<!-- 重复表 -->
			<!-- <uni-card v-if="flowInfo.seModel == '0' && repeatingFormNotEmpty" spacing="0" padding="0">
				<button @click="handleRepeatingForm" type="primary">查看明细</button>
			</uni-card> -->
			<uni-card v-if="!(flowInfo.seModel == '0' && repeatingFormNotEmpty)"
				v-for="(table, tableIndex) in repeatingForm.elements" spacing="0" :key="tableIndex">
				<uni-forms label-position="left" :label-width="125" :border="true">
					<uni-forms-item :name="elem.tableField" v-for="(elem, itemIndex) in table"
						: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, table)" :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" type="'text'"
							placeholderStyle="font-size: calc(14px + 1.2*(1rem - 16px))"></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>
			<!-- <uni-popup v-if="flowInfo.seModel == '0' && repeatingFormNotEmpty" ref="repeatingFormPopup">
				<uni-card margin="0px" spacing="0px" padding="0px">
					<view class="repeating_table_container">
						<uni-table :border="true" stripe>
							<uni-tr>
								<uni-th align="center" v-for="(item, index) in repeatingForm.elementItem" :key="index">
									{{ item.elementName.slice(3, 5) }}
								</uni-th>
							</uni-tr>
							<uni-tr v-for="(table, tableIndex) in repeatingForm.elements" :key="tableIndex">
								<uni-td align="center" v-for="(elem, itemIndex) in table" :key="itemIndex">
									{{ elem.defaultValue }}
								</uni-td>
							</uni-tr>
						</uni-table>
					</view>
				</uni-card>
			</uni-popup> -->
		</view>
		<!-- 明细 -->
		<!-- <view class="repeating_table_detail2">
			<uni-card v-if="flowInfo.seModel == '0' && repeatingFormNotEmpty">
				<uni-section titleFontSize="1.3rem" title="明细" type="line"></uni-section>
				<uni-forms ref="baseForm" :modelValue="baseFormData" v-for="(table, tableIndex) in repeatingForm.elements" :key="tableIndex">
					<uni-forms-item  v-for="(item, index) in repeatingForm.elementItem"
						:label="item.elementName.slice(3, 5)" :key="index">
						<text>{{table[index].defaultValue}}</text>
					</uni-forms-item>
				</uni-forms>
			</uni-card>
		</view> -->
		<view class="repeating_table_detail">
			<uni-card v-if="flowInfo.seModel == '0' && repeatingFormNotEmpty">
				<uni-section titleFontSize="1.3rem" title="明细" type="line"></uni-section>
				<view class="repeating_table_container">
					<uni-table :border="true" stripe>
						<uni-tr>
							<uni-th align="center" v-for="(item, index) in repeatingForm.elementItem" :key="index">
								{{ item.elementName.slice(3, 5) }}
							</uni-th>
						</uni-tr>
						<uni-tr v-for="(table, tableIndex) in repeatingForm.elements" :key="tableIndex">
							<uni-td align="center" v-for="(elem, itemIndex) in table" :key="itemIndex">
								{{ elem.defaultValue }}
							</uni-td>
						</uni-tr>
					</uni-table>
				</view>
			</uni-card>
		</view>
		<!-- 附件 -->
		<view v-for="(item, index) in fileList" :key="index">
			<uni-card v-if="item.files.length != undefined && item.files.length > 0">
				<uni-section titleFontSize="1.3rem" title="附件" type="line"></uni-section>
				<attachment-list @clickDelete="deleteFile" :canEdit="flowInfo.seModel == '1'"
					:attachments="item.files"></attachment-list>
			</uni-card>
		</view>
		<!-- 上传附件 -->
		<view v-if="processInfo.tinsId || flowInfo.seModel == '1'" class="file_picker_container">
			<uni-card title="上传附件" :extra="`${subFileList.length}/50`" spacing="0">
				<uni-file-picker ref="filePicker" v-model="subFileList" :auto-upload="true" mode="list" :limit="50"
					file-mediatype="all" @select="handleFileSelect" @progress="handleFileProgress"
					@success="handleFileSuccess" @fail="handleFileFail" @delete="handleFileDelete" />
			</uni-card>
		</view>
		<!-- 流转过程 -->
		<view>
			<uni-card>
				<view class="flow_step_container">
					<uni-section titleFontSize="1.3rem" title="流转过程" type="line"></uni-section>
					<up-steps :current="stepActive" activeColor="#18bc37" inactiveColor="#2979ff" direction="column">
						<view v-for="(step, index) in options" :key="index">
							<up-steps-item :contentClass="'redcontent'" v-if="step.state == 3"
								:title="step.title + ' 退回'" :desc="step.desc" :key="index" error></up-steps-item>
							<up-steps-item :contentClass="'redcontent'" v-else-if="step.state == 0"
								:title="step.title + ' 撤销'" :desc="step.desc" :key="index" error></up-steps-item>
							<up-steps-item v-else-if="index == stepActive" :title="step.title" :desc="step.desc"
								:key="index">
								<template #icon>
									<view class="active_step_circle">
										<text class="active_step_text">{{ index + 1 }}</text>
									</view>
								</template>
							</up-steps-item>
							<up-steps-item v-else :title="step.title" :desc="step.desc" :key="index"></up-steps-item>
							
						</view>
					</up-steps>
				</view>
			</uni-card>
		</view>
		<view v-if="processInfo.tinsId">
			<view class="remark_container">
				<uni-card>
					<uni-section titleFontSize="1.3rem" title="环节备注" type="line"></uni-section>
					<view class="remark_content">
						<uni-easyinput type="textarea" autoHeight v-model="remark" placeholder="请输入"
							placeholderStyle="font-size: calc(14px + 1.2*(1rem - 16px))"></uni-easyinput>
					</view>
				</uni-card>
			</view>
		</view>
		<view v-if="processInfo.tinsId" class="approve_button">
			<uni-card spacing="0" padding="0">
				<button :disabled="!button_state" :loading="!button_state" type="primary"
					@click="handleSubmitProcess('1')">
					{{ flowInfo.seModel == '0' ? '通过' : '提交' }}
				</button>
			</uni-card>
		</view>
	</view>
	<view v-if="processInfo.tinsId && flowInfo.seModel == '0'">
		<view class="reject_button">
			<uni-card spacing="0" padding="0" :is-shadow="false" :border="false">
				<uni-row>
					<uni-col :span="11">
						<button :disabled="!button_state" :loading="!button_state" type="warn"
							@click="handleSubmitProcess('0')">退回上一级</button>
					</uni-col>
					<uni-col :span="11" :offset="2">
						<button :disabled="!button_state" :loading="!button_state" type="warn"
							@click="handleSubmitProcess('2')">退回发起人</button>
					</uni-col>
				</uni-row>
			</uni-card>
		</view>
	</view>
	<view v-else-if="isCancel">
		<view class="remark_container">
			<uni-card>
				<uni-section titleFontSize="1.3rem" title="撤销备注" type="line"></uni-section>
				<view class="remark_content">
					<uni-easyinput type="textarea" autoHeight v-model="remark" placeholder="请输入"
						placeholderStyle="font-size: calc(14px + 1.2*(1rem - 16px))"></uni-easyinput>
				</view>
			</uni-card>
		</view>
		<view class="cancel_button_container" >
			<uni-card spacing="0" padding="0">
				<button :disabled="!button_state" :loading="!button_state" type="warn"
					@click="handleCancelProcess">撤销</button>
			</uni-card>
		</view>
	</view>
	<view style="height: 5px; margin-top: 20px;"></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 { computed, onMounted, reactive, ref, nextTick } from 'vue'
	import { onLoad, onShow, onShareAppMessage } from '@dcloudio/uni-app'
	import { LSignatureToTempFilePathOptions, LSignatureToFileSuccess } from '@/uni_modules/lime-signature'
	import attachmentList from '@/components/ygoa/attachmentList.vue'
	import config from '@/config.js'
	import $tab from '@/plugins/tab.js'
	import $modal from '@/plugins/modal.js'
	import { getProcessFlowInfo, getProcessFormInfo, getProcessFormInfoInFlow, getProcessFlow, submitProcessFlow, cancelProcessFlow, uploadSignatureImg, uploadSignatureBoardImg, uploadFile, getSeal, getTacheInfo } from '@/api/process.js'
	import { getAttendanceSegment } from '@/api/work.js'
	import { useUserStore } from '@/store/user.js'
	import { getLoginInfo, getSession, setSession } from '@/utils/auth.js'
	import { reLogin, keepSession } from '@/api/login.js'
	import { convertToChineseCurrency } from '@/utils/ygoa.js'
	import { calCommonExp } from '@/utils/rpn.js'
	const fieldTypeDict = {
		'0': 'text',
		'1': 'digit'
	}
	const userStore = useUserStore()
	const processInfo = reactive({
		insId: '',
		insName: '',
		control: 1,
		username: '',
		reqOffice: 0,
		reqRemark: 0,
		tinsId: undefined,
		// tinsObj: {}//存储流转最后一步的对象
	})
	onLoad(({ insId, tinsId, insName, control }) => {
		// 获取传入的标题参数
		const title = insName || '流程信息';
		processInfo.insId = insId
		processInfo.insName = insName
		processInfo.control = control
		if (tinsId) {
			processInfo['tinsId'] = tinsId
		}
		// 设置导航栏标题
		uni.setNavigationBarTitle({
			title: title
		});
	})
	onShow(() => {
		keepSession().then(res => {
			if (typeof res === 'number') {
				return
			} else {
				const loginInfo = getLoginInfo()
				//如果有登录信息，就自动登录刷session
				if (Object.keys(loginInfo).length !== 0) {
					reLogin(loginInfo.username, loginInfo.password).then((res) => {
						if ("ok" === res.data) {
							setSession(res.cookies[0].split("=")[1].split(";")[0]);
						}
					}).catch(res => {
						console.log(res);
					})
				} else {
					$tab.reLaunch({ url: '/pages/login' })
				}
			}
		})
			.catch(err => {
				console.log('err', err);
				// $tab.navigateBack()
			})

	})

	onMounted(() => {
		initProcessForm() // 获取表单数据
		initProcessInfo() // 获取流程数据
	})
	//分享转发事件
	onShareAppMessage((res) => {
		if (res.from === 'menu') {
			// console.log('res', res)
		}
		let url = '/pages/process/index?insId=' + processInfo.insId + '&insName=' + processInfo.insName + '&control=' + processInfo.control
		// console.log('url',url);
		return {
			title: processInfo.insName,
			path: url
		}
	})

	const repeatingForm = ref({
		elements: [],
		elementItem: [],
	})
	// 是否有重复表
	const repeatingFormNotEmpty = ref(false)
	function repeatingFormHasValue() {
		if (repeatingForm.value === undefined) return
		if (repeatingForm.value.elementItem.length <= 0) return
		repeatingForm.value.elements.forEach(({ defaultValue }) => {
			if (defaultValue != "") {
				repeatingFormNotEmpty.value = true
				return new Promise((resolve, reject) => {
					resolve(repeatingFormNotEmpty)
				})
			}
		})
	}
	// 新增重复表表单
	function addrepeatingFormItem(index) {
		// parseCalculation(repeatingForm.value.elementItem)
		const table = repeatingForm.value.elementItem.map(({ tableField, bddzText }) => {
			const item = {
				name: tableField,
				defaultValue: ""
			}
			if (bddzText != '') {
				const mulItem = bddzText.split('*')
				// 保存关联数据索引
				item['bddzText'] = mulItem.map(item => {
					// item['operation '].operands = mulItem.map(item => {
					return repeatingForm.value.elementItem.findIndex(({ elementName }) => item == elementName)
				})
			}
			return item
		})
		repeatingForm.value.elements.splice(index + 1, 0, table)
	}
	// 删除重复表表单
	function delrepeatingFormItem(index) {
		$modal.confirm('', '确认删除该重复表数据')
			.then(() => {
				repeatingForm.value.elements.splice(index, 1)
				// $repeatingForms.value.splice(index, 1)
			}).catch(() => { })
	}
	const formElements = ref([])
	const formInfo = ref({
		formElements: [],
		formId: '',
		formInsId: ''
	})
	const fileList = ref([])
	const isCancel = ref(false)
	// 获取流程表单
	function initProcessForm() {
		//debugger
		if (processInfo.tinsId) {
			// 待办审批流程表单数据todo 
			getProcessFormInfoInFlow(userStore.user.useId, processInfo).then(({ returnParams }) => {
				console.log('returnParams', returnParams);

				const modifyReturnParams = (returnParams) => {
					return returnParams.formElements.map(element => {
						if (element.type === "5") {
							// 将 defaultValue 按逗号分割成数组
							element.defaultValue = element.defaultValue.split(",");
						}
						return element;
					});
				};
				formElements.value = modifyReturnParams(returnParams)
				formInfo.value = returnParams.formInfo[0]
				repeatingForm.value = returnParams.repeatingForm
				getMainFormRule()
				computedMainFormValue()
				if (returnParams.isCancel == 1) {
					isCancel.value = true
				}
				repeatingFormHasValue()
				bindTimeRangeData()
				remark.value = flowInfo.value.seModel == '0' ? '同意' : '重新提交'
			})
		} else {
			// 我的 在办 办结流程表单数据 todo
			getProcessFormInfo(userStore.user.useId, processInfo.insId).then(({ returnParams }) => {
				formElements.value = returnParams.formElements
				repeatingForm.value = returnParams.repeatingForm
				fileList.value = returnParams.fileList
				if (returnParams.isCancel == 1) {
					isCancel.value = true
				}
				repeatingFormHasValue()
			})
		}
	}
	const options = ref([])
	const stepActive = ref(-1)
	const flowInfo = ref({
		seModel: '0'
	})
	// 获取流程信息
	function initProcessInfo() {
		//debugger
		getProcessFlow(userStore.user.useId, processInfo).then(({ returnParams }) => {
			options.value = returnParams.list.map((item, index) => {
				const { tmodelName, name, createdate, finishdate, remark, state, task, groupName, positionName } = item
				if (state == 1) {
					stepActive.value = index
				}
				const title = tmodelName + (name == '' ? '' : ' ( ' + name + ' ' + groupName + '-' + positionName + ' )')
				let desc = '创建时间: ' + createdate
					+ (finishdate == '' ? '\n' : '\n办理时间: ' + finishdate)
					+ (remark == '' ? '\n' : '\n环节意见: ' + remark)
					if(task && task.length > 0) {
						desc += '抄送信息'
						task.forEach((taskitem) => {
							desc += '\n抄送对象:（' + taskitem.username + '） 抄送时间: ' + taskitem.createdate
						})
					}
				return {
					title,
					desc,
					state
				}
			})
			if (stepActive.value === -1) stepActive.value = returnParams.list.length
			// 获取未完成过程
			if (processInfo.tinsId) {
				getProcessFlowInfo(userStore.user.useId, processInfo).then(({ returnParams }) => {
					options.value.push({ title: returnParams.nextTmodels[0].nextTmodelName })
					flowInfo.value = returnParams.flow[0]
					fileList.value = [
						{ files: returnParams.flow[0].files }
					]
					processInfo.reqOffice = returnParams.tmodel.reqOffice
					processInfo.reqRemark = returnParams.tmodel.reqRemark
				})
			}
			console.log('options', options.value);
		})
	}

	// 下拉框
	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(",")
		// console.log(e)
	}
	//单选框切换事件
	function changeDataSingleCheckBox(){
		
	}

	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) {
					if (formElements.value[startIndex].defaultValue == '') {
						formElements.value[startIndex].defaultValue = formatDate(new Date())
					} else {
						formElements.value[startIndex].defaultValue = formatDate(new Date(formElements.value[startIndex].defaultValue))
					}
					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 = [
		{ start: "09:00", end: "12:00" }, // 上午
		{ start: "13:30", end: "17:30" }, // 下午
	]
	let workDays = [1, 2, 3, 4, 5, 6, 0] // 0为周日
	// 获取考勤时间段
	function setAttendanceSegment() {
		getAttendanceSegment(userStore.user.unitId).then(({ returnParams }) => {
			const workTime = returnParams[0].work_time.split(';')
			let workDayArr = returnParams[0].work_days.split(',')
			let workTimeArr = []
			for (const time of workTime) {
				if (time == '') continue
				const times = time.split(',')
				const obj = {
					start: times[0],
					end: times[1]
				}
				workTimeArr.push(obj)
			}
			if (workTimeArr.length != 0) {
				workingPeriods = workTimeArr
			}
			workDayArr = workDayArr.map(item => Number(item))
			const sundayIndex = workDayArr.findIndex(item => item == 7)
			// console.log('workDays: ', workDayArr);
			if (sundayIndex != -1) {
				workDayArr[sundayIndex] = 0
			}
			if (workDayArr.length != 0) {
				workDays = workDayArr
			}
		})
	}
	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) {
			console.log("大写转换")
			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 (item.defaultValue) {
			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
		}
		if (item.defaultValue) {
			return item.defaultValue = Number(result.toFixed(2))
		}
	}
	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 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
	}

	const repeatingFormPopup = ref(null)
	// 查看重复表
	function handleRepeatingForm() {
		repeatingFormPopup.value.open()
	}
	// 附件管理
	function deleteFile(file) {
		// console.log('deleteFile: ',file);
		fileList.value[0].files = fileList.value[0].files.filter(({ fileId }) => !(fileId == file.fileId))
	}
	// 上传附件
	const subFileList = ref([]) // 文件列表
	const subFileSeqs = ref([])
	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
					subFileSeqs.value.push({ 'seq': res.returnParams, 'path': file.path })
					subFileList.value.push(file)
					$modal.msgSuccess('文件' + data.name + '上传成功')
				})
				.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)
		subFileSeqs.value.splice(subFileSeqs.value.findIndex(({ path }) => path == file.tempFilePath))
	}

	const $mainForm = ref(null)
	const $mainFormRules = ref({})
	const mainFormValue = ref({})
	const repeatingFormsValue = ref([])
	const formatTypeDict = {
		'0': 'string',
		'1': 'number'
	}
	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 getMainFormRule() {
		$mainFormRules.value = computed(() => {
			const obj = {};
			formElements.value.forEach(elem => {
				if (!('0' != elem.canEdit && '8' != elem.type)) return
				let labelName = elem.elementName
				let errorMessage = ''
				if ('13' == elem.type) errorMessage = '请完成签名'
				obj[elem.elementId] = {
					rules: [
						{
							required: '1' == elem.noNull,
							errorMessage,
						},
						// {
						// 	format: formatTypeDict[elem.fieldType] || 'string',
						// }
					],
					label: labelName
				};
			});
			return obj;
		}).value
	}
	function validateRepeatingForm2() {
		// 设置重复表校验数据
		const filterElements = repeatingForm.value.elements.filter(item => item.canEdit == "1")
		if (filterElements.length == 0) return true
		repeatingFormsValue.value = filterElements.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 button_state = ref(true)
	const remark = ref('')
	function handleSubmitProcess(result) {
		let content = '确认退回'
		if (result == "1") {
			content = '确认通过'
		}
		$modal.confirm(content).then(() => {
			button_state.value = false
			if (result == "1") {
				// 处理主表校验数据
				mainFormValue.value = computed(() => {
					const obj = {};
					formElements.value.forEach(elem => {
						let value = elem.defaultValue
						if (!('0' != elem.canEdit && '8' != elem.type)) return
						if ('5' == elem.type && Array.isArray(elem.defaultValue)) {
							value = elem.defaultValue.join(",")
						}
						obj[elem.elementId] = value;
					});
					return obj;
				}).value
				// console.log('$mainForm.value: ', $mainForm.value);
				// 主表数据校验
				$mainForm.value.validate().then(res => {
					// 重复表数据校验
					if (repeatingFormNotEmpty.value && !validateRepeatingForm2()) {
						button_state.value = true
						return
					}
					submitProcess(result)
				})
					.catch(err => {
						button_state.value = true
						$modal.msgError('表单填写错误')
					})
			} else {
				submitProcess(result)
			}
		}).catch(() => { })
	}
	function submitProcess(result) {
		let flow = Object.assign({}, flowInfo.value)
		formInfo.value.formElements = formElements.value
			// 过滤不可编辑的表单项
			.filter(({ canEdit }) => canEdit == '1')
			.map(({ tableField, defaultValue, type }) => {
				let value = defaultValue
				if ('5' == type && Array.isArray(defaultValue)) {
					value = defaultValue.join(",")
				}
				return {
					name: tableField,
					value
				}
			})
		repeatingForm.value.elements.forEach((table, index) => {
			const newItem = table.map((item) => {
				item['value'] = item.defaultValue
				return item
			})
			formInfo.value.formElements.push(...newItem)
		})
		flow['staffId'] = userStore.user.useId
		flow['gxId'] = userStore.user.gxId
		flow['groupId'] = flowInfo.value.groupid
		if (result == "1") {
			const seqs = subFileSeqs.value.map(({ seq }) => seq)
			if (flowInfo.value.seModel == '0' && processInfo.reqOffice == 1 && seqs.length == 0) {
				button_state.value = true
				$modal.msgError('请上传附件')
				return
			} else {
				flow['fileIds'] = seqs
			}
			if (processInfo.reqRemark == 1 && remark.value == '') {
				button_state.value = true
				$modal.msgError('请填写备注')
				return
			}
		} else {
			flow.fileIds = []
			flow.files = []
		}
		flow['remark'] = remark.value
		// result: 1通过 2退回发起人 0退回上一级
		flow['result'] = result
		flow['nextTmodelId'] = 'undefined'
		submitProcessFlow(flow, formInfo.value, processInfo.control).then(({ returnMsg }) => {
			if (returnMsg.includes('提交失败')) {
				// 启用提交按钮
				button_state.value = true
				$modal.msgError(returnMsg)
			} else {
				$modal.msgSuccess(returnMsg)
				// 通知列表刷新数据
				uni.$emit('ReloadProcessData');
				setTimeout(() => {
					$tab.navigateBack();
				}, 1000)
			}
		})
	}
	// 取消流程
	function handleCancelProcess() {
		if (remark.value.trim() == '') {
			$modal.msgError('备注不能为空！')
			return
		}
		$modal.confirm('确认撤销').then(() => {
			cancelProcess()
		}).catch(() => { })
	}
	function cancelProcess() {
		cancelProcessFlow(userStore.user.useId, remark.value, processInfo).then(({ returnMsg }) => {
			if (returnMsg.includes('success')) {
				$modal.msgSuccess('撤销成功')
				// 通知列表刷新数据
				uni.$emit('ReloadProcessData');
				setTimeout(() => {
					$tab.navigateBack();
				}, 1000)
			} else {
				// 启用按钮
				button_state.value = true
				$modal.msgError(returnMsg)
			}
		})
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-section {
		margin-left: -15px;
		margin-bottom: 10px;
	}

	.signature_container {
		background-color: #f5f5f5;
		height: 40vh;
		width: 90vw;

		.signature_content {
			height: 80%;
			width: 100%;
		}

		.signature_button_container {
			height: 20%;
			width: 100%;

			button {
				height: 100%;
			}
		}
	}

	.signature_container_landscape {
		height: 100vh;
		width: 100vw;

		.signature_content {
			height: 85%;
			width: 100%;
		}

		.signature_button_container {
			margin-top: 10%;
			height: 15%;
			width: 100%;

			button {
				height: 100%;
				width: 100%;
				transform: rotate(90deg);
			}
		}
	}

	.process_detail_container {
		position: relative;
		::v-deep uni-card{
			.uni-card{
				padding: 0 8px !important;
			}
		}

		.repeating_table {

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

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

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

			::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;
				}
			}
		}

		.main_container {
			min-height: 40vh;

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

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

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

					.uni-easyinput__content-input {
						height: calc(35px + .5*(1rem - 16px)) !important;
						font-size: calc(14px + (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;
						}
					}
				}
			}

			.element_value_container {

				.signature_img {
					width: 180px;
				}

				.element_value {
					line-height: 36px;
				}
			}
		}
		// ::v-deep .repeating_table_detail2{
		// 	.uni-forms-item__content{
		// 		margin: auto;
		// 	}
		// 	.uni-forms{
		// 		border-top: 2px #eee solid;
		// 	}
		// 	.uni-forms-item__label {
		// 		width: 125px !important;
		// 		font-size: calc(1rem + 0px) !important;
		// 		line-height: calc(1rem + 0px) !important;
		// 		font-weight: 700;
		// 	}		
		// 	.uni-forms-item__content {
		// 		font-size: calc(14px + (1rem - 16px)) !important;
		// 		font-weight: 500;
		// 		.uni-date {
		// 			.uni-icons {
		// 				font-size: calc(22px + 1.2*(1rem - 16px)) !important;
		// 				font-weight: 500;
		// 			}
		// 		}
		// 	}
		// }

		::v-deep .repeating_table_detail {
			.uni-card {
				padding: 0 !important;
			}

			.uni-card__content {
				padding: 0 !important;
			}

			.uni-section {
				margin: 10px 5px;
			}
		}

		::v-deep .repeating_table_container {
			width: 92vw;

			.uni-table-scroll {
				max-height: 80vh;

				.uni-table {
					min-width: 100% !important;

					.uni-table-th {
						font-size: calc(14px + 1.2*(1rem - 16px)) !important;
						min-width: calc(50px + 2.5*(1rem - 16px));
						background-color: #2979ff;
						font-weight: bold;
						color: #fcfcfc;
					}

					.uni-table-td {
						font-size: calc(14px + 1.2*(1rem - 16px)) !important;
					}
				}
			}
		}

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

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

		::v-deep .flow_step_container {
			min-height: 200px;

			.u-steps {
				.u-steps-item {
					padding-bottom: 11px;

					.u-text__value--tips {
						font-size: calc(12px + .5*(1rem - 16px)) !important;
					}

					.redcontent {
						.u-text__value--content {
							color: #ff4500;
						}
					}

					.active_step_circle {
						width: 20px;
						height: 20px;
						box-sizing: border-box;
						flex-shrink: 0;
						border-radius: 100px;
						border-width: 1px;
						border-color: #A78BFA;
						background-color: #A78BFA;
						border-style: solid;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: center;
						transition: background-color .3s;

						.active_step_text {
							color: #fff;
							font-size: 11px;
							display: flex;
							flex-direction: row;
							align-items: center;
							justify-content: center;
							text-align: center;
							line-height: 11px;
						}
					}
				}

				.u-steps-item view:last-of-type {
					margin-top: 0 !important;

					.u-text__value--content {
						font-size: calc(16px + .5*(1rem - 16px)) !important;
					}

					.u-text__value--main {
						font-size: calc(16px + .5*(1rem - 16px)) !important;
						font-weight: 500;
					}
				}
			}
		}

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

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

	.reject_button {
		::v-deep .uni-card {
			background-color: #f5f5f5;
		}
	}

	.remark_container {
		.remark_content {
			margin-bottom: 10px;

			::v-deep .uni-easyinput {
				.uni-easyinput__content-textarea {
					font-size: calc(14px + .5*(1rem - 16px)) !important;
				}
			}
		}
	}

	::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;
			}
		}
	}
	.username {
		color: #2979ff;
	}
</style>