<template>
	<div class="exp-form">
		<van-collapse v-model="activeNames">
			<van-collapse-item title="对账单头信息" name="1">
				<van-field v-model="form.billNo" label="对账单单号" readonly />
				<van-field v-model="form.tradePartnerCode" label="供应商编码" readonly />
				<van-field v-model="form.tradePartnerName" label="供应商名称" readonly />
				<van-field v-model="form.contrNo" label="合同号" readonly />
				<van-field v-model="form.khContrNo" label="对方合同号" readonly />
				<van-field v-model="form.accountQty" label="结算重量和" readonly />
				<van-field v-model="form.accountAmount" label="结算金额和" readonly />
				<van-field v-model="form.accountTaxAmount" 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.billLine }}</span>
						<span>收货日期：{{ line.stoInDt }}</span>
					</div>
					<div style="display: flex;justify-content: space-between;">
						<span>收货重量：{{ line.qty }}</span>
						<span>结算重量：{{ line.accountQty }}</span>
					</div>
					<div style="display: flex;justify-content: space-between;">
						<span>TFe是否为结算项：{{ line.mtlExistTfe!='' && line.mtlExistTfe=='1' ? '是' : '否' }}</span>
						<span>TFe检化验结果：{{ line.mtlResultTfe }}</span>
					</div>
					<div style="display: flex;justify-content: space-between;">
						<span>TFe结算标准：{{ line.mtlStandardTfe }}</span>
						<span>TFe加减价：{{ line.mtlPriceChangeTfe }}</span>
					</div>
					<div style="display: flex;justify-content: space-between;">
						<span>H₂O是否为结算项：{{ line.mtlExistH2o!='' && line.mtlExistH2o=='1' ? '是' : '否' }}</span>
						<span>H₂O检化验结果：{{ line.mtlResultH2o }}</span>
					</div>
					<div style="display: flex;justify-content: space-between;">
						<span>H₂O结算标准：{{ line.mtlStandardH2o }}</span>
						<span>H₂O加减价：{{ line.mtlPriceChangeH2o }}</span>
					</div>
					<div style="display: flex;justify-content: space-between;">
						<span>FeO是否为结算项：{{ line.mtlExistFeo!='' && line.mtlExistFeo=='1' ? '是' : '否' }}</span>
						<span>FeO检化验结果：{{ line.mtlResultFeo }}</span>
					</div>
					<div style="display: flex;justify-content: space-between;">
						<span>FeO结算标准：{{ line.mtlStandardFeo }}</span>
						<span>FeO加减价：{{ line.mtlPriceChangeFeo }}</span>
					</div>
					<div style="display: flex;justify-content: space-between;">
						<span>S是否为结算项：{{ line.mtlExistS!='' && line.mtlExistS=='1' ? '是' : '否' }}</span>
						<span>S检化验结果：{{ line.mtlResultS }}</span>
					</div>
					<div style="display: flex;justify-content: space-between;">
						<span>S结算标准：{{ line.mtlStandardS }}</span>
						<span>S加减价：{{ line.mtlPriceChangeS }}</span>
					</div>
					<div style="display: flex;justify-content: space-between;">
						<span>P是否为结算项：{{ line.mtlExistP!='' && line.mtlExistP=='1' ? '是' : '否' }}</span>
						<span>P检化验结果：{{ line.mtlResultP }}</span>
					</div>
					<div style="display: flex;justify-content: space-between;">
						<span>P结算标准：{{ line.mtlStandardP }}</span>
						<span>P加减价：{{ line.mtlPriceChangeP }}</span>
					</div>
					<div style="display: flex;justify-content: space-between;">
						<span>SiO₂是否为结算项：{{ line.mtlExistSio2!='' && line.mtlExistSio2=='1' ? '是' : '否' }}</span>
						<span>SiO₂检化验结果：{{ line.mtlResultSio2 }}</span>
					</div>
					<div style="display: flex;justify-content: space-between;">
						<span>SiO₂结算标准：{{ line.mtlStandardSio2 }}</span>
						<span>SiO₂加减价：{{ line.mtlPriceChangeSio2 }}</span>
					</div>
					<div style="display: flex;justify-content: space-between;">
						<span>Al₃O₂是否为结算项：{{ line.mtlExistAl3o2!='' && line.mtlExistAl3o2=='1' ? '是' : '否' }}</span>
						<span>Al₃O₂检化验结果：{{ line.mtlResultAl3o2 }}</span>
					</div>
					<div style="display: flex;justify-content: space-between;">
						<span>Al₃O₂结算标准：{{ line.mtlStandardAl3o2 }}</span>
						<span>Al₃O₂加减价：{{ line.mtlPriceChangeAl3o2 }}</span>
					</div>
					<div style="display: flex;justify-content: space-between;">
						<span>TiO₂是否为结算项：{{ line.mtlExistTio2!='' && line.mtlExistTio2=='1' ? '是' : '否' }}</span>
						<span>TiO₂检化验结果：{{ line.mtlResultTio2 }}</span>
					</div>
					<div style="display: flex;justify-content: space-between;">
						<span>TiO₂结算标准：{{ line.mtlStandardTio2 }}</span>
						<span>TiO₂加减价：{{ line.mtlPriceChangeTio2 }}</span>
					</div>
					<div style="display: flex;justify-content: space-between;">
						<span>ZnO是否为结算项：{{ line.mtlExistZno!='' && line.mtlExistZno=='1' ? '是' : '否' }}</span>
						<span>ZnO检化验结果：{{ line.mtlResultZno }}</span>
					</div>
					<div style="display: flex;justify-content: space-between;">
						<span>ZnO结算标准：{{ line.mtlStandardZno }}</span>
						<span>ZnO加减价：{{ line.mtlPriceChangeZno }}</span>
					</div>
					<div style="display: flex;justify-content: space-between;">
						<span>PbO是否为结算项：{{ line.mtlExistPbo!='' && line.mtlExistPbo=='1' ? '是' : '否' }}</span>
						<span>PbO检化验结果：{{ line.mtlResultPbo }}</span>
					</div>
					<div style="display: flex;justify-content: space-between;">
						<span>PbO结算标准：{{ line.mtlStandardPbo }}</span>
						<span>PbO加减价：{{ line.mtlPriceChangePbo }}</span>
					</div>
					<div style="display: flex;justify-content: space-between;">
						<span>As是否为结算项：{{ line.mtlExistAs!='' && line.mtlExistAs=='1' ? '是' : '否' }}</span>
						<span>As检化验结果：{{ line.mtlResultAs }}</span>
					</div>
					<div style="display: flex;justify-content: space-between;">
						<span>As结算标准：{{ line.mtlStandardAs }}</span>
						<span>As加减价：{{ line.mtlPriceChangeAs }}</span>
					</div>
					<div style="display: flex;justify-content: space-between;">
						<span>Mn是否为结算项：{{ line.mtlExistMn!='' && line.mtlExistMn=='1' ? '是' : '否' }}</span>
						<span>Mn检化验结果：{{ line.mtlResultMn }}</span>
					</div>
					<div style="display: flex;justify-content: space-between;">
						<span>Mn结算标准：{{ line.mtlStandardMn }}</span>
						<span>Mn加减价：{{ line.mtlPriceChangeMn }}</span>
					</div>
					<div style="display: flex;justify-content: space-between;">
						<span>Cu是否为结算项：{{ line.mtlExistCu!='' && line.mtlExistCu=='1' ? '是' : '否' }}</span>
						<span>Cu检化验结果：{{ line.mtlResultCu }}</span>
					</div>
					<div style="display: flex;justify-content: space-between;">
						<span>Cu结算标准：{{ line.mtlStandardCu }}</span>
						<span>Cu加减价：{{ line.mtlPriceChangeCu }}</span>
					</div>
					<div style="display: flex;justify-content: space-between;">
						<span>MgO是否为结算项：{{ line.mtlExistMgo!='' && line.mtlExistMgo=='1' ? '是' : '否' }}</span>
						<span>MgO检化验结果：{{ line.mtlResultMgo }}</span>
					</div>
					<div style="display: flex;justify-content: space-between;">
						<span>MgO结算标准：{{ line.mtlStandardMgo }}</span>
						<span>MgO加减价：{{ line.mtlPriceChangeMgo }}</span>
					</div>
					<div style="display: flex;justify-content: space-between;">
						<span>CaO是否为结算项：{{ line.mtlExistCao!='' && line.mtlExistCao=='1' ? '是' : '否' }}</span>
						<span>CaO检化验结果：{{ line.mtlResultCao }}</span>
					</div>
					<div style="display: flex;justify-content: space-between;">
						<span>CaO结算标准：{{ line.mtlStandardCao }}</span>
						<span>CaO加减价：{{ line.mtlPriceChangeCao }}</span>
					</div>
					<div style="display: flex;justify-content: space-between;">
						<span>‌K₂O+Na₂O是否为结算项：{{ line.mtlExistK2ona2o!='' && line.mtlExistK2ona2o=='1' ? '是' : '否' }}</span>
						<span>‌K₂O+Na₂O检化验结果：{{ line.mtlResultK2ona2o }}</span>
					</div>
					<div style="display: flex;justify-content: space-between;">
						<span>‌K₂O+Na₂O结算标准：{{ line.mtlStandardK2ona2o }}</span>
						<span>‌K₂O+Na₂O加减价：{{ line.mtlPriceChangeK2ona2o }}</span>
					</div>
					<div style="display: flex;justify-content: space-between;">
						<span>‌粒度是否为结算项：{{ line.mtlExistGrain!='' && line.mtlExistGrain=='1' ? '是' : '否' }}</span>
						<span>‌粒度检化验结果：{{ line.mtlResultGrain }}</span>
					</div>
					<div style="display: flex;justify-content: space-between;">
						<span>‌粒度结算标准：{{ line.mtlStandardGrain }}</span>
						<span>‌粒度加减价：{{ line.mtlPriceChangeGrain }}</span>
					</div>
					<div style="display: flex;justify-content: space-between;">
						<span>‌粒度结算标准：{{ line.mtlStandardGrain }}</span>
						<span>‌粒度加减价：{{ line.mtlPriceChangeGrain }}</span>
					</div>
					<div style="display: flex;justify-content: space-between;">
						<span>合同单价：{{ line.price }}</span>
						<span>合同含税单价：{{ line.taxPrice }}</span>
					</div>
					<div style="display: flex;justify-content: space-between;">
						<span>结算单价：{{ line.accountUnitPrice }}</span>
						<span>结算含税单价：{{ line.accountUnitTaxPrice }}</span>
					</div>
					<div style="display: flex;justify-content: space-between;">
						<span>结算金额：{{ line.accountAmount }}</span>
						<span>结算含税金额：{{ line.accountTaxAmount }}</span>
					</div>
					<div style="display: flex;justify-content: space-between;">
						<span>物料编码：{{ line.itemCd }}</span>
						<span>物料名称：{{ line.itemNm }}</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.syiNo }}</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()

	import {
		useWorkflowStore
	} from "@/stores/workflow"
	const workflow = useWorkflowStore()
	const route = useRoute()
	onMounted(() => {
		workflow.setWorkId(route.query.workId);
		getTableData()
	})

	const activeNames = ref(['1'])

	// 查询对账单头信息
	const form = ref({
		id: '',
		billNo: '',
		tradePartnerId: '',
		tradePartnerCode: '',
		tradePartnerName: '',
		contrNo: '',
		khContrNo: '',
		accountQty: '',
		accountAmount: '',
		accountFlag: '',
	})

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

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

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