<!--
 * @Date: 2024-04-10 14:16:36
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-04-13 10:40:09
 * @FilePath: /fxPark/src/components/danmaku.vue
 * @Description: 弹幕组件
-->
<template>
  <div class="danmaku-page">
    <vue-danmaku ref="danmakuRef" class="danmu-boxer" v-model:danmus="danmus" useSlot loop :channels="4" :speeds="30" :top="0">
      <template v-slot:dm="{ index, danmu }">
        <div class="dm-item">
          <van-icon v-if="danmu.status === '2'" name="fire-o" color="red" />&nbsp;
          <span>{{ danmu.note }}</span>
        </div>
      </template>
    </vue-danmaku>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import vueDanmaku from 'vue3-danmaku'
import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@/utils/generatePackage.js'
//import { } from '@/utils/generateModules.js'
//import { } from '@/utils/generateIcons.js'
//import { } from '@/composables'
import { getDanmuAPI } from '@/api/carbon.js';

const $route = useRoute();
const $router = useRouter();
useTitle($route.meta.title);

const props = defineProps({
  text: {
    type: Object,
    default: {}
  },
  show: {
    type: Boolean,
    default: false
  }
});

watch(() => props.text, (v) => {
  if (v.note) {
    danmakuRef.value.add(v)
  }
});

watch(() => props.show, (v) => {
  nextTick(() => {
    if (v) {
      danmakuRef.value.show();
      $('.danmu-boxer').css('zIndex', '10');
    } else {
      danmakuRef.value.hide();
      $('.danmu-boxer').css('zIndex', '0');
    }
  })
}, {
  immediate: true
});

const danmakuRef = ref(null)
const danmus = ref([]);

onMounted(async () => {
  const { code, data } = await getDanmuAPI();
  if (code) {
    danmus.value = data;
  }
})

</script>

<style lang="less" scoped>
.danmaku-page {
  .danmu-boxer {
    height:15rem;
    width:100vw;
    position: absolute;
    top:0;
    z-index: 10;
    padding-top: 1rem;
  }
  .dm-item {
    background-color: rgba(48, 48, 48, 0.50);
    padding: 0.25rem 1rem;
    border-radius: 14px;
    margin-top: 1rem;
    font-size: 0.95rem;
  }
}
</style>