

<script lang="ts" setup>
  import AppBase from './base/index.vue';
  import ApiChannel from './channel-api/index.vue';
  // import SvgIcon from '@/components/SvgIcon/index.vue';
  import { useRouter, useRoute } from 'vue-router';
  import { onMounted, ref } from 'vue';
  import { useAppStore } from './store';
  import { getAppInfo } from '@/api/new-ai/chat';

  const appStore = useAppStore();
  const router = useRouter();
  const route = useRoute();
  const form = ref<any>({name: 123});
  const loading = ref(false);
  const activeMenus = [
    { key: 'setting', icon: 'uil:setting', label: '应用配置' },
    { key: 'api', icon: 'hugeicons:api', label: 'API接入渠道' },
  ];

  onMounted(async () => {
    await fetchData();
  });

  async function fetchData() {
    loading.value = true;
    const id = route.params.id;
    const data = await getAppInfo({
      appId: id,
      conversationId: null,
    });
    form.value = data;
    loading.value = false;
  }
</script>

<template>
  <div v-if="form.name !== undefined" class="rounded bg-[#f9f9f9] w-full h-full pb-10 children">
    <div class="p-4 flex justify-between items-center bg-white rounded">
      <div class="flex gap-5 items-center min-w-20">
        <el-button text type="primary" @click="router.push('/ai/app')">
          <SvgIcon class="text-xl" icon="icon-park-outline:back" />
        </el-button>
        <div class="flex gap-2 items-center pr-4">
          <div class="mr-3">
            <div class="relative bg-orange-100 p-4 rounded-lg">
              <SvgIcon class="text-3xl" icon="prime:microchip-ai" />

              <div
                class="absolute bottom-[-6px] p-1 right-[-5px] shadow bg-white mx-auto rounded-lg"
              >
                <SvgIcon class="text-sm text-orange-500" icon="lucide:bot" />
              </div>
            </div>
          </div>

          <div class="flex flex-col justify-between gap-2">
            <div class="font-bold text-lg">{{ form.name }}</div>
            <div v-if="!loading" class="text-gray-400 text-xs">自动保存：{{ form.saveTime }}</div>
            <div v-else class="flex items-center gap-1 text-gray-400 text-xs">
              <SvgIcon icon="eos-icons:bubble-loading" />保存中...
            </div>
          </div>
        </div>
      </div>

      <div class="flex items-center gap-2">
        <el-button
          v-for="item in activeMenus"
          :key="item.key"
          :type="appStore.activeMenu === item.key ? 'primary' : 'default'"
          class="!px-5 !rounded-2xl"
          secondary
          strong
          @click="appStore.setActiveMenu(item.key)"
        >
          <template #icon>
            <SvgIcon :icon="item.icon" />
          </template>
          {{ item.label }}
        </el-button>
      </div>
    </div> 
    <AppBase v-if="appStore.activeMenu === 'setting'" />
    <ApiChannel v-if="appStore.activeMenu === 'api'" />
  </div>
</template>

<style lang="scss" scoped>
.children {
  height: calc(100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - (var(--app-content-padding) * 4)) !important;
  box-sizing: border-box;
  &>* {
    box-sizing: border-box;
  }
}
</style>
