<template>
  <div class="wrapper">
    <el-row>
      <h3>市场模型管理</h3>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="4" style="margin-left: 20px">
        <el-form-item label="服务商">
          <el-select v-model="service">
            <el-option
              v-for="item in serviceOption"
              :key="item"
              :value="item"
              :label="item"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="5">
        <el-form-item label="模型名称">
          <el-select v-model="modelName" placeholder="请输入模型名称">
            <el-option
              v-for="item in modelNameOption"
              :label="item"
              :value="item"
              :key="item"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="4">
        <el-form-item label="模型类型">
          <el-select v-model="modelType" placeholder="全部">
            <el-option
              v-for="item in modelTypeOption"
              :value="item"
              :label="item"
              :key="item"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="4">
        <el-form-item label="状态">
          <el-select v-model="modelState" placeholder="全部">
            <el-option
              v-for="item in modelStateOption"
              :label="item"
              :value="item"
              :key="item"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="1" :offset="4" style="padding-left: 30px">
        <el-button type="primary">搜索</el-button>
      </el-col>
      <el-col :span="1" style="padding-left: 20px;margin-left:30px">
        <el-button>重置</el-button>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="2">
        <el-button type="primary">
          +新增模型
        </el-button>
      </el-col>
      <el-col :span="1">
        <el-button><el-icon><Download /></el-icon>导出</el-button>
      </el-col>
    </el-row>
    <div class="content">
      <el-row>
        <el-col :span="20">
          <h2 style="font-weight: 500">OpenAI</h2>
        </el-col>
        <el-col :span="1" :offset="3">
          <el-button>详情</el-button>
        </el-col>
      </el-row>
      <el-row class="model-msg">
        <el-col :span="6">
          <el-row>
            <span>API基础地址</span>
          </el-row>
          <el-row class="msg-space">
            <span>https://api.openai.com/v1</span>
          </el-row>
        </el-col>
        <el-col :span="6">
          <el-row>
            <el-col :span="24">
              <span>支持模型类型</span>
            </el-col>
          </el-row>
          <el-row class="section-type msg-space">
            <span>大语言模型</span>
            <span>多模态</span>
            <span>向量嵌入</span>
          </el-row>
        </el-col>
        <el-col :span="6">
          <el-row>
            <span>认证方式</span>
          </el-row>
          <el-row class="msg-space">
            <span>API Key</span>
          </el-row>
        </el-col>
        <el-col :span="6">
          <el-row>
            <span>状态</span>
          </el-row>
          <el-row>
            <div :class="['status', statusClass]">
              启用
            </div>
          </el-row>
        </el-col>
      </el-row>
    </div>
    <div class="table">
      <el-table
        :data="models"
        style="width: 100%"
        height="100%"
      >
        <el-table-column type="selection"/>
        <el-table-column label="模型名称"></el-table-column>
        <el-table-column lable="模型类型"></el-table-column>
        <el-table-column label="模型版本"></el-table-column>
        <el-table-column label="参数配置"></el-table-column>
        <el-table-column label="状态"></el-table-column>
        <el-table-column label="优先级"></el-table-column>
        <el-table-column label="创建时间"></el-table-column>
        <el-table-column label="操作">
          <template #default="slot">
            <el-icon color="#1890ff" size="25px" class="icon-gap"><View /></el-icon>
            <el-icon color="#1890ff" size="25px" class="icon-gap" @click="edit(slot.$index,slot.row)"><Edit /></el-icon>
            <el-icon color="#1890ff" size="25px" class="icon-gap"><List /></el-icon>
            <el-icon color="#ffa8e3" size="25px" class="icon-gap"><SwitchButton /></el-icon>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="foot">
      <div class="left">
        <span>已选择0项</span>
        <el-button>批量启用</el-button>
        <el-button>批量禁用</el-button>
        <el-button type="danger">批量删除</el-button>
      </div>
      <div class="right">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="10"
          :page-size="pageSize"
        />
      </div>
    </div>
    <el-dialog v-model="dialogVisable">
      <add-model></add-model>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import addModel from './addModel.vue'


const serviceOption = ref(["OpenAI"])
const modelNameOption = ref(["模型1","模型2"])
const modelTypeOption = ref(["类型1","类型2"])
const modelStateOption = ref(["全部","开启","关闭"])
const models = ref([{}])
const pageSize = ref(10)

const modelName = ref(null)
const modelType = ref(null)
const service = ref(null)
const modelState = ref(null)
const dialogVisable = ref(false)
//test enabled
const statusClass = ref('enabled')

const edit = ((index,row)=>{
  dialogVisable.value=true
})
</script>

<style scoped lang="scss">
.status {
  border-radius: 4px;
  font-size: 13px;
  margin-top: 3px;
  padding: 2px;
}

.status.enabled {
  border:1px solid #52c41a;
  color: #b7eb8f;
}

.status.testing {
  border:1px solid #ffe58f; /* 黄色 */
  color: #fab487;
}
.foot{
  display: flex;
  width: 100%;
  margin-top: 10px;
  .left{
    width: 70%;
    display: flex;
    gap:10px;
  }
  .right{
    width: 30%;
    display: flex;
    justify-content: flex-end;
  }
}

.wrapper{
  margin:10px auto;
  width:90%;
}
.model-msg{
  span{
    color:#666666;
    font-size: 12px;
  }
}
.section-type{
  span{
    padding-left: 5px;
  }
}
.msg-space{
  margin-top:5px;
}
.content{
  padding-left: 10px;
}
.table{
  margin-top: 10px;
  min-height: 40vh;
  width:100%;
}
.icon-gap{
  padding-left: 5px;
}
</style>
