<template>
  <div class="AppCheckInfo">
    <div class="home-content">
      <div class="check-info">
        <div class="item">
          <div class="title">
            <img src="./img/time-icon.png" alt="">入住时间
          </div>
          <p>2024年4月23日至2024年4月24日</p>
        </div>
        <div class="item">
          <div class="title">
            <img src="./img/hotel-icon.png" alt="">入住酒店
          </div>
          <p>水韵酒店</p>
        </div>
        <div class="item">
          <div class="title">
            <img src="./img/address-icon.png" alt="">酒店地址
          </div>
          <p>春申大道421号</p>
        </div>
      </div>
      <AiMap class="map-info" :map.sync="amap" :lib.sync="mapLib" />
      <div class="bottom-bg"></div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'CheckInfo',
  appName: '入住信息',
  data() {
    return {
      amap: null,
      mapLib: null,
      lat: '31.39439',
      lng: '109.559364',
      address: '水韵酒店'
    }
  },

  mounted() {
    document.title = '入住信息'
    this.initMap()
  },

  methods: {
    initMap() {
      if(this.mapLib){
        let pos = new this.mapLib.LngLat(this.lng, this.lat)
        var marker = new this.mapLib.Marker({
          position: pos,
          anchor: 'bottom-center',
          content: `<div class="marker">${this.address}</div>`,
        })
        this.amap.on('click', () => {
          this.openMap()
        })
        this.amap.add(marker)
        this.amap.setFitView()

      }else {
        setTimeout(() => {
          this.initMap()
        },3000)
      }      
      
    },
    openMap() {
      var userAgent = navigator.userAgent.toLowerCase();
        if (userAgent.indexOf('micromessenger') !== -1) {
          // return this.$u.toast("请点击右上角[...],在浏览器打开。")
          this.$confirm('请点击右上角[...],在浏览器打开。', '提示')
        } else {
          window.location.href = `amapuri://route/plan/?sourceApplication=amap&did=&dlat=${this.lat}&dlon=${this.lng}&dname=巫溪县水韵酒店&dev=0&t=0`
        }

    }

  },
}
</script>

<style lang="scss" scoped>
uni-page-body{
  height: 100%;
}
.AppCheckInfo {
  height: 100%;
  width: 100%;
  background-image: url("./img/detail-bg.png");
  background-size: 100% 100%;
  padding: 32px 0 128px 0;
  overflow: auto;
  box-sizing: border-box;
  .home-content {
    height: 100%;
    width: calc(100% - 64px);
    margin: 0 32px;
    background: #FFF;
    border-radius: 24px;
    .check-info {
      padding: 92px 36px 40px 36px;
      .item {
        margin-bottom: 40px;
        .title {
          line-height: 44px;
          font-family: PingFangSC-SNaNpxibold;
          font-weight: 600;
          font-size: 32px;
          color: #222;
          margin-bottom: 12px;
          img {
            display: inline-block;
            width: 36px;
            height: 36px;
            vertical-align: middle;
            margin-right: 12px;
          }
        }
        p {
          line-height: 50px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          font-size: 36px;
          color: #999;
          padding-left: 48px;
        }
      }
    }
    .map-info {
      padding: 0 32px;
      width: calc(100% - 64px);
      height: 510px;
    }
    .bottom-bg {
      height: calc(100% - 700px);
      width: 100%;
      background-image: url("./img/bottom-bg.png");
      background-size: 100% 100%;
      position: fixed;
      bottom: 0;
      left: 0;
      pointer-events: none;
    }
  }

  ::v-deep .marker {
    border-radius: 52px;
    background: #F46159;
    color: #fff;
    font-size: 22px;
    padding: 4px 16px;
    white-space: nowrap;
    position: relative;

    &:before {
      position: absolute;
      left: calc(50% - 30px);
      bottom: -34px;
      z-index: -1;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background-color: #F46159;
      animation: mapWarn 1s ease-out 0s infinite;
      content: " ";
    }

    &:after {
      position: absolute;
      display: block;
      content: " ";
      bottom: -8px;
      left: 50%;
      transform: translateX(-50%);
      border: 8px solid transparent;
      border-bottom: none;
      border-top-color: #F46159;
      height: 0;
      width: 0;
    }
  }
 
}
</style>
