<template>
  <div class="model-info-config-page">
    <h2 class="page-title">模型信息配置</h2>

    <section class="filter-card">
      <div class="filter-row">
        <el-form :inline="true" :model="queryForm" class="filter-form">
          <el-form-item label="模型名称">
            <el-input
              v-model="queryForm.modelName"
              size="small"
              clearable
              placeholder="搜索模型名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="类型">
            <el-select v-model="queryForm.modelType" size="small" placeholder="全部">
              <el-option label="全部" value=""></el-option>
              <el-option label="文本生成" value="文本生成"></el-option>
              <el-option label="图像生成" value="图像生成"></el-option>
              <el-option label="语音合成" value="语音合成"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="供应商">
            <el-select v-model="queryForm.provider" size="small" placeholder="全部">
              <el-option label="全部" value=""></el-option>
              <el-option label="OpenAI" value="OpenAI"></el-option>
              <el-option label="Google" value="Google"></el-option>
              <el-option label="开元云" value="开元云"></el-option>
            </el-select> 
          </el-form-item>
          <el-form-item>
            <el-button size="small" type="primary">查询</el-button>
            <el-button size="small">重置</el-button>
          </el-form-item>
        </el-form>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="openAddDialog">添加</el-button>
      </div>
    </section>

    <section class="table-card">
      <el-tabs v-model="activeTab" class="config-tabs">
        <el-tab-pane label="待上架" name="pending"></el-tab-pane>
        <el-tab-pane label="已上架" name="listed"></el-tab-pane>
      </el-tabs>

      <el-table :data="displayTableData" class="config-table" style="width: 100%">
        <el-table-column prop="id" label="模型ID" width="90" show-overflow-tooltip></el-table-column>
        <el-table-column prop="model_name" label="模型名称/版本" min-width="150" show-overflow-tooltip></el-table-column>
        <el-table-column prop="model_type" label="模型类型" width="120" show-overflow-tooltip></el-table-column>
        <el-table-column prop="provider" label="供应商" width="120" show-overflow-tooltip></el-table-column>
        <el-table-column prop="api_doc.api_url" label="接口地址" min-width="190" show-overflow-tooltip></el-table-column>
        <el-table-column prop="description" label="模型介绍" min-width="190" show-overflow-tooltip></el-table-column>
        <el-table-column prop="status" label="状态" width="90">
          <template slot-scope="scope">
            <el-tag size="mini" :type="scope.row.listing_status === 1 ? 'success' : 'warning'">
              {{ scope.row.listing_status === 1 ? '已上架' : '待上架' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="updated_at" label="更新时间" width="150" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" width="160" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="openDetailDialog(scope.row)">详情</el-button>
            <el-button type="text" size="mini" @click="openEditDialog(scope.row)">编辑模型信息</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="table-footer">
        <span>共 {{ displayTableData.length }} 条</span>
        <div class="pager">
          <el-button size="mini">上一页</el-button>
          <span>1 / 1</span>
          <el-button size="mini">下一页</el-button>
        </div>
      </div>
    </section>

    <model-info-edit-dialog ref="editDialog" @success="handleDialogSuccess"></model-info-edit-dialog>
    <model-info-detail-dialog ref="detailDialog"></model-info-detail-dialog>
  </div>
</template>

<script>
import ModelInfoEditDialog from './ModelInfoEditDialog.vue'
import ModelInfoDetailDialog from './ModelInfoDetailDialog.vue'
import { reqModelInfoConfigList } from '@/api/model/model'
export default {
  name: 'ModelInfoConfig',
  components: {
    ModelInfoEditDialog,
    ModelInfoDetailDialog
  },
  data() {
    return {
      activeTab: 'pending',
      queryForm: {
        modelName: '',
        modelType: '',
        provider: ''
      },
      tableData: [
        {
          id: 'M006',
          name: 'GPT-3.5-Turbo',
          type: '文本生成',
          provider: 'OpenAI',
          logo: '-',
          apiUrl: 'https://api.openai.com/v1/chat/completions',
          description: 'GPT-3.5-Turbo高效对话模型，适合文本生成和问答。',
          status: '待上架',
          updatedAt: '2026-04-15'
        },
        {
          id: 'M007',
          name: 'ViT-B/16',
          type: '图像生成',
          provider: 'Google',
          logo: '-',
          apiUrl: 'https://api.kaiyuan.cloud/v1/images',
          description: 'ViT-B/16视觉Transformer模型，适合图像理解。',
          status: '待上架',
          updatedAt: '2026-04-14'
        },
        {
          id: 'M008',
          name: 'Bark',
          type: '语音合成',
          provider: '开元云',
          logo: '-',
          apiUrl: 'https://api.kaiyuan.cloud/v1/audio',
          description: 'Bark多语言语音合成模型，支持自然语音生成。',
          status: '待上架',
          updatedAt: '2026-04-13'
        },
        {
          id: 'M009',
          name: 'CLIP',
          type: '多模态',
          provider: 'OpenAI',
          logo: '-',
          apiUrl: 'https://api.kaiyuan.cloud/v1/clip',
          description: 'CLIP多模态模型，支持图文检索和理解。',
          status: '待上架',
          updatedAt: '2026-04-12'
        },
        {
          id: 'M011',
          name: 'Falcon-180B',
          type: '文本生成',
          provider: 'Meta',
          logo: '-',
          apiUrl: 'https://api.kaiyuan.cloud/v1/chat',
          description: 'Falcon-180B开源大语言模型，适合复杂文本任务。',
          status: '待上架',
          updatedAt: '2026-04-27'
        }
      ]
    }
  },
  computed: {
    displayTableData() {
      const targetStatus = this.activeTab === 'listed' ? 1 : 0
      return this.tableData.filter(item => Number(item.listing_status || 0) === targetStatus)
    }
  },
  created() {
    this.getModelInfoConfigList()
  },
  methods: {
    // 获取模型信息配置列表
    async getModelInfoConfigList() {
      const res = await reqModelInfoConfigList()
      console.log(res);
      if (res.status === true) {
        this.tableData = res.data.model_list
      }
      
    },

    openAddDialog() {
      this.$refs.editDialog.open()
    },
    openDetailDialog(row) {
      this.$refs.detailDialog.open(row)
    },
    openEditDialog(row) {
      this.$refs.editDialog.open(row)
    },
    handleDialogSuccess() {
      this.getModelInfoConfigList()
    }
  }
}
</script>

<style lang="less" scoped>
.model-info-config-page {
  min-height: 100vh;
  padding: 16px 18px 24px;
  background: #f3f7ff;
}

.page-title {
  margin: 0 0 16px;
  color: #1f2d3d;
  font-size: 18px;
  font-weight: 700;
}

.filter-card,
.table-card {
  background: #ffffff;
  border: 1px solid #edf1f7;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(31, 45, 61, 0.04);
}

.filter-card {
  padding: 12px 14px 0;
  margin-bottom: 14px;
}

.filter-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.filter-form {
  flex: 1;

  /deep/ .el-form-item {
    margin-right: 14px;
    margin-bottom: 10px;
  }

  /deep/ .el-input,
  /deep/ .el-select {
    width: 160px;
  }
}

@media (max-width: 900px) {
  .filter-row {
    flex-direction: column;
  }
}

.table-card {
  padding: 0 12px 12px;
}

.config-tabs {
  /deep/ .el-tabs__header {
    margin: 0;
  }

  /deep/ .el-tabs__nav-wrap::after {
    height: 1px;
    background: #e8edf5;
  }

  /deep/ .el-tabs__item {
    height: 44px;
    line-height: 44px;
  }
}

.config-table {
  margin-top: 10px;
  color: #344054;

  /deep/ th {
    color: #475467;
    font-weight: 600;
    background: #fafcff;
  }

  /deep/ td,
  /deep/ th {
    padding: 8px 0;
  }

  /deep/ .cell {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0 0;
  color: #667085;
  font-size: 13px;
}

.pager {
  display: flex;
  align-items: center;
  gap: 12px;
}

</style>
