ygoa_miniapp/pages/work/payment/start.vue

<template>
	<view class="payment-container">
		<!-- 基本信息 -->
		<uni-card title="基本信息" spacing="0">
			<uni-forms ref="baseFormRef" :modelValue="baseForm" :rules="baseFormRules" label-position="left" :label-width="120" :border="true">
				<uni-forms-item name="department" label="申请部门">
					<uni-easyinput v-model="baseForm.department" disabled></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="applyDate" label="申请日期">
					<uni-easyinput v-model="baseForm.applyDate" type="date" disabled />
				</uni-forms-item>
				<uni-forms-item name="contractNumber" label="合同">
					<view class="selector-wrapper" @click="openContractSelector">
						<text v-if="baseForm.contractNumber">{{ baseForm.contractNumber }}</text>
						<text v-else class="placeholder">选择合同</text>
					</view>
					<button v-if="baseForm.contractId" type="warn" size="mini" @click="clearContract" style="margin-left: 10px;">清除</button>
				</uni-forms-item>
				<uni-forms-item name="payerName" label="单位" required>
					<uni-easyinput v-model="baseForm.payerName" placeholder="请输入单位"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="payeeName" label="收款单位" required>
					<view class="payee-input-wrapper">
						<uni-easyinput 
							v-model="baseForm.payeeName" 
							placeholder="请输入或选择收款单位"
							:disabled="!!baseForm.contractId"
							@input="onPayeeInputChange"
						></uni-easyinput>
						<button 
							type="primary" 
							size="mini" 
							@click="openSupplierSelector"
							:disabled="!!baseForm.contractId"
							class="select-supplier-btn"
						>
							选择供应商
						</button>
					</view>
				</uni-forms-item>
				<uni-forms-item name="payeeBankAccount" label="开户行及账号" required>
					<uni-easyinput v-model="baseForm.payeeBankAccount" placeholder="请输入开户行及账号"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="paymentType" label="付款类型" required>
					<picker @change="onPaymentTypeChange" :range="paymentTypeList" range-key="name">
						<view class="picker-wrapper">{{ baseForm.paymentTypeName || '请选择付款类型' }}</view>
					</picker>
				</uni-forms-item>
				<!-- 预付款：显示采购订单编号 -->
				<uni-forms-item v-if="baseForm.paymentType === '1'" name="purchaseOrderNo" label="采购订单编号">
					<view class="selector-wrapper" @click="openPurchaseOrderSelector">
						<text v-if="baseForm.purchaseOrderNo">{{ baseForm.purchaseOrderNo }}</text>
						<text v-else class="placeholder">选择采购订单</text>
					</view>
					<button v-if="baseForm.purchaseOrderNo" type="warn" size="mini" @click="clearPurchaseOrder" style="margin-left: 10px;">清除</button>
				</uni-forms-item>
								
				<!-- 到付款：显示入库单编号 -->
				<uni-forms-item v-if="baseForm.paymentType === '2'" name="storageOrderNo" label="入库单编号">
					<view class="selector-wrapper" @click="openStorageOrderSelector">
						<text v-if="baseForm.storageOrderNo">{{ baseForm.storageOrderNo }}</text>
						<text v-else class="placeholder">选择入库单</text>
					</view>
					<button v-if="baseForm.storageOrderNo" type="warn" size="mini" @click="clearStorageOrder" style="margin-left: 10px;">清除</button>
				</uni-forms-item>
				<uni-forms-item name="paymentMethod" label="付款方式" required>
					<uni-easyinput v-model="baseForm.paymentMethod" placeholder="请输入付款方式"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="paymentDate" label="付款日期" required>
					<uni-datetime-picker
						v-model="baseForm.paymentDate"
						type="date"
						placeholder="选择付款日期"
					/>
				</uni-forms-item>
				<uni-forms-item name="amountUpper" label="付款金额（大写）">
					<uni-easyinput v-model="baseForm.amountUpper" disabled placeholder="自动转换"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="amountLower" label="付款金额（小写）" required>
					<uni-easyinput 
						v-model="baseForm.amountLower" 
						type="digit" 
						placeholder="请输入付款金额"
						@input="onAmountInput"
						@blur="convertToChinese"
					></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="purpose" label="用途或理由" required>
					<uni-easyinput v-model="baseForm.purpose" type="textarea" placeholder="请输入用途或理由"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="operator" label="经办人" required>
					<uni-easyinput v-model="baseForm.operator" placeholder="请输入经办人" disabled></uni-easyinput>
				</uni-forms-item>
			</uni-forms>
		</uni-card>

		<!-- 上传附件 -->
		<uni-card title="上传附件" :extra="`${fileList.length}/50`">
			<uni-file-picker 
				ref="filePicker" 
				v-model="fileList" 
				:auto-upload="true" 
				mode="list" 
				:limit="50"
				:limit-length="50" 
				file-mediatype="all"
				@select="handleFileSelect" 
				@progress="handleFileProgress" 
				@success="handleFileSuccess" 
				@fail="handleFileFail" 
				@delete="handleFileDelete" 
			/>
		</uni-card>

		<!-- 提交按钮 -->
		<view class="submit-btn-wrapper">
			<button type="primary" :loading="isSubmitting" :disabled="isSubmitting" @click="submitForm">提 交</button>
		</view>

		<!-- 选择器弹出层 -->
		<uni-popup ref="selectorPopup" type="center">
			<view class="selector-popup">
				<view class="popup-header">
					<text class="popup-title">{{ popupTitle }}</text>
					<uni-icons type="closeempty" size="20" @click="closePopup"></uni-icons>
				</view>
				
				<!-- 选择器内容 -->
				<view class="popup-content-wrapper">
					<!-- 搜索栏 -->
					<view class="search-bar">
						<uni-easyinput 
							v-model="searchKeyword" 
							:placeholder="getSearchPlaceholder()"
							clearable
							@confirm="handleSearch"
						/>
						<button type="primary" size="mini" @click="handleSearch">搜索</button>
					</view>
								
					<!-- 合同类型筛选 -->
					<view v-if="selectorType === 'contract'" class="filter-bar">
						<picker @change="onContractTypeChange" :range="contractTypeList" range-key="name">
							<view class="picker-filter">
								{{ selectedContractTypeName || '全部合同类型' }}
							</view>
						</picker>
					</view>
								
					<!-- 入库单多选提示 -->
					<view v-if="selectorType === 'storageOrder' && selectedStorageOrders.length > 0" class="selected-tip">
						已选择 {{ selectedStorageOrders.length }} 个入库单
					</view>
								
					<scroll-view 
						scroll-y 
						class="popup-content"
						refresher-enabled
						:refresher-triggered="isRefreshing"
						@refresherrefresh="onRefresh"
						@scrolltolower="loadMore"
					>
						<view v-for="(item, index) in selectorList" :key="index" 
						      class="selector-item" 
						      :class="{ 'selected': isStorageOrderSelected(item) }"
						      @click="toggleStorageOrderSelection(item)">
							<view class="selector-item-content">
								<!-- 入库单显示复选框 -->
								<view v-if="selectorType === 'storageOrder'" class="checkbox-wrapper">
									<text class="checkbox-icon">{{ isStorageOrderSelected(item) ? '✓' : '' }}</text>
								</view>
											
								<view class="item-info">
									<!-- 名称（合同名称/采购订单名称/入库单名称） -->
									<text class="item-name">{{ getSelectorItemName(item) }}</text>
												
									<!-- 编号（合同编号/采购订单编号/入库单编号） -->
									<text v-if="getItemCode(item)" class="item-code">{{ getItemCode(item) }}</text>
												
									<!-- 供应商 -->
									<text v-if="getItemVendor(item)" class="item-vendor">{{ getItemVendor(item) }}</text>
												
									<!-- 总金额 -->
									<text v-if="getItemAmount(item)" class="item-amount">金额：￥{{ getItemAmount(item) }}</text>
												
									<!-- 单据状态（仅采购订单和入库单） -->
									<text v-if="getItemStatus(item)" class="item-status" :class="getStatusClass(item)">{{ getItemStatus(item) }}</text>
												
									<!-- 创建时间 -->
									<text v-if="getItemCreateTime(item)" class="item-time">{{ getItemCreateTime(item) }}</text>
												
									<!-- 合同类型显示（仅合同） -->
									<text v-if="selectorType === 'contract' && getContractTypeName(item)" class="item-type">
										【{{ getContractTypeName(item) }}】
									</text>
								</view>
							</view>
						</view>
									
						<!-- 加载状态 -->
						<view v-if="isLoading && selectorList.length > 0" class="loading-text">
							<uni-load-more status="loading" />
						</view>
									
						<!-- 没有更多数据 -->
						<view v-else-if="!hasMore && selectorList.length > 0" class="no-more-text">
							<text>没有更多了</text>
						</view>
									
						<!-- 空数据提示 -->
						<view v-if="selectorList.length === 0 && !isLoading" class="empty-data">
							<text>{{ searchKeyword ? '暂无相关数据' : '暂无数据' }}</text>
						</view>
					</scroll-view>
				</view>
							
				<!-- 入库单确认按钮（固定在底部） -->
				<view v-if="selectorType === 'storageOrder'" class="popup-footer-fixed">
					<button class="cancel-btn" @click="closePopup">取消</button>
					<button class="confirm-btn" @click="confirmStorageOrderSelection">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, computed, watch } 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 { getPaymentInitData, startPaymentProcess, getSupplierList, getContractListForPayment, getPurchaseOrderList, getStorageOrderList } from '@/api/payment.js'
import { uploadFile, getProcessInfo } from '@/api/work.js'
import config from '@/config.js'

const userStore = useUserStore()

// 流程信息
let processInfo = reactive({
	modelName: '付款申请',
	reqOffice: 0,
	control: '',
	formId: '',
	modelId: '',
	tmodelId: '',
	isMoreIns: '',
	pathJudgeType: '',
	form: []
})

// 接收页面参数
onLoad((options) => {
	const { modelName, modelId, control } = options
	if (modelName) processInfo.modelName = modelName
	if (modelId) processInfo.modelId = modelId
	if (control) processInfo.control = control
})

// 初始化流程信息
onMounted(() => {
	initProcessInfo().then(() => {
		initBaseForm()
	})
})

function initProcessInfo() {
	return new Promise<void>((resolve, reject) => {
		if (!processInfo.modelId) {
			$modal.msgError('缺少流程模型')
			reject(new Error('缺少流程模型 ID'))
			return
		}
		
		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 || 0
				resolve()
			})
			.catch(err => {
				console.error('获取流程信息失败:', err)
				reject(err)
			})
	})
}

function initBaseForm() {
	getPaymentInitData(userStore.user.useId).then(res => {
		if (res.returnCode === '1') {
			const params = res.returnParams
			baseForm.initiator = params.initiator || userStore.user.name
			baseForm.department = params.department || ''
			baseForm.depid = params.depid || null
			baseForm.applyDate = params.applyDate || ''
			
			// 设置默认经办人（当前登录用户）
			baseForm.operator = params.operator || userStore.user.name
			baseForm.operatorId = params.operatorId || userStore.user.useId
			
			// 设置默认账户信息（隐藏域）
			baseForm.bankName = params.bankName || ''
			baseForm.bankAccount = params.bankAccount || ''
			baseForm.accountId = params.accountId || ''
			baseForm.accountName = params.accountName || ''
		}
	}).catch(err => {
		console.error('获取初始化数据失败:', err)
	})
}

const baseForm = reactive({
	payerName: '',
	payeeName: '',
	vendorCode: '', // 供应商编码
	contractId: '',
	contractNumber: '',
	contractName: '',
	purchaseOrderNo: '',
	storageOrderNo: '',
	orderIdFromMes: '',
	applyDate: '',
	initiator: '',
	department: '',
	depid: null,
	operator: '',
	operatorId: '',
	// 付款相关字段
	amountLower: '',
	amountUpper: '',
	paymentType: '',
	paymentTypeName: '',
	paymentMethod: '',
	paymentDate: '',
	purpose: '',
	payeeBankAccount: '',
	// 默认账户信息（隐藏域）
	bankName: '',
	bankAccount: '',
	accountId: '',
	accountName: ''
})



const isSubmitting = ref(false)

// 文件上传相关
const fileList = ref<any[]>([])
const fileSeqs = ref<any[]>([])

// 表单校验规则
const baseFormRef = ref(null)

const baseFormRules = computed(() => {
	return {
		payerName: {
			rules: [{ required: true, message: '请输入单位' }],
			label: '单位'
		},
		payeeName: {
			rules: [{ required: true, message: '请选择收款单位' }],
			label: '收款单位'
		},
		payeeBankAccount: {
			rules: [{ required: true, message: '请输入开户行及账号' }],
			label: '开户行及账号'
		},
		paymentType: {
			rules: [{ required: true, message: '请选择付款类型' }],
			label: '付款类型'
		},
		paymentMethod: {
			rules: [{ required: true, message: '请输入付款方式' }],
			label: '付款方式'
		},
		paymentDate: {
			rules: [{ required: true, message: '请选择付款日期' }],
			label: '付款日期'
		},
		amountLower: {
			rules: [{ required: true, message: '请输入付款金额' }],
			label: '付款金额（小写）'
		},
		purpose: {
			rules: [{ required: true, message: '请输入用途或理由' }],
			label: '用途或理由'
		},
		operator: {
			rules: [{ required: true, message: '请输入经办人' }],
			label: '经办人'
		}
	}
})

// 付款类型列表
const paymentTypeList = ref([
	{ value: '1', name: '预付款' },
	{ value: '2', name: '到付款' }
])

// 选择器相关
const selectorPopup = ref(null)
const selectorList = ref<any[]>([])
const selectorType = ref('') // 'supplier', 'contract', 'purchaseOrder', 'storageOrder'

// 入库单多选相关
const selectedStorageOrders = ref<any[]>([])

// 合同类型相关
const contractTypeList = ref([
	{ value: '', name: '全部' },
	{ value: '1', name: '销售合同' },
	{ value: '2', name: '采购合同' },
	{ value: '3', name: '技术服务合同' }
])
const selectedContractType = ref('')
const selectedContractTypeName = computed(() => {
	if (!selectedContractType.value) return ''
	const type = contractTypeList.value.find(t => t.value === selectedContractType.value)
	return type ? type.name : ''
})

// 分页和搜索相关
const currentPage = ref(1)
const pageSize = 20
const hasMore = ref(true)
const isLoading = ref(false)
const isRefreshing = ref(false)
const searchKeyword = ref('')

const popupTitle = computed(() => {
	if (selectorType.value === 'supplier') return '选择供应商'
	if (selectorType.value === 'contract') return '选择合同'
	if (selectorType.value === 'purchaseOrder') return '选择采购订单'
	if (selectorType.value === 'storageOrder') return '选择入库单'
	return '选择'
})

function getSearchPlaceholder() {
	if (selectorType.value === 'supplier') return '输入供应商名称搜索'
	if (selectorType.value === 'contract') return '输入合同名称搜索'
	return '搜索'
}

// 付款金额输入处理
function onAmountInput(value: string) {
	// 限制只能输入数字和小数点
	const restricted = restrictToNumber(value)
	// 如果值被修改了，更新表单值
	if (restricted !== value) {
		baseForm.amountLower = restricted
	}
}

// 限制输入框只能输入数字和小数点
function restrictToNumber(value: string): string {
	if (!value) return value
	
	// 只允许数字、小数点，且小数点只能有一个
	let newValue = value.replace(/[^0-9.]/g, '')
	
	// 确保小数点不超过一个
	const dotIndex = newValue.indexOf('.')
	if (dotIndex !== -1) {
		newValue = newValue.substring(0, dotIndex + 1) + newValue.substring(dotIndex + 1).replace(/\./g, '')
	}
	
	// 如果第一个字符是小数点，则在前面加0
	if (newValue.charAt(0) === '.') {
		newValue = '0' + newValue
	}
	
	return newValue
}

// 数字转中文大写
function convertToChinese() {
	// 先清理输入值
	if (baseForm.amountLower) {
		baseForm.amountLower = restrictToNumber(baseForm.amountLower)
	}
	
	const num = baseForm.amountLower
	if (!num || isNaN(Number(num))) {
		baseForm.amountUpper = ''
		return
	}
	
	const chineseNum = digitUppercase(parseFloat(num))
	baseForm.amountUpper = chineseNum
}

function digitUppercase(n) {
	const fraction = ['角', '分']
	const digit = [
		'零', '壹', '贰', '叁', '肆',
		'伍', '陆', '柒', '捌', '玖'
	]
	const unit = [
		['元', '万', '亿'],
		['', '拾', '佰', '仟']
	]
	const head = n < 0 ? '欠' : ''
	n = Math.abs(n)
	let s = ''
	for (let i = 0; i < fraction.length; i++) {
		s += (digit[Math.floor(n * 10 * Math.pow(10, i)) % 10] + fraction[i]).replace(/零./, '')
	}
	s = s || '整'
	n = Math.floor(n)
	for (let i = 0; i < unit[0].length && n > 0; i++) {
		let p = ''
		for (let j = 0; j < unit[1].length && n > 0; j++) {
			p = digit[n % 10] + unit[1][j] + p
			n = Math.floor(n / 10)
		}
		s = p.replace(/(零.)*零$/, '').replace(/^$/, '零') + unit[0][i] + s
	}
	return head + s.replace(/(零.)*零元/, '元')
		.replace(/(零.)+/g, '零')
		.replace(/^整$/, '零元整')
}

// 付款类型变化
function onPaymentTypeChange(e: any) {
	const selectedIndex = e.detail.value
	const selected = paymentTypeList.value[selectedIndex]
	if (selected) {
		baseForm.paymentType = selected.value
		baseForm.paymentTypeName = selected.name
		
		// 根据付款类型切换显示字段并清空被隐藏的字段
		togglePaymentFields(selected.value)
	}
}

// 根据付款类型切换显示字段
function togglePaymentFields(paymentType: string) {
	if (paymentType === '1') { // 预付款
		// 清空入库单编号和多选数组
		baseForm.storageOrderNo = ''
		baseForm.orderIdFromMes = ''
		selectedStorageOrders.value = []
	} else if (paymentType === '2') { // 到付款
		// 清空采购订单编号
		baseForm.purchaseOrderNo = ''
		baseForm.orderIdFromMes = ''
	}
}

// 打开供应商选择器
async function openSupplierSelector() {
	// 如果已选择合同，则不能手动选择供应商
	if (baseForm.contractId) {
		$modal.msg('已选择合同，收款单位由合同自动填充，如需修改请先清除合同！')
		return
	}
	
	selectorType.value = 'supplier'
	currentPage.value = 1
	hasMore.value = true
	selectorList.value = []
	await loadSuppliers(1, false)
	openPopup()
}

// 清除合同
function clearContract() {
	baseForm.contractId = ''
	baseForm.contractNumber = ''
	baseForm.contractName = ''
	// 注意：不清空收款单位和供应商编码
}

// 清除采购订单
function clearPurchaseOrder() {
	baseForm.purchaseOrderNo = ''
	baseForm.orderIdFromMes = ''
}

// 清除入库单
function clearStorageOrder() {
	baseForm.storageOrderNo = ''
	baseForm.orderIdFromMes = ''
	selectedStorageOrders.value = [] // 清空多选数组
}

// 清空所有关联信息
function clearRelatedOrders() {
	baseForm.contractId = ''
	baseForm.contractNumber = ''
	baseForm.contractName = ''
	baseForm.purchaseOrderNo = ''
	baseForm.storageOrderNo = ''
	baseForm.orderIdFromMes = ''
	selectedStorageOrders.value = [] // 清空多选数组
}

// 打开合同选择器
async function openContractSelector() {
		// 检查是否已选择采购订单或入库单
	if (baseForm.purchaseOrderNo || baseForm.storageOrderNo) {
		$modal.msg('已选择采购单或入库单，不能同时选择合同！请先清除。')
		return
	}
	
	selectorType.value = 'contract'
	selectedContractType.value = '' // 重置合同类型筛选
	currentPage.value = 1
	hasMore.value = true
	selectorList.value = []
	await loadContracts(1, false)
	openPopup()
}

// 打开采购订单选择器
async function openPurchaseOrderSelector() {
	// 验证收款单位
	if (!baseForm.payeeName) {
		$modal.msg('请先选择收款单位！')
		return
	}
	
	if (!baseForm.vendorCode) {
		$modal.msg('手动输入的收款单位不能选择采购订单，请选择供应商！')
		return
	}
	
		// 检查是否已选择合同或入库单
	if (baseForm.contractId || baseForm.storageOrderNo) {
		$modal.msg('已选择合同或入库单，不能同时选择采购单！请先清除。')
		return
	}
	
	// 验证付款类型：预付款(1)才能选择采购订单
	if (baseForm.paymentType !== '1') {
		$modal.msg('只有预付款类型才能选择采购订单！')
		return
	}
	
	selectorType.value = 'purchaseOrder'
	currentPage.value = 1
	hasMore.value = true
	selectorList.value = []
	await loadPurchaseOrders(1, false)
	openPopup()
}

// 打开入库单选择器
async function openStorageOrderSelector() {
	// 验证收款单位
	if (!baseForm.payeeName) {
		$modal.msg('请先选择收款单位！')
		return
	}
	
	if (!baseForm.vendorCode) {
		$modal.msg('手动输入的收款单位不能选择入库单，请选择供应商！')
		return
	}
	
	// 检查是否已选择合同或采购订单
	if (baseForm.contractId || baseForm.purchaseOrderNo) {
		$modal.msg('已选择合同或采购单，不能同时选择入库单！请先清除。')
		return
	}
	
	// 验证付款类型：到付款(2)才能选择入库单
	if (baseForm.paymentType !== '2') {
		$modal.msg('只有到付款类型才能选择入库单！')
		return
	}
	
	selectorType.value = 'storageOrder'
	selectedStorageOrders.value = [] // 清空之前的选择
	currentPage.value = 1
	hasMore.value = true
	selectorList.value = []
	await loadStorageOrders(1, false)
	openPopup()
}

// 加载供应商列表
async function loadSuppliers(page: number, append: boolean = false) {
	if (isLoading.value) return
	
	isLoading.value = true
	if (page === 1) {
		isRefreshing.value = true
	}
	
	try {
		const res = await getSupplierList(
			userStore.user.useId,
			page,
			pageSize,
			searchKeyword.value
		)
		
		if (res.returnCode === '1') {
			const result = res.returnParams
			const newList = result.list || []
			
			if (append) {
				selectorList.value = [...selectorList.value, ...newList]
			} else {
				selectorList.value = newList
			}
			
			hasMore.value = selectorList.value.length < result.total
		} else {
			$modal.msgError('加载供应商失败')
		}
	} catch (error) {
		console.error('加载供应商失败', error)
		$modal.msgError('加载失败')
	} finally {
		isLoading.value = false
		isRefreshing.value = false
	}
}

// 加载合同列表
async function loadContracts(page: number, append: boolean = false) {
	if (isLoading.value) return
	
	isLoading.value = true
	if (page === 1) {
		isRefreshing.value = true
	}
	
	try {
		const res = await getContractListForPayment(
			userStore.user.useId,
			page,
			pageSize,
			searchKeyword.value,
			'', // supplierCode 不传，由后端根据其他条件筛选
			selectedContractType.value // 合同类型筛选
		)
		
		if (res.returnCode === '1') {
			const result = res.returnParams
			const newList = result.list || []
			
			if (append) {
				selectorList.value = [...selectorList.value, ...newList]
			} else {
				selectorList.value = newList
			}
			
			hasMore.value = selectorList.value.length < result.total
		} else {
			$modal.msgError('加载合同失败')
		}
	} catch (error) {
		console.error('加载合同失败', error)
		$modal.msgError('加载失败')
	} finally {
		isLoading.value = false
		isRefreshing.value = false
	}
}

// 加载采购订单列表
async function loadPurchaseOrders(page: number, append: boolean = false) {
	if (isLoading.value) return
	
	isLoading.value = true
	if (page === 1) {
		isRefreshing.value = true
	}
	
	try {
		const res = await getPurchaseOrderList(
			userStore.user.useId,
			page,
			pageSize,
			baseForm.vendorCode
		)
		
		if (res.returnCode === '1') {
			const result = res.returnParams
			const newList = result.list || []
			
			if (append) {
				selectorList.value = [...selectorList.value, ...newList]
			} else {
				selectorList.value = newList
			}
			
			hasMore.value = selectorList.value.length < result.total
		} else {
			$modal.msgError('加载采购订单失败')
		}
	} catch (error) {
		console.error('加载采购订单失败', error)
		$modal.msgError('加载失败')
	} finally {
		isLoading.value = false
		isRefreshing.value = false
	}
}

// 加载入库单列表
async function loadStorageOrders(page: number, append: boolean = false) {
	if (isLoading.value) return
	
	isLoading.value = true
	if (page === 1) {
		isRefreshing.value = true
	}
	
	try {
		const res = await getStorageOrderList(
			userStore.user.useId,
			page,
			pageSize,
			baseForm.vendorCode
		)
		
		if (res.returnCode === '1') {
			const result = res.returnParams
			const newList = result.list || []
			
			if (append) {
				selectorList.value = [...selectorList.value, ...newList]
			} else {
				selectorList.value = newList
			}
			
			hasMore.value = selectorList.value.length < result.total
		} else {
			$modal.msgError('加载入库单失败')
		}
	} catch (error) {
		console.error('加载入库单失败', error)
		$modal.msgError('加载失败')
	} finally {
		isLoading.value = false
		isRefreshing.value = false
	}
}

// 加载更多
function loadMore() {
	if (!hasMore.value || isLoading.value) return
	currentPage.value++
	
	if (selectorType.value === 'supplier') {
		loadSuppliers(currentPage.value, true)
	} else if (selectorType.value === 'contract') {
		loadContracts(currentPage.value, true)
	} else if (selectorType.value === 'purchaseOrder') {
		loadPurchaseOrders(currentPage.value, true)
	} else if (selectorType.value === 'storageOrder') {
		loadStorageOrders(currentPage.value, true)
	}
}

// 下拉刷新
function onRefresh() {
	currentPage.value = 1
	if (selectorType.value === 'supplier') {
		loadSuppliers(1, false)
	} else if (selectorType.value === 'contract') {
		loadContracts(1, false)
	} else if (selectorType.value === 'purchaseOrder') {
		loadPurchaseOrders(1, false)
	} else if (selectorType.value === 'storageOrder') {
		loadStorageOrders(1, false)
	}
}

// 搜索
function handleSearch() {
	currentPage.value = 1
	if (selectorType.value === 'supplier') {
		loadSuppliers(1, false)
	} else if (selectorType.value === 'contract') {
		loadContracts(1, false)
	}
}

// 合同类型变化
function onContractTypeChange(e: any) {
	const selectedIndex = e.detail.value
	selectedContractType.value = contractTypeList.value[selectedIndex].value
	// 重新加载合同列表
	loadContracts(1, false)
}

function openPopup() {
	;(selectorPopup.value as any).open()
}

function closePopup() {
	;(selectorPopup.value as any).close()
}

function getSelectorItemName(item: any): string {
	if (selectorType.value === 'supplier') {
		return item.vendorName || item.name || ''
	} else if (selectorType.value === 'contract') {
		return item.contract_name || item.contractName || ''
	} else if (selectorType.value === 'purchaseOrder') {
		return item.purchaseCode || item.purchase_code || ''
	} else if (selectorType.value === 'storageOrder') {
		return item.recptCode || item.recpt_code || ''
	}
	return ''
}

function getItemCode(item: any): string {
	if (selectorType.value === 'supplier') {
		return item.vendorCode || item.code || ''
	} else if (selectorType.value === 'contract') {
		return item.contract_number || item.contractNumber || ''
	}
	return ''
}

function getItemSpec(item: any): string {
	if (selectorType.value === 'contract') {
		return item.supplierName || item.supplier_name || ''
	}
	return ''
}

// 获取供应商名称（采购订单/入库单）
function getItemVendor(item: any): string {
	if (selectorType.value === 'purchaseOrder' || selectorType.value === 'storageOrder') {
		return item.vendorName || item.vendor_name || ''
	}
	return ''
}

// 获取总金额（采购订单/入库单）
function getItemAmount(item: any): string {
	if (selectorType.value === 'purchaseOrder' || selectorType.value === 'storageOrder') {
		const amount = item.totalAmount || item.total_amount
		if (amount) {
			return Number(amount).toFixed(2)
		}
	}
	return ''
}

// 获取单据状态（采购订单/入库单）
function getItemStatus(item: any): string {
	if (selectorType.value === 'purchaseOrder' || selectorType.value === 'storageOrder') {
		const status = item.status
		if (status === 'CONFIRMED') {
			return '已确认'
		} else if (status === 'FINISHED') {
			return '已完成'
		}
	}
	return ''
}

// 获取状态样式类
function getStatusClass(item: any): string {
	const status = item.status
	if (status === 'CONFIRMED') {
		return 'status-confirmed'
	} else if (status === 'FINISHED') {
		return 'status-finished'
	}
	return ''
}

// 获取创建时间（采购订单/入库单）
function getItemCreateTime(item: any): string {
	if (selectorType.value === 'purchaseOrder' || selectorType.value === 'storageOrder') {
		return item.createTime || item.create_time || ''
	}
	return ''
}

// 获取合同类型名称（根据 contract_type 值）
function getContractTypeName(item: any): string {
	const type = item.contract_type
	if (!type) return ''
	
	const typeMap: Record<string, string> = {
		'1': '销售合同',
		'2': '采购合同',
		'3': '技术服务合同'
	}
	
	// 优先使用后端返回的 contract_type_name，如果没有则根据 contract_type 转换
	return item.contract_type_name || typeMap[String(type)] || ''
}

// 检查入库单是否已选中
function isStorageOrderSelected(item: any): boolean {
	if (selectorType.value !== 'storageOrder') return false
	return selectedStorageOrders.value.some(order => 
		order.recptCode === (item.recptCode || item.recpt_code)
	)
}

// 切换入库单选择状态
function toggleStorageOrderSelection(item: any) {
	if (selectorType.value !== 'storageOrder') {
		// 非入库单类型，直接选择并关闭
		selectItem(item)
		return
	}
	
	const recptCode = item.recptCode || item.recpt_code
	const index = selectedStorageOrders.value.findIndex(order => order.recptCode === recptCode)
	
	if (index > -1) {
		// 已选中，取消选择
		selectedStorageOrders.value.splice(index, 1)
	} else {
		// 未选中，添加到选择列表
		selectedStorageOrders.value.push({
			recptCode: recptCode,
			recptId: item.recptId || item.recpt_id,
			recptName: item.recptName || item.recpt_name,
			vendorName: item.vendorName || item.vendor_name,
			totalAmount: item.totalAmount || item.total_amount
		})
	}
}

// 确认入库单选择
function confirmStorageOrderSelection() {
	if (selectedStorageOrders.value.length === 0) {
		$modal.msg('请至少选择一个入库单！')
		return
	}
	
	// 将选中的入库单编号拼接（用逗号分隔）
	const storageOrderNos = selectedStorageOrders.value.map(order => order.recptCode).join(',')
	const storageOrderIds = selectedStorageOrders.value.map(order => order.recptId).join(',')
	
	baseForm.storageOrderNo = storageOrderNos
	baseForm.orderIdFromMes = storageOrderIds
	
	// 清空合同、采购订单
	baseForm.contractId = ''
	baseForm.contractNumber = ''
	baseForm.contractName = ''
	baseForm.purchaseOrderNo = ''
	
	closePopup()
}

function selectItem(item: any) {
	// 入库单使用多选逻辑，不走这里
	if (selectorType.value === 'storageOrder') return
	
	if (selectorType.value === 'supplier') {
		baseForm.payeeName = item.vendorName || item.name || ''
		baseForm.vendorCode = item.vendorCode || item.code || ''
		// 清空合同、采购订单、入库单
		clearRelatedOrders()
	} else if (selectorType.value === 'contract') {
		// 检查合同类型，只允许采购合同(2)和技术服务合同(3)
		const contractType = item.contract_type
		if (contractType !== 2 && contractType !== 3) {
			$modal.msg('只能选择采购合同或技术服务合同！')
			return
		}
		
		baseForm.contractId = item.universalid || item.id || ''
		baseForm.contractNumber = item.contract_number || item.contractNumber || ''
		baseForm.contractName = item.contract_name || item.contractName || ''
		// 回填供应商信息
		baseForm.payeeName = item.supplierName || item.supplier_name || ''
		baseForm.vendorCode = item.supplierCode || item.supplier_code || ''
		// 清空采购订单、入库单
		baseForm.purchaseOrderNo = ''
		baseForm.storageOrderNo = ''
		baseForm.orderIdFromMes = ''
	} else if (selectorType.value === 'purchaseOrder') {
		baseForm.purchaseOrderNo = item.purchaseCode || item.purchase_code || ''
		baseForm.orderIdFromMes = item.purchaseId || item.purchase_id || ''
		// 清空合同、入库单
		baseForm.contractId = ''
		baseForm.contractNumber = ''
		baseForm.contractName = ''
		baseForm.storageOrderNo = ''
	} else if (selectorType.value === 'storageOrder') {
		baseForm.storageOrderNo = item.recptCode || item.recpt_code || ''
		baseForm.orderIdFromMes = item.recptId || item.recpt_id || ''
		// 清空合同、采购订单
		baseForm.contractId = ''
		baseForm.contractNumber = ''
		baseForm.contractName = ''
		baseForm.purchaseOrderNo = ''
	}
	
	closePopup()
}

// 收款单位输入处理
function onPayeeInputChange(value: string) {
	// 如果有合同ID，不允许手动修改
	if (baseForm.contractId) return
	
	// 手动输入时，立即清空所有关联信息和供应商编码
	clearRelatedOrders()
	baseForm.vendorCode = ''
}

// 监听收款单位变化，如果手动修改则清空关联信息
watch(() => baseForm.payeeName, (newVal, oldVal) => {
	// 如果有合同ID，不允许手动修改
	if (baseForm.contractId) return
	
	// 如果是从有值变为空，不处理
	if (!newVal && oldVal) return
	
	// 如果是通过选择器选择的（有vendorCode），不处理
	if (baseForm.vendorCode) return
	
	// 手动输入时，确保清空所有关联信息和供应商编码
	clearRelatedOrders()
	baseForm.vendorCode = ''
})

// 文件上传处理
async function handleFileSelect(files: any) {
	files.tempFiles.forEach(async (file: any) => {
		const data = {
			name: file.name,
			filePath: file.path,
		}
		try {
			const res = await uploadFile(data)
			file.seq = res.returnParams
			fileSeqs.value.push({ 'seq': res.returnParams, 'path': file.path })
			fileList.value.push(file)
			$modal.msgSuccess('文件' + data.name + '上传成功')
		} catch (err) {
			$modal.msgError('文件' + data.name + '上传失败，请删除重新上传')
			console.error('文件上传失败:', err)
		}
	})
}

function handleFileProgress(file: any, progress: any) {
	//console.log('handleFileProgress', file, progress)
}

function handleFileSuccess(file: any, res: any) {
	//console.log('handleFileSuccess', file, res)
}

function handleFileFail(file: any, err: any) {
	//console.log('handleFileFail', file, err)
}

function handleFileDelete(file: any) {
	const index = fileSeqs.value.findIndex(({ path }) => path === file.tempFilePath)
	if (index !== -1) {
		fileSeqs.value.splice(index, 1)
	}
}

// 提交表单
async function submitForm() {
	// 表单校验
	if (!baseFormRef.value) {
		$modal.msgError('表单未初始化')
		return
	}
	
	try {
		await baseFormRef.value.validate()
	} catch (error) {
		console.error('表单校验失败', error)
		$modal.msgError('请填写必填项')
		return
	}
	
	// 验证合同、采购订单、入库单互斥逻辑
	let selectedCount = 0
	if (baseForm.contractId  && baseForm.contractId !== '0') selectedCount++
	if (baseForm.purchaseOrderNo) selectedCount++
	if (baseForm.storageOrderNo) selectedCount++
	
	if (selectedCount > 1) {
		$modal.msgError('合同、采购订单、入库单只能选择其中一个！')
		return
	}
	
	// 验证默认账户
	if (!baseForm.accountId) {
		$modal.msgError('没有默认付款账户！请检查是否已设置默认账户。')
		return
	}

	isSubmitting.value = true
	
	try {
		// 构建表单数据
		const formData = {
			...baseForm
		}

		// 准备提交流程参数
		const processInfoData = {
			staffId: userStore.user.useId,
			staffName: userStore.user.name,
			gxId: userStore.user.gxId,
			groupId: userStore.user.groupid,
			insName: userStore.user.name + '的'+ processInfo.modelName,
			modelId: processInfo.modelId,
			tmodelId: processInfo.tmodelId,
			formId: processInfo.formId,
			fileIds: fileSeqs.value.length === 0 ? '' : fileSeqs.value.map(f => f.seq)
		}

		// 检查是否需要附件
		if (processInfo.reqOffice == 1 && fileSeqs.value.length === 0) {
			$modal.msgError('该流程需要上传附件')
			isSubmitting.value = false
			return
		}

		// 一次性提交表单和流程数据
		const res = await startPaymentProcess(userStore.user.useId, formData, processInfoData)
		
		if (res.returnCode !== '1') {
			$modal.msgError(res.returnMsg || '提交失败')
			isSubmitting.value = false
			return
		}

		$modal.msgSuccess('提交成功')
		setTimeout(() => {
			$tab.navigateBack()
		}, 1000)
	} catch (error) {
		console.error('提交失败', error)
		$modal.msgError('提交失败，请重试')
	} finally {
		isSubmitting.value = false
	}
}
</script>

<style lang="scss" scoped>
.payment-container {
	padding-bottom: 80px;
}

// 收款单位输入框和按钮的布局样式
.payee-input-wrapper {
	display: flex;
	flex-direction: column;
	gap: 8px;
	
	::v-deep .uni-easyinput {
		width: 100%;
	}
	
	.select-supplier-btn {
		width: 100%;
	}
}

.selector-wrapper {
	padding: 8px 10px;
	border: 1px solid #e5e5e5;
	border-radius: 4px;
	min-height: 36px;
	display: flex;
	align-items: center;
	cursor: pointer;
	
	&:active {
		background-color: #f5f5f5;
	}
	
	.placeholder {
		color: #999;
	}
}

.picker-wrapper {
	padding: 8px 10px;
	border: 1px solid #e5e5e5;
	border-radius: 4px;
	min-height: 36px;
	display: flex;
	align-items: center;
	
	.placeholder {
		color: #999;
	}
}

.submit-btn-wrapper {
	position: sticky;
	width: 100%;
	bottom: 10px;
	padding: 10px 15px;
	background-color: #fff;
	box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
	z-index: 10;
	box-sizing: border-box;

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

.selector-popup {
	width: 90%;
	max-width: 500px;
	max-height: 70vh;
	background-color: #fff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
	
	position: relative;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	
	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15px;
		border-bottom: 1px solid #e5e5e5;
		
		.popup-title {
			font-size: 16px;
			font-weight: bold;
		}
	}
	
	.popup-content-wrapper {
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		padding-bottom: 50px; // 为固定底部按钮留出空间
		
		.search-bar {
			display: flex;
			gap: 10px;
			padding: 10px 15px;
			align-items: center;
		}
		
		.filter-bar {
			padding: 10px 15px;
			background-color: #fff;
			border-bottom: 1px solid #e5e5e5;
			
			.picker-filter {
				padding: 8px 12px;
				background-color: #f5f5f5;
				border-radius: 4px;
				font-size: 14px;
				color: #333;
			}
		}
		
		.selected-tip {
			padding: 10px 15px;
			background-color: #f0f9eb;
			border-bottom: 1px solid #e5e5e5;
			color: #67c23a;
			font-size: 13px;
		}
		
		.popup-content {
			flex: 1;
			overflow-y: auto;
			
			.selector-item {
				padding: 10px 12px;
				border-bottom: 1px solid #f0f0f0;
				
				&:active {
					background-color: #f5f5f5;
				}
				
				&.selected {
					background-color: #f0f9eb;
				}
				
				.selector-item-content {
					display: flex;
					justify-content: space-between;
					align-items: center;
					gap: 8px;
					
					// 入库单复选框样式
					.checkbox-wrapper {
						width: 24px;
						height: 24px;
						display: flex;
						align-items: center;
						justify-content: center;
						flex-shrink: 0;
						
						.checkbox-icon {
							font-size: 18px;
							color: #4caf50;
							font-weight: bold;
						}
					}
					
					.item-info {
						flex: 1;
						display: flex;
						flex-wrap: wrap;
						align-items: center;
						gap: 4px;
						
						.item-name {
							font-size: 15px;
							font-weight: bold;
							color: #333;
							flex-basis: 100%;
							margin-bottom: 4px;
						}
						
						.item-code,
						.item-spec {
							font-size: 13px;
							color: #666;
							white-space: nowrap;
							font-weight: 500;
						}
						
						.item-vendor {
							font-size: 13px;
							color: #999;
							white-space: nowrap;
						}
						
						.item-amount {
							font-size: 13px;
							color: #f76560;
							white-space: nowrap;
							font-weight: 500;
						}
						
						.item-status {
							font-size: 12px;
							padding: 2px 8px;
							border-radius: 4px;
							white-space: nowrap;
							
							&.status-confirmed {
								background-color: #ffecdb;
								color: #ff8800;
							}
							
							&.status-finished {
								background-color: #e8f5e9;
								color: #4caf50;
							}
						}
						
						.item-time {
							font-size: 12px;
							color: #999;
							white-space: nowrap;
							flex-basis: 100%;
							margin-top: 2px;
						}
						
						.item-type {
							font-size: 12px;
							color: #ff6b6b;
							white-space: nowrap;
							margin-left: 4px;
						}
						
						.item-code::after {
							content: ' | ';
							margin: 0 4px;
							color: #ddd;
						}
					}
				}
			}
			
			.loading-text {
				text-align: center;
				padding: 12px;
				color: #909399;
				font-size: 13px;
			}
			
			.no-more-text {
				text-align: center;
				padding: 12px;
				color: #909399;
				font-size: 13px;
			}
			
			.empty-data {
				text-align: center;
				padding: 30px;
				color: #909399;
			}
			
			// 入库单多选提示
			.selected-tip {
				padding: 8px 12px;
				background-color: #e8f5e9;
				color: #4caf50;
				font-size: 13px;
				text-align: center;
				border-bottom: 1px solid #c8e6c9;
			}
		}
	}
	
	// 入库单确认按钮区域（固定在底部）
	.popup-footer-fixed {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 12px;
		border-top: 1px solid #e5e5e5;
		background-color: #fff;
		display: flex;
		gap: 12px;
		z-index: 10;
		box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
	}
	
	.popup-footer-fixed .cancel-btn {
		flex: 1 !important;
		height: 44px !important;
		line-height: 44px !important;
		font-size: 16px !important;
		background-color: #f5f5f5 !important;
		color: #333 !important;
		border: none !important;
		border-radius: 8px !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	
	.popup-footer-fixed .confirm-btn {
		flex: 1 !important;
		height: 44px !important;
		line-height: 44px !important;
		font-size: 16px !important;
		background-color: #007aff !important;
		color: #fff !important;
		border: none !important;
		border-radius: 8px !important;
		margin: 0 !important;
		padding: 0 !important;
	}
}

// 基本信息中的禁用字段样式优化（参考 edit/index.vue）
::v-deep .uni-forms {
  .uni-forms-item__content {
    .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;
        color: #333;
      }
    }
  }
}
</style>