<template>
	<div class="exp-form">
		<van-collapse v-model="activeNames">
			<van-collapse-item title="结算单头信息" name="1">
				<van-field v-model="form.accountNo" label="结算单号" readonly />
				<van-field v-model="form.contrNo" label="合同号" readonly />
				<van-field v-model="form.khContrNo" label="对方合同号" readonly />
				<van-field v-model="form.tradePartnerCode" label="供应商编码" readonly />
				<van-field v-model="form.tradePartnerName" label="供应商名称" readonly />
				<van-field v-model="form.invoiceNo" label="发票编号" readonly />
				<van-field v-model="form.invoiceNum" label="发票号码" readonly />
				<van-field v-model="form.invoiceCnt" label="发票张数" readonly />
				<van-field v-model="form.invoiceDate" label="发票日期" readonly />
				<van-field v-model="form.invoiceAmount" label="发票金额" readonly />
				<van-field v-model="form.contrPrice" label="合同单价" readonly />
				<van-field v-model="form.contrTaxPrice" label="合同含税单价" readonly />
				<van-field v-model="form.transportMth" label="运输方式" readonly />
				<van-field v-model="form.payMth1" label="付款方式" readonly />
				<van-field v-model="form.actBasis" label="结算依据" readonly />
				<van-field v-model="form.actMth1" label="结算方式" readonly />
				<van-field v-model="form.actQty" label="结算数量" readonly />
				<van-field v-model="form.totalAmountExcludeTax" label="不含税金额" readonly />
				<van-field v-model="form.actMth" label="税率" readonly />
				<van-field v-model="form.taxRateCal" label="计算税率" readonly />
				<van-field v-model="form.tax" label="税额" readonly />
				<van-field v-model="form.glDate" label="起止日期" readonly />
				<van-field v-model="form.description" 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 style="display: flex;justify-content: space-between;">
						<span>行号：{{line.accountLine }}</span>
						<span>物料名称：{{ line.itemNm }}</span>
					</div>
					<div style="display: flex;justify-content: space-between;">
						<span>接收数量：{{ line.quantityInvoiced }}</span>
						<span>结算量：{{ line.quantityAccount }}</span>
					</div>
					<div style="display: flex;justify-content: space-between;">
						<span>计量单位：{{ dicList.MEASURING_UNIT.find(item => item.dicCode == line.unit)?.dicName }}</span>
						<span>税率：{{ line.taxRate }}</span>
					</div>
					<div style="display: flex;justify-content: space-between;">
						<span>单价：{{ line.unitPrice }}</span>
						<span>行金额：{{ line.amount }}</span>
					</div>
					<div style="display: flex;justify-content: space-between;">
						<span>含税单价：{{ line.unitTaxPrice }}</span>
						<span>行含税金额：{{ line.taxAmount }}</span>
					</div>
					<div style="display: flex;justify-content: space-between;">
						<span>采购订单号：{{ line.purOrdNo }}</span>
						<span>行号：{{ line.purOrdLn }}</span>
					</div>
					<div style="display: flex;justify-content: space-between;">
						<span>对账单号：{{ line.billNo }}</span>
						<span>行号：{{ line.billLine }}</span>
					</div>
					<div style="display: flex;justify-content: space-between;">
						<span>备注：{{ line.description }}</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: [],
		TAX_RATE: [],
		MEASURING_UNIT: []
	})
	const getDictList = () => {
		var url = 'framework/Common/querySelectorList'
		var param = {
			type: JSON.stringify(['COM_PAY_MTH', 'TAX_RATE', 'MEASURING_UNIT'])
		}
		proxy.$axios.get(url, param).then(response => {
			if (response.data.code == '0') {
				dicList.value = response.data.data
				
				form.value.payMth1 = formmater(dicList.value.COM_PAY_MTH, form.value.payMth)
				form.value.taxRate1 = formmater(dicList.value.TAX_RATE, form.value.taxRate)
				form.value.glDate = form.value.glDateBegin + ' 至 ' + form.value.glDateEnd
			} else {
				showToast('操作失败！' + response.data.msg)
			}
		})

	}
	const formmater = (arr, val) => {
		if (val && arr) {
			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: '',
		accountNo: '',
		tradePartnerCode: '',
		tradePartnerName: '',
		tradePartnerId: '',
		invoiceNo: '',
		invoiceCnt: '',
		invoiceType: '',
		invoiceDate: '',
		invoiceAmount: null,
		invoiceCurrency: '',
		exchangeRate: '',
		exchangeDate: '',
		description: '',
		glDate: '',
		glDateBegin: '',
		glDateEnd: '',
		totalAmountExcludeTax: null,
		contrNo: '',
		khContrNo: '',
		invoiceNum: '',
		taxRateCode: '',
		taxRateCal: '',
		tax: null,
		taxRate: '',
		transportMth: '',
		payMth: '',
		actBasis: '',
		actMth: '',
		actQty: null,
		contrPrice: '',
		contrTaxPrice: '',
		addId: '',
		addCode: '',
		addName: '',
		addDeptId: '',
		addDeptCode: '',
		addDeptName: '',
		addTime: '',
		modifyCode: '',
		modifyName: '',
	})

	const getTableData = () => {
		var url = 'pur/ActHead/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.accountNo)
			} else {
				showToast('操作失败！' + response.data.msg)
			}
		})
	}

	// 查询对账单明细
	const tableDataLine = ref([])
	const getTableDataLine = (accountNo) => {
		var url = 'pur/ActLine/queryH5'
		var param = {
			params: JSON.stringify({
				accountNo: accountNo
			})
		}
		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;
	}

	.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>