
<template>
  <div class="my-images-page">
    <!-- 顶部警告提示 -->
    <div class="top-warning">
      <span class="title">我的镜像</span>
      <span class="warning-text">
        连续3个月未登录或欠费50元以上，平台保留删除数据的权利，具体规则请参考
        <!-- <a href="#" class="link">文档</a> -->
      </span>
    </div>

<!--     
    <div class="storage-info">
      <div class="storage-desc">
        存储容量大小：<strong>{{ storageUsed }}</strong>
        （今天容量使用峰值{{ storagePeak }}，预计扣费{{ expectedFee }}）
      </div>
      <a href="#" class="view-rule">查看计费规则</a>
    </div>

    <div class="progress-container">
      <a-progress :percent="storagePercent" :show-info="true" />
    </div>

    <div class="capacity-info">
      <span><span class="dot free"></span>免费：{{ freeStorage }}</span>
      <span><span class="dot paid"></span>付费：{{ paidStorage }}</span>
    </div> -->

    <!-- 表格 -->
    <div class="table-container">
      <a-table :data-source="getCurrentPageData" :columns="columns" :pagination="false"
        :scroll="{ x: 'max-content', y: 400 }" :row-key="(record) => record.uid" :loading="loading" bordered
        class="image-table">
        <template #action="{ record }">
          <a-button type="link" size="small" @click="handleView(record)">查看</a-button>
          <a-button type="link" size="small" danger @click="handleDelete(record)">删除</a-button>
        </template>
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'status'">
            <a-tag v-if="record.status == 'enabled'" color="green">可用</a-tag>
            <a-tag v-if="record.status == 'disabled'" color="red">不可用</a-tag>
          </template>
        </template>
        <template #empty>
          <div class="table-empty">暂无数据</div>
        </template>
      </a-table>
    </div>

    <!-- 分页固定在底部 -->
    <div class="pagination-container">
      <a-pagination v-model:current="pagination.current" v-model:page-size="pagination.pageSize"
        :total="pagination.total" show-size-changer show-jumper show-less-items :page-size-options="[5, 10, 20, 50]"
        @change="onPageChange" @showSizeChange="onShowSizeChange" />
    </div>
    <editDialog ref="editDialogRef" />
  </div>
</template>
<script setup lang="ts">
import editDialog from './editDialog.vue';
import { ref, reactive, onMounted, computed, } from 'vue';
import {
  Table,
  Pagination,
  Progress,
  message,
  Button
} from 'ant-design-vue';
import apis from '@/apis';
// 表格列定义
interface ImageItem {
  uid: string;
  name: string;
  size: string;
  status: string;
  shareInfo: string;
  source: string;
  region: string;
  baseImage: string;
  createTime: string;
}

// 模拟数据
const imageList = ref<ImageItem[]>([]);
const editDialogRef = ref<any>(null);
// 存储容量
const storageUsed = ref('12.5GB');
const storagePeak = ref('13.2GB');
const expectedFee = ref('0元');
const freeStorage = ref('30.00GB');
const paidStorage = ref('0GB');

// 计算进度百分比
const storagePercent = computed(() => {
  const usedGB = parseFloat(storageUsed.value.replace('GB', ''));
  const totalGB = 30;
  return Math.min(100, Math.round((usedGB / totalGB) * 100));
});

// 分页配置
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: imageList.value.length,
});

// 加载状态
const loading = ref(false);

// 定义列
const columns = [
  { title: '名称', dataIndex: 'name', key: 'name', width: 150 },
  { title: 'cpu类型', dataIndex: 'cpu_type', key: 'cpu_type', width: 150 },
  { title: 'cuda版本', dataIndex: 'cuda_version', key: 'cuda_version', width: 100 },
  { title: 'gpu类型', dataIndex: 'gpu_type', key: 'gpu_type', width: 100 },
  { title: '镜像hash', dataIndex: 'image_hash', key: 'image_hash', width: 100 },
  { title: '镜像是否公开', dataIndex: 'image_is_public', key: 'image_is_public', width: 130 },
  { title: '镜像路径', dataIndex: 'image_path', key: 'image_path', width: 120 },
  { title: '镜像大小', dataIndex: 'image_size', key: 'image_size', width: 180 },
  { title: '镜像类型', dataIndex: 'image_type', key: 'image_type', width: 180 },
  { title: '状态', dataIndex: 'status', key: 'status', width: 80 },
  { title: '创建时间', dataIndex: 'createTime', key: 'createTime', width: 160 },
  {
    title: '操作',
    key: 'action',
    slots: { customRender: 'action' },
    fixed: 'right',
    width: 130
  },
];

// 分页事件处理
const onPageChange = (page: number, pageSize: number) => {
  console.log(`切换到第 ${page} 页，每页 ${pageSize} 条`);
  pagination.current = page;
  pagination.pageSize = pageSize;
};

const onShowSizeChange = (current: number, pageSize: number) => {
  console.log(`每页显示 ${pageSize} 条`);
  pagination.current = current;
  pagination.pageSize = pageSize;
};

// 操作处理函数
const handleView = (record: ImageItem) => {
  // message.info(`查看镜像: ${record.name}`);
  editDialogRef.value.openDialog(record);
};

const handleDelete = (record: ImageItem) => {
  message.info(`删除镜像: ${record.name}`);
};

// 计算当前页数据
const getCurrentPageData = computed(() => {
  const start = (pagination.current - 1) * pagination.pageSize;
  const end = start + pagination.pageSize;
  return imageList.value.slice(start, end);
});

onMounted(() => {
  apis.imgs.fetchImageList({ pageNum: pagination.current, pageSize: pagination.pageSize }).then((response: any) => {
    imageList.value = response.list;
  });
});

</script>
<style scoped lang="scss">
.my-images-page {
  padding: 24px;
  background-color: #ffffff;
  // min-height: 100vh;
  display: flex;
  flex-direction: column;

  .top-warning {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    font-size: 14px;
    color: #333;

    .title {
      font-weight: bold;
      color: #000;
      font-size: 18px;
    }

    .warning-text {
      color: #f56a00;
      font-size: 14px;
    }

    .link {
      color: #1890ff;
      text-decoration: underline;
    }
  }

  .storage-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding: 16px;
    background: #e6f7ff;
    border-radius: 4px;
    color: #333;

    .storage-desc {
      font-size: 14px;

      strong {
        font-size: 16px;
        color: #1890ff;
      }
    }

    .view-rule {
      color: #1890ff;
      font-size: 14px;
      cursor: pointer;
    }
  }

  .progress-container {
    margin: 16px 0;
    width: 100%;
    max-width: 600px;
  }

  .capacity-info {
    display: flex;
    gap: 32px;
    margin: 16px 0;
    font-size: 14px;
    color: #333;

    .dot {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      margin-right: 8px;
    }

    .free {
      background-color: #1890ff;
    }

    .paid {
      background-color: #f56a00;
    }
  }

  .table-container {
    flex: 1;
    margin: 24px 0;
  }

  .image-table {
    background: white;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    overflow: hidden;
    height: 100%;
  }

  .table-empty {
    text-align: center;
    padding: 60px 0;
    color: #999;
    font-size: 14px;
  }

  .pagination-container {
    margin-top: auto;
    padding-top: 24px;
    text-align: right;
    border-top: 1px solid #e8e8e8;

  }
}
</style>
