<template>
	<el-dialog class="api-edit" v-model="showDialog" title="租户详情" width="1100px">

		<el-descriptions class="margin-top" :column="3" border>
			<el-descriptions-item label="租户名称">{{ formData.name }}</el-descriptions-item>
			<el-descriptions-item label="租户编码">{{ formData.code }}</el-descriptions-item>
			<el-descriptions-item label="系统名称">{{ formData.systemName }}</el-descriptions-item>
			<el-descriptions-item label="系统版权">{{ formData.systemCopyright }}</el-descriptions-item>
			<el-descriptions-item label="简介" span="2">{{ formData.description }}</el-descriptions-item>
			<el-descriptions-item label="系统LOGO（小图标）"><el-image fit="contain" v-if="formData.logoMini" :src="formData.logoMini" style="width: 200px; height: 200px" preview-teleported :preview-src-list="[formData.logoMini]" /></el-descriptions-item>
			<el-descriptions-item label="登录展示图"><el-image fit="contain" v-if="formData.logoPic" :src="formData.logoPic" style="width: 200px; height: 200px" preview-teleported :preview-src-list="[formData.logoPic]" /></el-descriptions-item>
			<el-descriptions-item label="系统LOGO"><el-image fit="contain" v-if="formData.logo" :src="formData.logo" style="width: 200px; height: 200px" preview-teleported :preview-src-list="[formData.logo]" /></el-descriptions-item>
		</el-descriptions>
	</el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';

const emit = defineEmits(['getList']);

const showDialog = ref(false);

const baseForm: any = {
	id: undefined,
	name: '',
	code: '',
	systemName: '',
	systemCopyright: '',
	description: '',
};

const formData = reactive<any>(JSON.parse(JSON.stringify(baseForm)));

const open = async (row: any) => {
	Object.assign(formData, row)
	showDialog.value = true;
};

defineExpose({ open });
</script>
