<template>
  <a-modal
    :open="visible"
    title="数据源详情"
    :width="modalWidth"
    :centered="true"
    :body-style="bodyStyle"
    :footer="null"
    @cancel="$emit('close')"
  >
    <div class="name-detail-content">
      <div class="detail-header">
        <h3 style="margin: 0;">{{ taskName }} {{ taskId }} 详情</h3>
      </div>
      <div class="detail-list">
        <div class="detail-item"><span class="label">数据源名称：</span><span class="value">{{ taskName }}</span></div>
        <div class="detail-item"><span class="label">数据类型：</span><span class="value">结构化数据表（MySQL）</span></div>
        <div class="detail-item"><span class="label">数据更新频率：</span><span class="value">每日增量更新</span></div>
        <div class="detail-item"><span class="label">字段数量：</span><span class="value">28个（含主键、时间戳、业务字段）</span></div>
        <div class="detail-item"><span class="label">访问权限：</span><span class="value">需申请（审批后只读访问）</span></div>
        <div class="detail-item"><span class="label">备注：</span><span class="value">该表包含核心业务数据，禁止用于非授权场景。</span></div>
      </div>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import { computed, defineProps, defineEmits } from 'vue';
import { Modal } from 'ant-design-vue';

interface Props {
  visible: boolean;
  taskName: string;
  taskId: string ;
}
const props = defineProps<Props>();
const emit = defineEmits(['close']);

const modalWidth = computed(() => window.innerWidth * 0.6);
const bodyStyle = computed(() => ({
  height: `${window.innerHeight * 0.6}px`,
  overflowY: 'auto'
}));
</script>

<style scoped lang="scss">
.name-detail-content .detail-header { margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid #f0f0f0; }
.name-detail-content .detail-list .detail-item { margin-bottom: 12px; display: flex; align-items: flex-start; }
.name-detail-content .detail-list .detail-item .label { color: #666; font-weight: 500; width: 120px; flex-shrink: 0; }
.name-detail-content .detail-list .detail-item .value { color: #333; flex-grow: 1; }
</style>