<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Delete, Edit, InfoFilled, Plus } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { AppApi } from '@/api/new-ai/app'
import EditCom from './edit.vue'
type TableDataItem = {
  id: number
  name: string
  description: string
  apiKey: string
  provider: string
  channel: string
  createTime: string
}
// 组件实例
const editRef = ref()
const router = useRouter()

// 数据
const loading = ref(false)
const tableData = ref<TableDataItem[]>([
  {
    id: 1,
    name: '',
    description: '',
    apiKey: '',
    provider: '',
    channel: '',
    createTime: ''
  }
])

// 加载数据
const loadData = async () => {
  try {
    loading.value = true
    const res = await AppApi.getAppList({})
    tableData.value = res.data || []
  } catch (error) {
    ElMessage.error('获取应用列表失败')
    console.error('Failed to fetch app list:', error)
  } finally {
    loading.value = false
  }
}

// 新增应用
const handleAdd = () => {
  editRef.value?.show()
}

// 编辑应用
const handleEdit = (record: Recordable) => {
  editRef.value?.show(record.id)
}

// 删除应用
const handleDelete = (record: any) => {
  ElMessageBox.confirm('确定要删除该应用吗？', '提示', {
    type: 'warning',
    confirmButtonText: '确定',
    cancelButtonText: '取消'
  })
    .then(async () => {
      try {
        await AppApi.deleteApp(record.id)
        ElMessage.success('删除成功')
        loadData()
      } catch (error) {
        ElMessage.error('删除失败')
      }
    })
    .catch(() => {})
}

// 查看详情
const handleInfo = (record: any) => {
  router.push({
    path: `/ai/app/${record.id}`
  })
}

// 初始加载
onMounted(() => {
  loadData()
})

</script>

<template>
  <div class="app-container">
    <el-row :gutter="20" v-loading="loading">
      <el-col :span="6">
        <div
          class="h-full p-10px bg-[#eceef0] transition-all duration-300 hover:border hover:border-blue-400 border border-transparent cursor-pointer rounded-xl group"
        >
          <div class="font-bold text-xs mb-1.5 px-6 text-gray-500">创建应用</div>
          <div
            class="w-full transition-all hover:bg-white rounded-lg py-1.5 px-6 flex items-center gap-1 font-medium hover:text-blue-500"
            @click="handleAdd"
          >
            <el-icon>
              <Plus />
            </el-icon>
            <span class="text-sm">创建空白应用</span>
          </div>
        </div>
      </el-col>
      <el-col
        v-for="item in tableData.concat(tableData).concat(tableData).concat(tableData)"
        :key="item.id"
        :span="6"
      >
        <el-card
          class="app-card cursor-pointer w-full"
          shadow="hover"
          @click="handleInfo(item)"
        >
          <template #header>
            <div class="flex items-center">
              <div class="sm:mx-4">
                <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>
              <span class="text-lg font-medium">{{ item.name }}</span>
            </div>
          </template>
          <div class="app-card-content flex justify-between items-center">
            <p class="text-gray-600">{{ item.description || '暂无描述' }}</p>
            <el-dropdown trigger="hover" width="500px">
              <div
                :class="[activeDropdownId === item.id ? 'bg-gray-200' : 'hover:bg-gray-200']"
                class="rounded p-1 transition-all"
              >
                <SvgIcon class="w-5 h-5" icon="ri:more-fill" />
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click.stop="handleEdit(item)">编辑此应用</el-dropdown-item>
                  <el-dropdown-item @click.stop="handleDelete(item)">删除此应用</el-dropdown-item>
                  <el-dropdown-item disabled divided>
                    <div class='w-150px'>
                      <div>信息</div>
                      <span class='text-xs text-stone-500'>
                      创建时间：{{item.createTime}}
                    </span>
                    </div>
                    
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <EditCom ref="editRef" @reload="loadData" />
  </div>
</template>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
}
.group:hover {
  border: 1px solid var(--el-color-primary);
}
.app-card {
  height: 100%;
  transition: all 0.3s;

  &:hover {
    transform: translateY(-2px);
  }
}
.el-col {
  margin-bottom: 20px;
}
</style>
