<template>
  <div class="related-models-container">
    <div class="table-header">
      <h3>关联模型</h3>
      <el-button type="primary" @click="handleAddModel">添加模型</el-button>
    </div>

    <el-table :data="relatedModels" stripe style="width: 100%">
      <el-table-column prop="modelName" label="模型编码"></el-table-column>
      <el-table-column prop="modelName" label="模型名称"></el-table-column>
      <el-table-column prop="modelVersion" label="版本号"></el-table-column>
      <el-table-column prop="modelName" label="模型种类"></el-table-column>
      <el-table-column prop="status" label="状态">
        <template #default="scope">
          <el-tag :type="scope.row.status === '启用' ? 'success' : 'danger'">
            {{ scope.row.status }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间"></el-table-column>
      <el-table-column label="操作" width="150">
        <template #default="scope">
          <el-button size="small" @click="handleView(scope.row)">查看</el-button>
          <el-button size="small" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="table-footer">
      <el-pagination
        layout="prev, pager, next"
        :total="total"
        :page-size="pageSize"
        @current-change="handlePageChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

// 表格数据
const relatedModels = [
  { modelName: "DALL·E", modelVersion: "v1", modelId: "1234567890", status: "启用", createTime: "2023-05-18 14:59:13" },
  { modelName: "GPT-3", modelVersion: "v3", modelId: "0987654321", status: "启用", createTime: "2023-05-18 14:59:13" }
]

// 分页数据
const total = ref(100) // 总数据条数（可动态获取）
const pageSize = 10
const currentPage = ref(1)

// 分页切换
const handlePageChange = (page: number) => {
  currentPage.value = page
  // 这里可以请求新一页的数据
  ElMessage.info(`切换到第 ${page} 页`)
}

// 按钮操作
const handleAddModel = () => {
  ElMessage.success('点击了添加模型')
  // 这里可以打开弹窗或跳转到添加页面
}

const handleView = (row: any) => {
  ElMessage.info(`查看模型：${row.modelName}`)
  // 跳转或打开查看弹窗
}

const handleEdit = (row: any) => {
  ElMessage.warning(`编辑模型：${row.modelName}`)
  // 跳转编辑页或打开编辑弹窗
}
</script>

<style scoped lang="scss">
.related-models-container {
  padding: 20px;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.table-footer {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>
