<script setup>
import { ref, onMounted } from "vue";
import ContactTabs from "@/components/ContactTabs.vue";
import Map from "@/components/about/Map.vue";

// 百度地图组件引用
const bmapRef = ref(null);
// 地图中心点坐标（飞利信大厦）
const mapCenter = ref({ lng: 116.372326, lat: 39.991868});
//116.365873,39.985891
// 组件挂载后操作地图
onMounted(() => {
  // 确保地图组件已经初始化完成
  setTimeout(() => {
    if (bmapRef.value && window.BMap) {
      // 获取地图实例
      const mapInstance = bmapRef.value.getMap();

      // 添加标记点
      const point = new window.BMap.Point(mapCenter.value.lng, mapCenter.value.lat);
      const marker = bmapRef.value.addMarker(point);

      // 添加信息窗口
      bmapRef.value.openInfoWindow("飞利信大厦<br>地址：北京市海淀区塔院志新村2号", point);

      // 绑定点击事件
      marker.addEventListener("click", () => {
        bmapRef.value.openInfoWindow("飞利信大厦<br>地址：北京市海淀区塔院志新村2号", point);
      });
    }
  }, 100);
});
</script>

<template>
<div class="contact-us">
  <el-row style="width: 1000px; margin: 0 auto;" :gutter=20>
    <el-col :span="12">
      <div>
        <h1>期待与您的合作！</h1>
        <p>网址: &nbsp;&nbsp;<a href="http://www.philisense.com/index.html">www.philisense.com</a></p>
        <p>
          <span>电话:&nbsp;&nbsp;010-60958300</span>
          <span>传真:&nbsp;&nbsp;010-60958100</span>
        </p>
        <p>地址:&nbsp;&nbsp;<span>北京市海淀区塔院志新村2号飞利信大厦（花园路北口）</span></p>
        <p>邮编:&nbsp;&nbsp;100085</p>
        <div style="margin-top: 80px;">
            <ContactTabs :defaultColor="'#9C9C9C'"  :activeColor="'#0b0b0b'"/>
        </div>
      </div>
    </el-col>
    <el-col :span="12">
      <div class="map">
        <!-- 使用封装的百度地图组件 -->
        <Map
          ref="bmapRef"
          :center="mapCenter"
          :zoom="20"
          width="525px"
          height="385px"
        />
      </div>
    </el-col>
  </el-row>
</div>
</template>

<style scoped lang="less">
.contact-us{
  height: 558px;
  background-image: url('@/assets/img/abuot-contact-us.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-sizing: border-box;
  padding: 70px 0 0;
  h1{
    font-weight: 500;
    font-size: 40px;
    line-height: 100%;
    color: #000000;
    margin-bottom: 40px;
  }
  a{
    font-weight: 400;
    font-size: 14px;
    line-height: 100%;
    color: #000000;
  }
  p{
    font-weight: 300;
    font-size: 14px;
    line-height: 100%;
    margin-bottom: 20px;
    span{
      font-weight: 400;
      margin-right: 50px;
    }
    span:last-child{
      margin-right: 0;
    }
  }
  p:nth-last-child(3){
    margin-bottom: 5px;
  }
  .map{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
