<template>
	<el-dialog class="api-edit" v-model="showDialog" title="授权配置详情" width="1100px">
		<el-descriptions class="margin-top" :column="2" border>
			<el-descriptions-item label="名称">{{ formData.name }}</el-descriptions-item>
			<el-descriptions-item label="APPID">{{ formData.appId }}</el-descriptions-item>
			<el-descriptions-item label="APPSECRET">{{ formData.appSecret }}</el-descriptions-item>
			<el-descriptions-item label="应用类型">{{ formData.types ? '内部独立应用' : '第三方应用' }}</el-descriptions-item>
			<el-descriptions-item label="回调地址">{{ formData.callbackUrl }}</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>
