<template>
	<div class="exp-form">
		<van-collapse v-model="activeNames">
			<van-collapse-item title="签约请示信息" name="1">
				<van-field v-model="form.signReqNm" label="签约请示名称" readonly />
				<van-field v-model="form.signReqNo" label="签约请示号" readonly />
				<van-field v-model="form.signReqNm" label="流程状态" readonly />
				<van-field v-model="form.contractParty" label="交易方名称" readonly />
				<van-field v-model="form.signDt" label="预计签约日期" readonly />
				<van-field v-model="form.reqDt" label="请示日期" readonly />
				<van-field v-model="form.contrPrice" label="预计签约金额" readonly />
				<van-field v-model="form.estProfit" label="预计利润" readonly />
				<van-field v-model="form.subMatter" label="合同标的物" readonly />
				<van-field v-model="form.fundDesc" label="收付款说明" readonly />
				<van-field v-model="form.riskPoints" label="主要风险点及应对措施" readonly />
				<van-field v-model="form.otherInformation" label="其他情况说明" readonly />
			</van-collapse-item>
			
			<van-collapse-item title="文件信息" name="2">
			  <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>
	</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 route = useRoute()
	const { proxy } = getCurrentInstance()

	import {
		useWorkflowStore
	} from "@/stores/workflow"
	const workflow = useWorkflowStore()

	onMounted(() => {
		workflow.setWorkId(route.query.workId);
		getTableData()
	})
	// console.log('route')
	// console.log(route.query.workId)
	// console.log(workflow.workId)
	const activeNames = ref(['1'])

	const form = ref({
		id: '',
		signReqNm: '',
		signDt: '',
		otherInformation: '',
		estProfit: null,
		ProcessInstanceSts: '',
		benefitNo: '',
		riskPoints: '',
		fundDesc: '',
		benefitName: '',
		contractParty: '',
		subMatter: '',
		contrPrice: null,
		processDesc: '',
		processRemark: '',
		reqDt: '',
		signReqNo: '',
		compCd: '',
		addId: '',
		addCode: '',
		addName: '',
		addDeptId: '',
		addDeptCode: '',
		addDeptName: '',
		addTime: '',
		workModel: {
			flowStatusName: ''
		}
	})

	const getTableData = () => {

		var url = 'cot/SignRequest/queryByWorkId'
		var param = {
			workId: workflow.workId
		}

		proxy.$axios.get(url, param).then((response:any) => {

			if (response.data.code == '0') {
				form.value = response.data.data
				getFiles(form.value.id)
			} 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
	}
</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>