<template>
    <a-modal v-model:open="open" :title="imgInfo.name" @ok="handleOk" style="width: 600px;">
        <a-card>
            <a-row :gutter="[16, 16]" class="info-list">
                <!-- 名称 -->
                <a-col :span="12">
                    <label class="label">名称：</label>
                    <span class="value">{{ imgInfo.name }}</span>
                </a-col>
                <!-- CPU类型 -->
                <a-col :span="12">
                    <label class="label">CPU类型：</label>
                    <span class="value">{{ imgInfo.cpu_type }}</span>
                </a-col>
                <!-- CUDA版本 -->
                <a-col :span="12">
                    <label class=" label">CUDA版本：</label>
                    <span class="value">{{ imgInfo.cuda_version }}</span>
                </a-col>
                <!-- GPU类型 -->
                <a-col :span="12">
                    <label class="label">GPU类型：</label>
                    <span class="value">{{ imgInfo.gpu_type }}</span>
                </a-col>
                <!-- 镜像 Hash -->
                <a-col :span="24">
                    <label class="label">镜像 Hash：</label>
                    <span class="value">{{ imgInfo.image_hash }}</span>
                </a-col>

                <!-- 镜像路径 -->
                <a-col :span="24">
                    <label class="label">镜像路径：</label>
                    <span class="value">{{ imgInfo.image_path }}</span>
                </a-col>
                <!-- 镜像大小 -->
                <a-col :span="12">
                    <label class="label">镜像大小：</label>
                    <span class="value">{{ imgInfo.image_size }} GB</span>
                </a-col>
                <!-- 镜像类型 -->
                <a-col :span="12">
                    <label class="label">镜像类型：</label>
                    <span class="value">{{ imgInfo.image_type }}</span>
                </a-col>
                <!-- 状态 -->
                <a-col :span="12">
                    <label class="label">状态：</label>
                    <a-tag >
                        {{ imgInfo.status=='enabled'?'启用':'禁用' }}
                    </a-tag>
                </a-col>
                <!-- 镜像是否公开 -->
                <a-col :span="12">
                    <label class="label">镜像是否公开：</label>
                    <a-tag :color="imgInfo.image_is_public ? 'green' : 'red'">
                        {{ imgInfo.image_is_public ? '是' : '否' }}
                    </a-tag>
                </a-col>
            </a-row>
        </a-card>
    </a-modal>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const imgInfo = ref<any>({});
const open = ref(false);

const handleOk = () => {
    open.value = false;
};
defineExpose({
    openDialog(item: any) {
        imgInfo.value = item;
        open.value = true;
    }
});
</script>