<template>
  <div v-if="show" class="mask">
    <div class="header">
      <span
        @click="
          () => {
            stopTopicsAudio()
            $emit('close');
          }
        "
        class="close-text"
        >关闭</span
      >
      <div class="header-tip">
        <img class="floader" src="@/assets/img/floder.png" />
        <div class="title">播放单个组合：{{ title || "" }}</div>
      </div>
    </div>
    <div class="mid" id="midComposeTopicsMaskList">
      <composeTopicsMaskList ref="mid" :list="list" />
    </div>
    <!-- 前进,倒退 -->
    <div class="bottom">
      <div class="bottom-container">
        <div
          @click="
            () => {
              $emit('before');
              stopTopicsAudio();
            }
          "
          class="previousGroup"
        >
          上一组
        </div>
        <div @click="stopTopicsAudio" class="timeOut">暂停</div>
        <div
          @click="
            () => {
              $emit('after');
              stopTopicsAudio();
            }
          "
          class="nextGroup"
        >
          下一组
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import composeTopicsMaskList from "./composeTopicsMaskList.vue";
import utils from '@/utils/index'
export default {
  methods: {
    stopTopicsAudio() {
      const audio  = utils.wxUtils.getGlobAudio()
      audio.stop()


    },
  },
  // setup(props, { emit }) {
  // 	let mid = ref(null);
  // 	onMounted(() => {
  // 	});
  // 	let stopTopicsAudio = () => {
  // 		if (mid) {
  // 			console.log(mid);
  // 			mid.value.pauseAudioLoop();

  // 			mid.value.listIndex = -1;
  // 		}
  // 	};
  // 	return {
  // 		emit,
  // 		mid,
  // 		stopTopicsAudio,
  // 	};
  // },
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "",
    },
    list: {
      type: Array,
      default: [],
    },
  },
  components: {
    composeTopicsMaskList,
  },
};
</script>

<style lang="scss" scoped>
.mask {
  position: absolute;
  background: #fff;
  width: 100vw;
  height: 100%;
  z-index: 1000;
  top: 0;

  .close {
    position: relative;
  }
  .close-text {
    color: #01c18d;
    font-size: 14px;
    position: absolute;
    right: 25px;
    margin-top: 10px;
  }
  .floader {
    width: 45px;
    height: 45px;
    margin-top: 10px;
  }
  .header-tip {
    display: flex;
    justify-content: center;
    font-size: 14px;
    flex-wrap: wrap;
    padding-bottom: 12px;
  }
  .header {
    display: flex;
    justify-content: center;
    height: 15%;
  }
  .title {
    width: 100%;
    text-align: center;
    margin-top: 8px;
  }
  .mid {
    height: 75%;
    overflow-y: scroll;
  }
  .bottom {
    height: 10%;
    font-size: 14px;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    .bottom-container {
      display: flex;
      justify-content: space-between;
      width: 75%;
    }

    .previousGroup {
      border: 1px solid #333;
      width: 80px;
      height: 28px;
      text-align: center;
      line-height: 28px;
    }
    .timeOut {
      border: 1px solid #333;
      width: 80px;
      height: 28px;
      text-align: center;
      line-height: 28px;
    }
    .nextGroup {
      border: 1px solid #333;
      width: 80px;
      height: 28px;
      text-align: center;
      line-height: 28px;
    }
  }
}
</style>