<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"
        :limit="1"
        @updateFileList="updateFileList"
      />
      <el-form :model="data" label-width="72px" label-position="left">
        <el-form-item label="下载">
          <el-radio-group v-model="data.is_enable_download">
            <el-radio v-for="{ value, label } in switchOption" :key="value" :label="value">
              {{ label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </template>
  </ModuleBase>
</template>

<script>
import { getUploadPreviewData, switchOption } from '@/views/book/courseware/data/uploadPreview';
import ModuleMixin from '../../common/ModuleMixin';
import UploadFile from '../common/UploadFile.vue';

export default {
  name: 'UploadPreviewPage',
  components: { UploadFile },
  mixins: [ModuleMixin],
  data() {
    return {
      data: getUploadPreviewData(),
      switchOption,
      labelText: '文件',
      acceptFileType: '.png,.jpg,.pdf',
      uploadTip:
        'The size of the uploaded image should not exceed 2MB, the size of the uploaded audio file, pdf file, and excel file should not exceed 20MB, and the size of the uploaded audio file should not exceed 20MB',
      iconClass: 'picture',
    };
  },
  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;
    },
  },
};
</script>
<style lang="scss" scoped>
:deep .file-list {
  margin-bottom: 16px;
}
</style>
