<script setup lang="ts">
import layout from '/@/views/h5/layout/index.vue';
import {useRoute} from "vue-router";
import {getExternalCooperationUnitsByProcessInstanceId} from "/@/api/flow/flow";
const route = useRoute();
interface showText {
	title?: string;
	label?: string;
	content?: string;
	key?: string;
	isFile?: boolean;
	isOneCol?:boolean;
	unit?: string;
	isTableTitle?: boolean;
	children?: showText[]
}
const showTextArray = reactive<showText[]>([
	{ label: '合作方名称', key: 'cooperationName', isFile: false },
	{ label: '所属省', key: 'province', isFile: false },
	{ label: '合作方性质', key: 'cooperationNature', isFile: false },
	{ label: '所属行业', key: 'cooperationIndustry', isFile: false },
	{ label: '（拟）合作业务', key: 'proposedBusinessCooperation', isFile: false, isOneCol: true },
	{ label: '合作方优势', key: 'cooperationAdvantage', isFile: false, isOneCol: true },
	{ label: '合作状态', key: 'cooperationStatus', isFile: false },
	{ label: '合作开始时间', key: 'startTime', isFile: false },
	{ label: '合作结束时间', key: 'endTime', isFile: false },
	{ label: '单位地址', key: 'unitAddress', isFile: false, isOneCol: true },
	{ label: '单位联系人', key: 'unitContactPerson', isFile: false },
	{ label: '联系人部门/职位', key: 'contactPersonDept', isFile: false },
	{ label: '联系人电话', key: 'contactPersonPhone', isFile: false },
	{ label: '潜在合作机会', key: 'potentialCooperation', isFile: false, isOneCol: true },
	{ label: '业务对接公司', key: 'businessConnectionCompany', isFile: false },
	{ label: '合作方实际控制人', key: 'cooperationController', isFile: false },
	{ label: '占股比例', key: 'shareholdingRatio', isFile: false },
]);
const tabData = reactive([{
	cooperationName: 'ABC国际合作公司',
	province: '北京市',
	cooperationNature: '外资企业',
	cooperationIndustry: '高新技术产业',
	proposedBusinessCooperation: '共同开发智慧城市解决方案',
	cooperationAdvantage: '拥有先进的AI技术和丰富的国际项目经验',
	cooperationStatus: '进行中',
	startTime: '2024-01-15',
	endTime: '2025-01-15',
	unitAddress: '北京市海淀区中关村大街1号',
	unitContactPerson: '约翰·史密斯',
	contactPersonDept: '国际合作部总经理',
	contactPersonPhone: '+86-138-0000-0000',
	potentialCooperation: '在新能源和智能制造领域有进一步合作潜力',
	businessConnectionCompany: 'XX市科技发展有限公司',
	cooperationController: '詹姆斯·布朗',
	shareholdingRatio: '30%'
}])
const processInstanceId = ref('');
const taskId = ref('');
const getExternalCooperationUnitsBy = async () => {
	const res = await getExternalCooperationUnitsByProcessInstanceId(processInstanceId.value)
	Object.assign(tabData, res.data)
}
onMounted(()=>{
	if (route.query.processInstanceId && typeof route.query.processInstanceId === 'string'){
		processInstanceId.value = route.query.processInstanceId;
		getExternalCooperationUnitsBy()
	}
	if (route.query.taskId && typeof route.query.taskId === 'string'){
		taskId.value = route.query.taskId
	}
})
</script>

<template>
	<layout title="对外合作信息审批" :task-id="taskId" :processInstanceId="processInstanceId">
		<el-table :data="tabData" border style="width: 100%" height="300" :header-cell-style="{textAlign: 'center'}">
			<el-table-column type="index" label="序号" width="60"></el-table-column>
			<el-table-column v-for="item in showTextArray" :key="item?.key" :label="item?.label" min-width="150"

			>
				<template #default="scope">
					<div v-if="item.isFile">
						<upload-file v-model="scope.row[item.key]" disabled/>
					</div>
					<div v-else>
						<span>{{scope.row[item?.key]}}</span>
						<span v-if="item.unit">{{item.unit}}</span>
					</div>
				</template>

			</el-table-column>
		</el-table>
	</layout>
</template>

<style scoped lang="scss">

</style>