<script setup lang="ts">
import { onMounted, ref } from "vue";
import {
  AiAssistantResult, deleteAiAssistant,
  getAllAiAssistant,
  saveAiAssistant
} from "@/api/assistant";
import { message } from "@/utils/message";

defineOptions({
  name: "Assistant"
});

// 页面是否加载中
const dataLoading = ref(false);
// 是否在新增
const showCreateDialog = ref(false);
// 定义可使用的 AI 模型
const modelList = ref([
  { name: "ChatGPT 3.5", value: "gpt-3.5-turbo-0613" },
  { name: "ChatGPT 4", value: "gpt-4-0613" },
  { name: "讯飞星火 V3", value: "SparkDesk3" },
  { name: "讯飞星火随机", value: "SparkDesk" },
  { name: "月之暗面 8k", value: "moonshot-v1-8k" },
  { name: "月之暗面 32k", value: "moonshot-v1-32k" },
  { name: "月之暗面 128k", value: "moonshot-v1-128k" }
]);

// 新增 AI 助手参数
const createAssistantParam = ref({
  name: "",
  model: "gpt-3.5-turbo-0613",
  personality: "",
  enable: true
});

// 列表数据
const assistantList = ref([] as AiAssistantResult[]);

// 获取机器人列表
const getAllAiAssistantHandle = async () => {
  // 打开加载动画
  dataLoading.value = true;
  // 调用接口
  getAllAiAssistant({})
    .then(assistantData => {
      // 赋值
      assistantList.value = assistantData.data;
    })
    .catch(() => {
      message("获取机器人列表失败", { type: "error" });
    })
    .finally(() => {
      // 关闭加载动画
      dataLoading.value = false;
    });
};

// 保存机器人信息
const saveAssistantHandle = async (item: AiAssistantResult) => {
  // 设置为加载中
  item.saveLoading = true;
  // 调用接口，保存数据
  saveAiAssistant(item)
    .then(() => {
      message("保存成功", { type: "success" });
      // 保存成功，重新加载数据
      getAllAiAssistantHandle();
    })
    .catch(() => {
      message("保存失败", { type: "error" });
    })
    .finally(() => {
      // 关闭加载动画
      item.saveLoading = false;
    });
};

const deleteAssistantHandle = (id: string) => {
  deleteAiAssistant(id)
    .then(() => {
      message("删除成功", { type: "success" });
      getAllAiAssistantHandle();
    })
    .catch(e => {
      message("删除失败" + e, { type: "error" });
    });
};

// 重置新增参数
const clearCreateParam = (done: () => void) => {
  createAssistantParam.value = {
    name: "",
    model: "gpt-3.5-turbo-0613",
    personality: "",
    enable: true
  };
  done();
};

onMounted(() => {
  // 获取机器人信息
  getAllAiAssistantHandle();
});
</script>

<template>
  <div style="margin: 20px">
    <el-button type="primary" @click="showCreateDialog = true"
      >新增 AI 助手</el-button
    >
  </div>
  <div class="flex h-[640px]" v-loading="dataLoading">
    <div class="card-container">
      <el-card
        class="assistant-card"
        shadow="hover"
        v-for="item in assistantList"
        :key="item.id"
        v-loading="item.saveLoading"
      >
        <template #header>
          <div class="assistant-header">
            <span v-if="!item.edit">
              {{ item.name }}
            </span>
            <el-input v-else v-model="item.name" style="width: 80%" />
            <el-button-group>
              <el-button
                link
                :type="item.edit ? 'primary' : 'warning'"
                @click="item.edit = !item.edit"
              >
                {{ item.edit ? "取消" : "编辑" }}
              </el-button>
              <el-button v-if="!item.edit" link type="danger" @click="deleteAssistantHandle(item.id)">删除</el-button>
              <el-button
                v-else
                link
                type="success"
                @click="saveAssistantHandle(item)"
                >保存</el-button
              >
            </el-button-group>
          </div>
        </template>

        <div>
          <el-descriptions :column="1" size="default" border>
            <el-descriptions-item label="模型">
              <el-text v-if="!item.edit">{{ item.model }}</el-text>
              <el-select
                v-else
                v-model="item.model"
                placeholder="请选择模型"
                style="width: 100%"
              >
                <el-option
                  v-for="model in modelList"
                  :key="model.value"
                  :label="model.name"
                  :value="model.value"
                />
              </el-select>
            </el-descriptions-item>
            <el-descriptions-item label="人设">
              <el-input
                v-model="item.personality"
                :autosize="{ minRows: 2, maxRows: 4 }"
                resize="none"
                type="textarea"
                placeholder="请输入人设"
                :disabled="!item.edit"
                clahh="data-input"
              />
            </el-descriptions-item>
            <el-descriptions-item label="启用">
              <el-tag v-if="!item.edit">{{
                item.enable ? "已启用" : "已禁用"
              }}</el-tag>
              <el-switch
                v-else
                v-model="item.enable"
                active-text="是"
                inactive-text="否"
              />
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </el-card>
    </div>
  </div>

  <el-dialog
    v-model="showCreateDialog"
    title="新增 AI 助手"
    width="40%"
    :close-on-click-modal="false"
    :before-close="clearCreateParam"
  >
    <el-form :model="createAssistantParam" label-width="120px">
      <el-form-item label="名称">
        <el-input v-model="createAssistantParam.name" />
      </el-form-item>
      <el-form-item label="模型">
        <el-select
          v-model="createAssistantParam.model"
          placeholder="请选择模型"
          style="width: 100%"
        >
          <el-option
            v-for="model in modelList"
            :key="model.value"
            :label="model.name"
            :value="model.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="人设">
        <el-input
          v-model="createAssistantParam.personality"
          :autosize="{ minRows: 2, maxRows: 4 }"
          resize="none"
          type="textarea"
          placeholder="请输入人设"
        />
      </el-form-item>
      <el-form-item label="启用">
        <el-switch
          v-model="createAssistantParam.enable"
          active-text="是"
          inactive-text="否"
        />
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<style lang="scss" scoped>
.card-container {
  margin: 10px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: flex-start; /* 改为 flex-start 以优先横向排列 */
}

.assistant-card {
  width: 32%;
  height: 330px;
}

.assistant-header {
  font-size: 18px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
