<template>
	<div class="layout-pd system-dept-container">
		<el-card class="apply-detail" v-loading="state.loading" shadow="hover">
			<div class="top-box">
				<div class="box-left">
					<div class="tbl-left">
						<img :src="viteUrl+(state.data.icon||defaultIcon)" :alt="state.data.name" />
					</div>
					<div class="tbl-right">
						<div class="title">{{state.data.name}}</div>
						<div class="tips">{{state.data.tips}}</div>
					</div>
				</div>
				<div class="box-right">

				</div>
			</div>
			<div class="bottom-box"></div>
		</el-card>
	</div>
</template>

<script setup lang="ts" name="applyDetail">
import { onMounted, reactive } from 'vue';
import { applyApi } from '/@/api/service/apply';
import { useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';

// 封面基本路径
const viteUrl = import.meta.env.VITE_API_URL;
const defaultIcon:string = 'static/pixel/home/default-work.png';

// 引入 api 请求接口
const aplApi = applyApi();

// 获取模块名称和标签名称
const route = useRoute();
const id:any = route.query.id;

const state = reactive<any>({
	data: {},
	loading: false,
})

// 获取文章详情-根据id
const getApplyDetailById = async(id:number) => {
	try {
		state.loading = true;
		let res = await aplApi.getApplyDetail(id);
		if(res?.success) {
			state.data = res.data;
		}
	} catch (error) {
		ElMessage.error('获取应用服务详情失败');
	} finally {
	    state.loading = false;
	}
}

onMounted(() => {
	getApplyDetailById(id);
})

</script>

<style scoped lang="scss">
.system-dept-container {
	height: 100%;
	display: flex;
	flex-direction: column;
	.apply-detail{
		flex: 1;
		display: flex;
		flex-direction: column;
		.top-box{
			display: flex;
			margin: 0 20px;
			background-color: aqua;
			flex-wrap: wrap;
			.box-left{
				display: flex;
				min-width: 60%;
				background-color: aquamarine;
				img{
					width: 120px;
					height: 120px;
				}
			}
			.box-right{
				min-width: 40%;
				background-color: bisque;
			}
		}
	}
}
</style>