<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">查看导览</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 {}
    },
  },
});

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

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

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

<style lang="scss" scoped>
.guide {
  width: 100%;
  margin: 10px auto 80px;

  .gleft {
    width: 90%;
    margin: 0 auto;
    position: relative;
    height: 350px;
    border: 1px solid var(--main-color);
    padding: 4px;

    #map {
      width: 100%;
      height: 100%;
      border: 2px solid var(--main-color);
    }
  }

  .gright {
    color: #333;
    width: 90%;
    margin: 0 auto;

    >ul {
      font-size: 14px;
      margin-top: 10px;

      >li {
        margin-bottom: 10px;
      }
    }

    .guidebtn {
      width: 100px;
      height: 30px;
      margin-top: 20px;
      cursor: pointer;
      background: var(--main-color);
      border-radius: 60px;
      text-align: center;
      line-height: 30px;
      font-size: 14px;
      color: var(--font-active);
    }
  }
}
</style>
