<template>
	<div style="width: 100%; height: 100%;     position: absolute;   top: 0;   left: 0;">
		<div v-for="(itemRow, indexRow) in rows" :key="indexRow" style="padding: 20px;">
			<el-row :gutter="10" align="top">
				<el-col v-for="(item, index) in itemRow" :key="index" :span="item.span">
					<el-card style="max-width: 480px" shadow="hover">
						<template #header>
							<div class="card-header">
								<span>{{item.applicationName}}-{{item.applicationCode}}</span> 
							</div>
						</template>
						<div style="height: 100px; display: flex;flex-direction: row;">
							<div style=" flex;flex-direction: row; ">
								<el-image style="width: 100px; height: 100px"
									:src="`/images/application/${item.applicationImage}`" :fit="fit" />
							</div>
							<div style="  display: flex;flex-direction: row; align-self: flex-start; ">
								<el-text :line-clamp="5">
									{{item.applicationDesc}}
								</el-text>
							</div>
						</div>
						<template #footer>
							<!-- <div class="card-footer"> -->
							<div style="text-align: right;">
								<el-button type="primary" link @click="click(item)">进入</el-button>
							</div>
						</template>
					</el-card>
				</el-col>
			</el-row>
		</div>

		<!-- 
		<div style="display: flex;flex-direction: row; ">
			<div v-for="(item, index ) in apps" :key="index">
				<el-card style="max-width: 480px" shadow="hover" @click="click(item)">
					<template #header>
						<div class="card-header">
							<span>{{item.applicationName}}-{{item.applicationCode}}</span>
						</div>
					</template>
					<el-text truncated>
						{{item.applicationDesc}}
					</el-text>
					<template #footer>
						<div class="card-footer">
							<el-button type="primary" link @click="click(item)">进入</el-button>
						</div>
					</template>
				</el-card>
			</div>
		</div> -->
	</div>
</template>

<script setup>
	import {
		ref,
		onMounted,
		getCurrentInstance,
	} from 'vue'
	const {
		proxy
	} = getCurrentInstance()

	import {
		useRoute
	} from 'vue-router';

	const route = useRoute();

	onMounted(() => {
		// getApplications()

		apps.value = JSON.parse(route.query.applications)
		convertApplications(apps.value)
	})

	const apps = ref([])
	const rows = ref([])
	const getApplications = () => {

		var url = 'framework/Application/query'
		var param = {}
		proxy.$axios.post(url, param).then(response => {
			if (response.data.code == '0') {
				// apps.value = response.data.data

				// if (response.data.data.length == 1) {
				// 	proxy.$router.push({
				// 		path: '/main'
				// 	})
				// }
				convertApplications(response.data.data)

			} else {
				ElMessage.error('操作失败！' + response.data.msg)
			}
		});
	}

	const convertApplications = (applications) => {
		var colsCount = 4
		var length = Math.ceil(applications.length / colsCount)
		for (var i = 0; i < length; i++) {
			rows.value.push([])
		}
		var col = 0
		applications.forEach((item, index) => {
			col = Math.floor(index / colsCount)
			item.span = 6
			rows.value[col].push(item)
		})
	}

	const click = (item) => {
		if(item.externalUrl&&item.externalUrl!=null&&item.externalUrl!=''){
			
			
			var url = item.externalUrl+'?username='+localStorage.getItem('userName')+'&password=123' 
			console.log('externalUrl:'+url)
			window.open(url, '_blank');
		}else {
			localStorage.setItem('application', JSON.stringify(item))
			proxy.$router.push({
				path: '/main'
			})
		}
		
	}
</script>

<style>
</style>