<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="modelStatus" 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" @click="handleSearch">搜索</el-button>
      </el-col>
      <el-col :span="1" style="padding-left: 20px;margin-left:30px">
        <el-button @click="handleReset">重置</el-button>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="2">
        <el-button type="primary" @click="handleAddModel">
          +新增模型
        </el-button>
      </el-col>
      <el-col :span="1">
        <el-button @click="handleExport"><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 @click="handleDetail">详情</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="modelData"
        style="width: 100%"
        height="100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection"/>
        <el-table-column label="模型名称" prop="modelName"></el-table-column>
        <el-table-column lable="模型类型" prop="modelType"></el-table-column>
        <el-table-column label="模型版本" prop="modelVersion"></el-table-column>
        <el-table-column label="参数配置">
          <template #default="scope">
            <span v-if="scope?.parameters">{{scope?.row?.parameters?.length}}个参数</span>
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template #default>
            <div v-if="scope?.row.status === 1" class="status enabled">
              启用
            </div>
            <div v-else-if="scope?.row.status === 0" class="status testing">
              测试中
            </div>
          </template>
        </el-table-column>
        <el-table-column label="优先级" prop="priority"></el-table-column>
        <el-table-column label="创建时间" prop="createTime"></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="slot?.row.status===0? '#b7eb8f' : '#ffa8e3'" size="25px" class="icon-gap" @click="toggleModelStatus(slot.row)"><SwitchButton /></el-icon>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="foot">
      <div class="left">
        <div style="line-height: 2">已选择{{selectedRows.length}}项</div>
        <el-button @click="handleEnable">批量启用</el-button>
        <el-button @click="handleDisabled">批量禁用</el-button>
        <el-button type="danger" @click="handleDelete">批量删除</el-button>
      </div>
      <div class="right">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="10"
          :page-size="pageSize"
        />
      </div>
    </div>
    <el-dialog v-model="dialogVisible" :title="addOrEdit+'模型'">
      <add-model :model="modelInfo" :addOrEdit="addOrEdit" v-model="dialogVisible"></add-model>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import addModel from './addModel.vue'
import { useRouter } from 'vue-router'
import {onMounted} from 'vue';
import {getModelByType,queryModelByNameType,deleteModel,queryModelList,toggleStatus,exportModel} from '@/api/modelConfig/index'
import { ModelConfigVo} from '@/api/modelConfig/types'

const router = useRouter()
const addOrEdit = ref("新增")
const serviceOption = ref(["OpenAI"])
const modelNameOption = ref(["模型1","模型2"])
const modelTypeOption = ref(["类型1","类型2"])
const modelStateOption = ref(["全部","开启","关闭"])
const modelData = ref<ModelConfigVo[]>()
const model = ref<ModelConfigVo>()
const pageSize = ref(10)
const selectedRows = ref([])

const modelInfo = ref(null)

const modelName = ref(null)
const modelType = ref(null)
const service = ref(null)
const modelStatus = ref(null)
const dialogVisible = ref(false)
//test enabled
const statusClass = ref('enabled')

onMounted(()=>{
  fetchData()
})
const fetchData = async() =>{
  const res = await queryModelList({})
  if(res.code===0){
    modelData.value = res.data
  }
}
const toggleModelStatus = async (row) =>{
  const data = row.modelStatus === 0
  const res = await toggleStatus(data,row.id)
  if(res.code===0){
    await fetchData()
  }
}
const handleExport = async () => {
  const res = await exportModel(modelData)
  if(res.code === 0){
    ElMessage({
      message:'导出成功',
      type:'success'
    })
  }
}
const handleSelectionChange = (value)=>{
  selectedRows.value = value;
}
const handleAddModel = ()=>{
  addOrEdit.value="新增"
  dialogVisible.value = true;
}
const handleDetail = () =>{
  router.push({path: '/modeldetailed',query: model})
}
const edit = ((index,row)=>{
  modelInfo.value = { ...row }
  addOrEdit.value = "编辑"
  dialogVisible.value=true
})
const handleDelete = () =>{
  console.log('进入了')
  ElMessageBox.confirm(
    '此操作将无法撤销,是否继续',
    '警告',
    {
      confirmButtonText:'确定',
      cancelButtonText: '取消'
    }
  ).then(()=>{
    doDelete()
  })
}
const doDelete = async () => {
  const promises = selectedRows.value.map(item => deleteModel(item.id));
  const results = await Promise.all(promises);
  await fetchData();
  if(results.every(res => res.code===0)){
    ElMessage({
      type:'success',
      message:'删除成功',
    })
  }
}
const handleEnable = async () => {
  const promises = selectedRows.value.map(item => toggleStatus(1,item.id));
  const results = await Promise.all(promises)
  await fetchData();
  if(results.every(res => res.code===0)){
    ElMessage({
      type:'success',
      message:'启用成功',
    })
  }
}
const handleDisabled = async () => {
  const promises = selectedRows.value.map(item => toggleStatus(0,item.id));
  const results = await Promise.all(promises)
  await fetchData();
  if(results.every(res => res.code===0)){
    ElMessage({
      type:'success',
      message:'禁用成功',
    })
  }
}
const handleSearch = async () => {
  if(modelType.value&&modelName.value){
    const data = {
      modelName:modelName.value,
      modelType:modelType.value
    }
    const res = await queryModelByNameType(data)
    if(res.code===0){
      modelData.value = res.data
    }
  }else if(modelType.value){
    const res = await getModelByType(modelType.value)
    if(res.code===0){
      modelData.value=[];
      modelData.push(res.data)
    }
  }
}
</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>
