<template>
  <div class="guide">
    <div class="gleft">
      <div id="map"></div>
    </div>
    <div class="gright">
      <ul>
        <li>
          <p>电话 :</p>
          <p>{{currentMuseumItem.tel||'-'}}</p>
        </li>
        <li>
          <p>地址 :</p>
          <p>{{currentMuseumItem.address||'-'}}</p>
        </li>
        <li>
          <p>营业时间：</p>
          <p>{{currentMuseumItem.opening||'-'}}</p>
        </li>
      </ul>

      <div class="guidebtn" @click="onClickGuide">查看导览</div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits, watch, onMounted, nextTick, ref } from "vue";

const map = ref("");

const props = defineProps({
  currentMuseumItem: {
    type: Object,
    default: () => {
      return {}
    },
  },
});

const onClickGuide = () => {
  window.open(`https://uri.amap.com/marker?name=${props.currentMuseumItem.name}&position=${props.currentMuseumItem.lng},${props.currentMuseumItem.lat}&callnative=1`)
}

onMounted(() => {
  map.value = new global.AMap.Map("map", {
    mapStyle: "amap://styles/fresh",
    zoom: 13,
    center: [props.currentMuseumItem.lng, props.currentMuseumItem.lat],
  });

  var marker = new AMap.Marker({
    position: new AMap.LngLat(props.currentMuseumItem.lng, props.currentMuseumItem.lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
    title: "广东",
  });

  map.value.add(marker);
});
</script>

<style lang="scss" scoped>
.guide {
  width: 1400px;
  margin: 62px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  .gleft {
    #map {
      width: 752px;
      height: 500px;
    }
  }
  .gright {
    color: #333;
    margin-left: 10%;
    >ul{
      font-size: 16px;
      >li{
        >p{
          line-height: 2;
        }
        margin-bottom: 20px;
      }
    }
    .guidebtn{
      width: 200px;
      height: 50px;
      margin-top: 60px;
      cursor: pointer;
      background: var(--main-color);
      border-radius: 60px;
      text-align: center;
      line-height: 50px;
      color: var(--font-active);
    }
  }
}
</style>
