<template>
  <div class="audio-box">
    <div class="del-btn" @click="delAudio()">
      <ui-icon type="del" />
    </div>
    <div v-for="(i, index) in audioInfo" class="audio-msg" :key="index">
      <ui-icon type="music" />
      <span>{{ i.name }}</span>
    </div>
  </div>
</template>

<script setup>
  import { computed } from 'vue';

  const audioInfo = computed(() => {
    return hotData.value.media.audio;
  });
  // const delAudio = () => {
  //   store.commit('tag/delMetas', { type: type.value, index: audioNum.value });
  // };
</script>
<style lang="scss" scoped>
  .del-btn {
    width: 24px;
    height: 24px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    position: absolute;
    cursor: pointer;
    top: 10px;
    right: 10px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .audio-box {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
    top: 0;
    left: 0;
    z-index: 10;
    .audio-msg {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      .iconfont {
        margin-right: 6px;
      }
    }
  }
</style>
