<template>
  <div style="position: relative;">
    <div class="info-window-wrapper">
      <div :style="{ width: (widow_info.width * 0.8) + 'px', overflow: 'auto' }">
        <div class="hideScrollBar info-window-title">
          <div v-for="(item, index) in info?.details" :key="index" @click="handleTitle(index)"
            :class="[isActive === index ? 'checked' : '', 'item']">
            <span>{{ item.name }}</span>
          </div>
        </div>
          <div v-if="info?.details?.length > 3" @click="handleNavScroll()" style="position: fixed; right: 0.75rem; width: 1rem; background-color: #FFF;top: 1.5rem;">
            <van-icon v-if="!nav_scroll" name="arrow" color="#888" size="1.25rem" style="vertical-align: sub;" />
            <van-icon v-else name="arrow-left" color="#888" size="1.25rem" style="vertical-align: sub;" />
          </div>
        <div v-for="(item, index) in info?.details" :key="index">
          <div v-if="isActive === index" :class=" [item.audio ? 'info-text-audio' : 'info-text', 'van-multi-ellipsis--l3'] ">{{ item.note }}</div>
          <div v-if="isActive === index && item.audio" class="info-control">
            <div v-if="!is_play" @click="play()" class="control-play">
              <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E6%92%AD%E6%94%BE%E6%9A%82%E5%81%9C@2x.png" size="3rem"
                color="#FFF" style="margin-top: 0.5rem;" />
            </div>
            <div v-else @click="pause()" class="control-play" style="text-align: center;">
              <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E6%92%AD%E6%94%BE@2x.png" size="3rem" color="#FFF"
                style="margin-top: 0.5rem;" />
            </div>
            <div>{{ play_time }}</div>
          </div>
        </div>
      </div>
      <div class="van-hairline--top" style="margin: 1rem 0;">
        <div @click="goToUrl()" style="width: 50%; float: left; text-align: center; margin-top: 1rem;"
          class="van-hairline--right">
          <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E5%89%8D%E5%BE%80@2x.png" size="1.5rem" color="#FFF"
            style="vertical-align: bottom;" />&nbsp;
          <span style="color: #AB8F57; font-size: 1.1rem;">详情</span>
        </div>
        <div @click="goToLocation()" style="width: 50%; float: left; text-align: center; margin-top: 1rem;">
          <van-icon name="https://cdn.ipadbiz.cn/xys/map/%E5%89%8D%E5%BE%80@2x.png" size="1.5rem" color="#FFF"
            style="vertical-align: bottom;" />&nbsp;
          <span style="color: #AB8F57; font-size: 1.1rem;">前往</span>
        </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>
import $ from 'jquery'

export default {
  props: {
    infoWindow: {
      type: Object,
      default: () => { }
    },
    info: {
      type: Object,
      default: () => { }
    },
    rect: {
      type: Object,
      default: () => { }
    },
  },
  mounted() {
  },
  watch: {
    rect(val) {
      this.widow_info = val;
    },
    infoWindow(val) {
      if (val) {
        // 加载录音
        this.audio.src = this.info?.details[this.isActive]['audio'];
        let play_status = this.audio.play() // 播放
        if (play_status) {
          play_status.then(() => {
            // 音频的播放需要耗时
            this.audio.pause();
            this.play_time = this.getAudioTime(this.audio.duration)
          }).catch((e) => {
            // 失败
            console.log('Operation is too fast, audio play fails')
          })
        }
      }
    }
  },
  data() {
    return {
      show_popup: false,
      popup_title: '',
      popup_content: '',
      video_src: '',
      ind: '',
      is_play: false,
      audio: new Audio(),
      widow_info: {},
      play_time: '00:00',
      isActive: 0,
      nav_scroll: false,
    }
  },
  methods: {
    getAudioTime(audio) {
      let time = Math.floor(audio);
      var minute = time / 60;
      var minutes = parseInt(minute);
      if (minutes < 10) {
        minutes = "0" + minutes;
      }
      //秒
      var second = time % 60;
      var seconds = Math.round(second);
      if (seconds < 10) {
        seconds = "0" + seconds;
      }
      return `${minutes}:${second}`;
    },
    calculateCurrentValue(currentTime) {
      var current_hour = parseInt(currentTime / 3600) % 24,
        current_minute = parseInt(currentTime / 60) % 60,
        current_seconds_long = currentTime % 60,
        current_seconds = current_seconds_long.toFixed(),
        current_time = (current_minute < 10 ? "0" + current_minute : current_minute) + ":" + (current_seconds < 10 ? "0" + current_seconds : current_seconds);

      return current_time;
    },
    // 关闭
    close() {
      // 高德地图信息窗关闭的api
      this.infoWindow.close()
      // 处理音频
      this.voice_pause();
      this.audio.currentTime = 0
      // 默认选中项
      this.isActive = 0;
      // 滚动状态
      this.nav_scroll = false;
    },
    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(this.info.details[this.isActive]['audio'], 0)
    },
    pause() {
      this.voice_pause()
    },
    // 声音播放
    voice_play(src, index) {
      this.audio.src = src
      if (this.ind) {
        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(() => {
          // 音频加载成功
          setTimeout(() => { // 后续操作(同为播放完成)
            this.ind = 0
          }, this.audio.duration * 1000) // audio.duration 为音频的时长单位为秒
          setInterval(() => {
            this.play_time = this.calculateCurrentValue(this.audio.duration - this.audio.currentTime)
          }, 1000);
        }).catch((e) => {
          // 失败
          console.log('Operation is too fast, audio play fails')
        })


      }
    },
    voice_pause() {
      this.audio.pause();
      this.is_play = false;
    },
    goToUrl(url) {
      location.href = this.info.details[this.isActive].url;
    },
    handleTitle (index) {
      this.isActive = index;
      this.voice_pause()
      // 标题滚动
      if (index === 2 && this.info.details.length > 3) {
        this.handleNavScroll()
      }
    },
    handleNavScroll () { // 滚动标题
      this.nav_scroll = !this.nav_scroll;
      if (this.nav_scroll) {
        setTimeout(() => {
          $('.info-window-title').animate({
            scrollLeft: $('.info-window-title').outerWidth()
          }, 1000);
        }, 100);
      } else {
        setTimeout(() => {
          $('.info-window-title').animate({
            scrollLeft: 0
          }, 1000);
        }, 100);
      }
    },
    goToLocation () {
      this.$emit('onLocation', this.info.position)
    }
  }
}
</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: 5px;
  padding: 1.5rem 1.25rem;
  overflow: auto;

  .info-text {
    width: 100%;
    line-height: 1.5;
    float: left;
    color: #7A6C6C;
  }
  .info-text-audio {
    width: 80%;
    line-height: 1.5;
    float: left;
    color: #7A6C6C;
  }

  .info-control {
    width: 20%;
    float: left;
    text-align: center;
    color: #AB8F57;

    .control-play {
      text-align: center;
      margin-bottom: 0.5rem;

      i {
        margin-top: 0 !important;
      }
    }
  }

  // .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;
  //   }
  // }

  .info-window-title {
    display: flex;
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    position: relative;
    text-align: left;

    .item {
      width: 33.333%;
      flex-shrink: 0;
      color: #888;
      font-size: 1.1rem;
      margin-bottom: 0.75rem;
      display: inline-block;
    }

    .checked {
      color: #AB8F57;
      span {
        border-bottom: 1.5px solid #AB8F57; padding-bottom: 3px;
      }
    }
  }
}

.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>