<template>
  <div class="mx-auto max-w-screen-xl px-4 py-12">
    <a-typography-title :level="1" class="!mb-2">经营范围</a-typography-title>
    <a-typography-paragraph class="!text-gray-600 !mb-8">
      以下信息用于公示与参考，最终以工商登记及相关许可文件/许可证件为准。
    </a-typography-paragraph>

    <a-row :gutter="[24, 24]">
      <a-col :xs="24" :lg="14">
        <a-card title="一般项目（经营范围）">
          <a-list size="small" :data-source="generalItems">
            <template #renderItem="{ item }">
              <a-list-item class="scope-item">{{ item }}</a-list-item>
            </template>
          </a-list>
        </a-card>

        <a-card class="mt-6" title="许可项目">
          <a-list size="small" :data-source="licensedItems">
            <template #renderItem="{ item }">
              <a-list-item class="scope-item">{{ item }}</a-list-item>
            </template>
          </a-list>
        </a-card>
      </a-col>

      <a-col :xs="24" :lg="10">
        <a-card title="基本信息">
          <a-descriptions bordered :column="1" size="small">
            <a-descriptions-item label="项目名称">{{ COMPANY.projectName }}</a-descriptions-item>
            <a-descriptions-item label="注册地址">{{ COMPANY.address }}</a-descriptions-item>
          </a-descriptions>
          <a-alert
            class="mt-4"
            show-icon
            type="warning"
            message="涉及许可项目的经营活动，请以主管部门批准文件/许可证件为准。"
          />
        </a-card>

        <a-card class="mt-6" title="快速入口">
          <a-space direction="vertical" class="w-full">
            <a-button type="primary" block @click="navigateTo('/contact')">合作咨询</a-button>
            <a-button block @click="navigateTo('/')">返回首页</a-button>
          </a-space>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { usePageSeo } from '@/composables/usePageSeo'
import { COMPANY } from '@/config/company'

usePageSeo({
  title: '经营范围',
  description: `${COMPANY.projectName} 经营范围公示：一般项目、许可项目及注册地址信息。`,
  path: '/products'
})

function splitScope(text: string) {
  return text
    .split(/[；;]+/g)
    .map((s) => s.trim())
    .filter(Boolean)
    .map((s) => s.replace(/[。.]$/, '').trim())
}

const generalItems = computed(() => splitScope(COMPANY.scope.general))
const licensedItems = computed(() => splitScope(COMPANY.scope.licensed))
</script>

<style scoped>
.scope-item {
  padding: 6px 0;
  color: rgba(0, 0, 0, 0.75);
  line-height: 1.6;
}
</style>

