<template>
  <div class="app-container">
    <el-table
      :data="currentPageData"
      border
      stripe
      style="width: 100%; height: 95%"
      height="calc(100vh - 120px)"
    >
      <el-table-column fixed type="index" label="序号" align="center" width="80">
      <template #default="{ $index }">
      {{(currentPage - 1) * pageSize + $index + 1 }}
      </template>
      </el-table-column>
      <el-table-column prop="nodes" label="节点组" width="450" align="center">
        <template #default="{ row }">
          <span class="download-link" @click="downloadCSV(row)">
            {{ row.name }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="edges" label="边组" width="450" align="center" />
      <el-table-column prop="type" label="类型" width="180" align="center" >
        <template #default="{ row }">
          <el-tag :type="typeTagMap[row.type] || 'info'">
            {{ row.type }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="280" sortable align="center"/>
      <el-table-column prop="updateTime" label="修改时间" width="280" sortable align="center"/>
      <el-table-column prop="userId" label="用户ID" width="120" align="center" />
    </el-table>
    <div class="pagination-container">
          <el-pagination background layout="total, sizes, prev, pager, next" :page-sizes="[8, 16, 24]"
            :current-page="currentPage" :page-size="pageSize" :total="total"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" class="pagination" />
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted , inject } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { getData, postData, deleteData, postFile } from '@/api/axios.js'
 
// 数据列表
const items = ref([])

// 获取数据逻辑修复
const fetchFiles = async () => {
  try {
    const response = await getData('/selectGraphic/')
    if (response.status === "success" && response.data?.length) {
      items.value = response.data //  直接赋值数组
      total.value = response.data.length //  动态设置总数
    }
  } catch (error) { 
    console.error('获取图形列表失败:', error)
    ElMessage.error('数据加载失败')
  }
}

//请求获取数据
onMounted(() => {
  fetchFiles()
})

const typeTagMap = {
  Storage: 'success',
  Compute: 'warning',
  Network: 'danger',
  Database: 'primary'
};

const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

const currentPageData = computed(() => {
  if (!items.value.length) return []
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  const itemlist =  items.value.slice(start, end)
  for(let i = 0; i < itemlist.length; i++)
  {
    itemlist[i].createTime = new Date(itemlist[i].createTime).toLocaleString('zh-CN');
    itemlist[i].updateTime = new Date(itemlist[i].updateTime).toLocaleString('zh-CN');
  }
  return itemlist
})

// CSV 下载功能
const downloadCSV = async (row) => {
  debugger
  const response = await postData('/downloadGraphic/',{
        id:row.id
      })
  try{
    if(response.status === "success")
    {
      const url = window.URL.createObjectURL(new Blob([response.data]));
      const link = document.createElement('a');
      link.href = url;
      link.setAttribute('download', filename);
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      window.URL.revokeObjectURL(url);
    }else
    {
      ElMessage.error('下载失败');
    }
  } catch (error) {
    ElMessage.error('下载失败')
  }
}
// 分页事件处理
const handleSizeChange = (size) => {
  pageSize.value = size
  currentPage.value = 1
}

const handleCurrentChange = (page) => {
  currentPage.value = page
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.download-link {
  cursor: pointer;
  color: #409eff;
  text-decoration: underline;
}

.download-link:hover {
  color: #79bbff;
}

.mr-2 {
  margin-right: 0.5rem;
}
</style>