<template>
  <ModuleBase :type="data.type">
    <template #content>
      <UploadFile
        :courseware-id="courseware_id"
        :component-id="id"
        :type="data.type"
        :single-size="data.single_size"
        :total-size="data.total_size"
        :file-list="data.file_list"
        :file-id-list="data.file_id_list"
        :file-info-list="data.file_info_list"
        :label-text="labelText"
        :accept-file-type="acceptFileType"
        :upload-tip="uploadTip"
        :icon-class="iconClass"
        @updateFileList="updateFileList"
      />
    </template>
  </ModuleBase>
</template>

<script>
import { getAudioData } from '@/views/book/courseware/data/audio';
import ModuleMixin from '../../common/ModuleMixin';
import UploadFile from '../common/UploadFile.vue';

export default {
  name: 'AudioPage',
  components: { UploadFile },
  mixins: [ModuleMixin],
  data() {
    return {
      data: getAudioData(),
      labelText: '音频',
      acceptFileType: '.mp3,.acc,.wma,.wav',
      uploadTip: '支持上传mp3、acc、wma、.wav，等格式音频文件，单个文件最大100MB，总文件体积不超1G。',
      iconClass: 'note',
    };
  },
  methods: {
    updateFileList({ file_list, file_id_list, file_info_list }) {
      this.data.file_list = file_list;
      this.data.file_id_list = file_id_list;
      this.data.file_info_list = file_info_list;
      this.handlerMindMap();
    },
    // 思维导图
    handlerMindMap() {
      this.$set(this.data.mind_map, 'node_list', [
        {
          name: '音频',
          node_list:
            this.data.file_list?.map((file) => ({
              name: file.file_name === undefined ? '' : file.file_name,
            })) ?? [],
        },
      ]);
    },
  },
};
</script>
