<template>
	<div class="exp-form">
		<van-collapse v-model="activeNames">
			<van-collapse-item title="付款申请单头" name="1">
				<van-field v-model="form.reqNo" label="申请单号" readonly />
				<van-field v-model="form.payAmount" label="申请金额" readonly />
				<van-field v-model="form.compNm" label="公司名称" readonly />
				<van-field v-model="form.addDeptName" label="部门名称" readonly />
				<van-field v-model="form.addName" label="申请人" readonly />
				<van-field v-model="form.remark" label="备注" readonly />
				<van-field v-model="form.tradePartnerCode" label="供应商编码" readonly />
				<van-field v-model="form.tradePartnerName" label="供应商名称" readonly />
				<van-field v-model="form.accountNo" label="收款账号" readonly />
				<van-field v-model="form.bankNo" label="开户联行号" readonly />
				<van-field v-model="form.bankNm" label="开户行" readonly />
				<van-field v-model="form.payProv1" label="省" readonly />
				<van-field v-model="form.payCity" label="市" readonly />
			</van-collapse-item>

			<van-collapse-item title="付款单明细" name="2">
				<div v-for="(line,index) in tableDataLine" style="color: #323233"
					@click="getTableDataSettlement(line.contrNo, line.conLine)">
					<div >
						<span>行号：{{line.reqLn }}</span>
					</div>
					<div >
						<span>申请支付日期：{{ line.reqDate }}</span>
					</div>
					<div >
						<span>结算单号：{{ line.accountNo }}</span>
					</div>
					<div >
						<span>发票编号：{{ line.invoiceNo }}</span>
					</div>
					<div >
						<span>采购合同：{{ line.purContrCd }}</span>	
					</div>
					<div >
						<span>采购合同：{{ line.purContrCd }}</span>	
					</div>	
					<div >
						<span>合同额：{{ line.amount }}</span>
					</div>
					<div >
						<span>已付金额：{{ line.payedAmount }}</span>
					</div>
					<div >
						<span>本次申请金额：{{ line.reqAmount }}</span>
					</div>	
					<div >
						<span>申请类型：{{ dicList.PUR_PAY_TYPE.find(item => item.dicCode == line.reqTy)?.dicName }}</span>
					</div>
					<div >
						<span>付款方式：{{ dicList.COM_PAY_MTH.find(item => item.dicCode == line.payMth)?.dicName }}</span>
					</div>
					<div>
						<span>申请状态：{{ dicList.PUR_PAY_STS.find(item => item.dicCode == line.reqSts)?.dicName }}</span>
					</div>	
					<div >
						<span>退款金额：{{ line.refundAmount }}</span>
					</div>	
					<van-divider v-if="index < (tableDataLine.length - 1)" />
				</div>
			</van-collapse-item>
		</van-collapse>
	</div>
</template>

<script setup lang="ts">
	import { ref, reactive, onMounted, getCurrentInstance } from 'vue'
	import { useRouter, useRoute } from 'vue-router'
	import { showToast, showDialog, showLoadingToast, showSuccessToast, closeToast } from 'vant'
	const { proxy } = getCurrentInstance()
	const route = useRoute()
	import {
		useWorkflowStore
	} from "@/stores/workflow"
	const workflow = useWorkflowStore()

	onMounted(() => {
		workflow.setWorkId(route.query.workId);
		getDictList()
		getTableData()
	})

	/**
	 *  查询字典
	 */
	const dicList = ref({
		COM_PAY_MTH: [],
		PUR_PAY_TYPE: [],
		PROVINCE_CODE: [],
		PUR_PAY_STS: [],
	})
	const getDictList = () => {
		var url = 'framework/Common/querySelectorList'
		var param = {
			type: JSON.stringify(['COM_PAY_MTH', 'PUR_PAY_TYPE', 'PROVINCE_CODE', 'PUR_PAY_STS'])
		}
		proxy.$axios.get(url, param).then(response => {
			if (response.data.code == '0') {
				dicList.value = response.data.data
				
				form.value.payProv1 = formmater(dicList.value.PROVINCE_CODE, form.value.payProv)
			} else {
				showToast('操作失败！' + response.data.msg)
			}
		})

	}
	const formmater = (arr, val) => {
		console.log(val)
		if (val && arr) {
			console.log(val)
			const temp = arr.find(item => item.dicCode == val)?.dicName
			return temp ? temp : val
		}

		return val
	}

	const activeNames = ref(['1'])

	// 查询对账单头信息
	const form = ref({
		id: '',
		compCd: '',
		compNm: '',
		reqNo: '',
		reqPayDate: '',
		reqDate: '',
		reqSts: '',
		payMth: '',
		payAmount: '',
		paySts: '',
		actPayDate: '',
		actPayAmount: '',
		remark: '',
		tradePartnerId: '',
		tradePartnerCode: '',
		tradePartnerName: '',
		accountNo: '',
		bankNo: '',
		bankNm: '',
		payProv: '',
		payCity: '',
		actAccountNo: '',
		actAccountNm: '',
		processInstanceId: '',
		processInstanceStatus: '',
		addId: '',
		addCode: '',
		addName: '',
		addDeptId: '',
		addDeptCode: '',
		addDeptName: '',
		addTime: '',
		modifyId: '',
		modifyCode: '',
		modifyTime: '',
		cancelId: '',
		cancelCode: '',
		cancelName: '',
	})

	const getTableData = () => {
		var url = 'pur/PayReqHead/queryByWorkId'
		var param = {
			workId: workflow.workId
		}

		proxy.$axios.get(url, param).then((response : any) => {
			if (response.data.code == '0') {
				form.value = response.data.data
				getDictList()
				getTableDataLine(form.value.reqNo)
			} else {
				showToast('操作失败！' + response.data.msg)
			}
		})
	}

	// 查询对账单明细
	const tableDataLine = ref([])
	const getTableDataLine = (reqNo) => {
		var url = 'pur/PayReqLine/queryH5'
		var param = {
			params: JSON.stringify({
				reqNo: reqNo
			})
		}
		proxy.$axios.get(url, param).then((response : any) => {
			if (response.data.code == '0') {
				tableDataLine.value = response.data.data
			} else {
				showToast('操作失败！' + response.data.msg)
			}
		})
	}
</script>

<style lang="scss" scoped>
	.exp-form {
		background: #f7f8fa;
		padding-bottom: 20px;
	}
	.padd {
	  padding: 3px;
	}
	.van-collapse-item {
		padding: 10px;
		border-radius: 45px !important;

		.van-cell--clickable {
			border-radius: 10px 10px 0 0;
		}
	}

	:deep .van-cell {
		border-radius: 10px 10px 0 0;
	}

	:deep .van-collapse-item__wrapper {
		border-radius: 0 0 10px 10px;
	}
</style>