<template>
  <div class="app-container">
    <div class="custom-main-w main detail-main">
      <div class="header">
        <img v-if="detail.image" class="icon" :src="detail.image" alt="icon" />
        <div class="meta">
          <div class="title">{{ detail.title || '应用详情' }}</div>
          <div class="info" v-if="detail.information">{{ detail.information }}</div>
          <div class="actions">
            <el-button @click="goBack">返回列表</el-button>
          </div>
        </div>
      </div>

      <el-divider />

      <div class="section api-section" v-if="Array.isArray(detail.apis) && detail.apis.length">
        <div class="section-title">关联APP应用</div>
        <el-table :data="detail.apis" border size="small" class="api-table" style="width: 100%">
          <el-table-column label="应用名称" prop="apiName" :show-overflow-tooltip="true" min-width="180" />
          <el-table-column label="详情/购买" width="110" align="center">
            <template #default="scope">
              <el-button link type="primary" @click="goToApiDetail(scope.row.apiId)">详情/购买</el-button>
            </template>
          </el-table-column>
          <el-table-column label="试用" width="90" align="center">
            <template #default="scope">
              <template v-if="scope.row.trialUrl">
                <el-button link type="primary" @click="openUrl(scope.row.trialUrl)">试用</el-button>
              </template>
              <template v-else>
                <span class="placeholder">——</span>
              </template>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="section" v-if="Array.isArray(detail.apiEndpoints) && detail.apiEndpoints.length">
        <div class="section-title">接口列表</div>
        <div class="tags">
          <el-tag v-for="e in detail.apiEndpoints" :key="e.apiEndpointId" effect="plain" class="mr8">{{ e.apiEndpointName }}</el-tag>
        </div>
      </div>

      <div class="section">
        <div class="section-title">应用介绍</div>
        <div class="content" v-html="detail.description"></div>
      </div>
    </div>
  </div>
</template>

<script setup name="ComponentServicesDetail">
import { ref, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { assemblyDetail } from '@/api/home.js'
import useSettingsStore from '@/store/modules/settings'

const route = useRoute()
const router = useRouter()

const detail = ref({
  image: '',
  information: '',
  title: '',
  url: '',
  description: '',
  apis: [],
  apiEndpoints: []
})

const fetchDetail = async () => {
  const id = route.query.id
  if (!id) return
  try {
    const res = await assemblyDetail({ id })
    if (res && res.code === 0 && res.data) {
      detail.value = res.data
      // 动态设置页面标题
      const title = detail.value?.title || '行业应用详情'
      try { useSettingsStore().setTitle(title) } catch (e) {}
    }
  } catch (e) {
    // 已在全局拦截器提示，这里仅防止未捕获异常
  }
}

function openUrl(urlInput) {
  const raw = urlInput || detail.value?.url
  if (!raw) return
  const url = raw
  if (/^https?:\/\//.test(url)) {
    window.open(url, '_blank')
  } else {
    // 若为相对路径，按后端网关前缀处理
    const base = import.meta.env?.VITE_APP_BASE_API || ''
    window.open(base + url, '_blank')
  }
}

function goBack() {
  router.push({ path: '/componentServices/componentServicesList' })
}

onMounted(fetchDetail)
//watch(() => route.query.id, () => fetchDetail())

// 关联 API 的“访问应用”跳转到 API 市场详情
function goToApiDetail(id) {
  if (id) {
    router.push(`/marketplace/ai/detail?id=${id}`)
  }
}
</script>

<style scoped lang="scss">
.app-container {
  padding-top: 90px;
}

.main {
  padding: 24px 0 80px;
}

/* Narrow this page's content width */
.custom-main-w.detail-main {
  max-width: 1140px;
}

.header {
  display: flex;
  align-items: center;
  .icon {
    width: 80px;
    height: 80px;
    border-radius: 16px;
    object-fit: cover;
    margin-right: 20px;
  }
  .meta {
    .title {
      font-size: 28px;
      font-weight: 700;
      color: #303233;
      margin-bottom: 8px;
    }
    .info {
      color: #666;
      margin-bottom: 12px;
    }
    .actions {
      .el-button + .el-button { margin-left: 12px; }
    }
  }
}

.section {
  margin-top: 24px;
  .section-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 12px;
  }
  .tags {
    margin-bottom: 8px;
    .mr8 { margin-right: 8px; margin-bottom: 8px; }
  }
  .content {
    background: #fff;
    padding: 16px;
    border-radius: 8px;
    :deep(img) { max-width: 100%; height: auto; }
  }
}

.placeholder { color: #999; }

/* Compact styles for the API table section */
.api-section { max-width: 900px; }
.api-section .section-title { font-size: 16px; color: #303233; }
.api-table :deep(.el-table__cell) { padding: 6px 8px; font-size: 13px; color: #333; }
.api-table :deep(.el-table__header .el-table__cell) { background: #fafafa; color: #666; font-weight: 500; padding: 6px 8px; }
.api-table :deep(.el-button.is-link) { font-size: 13px; }
.api-table :deep(tbody tr:hover > td) { background-color: #fcfcff; }
</style>
