<script lang="ts">
import {defineComponent, getCurrentInstance, ref} from "vue";
import {RefResource} from "~/types";
import {computedAsync} from "@vueuse/core";
import {MediaHelper} from "~/utils";
import AudioPreview from "~/components/audio-preview.vue";
import {Icon} from "vant"

export default defineComponent({
  name: "audio-card",
  components: {
    [AudioPreview.name]: AudioPreview,
    [Icon.name]: Icon
  },
  props: {
    readonly: { type: Boolean, default: false },
    downloadable: { type: Boolean, default: false },
    canSetShifan: {type: Boolean, default: false},
    modelValue: Array<RefResource> // 这行如果不在最后一个，在服务器上build会报错，逗号语法问题
  },
  emits: ['update:modelValue'],
  setup(props) {
    const instance = getCurrentInstance();
    const previewing = ref(-1);
    const audios = computedAsync(async () => {
      return Promise.all(props.modelValue?.map(async x => (await MediaHelper.authorize(x))) || []);
    })

    const update = async (resource: any) => {
      let data = props.modelValue || [];
      if (resource.is_shifan) {
        data.forEach(x => x.is_shifan = false);
        instance?.emit("update:shifan")
      }
      data[previewing.value] = resource;
      instance?.emit("update:modelValue", data)
      previewing.value = -1;
    }

    const remove = (index: number, e: Event) => {
      e.stopPropagation();
      let data = props.modelValue || [];
      data.splice(index, 1);
      instance?.emit("update:modelValue", data);
    }

    const preview = (index: number) => {
      previewing.value = index;
      let audios = [...document.getElementsByTagName("audio")];
      audios.forEach(audio => audio.pause())
    }

    return {audios, previewing, update, remove, preview}
  }
});
</script>

<template>
  <div class="audio-card" v-if="modelValue?.length">
    <div class="audio-item" v-for="(item, index) in audios" :key="index" @click.stop="preview(index as number)">
      <div v-if="item.ref_name || item.is_shifan" class="preview-name van-ellipsis"><van-icon v-if="item.is_shifan" name="star" color="gold" />{{item.ref_name}}</div>
      <div class="van-uploader__preview-image">
        <audio controls :src="item.resource_url"></audio>
      </div>
      <div v-if="item.ref_desc" class="preview-desc">
        <div class="van-multi-ellipsis--l3">{{item.ref_desc}}</div>
      </div>
      <div v-if="!readonly" role="button" class="van-uploader__preview-delete van-uploader__preview-delete--shadow" tabindex="0" aria-label="删除">
        <van-icon name="cross" class="van-uploader__preview-delete-icon" @click="remove(index as number, $event)"></van-icon>
      </div>
    </div>
  </div>
  <template v-if="modelValue">
    <audio-preview :readonly="readonly" :can-set-shifan="canSetShifan" :downloadable="downloadable" :resource="modelValue[previewing]" @cancel="previewing = -1" @change="update($event)"></audio-preview>
  </template>
</template>

<style scoped lang="less">

.audio-card {

  position: relative;
  width: 100%;

  .audio-item {
    margin-bottom: var(--van-padding-md);
    padding: 0;
    width: 100%;
    font-size: 0.24rem;
    position: relative;;
    box-shadow: 0 0 6px 3px rgba(0,0,0,0.1);
    border-radius: 3px;

    .preview-name {
      text-align: center;
      padding: 0.1rem 0.12rem;
      font-weight: bolder;
      width: 100%;
    }

    .preview-desc {
      padding: 0.1rem 0.12rem;
      width: 100%;
    }
  }

  .van-uploader__preview-image {
    position: relative;
    width: 100%;
    height: 50px;
    padding: 5px 0;
    text-align: center;
  }

  audio {
    margin: auto;
    width: 96%;
    height: 100%;
  }

  .btn-close {
    position: absolute;
    right: 0;
    top: 0;
    width: 0.5rem;
    height: 0.5rem;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;

    i {
      font-size: 0.28rem;
    }
  }

}
</style>
