<template>
  <div class="model-management">
    <!-- 标题 -->
    <h3 class="title">企业模型配置</h3>

    <!-- 使用提示 -->
    <el-card class="tip-card">
      <div class="tip-header">
        <el-icon><Warning /></el-icon>
        <span class="tip-title">使用提醒</span>
      </div>
      <div class="tip-content">
        企业模型配置是基于市场模型定义的实际应用配置，可设置不同环境的API密钥，自定义参数等，同一模型可创建多个配置用于不同场景。
      </div>
    </el-card>

    <!-- 筛选器 -->
    <el-row :gutter="10" style="margin-bottom: 5px">
      <el-col :span="16">
        <el-form inline :model="queryParams" label-width="100px">
          <el-form-item label="模型名称">
            <el-input v-model="queryParams.modelName" placeholder="请输入模型名称" style="width: 120px" />
          </el-form-item>
          <el-form-item label="模型类型">
            <el-select v-model="queryParams.modelType" placeholder="请选择" style="width: 120px">
              <el-option label="LLM" value="LLM" />
              <el-option label="多模态" value="MULTIMODAL" />
              <el-option label="OCR" value="OCR" />
            </el-select>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="queryParams.status" placeholder="请选择" style="width: 120px">
              <el-option label="全部" value="" />
              <el-option label="启用" value="1" />
              <el-option label="禁用" value="0" />
            </el-select>
          </el-form-item>
          <el-form-item label="创建人">
            <el-input v-model="queryParams.creator" placeholder="请输入创建人" style="width: 120px" />
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>

    <!-- 操作按钮 -->
    <el-row :gutter="10" style="margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between;">
      <el-form style="width: 100%;margin-left:10px">
        <div style="display: flex; justify-content: space-between; align-items: center;">
          <div style="flex: 1; display: flex; align-items: center;">
            <el-form-item style="margin-bottom: 0;">
              <div class="button-group">
                <el-button type="primary" @click="openAddDialog">+ 新增配置</el-button>
                <el-button>导出</el-button>
              </div>
            </el-form-item>
          </div>
          <div style="text-align: right; flex-shrink: 0;">
            <el-form-item style="margin-bottom: 0;">
              <el-button type="primary" @click="handleQuery">搜索</el-button>
              <el-button @click="resetQuery">重置</el-button>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </el-row>

    <!-- 环境筛选 -->
    <el-row :gutter="20" style="margin-bottom: 20px">
      <el-col :span="8" style="margin-left: 20px">
        <span style="margin-right:10px">环境</span>
        <el-radio-group v-model="queryParams.env" size="large">
          <el-radio label="">全部</el-radio>
          <el-radio label="PROD">生产</el-radio>
          <el-radio label="TEST">测试</el-radio>
          <el-radio label="DEV">开发</el-radio>
        </el-radio-group>
      </el-col>
    </el-row>

    <!-- 表格区域 -->
    <el-table :data="models" border stripe @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="modelName" label="模型名称" />
      <el-table-column prop="modelType" label="模型类型" />
      <el-table-column prop="modelVersion" label="模型版本" />
      <el-table-column prop="env" label="环境" />
      <el-table-column prop="creator" label="创建人" />
      <el-table-column prop="createdAt" label="创建时间" />
      <el-table-column label="操作" width="200">
        <template #default="scope">
          <el-button size="mini" type="text" @click="handleView(scope.row)">查看</el-button>
          <el-button size="mini" type="text" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="text" @click="handleDetail(scope.row)">详情</el-button>
          <el-button size="mini" type="text" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>



    <!-- 弹窗组件 -->
    <AddModelDialog ref="addModelDialog" @success="getList" />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Warning } from '@element-plus/icons-vue'
import AddModelDialog from './components/AddModelDialog.vue'

// 查询参数
const queryParams = ref({
  modelName: '',
  modelType: '',
  status: '',
  creator: '',
  env: '',
  pageNum: 1,
  pageSize: 10
})

// 选中行
const selectedRows = ref([])

// 表格数据
const models = ref([])
const total = ref(0)

// 弹窗引用
const addModelDialog = ref()

// 获取列表数据
const getList = async () => {
  // 模拟数据
  const list = [
    {
      modelName: 'Qwen',
      modelType: 'LLM',
      modelVersion: 'v2.0',
      env: 'PROD',
      creator: 'admin',
      createdAt: '2024-03-20',
      status: 1
    },
    {
      modelName: 'OCR识别',
      modelType: 'OCR',
      modelVersion: 'v1.0',
      env: 'TEST',
      creator: 'user1',
      createdAt: '2024-04-10',
      status: 0
    }
  ]

  models.value = list
  total.value = list.length
}

// 搜索按钮点击事件
const handleQuery = () => {
  queryParams.value.pageNum = 1
  getList()
}

// 重置按钮点击事件
const resetQuery = () => {
  queryParams.value = {
    modelName: '',
    modelType: '',
    status: '',
    creator: '',
    env: '',
    pageNum: 1,
    pageSize: 10
  }
  getList()
}

// 分页相关方法
const handleSizeChange = (val) => {
  queryParams.value.pageSize = val
  getList()
}

const handleCurrentChange = (val) => {
  queryParams.value.pageNum = val
  getList()
}

// 新增/编辑弹窗操作
const openAddDialog = () => {
  addModelDialog.value.open()
}

const handleEdit = (row) => {
  addModelDialog.value.open(row)
}

// 查看、详情、删除等操作
const handleView = (row) => {
  console.log('查看:', row)
}

const handleDetail = (row) => {
  console.log('详情:', row)
}

const handleDelete = (row) => {
  console.log('删除:', row)
}

// 批量操作
const handleSelectionChange = (selection) => {
  selectedRows.value = selection
}

const batchEnable = () => {
  console.log('批量启用:', selectedRows.value)
}

const batchDisable = () => {
  console.log('批量禁用:', selectedRows.value)
}

const batchDelete = () => {
  console.log('批量删除:', selectedRows.value)
}

// 页面加载时获取数据
onMounted(() => {
  getList()
})
</script>

<style scoped>
.model-management {
  padding: 20px;
}

.title {
  margin-bottom: 20px;
  font-size: 20px;
  color: #333;
}

.tip-card {
  background-color: #fffbe6;
  border: 1px solid #ffe58f;
  margin-bottom: 20px;
}

.tip-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: bold;
  color: #e69900;
}

.tip-title {
  font-size: 16px;
}

.tip-content {
  margin-top: 10px;
  color: #666;
}

.button-group {
  display: flex;
  gap: 10px;
}
</style>
