<template>
	<div class="exp-form">
		<van-collapse v-model="activeNames">
			<van-collapse-item title="合同头信息" name="1">
				<van-field v-model="form.contrTy1" label="合同类型" readonly />
				<van-field v-model="form.contrNo" label="合同编号" readonly />
				<van-field v-model="form.contrNm" label="合同名称" readonly />
				<van-field v-model="form.supplierNm" label="交易方名称" readonly />
				<van-field v-model="form.khContrNo" label="对方合同编号" readonly />
				<van-field v-model="form.conSts1" label="合同状态" readonly/>
				<van-field v-model="form.approveDt" label="审批结束时间" readonly />
				<van-field v-model="form.delvDate" label="预计交货日期" readonly />
				<van-field v-model="form.invMth1" label="结算方式" readonly/>
				<van-field v-model="form.analyDataAccord1" label="化验结算依据" readonly/>
				<van-field v-model="form.weightDataAccord1" label="计量结算依据" readonly/>
				<van-field v-model="form.priceDcnMth1" label="定价方式" readonly/>
				<van-field v-model="form.delvMth1" label="交货方式" readonly/>
				<van-field v-model="form.delvPlace" label="交货地点" readonly />
				<van-field v-model="form.toPlace" label="到达地" readonly />
				<van-field v-model="form.fromPlace" label="出发地" readonly />
				<van-field v-model="form.ifAnnual1" label="是否长协" readonly/>
				<van-field v-model="form.ifBid1" label="是否招投标" readonly/>
				<van-field v-model="form.qualityReq" label="质量要求" readonly />
				<van-field v-model="form.signReqNo" label="签约请示" readonly />
				<van-field v-model="form.totalAmt" label="合同金额" readonly />
				<van-field v-model="form.qty" label="重量" readonly />
				<van-field v-model="form.contrReq" label="合同要求" readonly />
				<van-field v-model="form.contrDt" label="合同日期" readonly />
				<van-field v-model="form.endDt" label="终止日期" readonly />
				<van-field v-model="form.checkYn1" label="争议所在地法院" readonly/>
				<van-field v-model="form.riskInfo" label="风险提示" readonly />
				<van-field v-model="form.tempNm" label="合同模板" readonly />
				<van-field v-model="form.addTime" label="录入日期" readonly />
				<van-field v-model="form.addName" label="录入人" readonly />
				<van-field v-model="form.ifSupplemental1" label="是否补录" readonly />
				<van-field v-model="form.remark" 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.itemNm }}</span>
				    <span>规格型号：{{line.specType }}</span>
				  </div>
				  <div style="display: flex;justify-content: space-between;">
				    <span>数量：{{ line.qty }}</span>
				    <span>计量单位：{{ dicList.MEASURING_UNIT.find(item => item.dicCode == line.uom)?.dicName }}</span>
				  </div>
				  <div style="display: flex;justify-content: space-between;">
					<span>税率：{{ line.taxRate }}</span>
					<span>含税单价：{{ line.taxPriceCash }}</span>
				  </div>
				  <div style="display: flex;justify-content: space-between;">
					<span>不含税单价：{{ line.priceCash }}</span>
				    <span>含税金额：{{ line.totalAmtCash }}</span>
				  </div>
				  <div style="display: flex;justify-content: space-between;">
					<span>不含税金额：{{ line.amtCash }}</span>  
				    <span>税额：{{ line.taxAmtCash }}</span>
				  </div>
		
				  <!-- <div style="display: flex;justify-content: space-between;">
				  	<van-button plain type="primary" size="small" square>结算标准</van-button>
				  </div> -->
				  <van-divider v-if="index < (tableDataLine.length - 1)"/>
				</div>
			</van-collapse-item>
			
			<van-collapse-item title="收付款方式" name="3">
				<div v-for="(invtype,index) in tableDataInvtype" style="color: #323233" @click="getTableDataSettlement(line.contrNo, line.conLine)">
				  <div style="display: flex;justify-content: space-between;">
				    <span>收付款节点：{{ dicList.PAY_FLAG.find(item => item.dicCode == invtype.payFlag)?.dicName }}</span>
				    <span>收付款方式：{{ dicList.COM_PAY_MTH.find(item => item.dicCode == invtype.payMth)?.dicName }}</span>
				  </div>
				  <div style="display: flex;justify-content: space-between;">
				    <span>账期：{{ invtype.accountPeriod }}</span>
					<span>比例：{{ invtype.scales + '%' }}</span>
				  </div>
				  <div style="display: flex;justify-content: space-between;">
					<span>金额：{{ invtype.amount }}</span>
				  </div>
				  <van-divider v-if="index < (tableDataInvtype.length - 1)"/>
				</div>
			</van-collapse-item>
			
			<van-collapse-item title="文件信息" name="4">
			  <div v-for="(item,index) in tableDataFile" style="color: #323233">
			    <p>文件名：{{ item.fileName }}</p>
			    <div class="padd" style="display: flex;justify-content: space-between;">
			      <span>文件类型：{{ item.fileType }}</span>
			      <van-button icon="search" type="default" size="small" plain @click="fileClick(item.id)"/>
			    </div>
			    <span>文件大小：{{ item.fileSize }}</span>
			    <van-divider />
			  </div>
			</van-collapse-item>
			
			<van-collapse-item title="合同条款" name="5">
				<div v-for="(item,index) in tableDataTmpLine" style="color: #323233" @click="getTableDataSettlement(line.contrNo, line.conLine)">
				  <span>{{ item.clsTitle + item.clsCont}}</span>
				  <van-divider v-if="index < (tableDataTmpLine.length - 1)"/>
				</div>
			</van-collapse-item>
		</van-collapse>
		
		<!-- <van-button plain type="primary" size="small" square style="margin: 5px;" @click="handlePrintPreview">打印预览</van-button> -->
		
		<van-popup v-model:show="showBottom" round  position="bottom">
			<div style="padding: 25px 10px 0 10px;">
				<div v-for="(settlement,index) in tableDataSettlement"  style="color: #323233" @click="getTableDataSettlement(line.contrNo, line.conLine)">
					<div style="display: flex;justify-content: space-between;">
						<span>结算项目：{{ settlement.settleItem }}</span>
					</div>
					<div style="display: flex;justify-content: space-between;">
						<span>结算项目上限：{{ settlement.settleValueTo }}</span>
						<span>结算项目下限：{{ settlement.settleValueFrom }}</span>
					</div>
					<div style="display: flex;justify-content: space-between;">
						<span>基准值：{{ settlement.referenceValue }}</span>
						<span>结算项目跨度：{{ settlement.settleSpan }}</span>
					</div>
					<div style="display: flex;justify-content: space-between;">
						<span>结算差额：{{ settlement.settleDiffer }}</span>
						<span>拒收或退货：{{ settlement.rejectFlag == 'Y' ? '是' : '否' }}</span>
					</div>
					<van-divider/>
				</div>
			</div>
		</van-popup>
	</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);
		getDictList()
		getTableData()
	})
	
	/**
	 *  查询字典
	 */
	const dicList = ref({
		CONTRACT_TYPE: [],
		contrSts: [],
		SAL_INV_MTH: [],
		ANALY_DATA_ACCORD: [],
		WEIGHT_DATA_ACCORD: [],
		PRICE_DCN_MTH: [],
		DELV_MTH: [],
		COM_YN: [],
		CHECK_YN: [],
		MEASURING_UNIT: [],
		PAY_FLAG: [],
		COM_PAY_MTH: []
	})
	const getDictList = () => {
		var url = 'framework/Common/querySelectorList'
		var param = {
		  type: JSON.stringify(['CONTRACT_TYPE', 'contrSts', 'SAL_INV_MTH', 'ANALY_DATA_ACCORD', 'WEIGHT_DATA_ACCORD', 'PRICE_DCN_MTH', 'DELV_MTH', 'COM_YN', 'CHECK_YN', 'MEASURING_UNIT', 'PAY_FLAG', 'COM_PAY_MTH'])
		}
		proxy.$axios.get(url, param).then(response => {
		  if (response.data.code == '0') {
		    dicList.value = response.data.data
			
			form.value.contrTy1 = formmater(dicList.value.CONTRACT_TYPE, form.value.contrTy)
			form.value.conSts1 = formmater(dicList.value.contrSts, form.value.conSts)
			form.value.invMth1 = formmater(dicList.value.SAL_INV_MTH, form.value.invMth)
			form.value.analyDataAccord1 = formmater(dicList.value.ANALY_DATA_ACCORD, form.value.analyDataAccord)
			form.value.weightDataAccord1 = formmater(dicList.value.WEIGHT_DATA_ACCORD, form.value.weightDataAccord)
			form.value.priceDcnMth1 = formmater(dicList.value.PRICE_DCN_MTH, form.value.priceDcnMth)
			form.value.delvMth1 = formmater(dicList.value.DELV_MTH, form.value.delvMth)
			form.value.ifAnnual1 = formmater(dicList.value.COM_YN, form.value.ifAnnual)
			form.value.ifBid1 = formmater(dicList.value.COM_YN, form.value.ifBid)
			form.value.checkYn1 = formmater(dicList.value.CHECK_YN, form.value.checkYn)
			form.value.ifSupplemental1 = form.value.ifSupplemental == '1' ? '是' : '否'
		  } 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: '',
		contrTy: '',
		contrNo: '',
		dataAccord: '',
		approveDt: '',
		checkYn: '',
		riskInfo: '',
		conSts: '',
		signReqNo: '',
		delvDays: '',
		delvDate: '',
		priceDcnMth: '',
		signReqId: '',
		ifAnnual: '',
		delvMth: '',
		contrForm: '',
		processInstanceStatus: '',
		processInstanceId: '',
		ifBid: '',
		tempNm: '',
		invMth: '',
		toPlace: '',
		fromPlace: '',
		tempId: '',
		totalAmt: null,
		qty: null,
		remark: '',
		contrReq: '',
		delvPlace: '',
		trsMth: '',
		salMth: '',
		contrDt: '',
		endDt: '',
		qualityReq: '',
		compCd: '',
		deptNm: '',
		deptCd: '',
		supplierNm: '',
		supplierCd: '',
		supplierId: '',
		contrNm: '',
		khContrNo: '',
		analyDataAccord: '',
		weightDataAccord: '',
		addId: '',
		addCode: '',
		addName: '',
		addDeptId: '',
		addDeptCode: '',
		addDeptName: '',
		addTime: '',
		modifyCode: '',
		modifyName: '',
		workModel: {
			flowStatusName: ''
		}
	})
	
	const getTableData = () => {
		var url = 'cot/Head/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.contrNo)
				getTableDataInvtype(form.value.contrNo)
				getFiles(form.value.id)
				getTableDataTmpLine(form.value.tempId)
			} else {
				showToast('操作失败！' + response.data.msg)
			}
		})
	}
	
	// 查询合同明细
	const tableDataLine = ref([])
	const getTableDataLine = (contrNo) => {
		var url = 'cot/Line/queryH5'
		var param = {
			params: JSON.stringify({
				contrNo: contrNo
			})
		}
		proxy.$axios.get(url, param).then((response:any) => {
			if (response.data.code == '0') {
				tableDataLine.value = response.data.data
			} else {
				showToast('操作失败！' + response.data.msg)
			}
		})
	}
	
	// 查询结算标准
	const showBottom = ref(false)
	const tableDataSettlement = ref([])
	const getTableDataSettlement = (contrNo, conLine) => {
		showBottom.value = true
		tableDataSettlement.value = []
		
		var url = 'cot/Settlement/queryH5'
		var param = {
			params: JSON.stringify({
				contrNo: contrNo,
				conLine: conLine
			})
		}
		proxy.$axios.get(url, param).then((response:any) => {
			if (response.data.code == '0') {
				tableDataSettlement.value = response.data.data
			} else {
				showToast('操作失败！' + response.data.msg)
			}
		})
	}
	
	// 查询收付款方式
	const tableDataInvtype = ref([])
	const getTableDataInvtype = (contrNo) => {
		var url = 'cot/Invtype/queryH5'
		var param = {
			params: JSON.stringify({
				contrNo: contrNo
			})
		}
		proxy.$axios.get(url, param).then((response:any) => {
			if (response.data.code == '0') {
				tableDataInvtype.value = response.data.data
			} else {
				showToast('操作失败！' + response.data.msg)
			}
		})
	}
	
	// 查询附件
	const tableDataFile = ref([])
	const getFiles = (id: string) => {
		var url = 'framework/Common/queryFile'
		var param = {
			fId: id
		}
		proxy.$axios.get(url, param).then((response:any)  => {
			if (response.data.code == 0) {
				tableDataFile.value = response.data.data
			} else {
				showToast('操作失败！' + response.data.msg)
			}
		})
	}
	
	const fileClick = (id) =>{
	  location.href = import.meta.env.VITE_BASE_API + '/framework/Common/downloadFileFtp?id=' + id
	}
	
	// 合同条款
	const tableDataTmpLine = ref([])
	const getTableDataTmpLine = (tempId) => {
		var url = 'cot/TmpLine/queryPopupH5'
		var param = {
			params: JSON.stringify({
				tempId: tempId
			})
		}
		proxy.$axios.get(url, param).then((response:any) => {
			if (response.data.code == '0') {
				tableDataTmpLine.value = response.data.data
			} else {
				showToast('操作失败！' + response.data.msg)
			}
		})
	}
	
	// 打印预览
	const handlePrintPreview = () => {
		location.href = import.meta.env.VITE_BASE_API +
			'/cot/Head/downloadCot?userId=' + localStorage.getItem('userId') + '&id=' + encodeURIComponent(form.value.id)
	}
</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>