<template>
  <!-- 联系我们 -->
  <div class="main-background">
    <!-- SEO -->
    <Head>
      <Title>厦门市文化遗产保护中心 - 联系我们</Title>
      <Meta name="description" content="" />
      <Meta name="keywords" content="" />
    </Head>

    <!-- 轮播图 -->
    <img class="main-header-image" src="@/assets/images/banner/1.jpg">

    <!-- 主要内容 -->
    <div class="main-content">
      <div class="container">
        <div class="section-title center large mt-5">
          <h2 class="icon">单位概况</h2>
        </div>
        <div class="row">
          <div class="col col-12">
            <h3 class="text-center">{{ aboutData.content.value?.title }}</h3>
            <div v-html="aboutData.content.value?.content"></div>
          </div>
        </div>
        
        <div class="section-title center large mt-4">
          <h2 class="icon">联系方式</h2>
        </div>
        <div class="row">
          <div class="col col-sm-12 col-md-12 col-lg-6">
            
            <ul class="info-list">
              <li class="info-item">
                <Icon name="material-symbols:call" />
                电话: 0592-2085737
              </li>
              <li class="info-item">
                <Icon name="material-symbols:attach-email" />
                邮箱: hlspt@xm.gov.cn
              </li>
              <li class="info-item">
                <Icon name="material-symbols:fax" />
                传真: 0592-2090633
              </li>
              <li class="info-item">
                <Icon name="material-symbols:schedule" />
                办公时间: 8:30-12:00 14:00-17:30
              </li>
              <li class="info-item">
                <Icon name="material-symbols:map" />
                地址: 厦门市思明区体育路95号文化艺术中心共享楼
              </li>
            </ul>
          </div>
          <div class="col col-sm-12 col-md-12 col-lg-6">
            <div id="map-container" style="width:100%; height:200px;"></div>
          </div>
        </div>
        <div class="section-title center large mt-5">
          <h2 class="icon">关于我们</h2>
        </div>
        <div class="row">
          <div class="col col-sm-12 col-md-6 col-lg-8">
            <h3>厦门市文化遗产保护中心</h3>
            <p>厦门市文化遗产保护中心（厦门市非物质文化遗产保护中心、厦门市闽南文化生态保护中心）为全额拨款公益一类事业单位，隶属厦门市文化和旅游局，内设办公室、文物保护部、非遗保护部、考古部、信息科技部、安全管理部。</p>
          </div>
          <div class="col col-sm-12 col-md-6 col-lg-4 d-flex flex-row justify-content-end">
            <img src="@/assets/images/about-logo.png" alt="厦门市文化遗产保护中心">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useSSrSimpleDataLoader } from '~/composeable/SimpleDataLoader';

onMounted(() => {
  if (import.meta.client)
    initMap();
});

const aboutData = await useSSrSimpleDataLoader('articles111', async () => {
  const res = await $fetch(`/api/ecms/article/${111}`, {
    method: 'GET',
  });
  if (!res.status)
    throw new Error(res.message);
  return res.data;
});

// 初始化地图
function initMap() {
  setTimeout(() => {
    // 初始化地图
    const map = new AMap.Map('map-container', {
      zoom: 16,
      center: [118.1086912,24.49078560] // 厦门市中心坐标
    });
    // 添加标记
    const marker = new AMap.Marker({
      position: [118.10869122,24.490785603],
      title: '厦门市文化遗产保护中心'
    });
    // 将标记添加到地图
    marker.setMap(map);
    // 添加信息窗口
    const infoWindow = new AMap.InfoWindow({
      content: '<div style="padding: 10px;">厦门市文化遗产保护中心</div>',
      offset: new AMap.Pixel(0, -30)
    });
    // 点击标记时显示信息窗口
    marker.on('click', function() {
      infoWindow.open(map, marker.getPosition() as unknown as AMap.Vector2);
    });
    // 初始就打开信息窗口
    infoWindow.open(map, marker.getPosition() as unknown as AMap.Vector2);
  }, 200);
}
</script>

<style lang="scss">

</style>

