<!--
 * @Date: 2024-04-10 14:16:36
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-04-11 14:19:23
 * @FilePath: /fxPark/src/components/danmaku.vue
 * @Description: 文件描述
-->
<template>
  <div class="danmaku-page">
    <vue-danmaku ref="danmaku" v-model:danmus="danmus" useSlot loop :channels="2" :speeds="50" :top="0" style="height:15rem; width:100vw; position: absolute; top:0; z-index: 10; padding-top: 1rem;">
      <template v-slot:dm="{ index, danmu }">
        <div style="background-color: rgba(48, 48, 48, 0.50); padding: 0.25rem 1rem; border-radius: 14px; margin-top: 1rem;">{{ danmu.text }}</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'
const $route = useRoute();
const $router = useRouter();
useTitle($route.meta.title);

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

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

const danmaku = ref(null)
const danmus = ref([{ name: 'a', text: 'aaa' }, { name: 'b', text: 'bbb' }])

</script>

<style lang="less" scoped>
.danmaku-page {}
</style>