<!--
 * @Date: 2024-04-10 14:16:36
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-04-12 12:27:41
 * @FilePath: /fxPark/src/components/danmaku.vue
 * @Description: 文件描述
-->
<template>
  <div class="danmaku-page">
    <vue-danmaku ref="danmakuRef" 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 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()
    } else {
      danmakuRef.value.hide()
    }
  })
}, {
  immediate: true
});

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

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

</script>

<style lang="less" scoped>
.danmaku-page {
  .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>