<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: any, isCreate?: boolean) => {
  // 设置为加载中
  item.saveLoading = true;
  // 调用接口，保存数据
  saveAiAssistant(item)
    .then(() => {
      message("保存成功", { type: "success" });
      if (isCreate) {
        showCreateDialog.value = false;
      }
      // 保存成功，重新加载数据
      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>
    <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-popconfirm
                  v-if="!item.edit"
                  title="是否删除当前 AI 助手？"
                  confirm-button-text="是"
                  cancel-button-text="否"
                  @confirm="deleteAssistantHandle(item.id)"
                >
                  <template #reference>
                    <el-button link type="danger">删除</el-button>
                  </template>
                </el-popconfirm>
                <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>

      <template #footer>
        <div class="dialog-footer">
          <el-button
            type="primary"
            @click="saveAssistantHandle(createAssistantParam, true)"
          >
            保存
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</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%;
  min-width: 380px;
  height: 330px;
}

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