<template>
  <div class="page-container">
    <div v-if="!pending">
      <el-breadcrumb class="breadcrumb" separator="/">
        <el-breadcrumb-item class="text-md opacity-50">
          <NuxtLink :to="$localePath('/')">
            {{ $t('navigation.home') }}
          </NuxtLink>
        </el-breadcrumb-item>
        <el-breadcrumb-item class="text-md opacity-50">
          <NuxtLink :to="$localePath('/about')">
            {{ $t('navigation.about-us') }}
          </NuxtLink>
        </el-breadcrumb-item>
      </el-breadcrumb>

      <div class="content">
        <markdown-renderer :content="content.content || ''" />
      </div>

      <el-divider content-position="left">更多信息</el-divider>
      <div class="button-group">
        <NuxtLink :to="$localePath('/support/contact-us')">
          <el-card class="card-button">
            <el-icon class="icon" size="80">
              <ElIconService />
            </el-icon>
            <br />
            联系信息
          </el-card>
        </NuxtLink>
      </div>
    </div>
    <div v-else class="loading">
      <el-skeleton :rows="5" animated />
    </div>
  </div>
</template>

<script setup lang="ts">
  const { data, pending, error } = await useCompanyProfile();

  const content = computed(() => toCompanyProfileView(data.value));

  watch(error, (value) => {
    if (value) {
      console.error('数据获取失败: ', value);
    }
  });
</script>

<style scoped>
  .page-container {
    padding: 2rem 1rem;
    max-width: 1200px;
    margin: 0 auto;
  }

  .breadcrumb {
    padding: 1rem 1rem;
  }

  .content {
    padding: 1rem;
    margin-bottom: 2rem;
  }

  :deep(.markdown-body p) {
    text-indent: 2em;
  }

  :deep(.markdown-body h2) {
    text-align: center;
  }

  :deep(.el-divider__text) {
    color: var(--el-color-info);
    font-size: 1em;
  }

  .button-group {
    display: flex;
    justify-content: left;
    margin-top: 2rem;
    margin-left: 2rem;
  }

  .card-button {
    width: 20%;
    min-width: 200px;
    padding: 20px;
    margin: 0 auto;
    cursor: pointer;
    text-align: center;
    font-size: 1.5em;
  }

  .card-button:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  }

  .icon {
    padding: 10px;
  }

  .loading {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1rem;
  }
</style>
