<template>
  <el-select v-model="model" placeholder="请选择模型" style="width: 180px" @change="handleChangeModel" class="model-select">
    <el-option v-for="(v, i) in models" :key="i" :value="v.id" :label="v.display_name" />
  </el-select>
</template>
<script setup lang="ts">

import { ElMessage } from 'element-plus'
import { find } from 'lodash-es'
import { ref } from 'vue'
import { getAllModel, setModel } from '@/api/writing'
import useStore from '@/stores'

const { docs } = useStore()

const models: any = ref([]);


const model = ref('')

const init = async () => {
  const data = await getAllModel()
  models.value = data.data.llms;
  const defaultModel = find(models.value, (v: any) => v.selected) || {}
  model.value = defaultModel?.id
  docs.setModelId(model.value)

}
init();


const handleChangeModel = async () => {
  docs.setModelId(model.value)
  try {
    await setModel(model.value)
    ElMessage.success('切换成功')

  } catch (e) {
    ElMessage.error('切换失败')
  }
}
</script>
<style lang="scss">
.model-select {
  .el-select__wrapper {
    box-shadow: none !important;
    background: #f0f1f5;
    border-radius: 20px;
  }
}
</style>
