<template>
  <div style="position: relative;">
    <div class="info-window-wrapper">
      <div class="t-popup-content">
        <div class="popup-content" style="height: 13.5rem;">
          <div style="position: relative;">
            <h3 class="view-name">三宝楼</h3>
            <van-icon @click="close" name="cross" size="1.25rem"
              style="position: absolute; right: 0.75rem; top: 0.75rem;" />
          </div>
          <img class="view-photo"
            src="https://img0.baidu.com/it/u=3974116483,397969091&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=496">
          <p class="introduction" style="padding: 0.5rem; padding-bottom: 0;">尊敬的游客朋友们您好，欢迎来到西园寺，您现在所到的地方是“三宝楼......</p>
          <div v-if="!is_play" @click="play()" class="control-play" style="text-align: center;">
            <van-icon name="play-circle-o" size="2rem" color="#FFF" style="margin-top: 0.5rem;" />
          </div>
          <div v-else @click="pause()" class="control-play" style="text-align: center;">
            <van-icon name="pause-circle-o" size="2rem" color="#FFF" style="margin-top: 0.5rem;" />
          </div>
          <div @click="showDetail" class="show-details" style="color: white; text-align: center; line-height: 3rem;">详情
          </div>
        </div>
      </div>
    </div>
    <div class="leaflet-popup-tip-container" style="left: 50%; position: relative;">
      <div class="leaflet-popup-tip"></div>
    </div>

    <van-popup teleport="body" v-model:show="show_popup" position="bottom" :overlay="true"
      :style="{ padding: '1rem', height: '100%' }">
      <van-icon name="cross" size="1.35rem" @click="show_popup = false" style="float: right; color: gray;" />
      <div class="popup-wrapper">
        <div class="title">
          {{ popup_title }}
        </div>
        <div class="content" v-html="popup_content">
        </div>
        <video-player ref="videoPlayer" style="width: 100%; height: 10rem;"
          poster="https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100"
          :src="video_src" class="video-player vjs-big-play-centered" controls :loop="true" :volume="0.6"></video-player>
      </div>
    </van-popup>
  </div>
</template>

<script>

export default {
  props: {
    infoWindow: {
      type: Object,
      default: () => { }
    },
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      show_popup: false,
      popup_title: '',
      popup_content: '',
      video_src: '',
      ind: '',
      is_play: false,
      audio: new Audio()
    }
  },
  methods: {
    // 关闭
    close() {
      // 高德地图信息窗关闭的api
      this.infoWindow.close()
      // 处理音频
      this.voice_pause();
      this.audio.currentTime = 0
    },
    showDetail() {
      this.show_popup = true;
      this.popup_title = '三宝楼';
      this.popup_content = '尊敬的游客朋友们您好，欢迎来到西园寺，您现在所到的地方是“三宝楼......';
      this.video_src = 'https://video.pearvideo.com/mp4/short/20200209/cont-1650197-14888002-hd.mp4'
    },
    play () {
      this.voice_play('https://file.365daoyou.cn/mimi-001_1505799708494-k3xkyzv8', 0)
    },
    pause () {
      this.voice_pause()
    },
    // 声音播放
    voice_play(src, index) {
      this.audio.src = src
      if (this.ind) {
        // audio.pause(); //暂停
        this.audio.currentTime = 0
        this.ind = 0
        return
      }
      this.ind = index
      let play_status = this.audio.play() // 播放
      if (play_status) {
        this.is_play = true;
        play_status.then(() => {
          // 音频加载成功
          // 音频的播放需要耗时
          console.log(this.audio.duration)
          setTimeout(() => { // 后续操作(同为播放完成)
            this.ind = 0
          }, this.audio.duration * 1000) // audio.duration 为音频的时长单位为秒
        }).catch((e) => {
          // 失败
          console.log('Operation is too fast, audio play fails')
        })
      }
    },
    voice_pause () {
      this.audio.pause();
      this.is_play = false;
    }
  }
}
</script>

<style lang="less">
.info-window-wrapper {
  background: #fff;
  color: #333;
  -webkit-box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
  text-align: left;
  border-radius: 12px;
  padding: 0;

  .t-popup-content {
    position: relative;
    width: 25rem;
    padding: 0;
    margin: 0;
    border-radius: 0.1rem;
    background: rgba(255, 255, 255, 0.9);
    -webkit-box-shadow: 0 0.02rem 0.05rem 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 0.02rem 0.05rem 0 rgba(0, 0, 0, 0.1);
    line-height: 1.4;

    .view-name {
      margin: 0;
      padding: 0.5rem;
      width: 25rem;
      height: 2.5rem;
      font-size: 1.2rem;
      text-indent: 0.2rem;
      white-space: nowrap;
      text-overflow: ellipsis;
      color: #5b5b5b;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      border-bottom: solid 1px #e8e8e8;
      border-radius: 0.1rem 0.1rem 0 0;
      background: #f7f7f7;
      overflow: hidden;
    }

    .view-photo {
      display: block;
      float: left;
      margin: 0.5rem;
      height: 100%;
      width: 9rem;
      height: 9rem;
      border-radius: 3px;
    }

    .introduction {
      float: left;
      margin: 0.2rem 0;
      width: 13.5rem;
      height: 6.75rem;
      font-size: 0.9rem;
      color: #202020;
      overflow: hidden;
    }

    .control-play {
      display: block;
      float: left;
      margin-right: 0.5rem;
      width: 7rem;
      height: 3rem;
      border-radius: 2px;
      background: #ffdd02 center no-repeat;
      background-size: 6.5rem 3rem;
    }

    .show-details {
      display: block;
      float: left;
      width: 7rem;
      height: 3rem;
      border-radius: 2px;
      background: #9196a9 center no-repeat;
      background-size: 6.5rem 3rem;
    }
  }
}

.leaflet-popup-tip-container {
  margin-top: -1px;
  width: 2rem;
  height: 2rem;
  margin-left: -20px;
  overflow: hidden;
  pointer-events: none;
}

.leaflet-popup-tip {
  width: 1rem;
  height: 1rem;
  -webkit-transform: rotate(0);
  transform: rotate(0);
  background: transparent url(https://map.365daoyou.cn/web/images/info-sharp.png) center no-repeat;
  background-size: 1rem 1rem;
  box-shadow: none;
}
</style>