<!--
 * @Date: 2024-09-15 22:08:49
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-09-18 17:25:26
 * @FilePath: /map-demo/src/views/bieyuan/info.vue
 * @Description: 文件描述
-->
<template>
  <div class="info-page">
    <div>
      <van-config-provider :theme-vars="themeVars">
        <van-swipe class="my-swipe" indicator-color="#DD7850" lazy-render :autoplay="5000">
          <van-swipe-item v-for="image in images" :key="image">
            <van-image fit="cover" width="100%" height="15rem" :src="image" />
          </van-swipe-item>
        </van-swipe>
      </van-config-provider>
    </div>
    <div class="info-content-wrapper">
      <div class="info-header">
        <div>
          <p class="info-title">选佛场</p>
          <p class="info-sub-title">南楼2层</p>
        </div>
        <div class="info-btn">前往</div>
      </div>
      <div class="van-hairline--bottom">
        <van-tabs v-model:active="active" color="#DD7850" title-active-color="#DD7850" sticky>
          <van-tab title="介 绍">
            <div class="info-content">
              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odit non, qui ullam placeat possimus laboriosam sequi a omnis debitis enim, rerum distinctio! Perspiciatis unde explicabo officiis sed nemo reprehenderit impedit?
              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odit non, qui ullam placeat possimus laboriosam sequi a omnis debitis enim, rerum distinctio! Perspiciatis unde explicabo officiis sed nemo reprehenderit impedit?
              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odit non, qui ullam placeat possimus laboriosam sequi a omnis debitis enim, rerum distinctio! Perspiciatis unde explicabo officiis sed nemo reprehenderit impedit?
              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odit non, qui ullam placeat possimus laboriosam sequi a omnis debitis enim, rerum distinctio! Perspiciatis unde explicabo officiis sed nemo reprehenderit impedit?
              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odit non, qui ullam placeat possimus laboriosam sequi a omnis debitis enim, rerum distinctio! Perspiciatis unde explicabo officiis sed nemo reprehenderit impedit?
              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odit non, qui ullam placeat possimus laboriosam sequi a omnis debitis enim, rerum distinctio! Perspiciatis unde explicabo officiis sed nemo reprehenderit impedit?
              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odit non, qui ullam placeat possimus laboriosam sequi a omnis debitis enim, rerum distinctio! Perspiciatis unde explicabo officiis sed nemo reprehenderit impedit?
              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odit non, qui ullam placeat possimus laboriosam sequi a omnis debitis enim, rerum distinctio! Perspiciatis unde explicabo officiis sed nemo reprehenderit impedit?
              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odit non, qui ullam placeat possimus laboriosam sequi a omnis debitis enim, rerum distinctio! Perspiciatis unde explicabo officiis sed nemo reprehenderit impedit?
              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odit non, qui ullam placeat possimus laboriosam sequi a omnis debitis enim, rerum distinctio! Perspiciatis unde explicabo officiis sed nemo reprehenderit impedit?
            </div>
          </van-tab>
          <van-tab title="故 事"></van-tab>
          <van-tab title="体 验">
            <div style="padding: 1rem;">
              <div style="color: #DD7850;">•&nbsp;静心咖啡</div>
              <div style="color: #47525F; margin-top: 1rem;">静心咖啡绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍</div>
            </div>
            <div class="audio-wrapper">
              <div :class="['audio-item', play_audio_index === index ? 'click' : '']" v-for="(item, index) in audioList" :key="index">
                <div>{{ item.text }}</div>
                <!-- <div :class="['audio-icon', play_audio_index === index ? 'click' : '']"></div> -->
                <van-icon @click="stopAudio(item, index)" v-if="item.play" size="2rem" name="stop-circle-o" color="#DD7850" />
                <van-icon v-else @click="playAudio(item, index)" size="2rem" name="https://cdn.ipadbiz.cn/bieyuan/map/icon/audio_icon.png" />
              </div>
            </div>
            <div style="width: 100%;">
              <img src="https://cdn.ipadbiz.cn/bieyuan/map/xcx.png" style="width: 100%;">
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const $route = useRoute();
const $router = useRouter();

const themeVars = ref({
  swipeIndicatorInactiveBackground: '#fff',
});

const images = ref([
  'https://cdn.ipadbiz.cn/bieyuan/map/swiper_img.png',
  'https://cdn.ipadbiz.cn/bieyuan/map/_DL92427.png',
  'https://cdn.ipadbiz.cn/bieyuan/map/swiper_img.png',
  'https://cdn.ipadbiz.cn/bieyuan/map/swiper_img.png',
]);

const active = ref(2);
const play_audio_index = ref(null);

const audioList = ref([{
  text: '5分钟观呼吸',
  src: 'https://cdn.ipadbiz.cn/bieyuan/map/1130958712.mp3',
  play: false,
}, {
  text: '10分钟正念静坐',
  src: 'https://cdn.ipadbiz.cn/bieyuan/map/1130958712.mp3',
  play: false,
}, {
  text: '15分钟正念静坐',
  src: 'https://cdn.ipadbiz.cn/bieyuan/map/1130958712.mp3',
  play: false,
}])

const playAudio = (item, index) => {
  audioList.value.forEach(item => item.play = false);
  audio.value.src = item.src;
  play_audio_index.value = index;
  let play_status = audio.value.play() // 播放
  if (play_status) {
    console.warn('start');
    play_status.then(() => {
      console.warn('success');
      item.play = true;
    }).catch((e) => {
      // 失败
      console.log('Operation is too fast, audio play fails')
    })
  }
}

const stopAudio = (item, index) => {
  item.play = false;
  audio.value.pause();
}

const audio = ref(new Audio());

const audio_play = (src, index) => {
  audio.value.src = src;
}

const outerStopAudio = () => {
  audio.value.pause();
}

defineExpose({
  outerStopAudio
})
</script>

<style lang="less">
.info-page {
  background-color: #EBEBEB;
  height: 100vh;
  overflow: scroll;
  position: relative;
  .info-content-wrapper {
    // position: absolute;
    // top: 14.9rem;
    margin: 1rem;
    margin-top: 0;
    // padding: 1rem;
    border-radius: 0.5rem;
    background-color: white;
    .info-header {
      padding: 1rem 2rem 0;
      display: flex;
      justify-content: space-between;
      // align-items: center;
      .info-title {
        font-size: 1.25rem;
        margin-bottom: 0.25rem;
      }
      .info-sub-title {
        font-size: 0.85rem;
        color: #A0A8B1;
      }
      .info-btn {
        width: 3rem;
        height: 1.5rem;
        border: 1px solid #DD7850;
        color: #DD7850;
        border-radius: 0.8rem;
        font-size: 0.85rem;
        text-align: center;
        line-height: 1.5rem;
      }
    }
    .info-content {
      padding: 1rem;
    }
    .audio-wrapper {
      padding: 1rem 0;
      .audio-item {
        color: #47525F;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem;
        background-color: #FFF;
        border-radius: 0.25rem;
        margin: 1rem;
        box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
        &.click {
          border: 1px solid #DD7850;
        }
        .audio-icon {
          width: 2rem;
          height: 2rem;
          background-image: url('https://cdn.ipadbiz.cn/bieyuan/map/icon/audio_icon.png'); /* 使用上传的图标 */
          background-size: cover;
          &.click {
            animation: pulse 1.5s infinite;
          }
        }

        @keyframes pulse {
          0% {
            transform: scale(1);
          }
          50% {
            transform: scale(1.2);
          }
          100% {
            transform: scale(1);
          }
        }
      }
    }
  }
}
</style>