<template>
  <div>
    <el-button
      v-if="!uploadFile.url"
      size="small"
      type="primary"
      @click="showEdit"
    >
      上传文件
    </el-button>
    <div v-else class="file-upload-label" style="color: #606266">
      <a class="el-icon-document" style="padding-right: 10px">
        {{ __('已上传') }}
      </a>
      <a
        class="el-icon-close"
        style="cursor: pointer; padding: 0 10px"
        @click="removeFile"
      ></a>
    </div>
    <el-dialog
      append-to-body
      title="上传文件"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <div>
        <el-button
          size="small"
          style="margin-bottom: 20px"
          type="primary"
          @click="showMedia"
        >
          素材库
        </el-button>
        <el-upload
          ref="upload"
          :action="action"
          :before-remove="removeFile"
          :data="params"
          :limit="1"
          :on-success="onSuccess"
        >
          <el-button v-if="!uploadFile.url" size="small" type="primary">
            本地点击上传
          </el-button>
        </el-upload>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">{{ __('关闭') }}</el-button>
        <el-button type="primary" @click="save">{{ __('确定') }}</el-button>
      </span>
    </el-dialog>
    <media ref="media" :append-to-body="true" @save-file="saveFile" />
  </div>
</template>

<script>
  import { translateTitle as __ } from '@/utils/i18n'
  import media from '@/components/material/Media'
  import { URL } from '@/config'
  import { getToken } from '@/utils/token'
  export default {
    name: 'FileUpload',
    components: { media },
    props: {
      file: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        params: {
          authorization: '',
          gallery_id: 0,
          gallery_type: 'video',
        },
        action: URL.action,
        uploadFile: {
          url: '',
          video_duration: '',
        },
        dialogVisible: false,
      }
    },
    watch: {
      file: {
        immediate: true,
        handler(file) {
          this.uploadFile.url = file
        },
      },
    },
    created() {
      this.params.authorization = getToken()
    },
    methods: {
      __,
      onSuccess(response, file, fileList) {
        let status = response.status
        if (status === 200) {
          this.uploadFile.url = response.data.media_url
          this.uploadFile.video_duration = response.data.media_duration
        } else {
          this.$baseMessage(response.msg, 'error')
        }
      },
      showMedia() {
        this.$refs['media'].showEdit()
      },
      showEdit() {
        this.dialogVisible = true
      },
      close() {
        this.$refs.upload.clearFiles()
        this.dialogVisible = false
      },
      saveFile(files) {
        if (files && files.length > 0) {
          this.uploadFile.url = files[0].media_url
          this.uploadFile.video_duration = files[0].media_duration
        }
        this.save()
      },
      save() {
        this.$emit('get-file', this.uploadFile)
        this.close()
      },
      removeFile() {
        this.uploadFile = {
          url: '',
          video_duration: '',
        }
      },
    },
  }
</script>
<style></style>
