<template>
  <el-dialog
    append-to-body
    title="文件上传"
    :visible.sync="dialogFormVisible"
    width="40%"
    @close="close"
  >
    <div class="upload-base-div">
      <div>
        <el-radio v-model="params.gallery_type" label="image">
          {{ __('图片') }}
        </el-radio>
        <el-radio v-model="params.gallery_type" label="video">
          {{ __('视频') }}
        </el-radio>
        <el-radio v-if="false" v-model="params.gallery_type" label="audio">
          {{ __('音频') }}
        </el-radio>
        <el-radio v-if="false" v-model="params.gallery_type" label="document">
          {{ __('文档') }}
        </el-radio>
      </div>
      <div v-show="params.gallery_type === 'image'">
        <el-upload
          ref="imageUpload"
          accept=".png,.svg,.gif,.jpeg,.jpg"
          :action="action"
          :auto-upload="true"
          :data="params"
          :file-list="fileList"
          list-type="picture-card"
          :multiple="true"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </div>
      <div
        v-show="
          params.gallery_type === 'video' ||
          params.gallery_type === 'audio' ||
          params.gallery_type === 'document'
        "
      >
        <el-upload
          ref="videoUpload"
          :action="action"
          :auto-upload="true"
          :data="params"
          :file-list="fileList"
          :multiple="true"
        >
          <el-button slot="trigger" size="small" type="primary">
            选取文件
          </el-button>
        </el-upload>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button v-if="false" type="primary" @click="save">
        {{ __('点击上传') }}
      </el-button>
      <el-button type="primary" @click="close">{{ __('确定') }}</el-button>
      <el-button @click="close">{{ __('关闭') }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { translateTitle as __ } from '@/utils/i18n'
  import { getToken } from '@/utils/token'
  import { URL } from '@/config'
  export default {
    name: 'UploadBase',
    data() {
      return {
        params: {
          authorization: '',
          gallery_id: 0,
          gallery_type: 'image',
        },
        fileList: [],
        action: URL.action,
        dialogFormVisible: false,
      }
    },
    created() {
      this.params.authorization = getToken()
    },
    methods: {
      __,
      showEdit(gallery_id) {
        this.params.gallery_id = gallery_id
        this.dialogFormVisible = true
      },
      close() {
        this.$emit('fetch-data')
        this.fileList = []
        this.dialogFormVisible = false
      },
      save() {
        if (this.params.gallery_type === 'image') {
          this.$refs.imageUpload.submit()
        } else {
          this.$refs.videoUpload.submit()
        }
      },
    },
  }
</script>
<style>
  .upload-base-div > div {
    padding-bottom: 25px;
  }
</style>
