<template>
  <div>
    <el-dialog :visible.sync="inner_value" :before-close="beforeCloseDialog" :append-to-body="true">
      <div class="opration">
        <div>
          <div class="file">
            <span>
              <el-button size="mini">选择文件</el-button>
              <input
                type="file"
                id="fileExcle"
                ref="fileExcle"
                class="upload-input-file"
                v-on:change="handleFileUpload()"
                name="upload"
                :accept="accept"
              >
            </span>
          </div>
          <div style="margin-top:20px">
            <h3>文件名：{{fileExcleName}}</h3>
            <h4>文件大小：{{fileSizeText}}</h4>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="cleanFile">关闭</el-button>
        <el-button size="mini" type="primary" @click="submitFile">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  name: 'base-up_load_file',
  props: {
    value: {
      type: Boolean,
      required: true
    },
    url: {
      type: String,
      default: 'mesAPI/system_init/import_excel/',
      required: false
    },
    accept: {
      type: String
    },
    name: {
      default: _ => 'file'
    },
    other_data: {}
  },
  watch: {
    value(value) {
      this.inner_value = value
    }
  },
  data() {
    return {
      fileExcleName: '',
      fileSizeText: '',
      inner_value: false
    }
  },
  mountd() {
    this.inner_value = this.value
  },
  methods: {
    beforeCloseDialog() {
      this.$emit('input', false)
    },
    cleanFile() {
      this.$emit('input', false)
      this.fileExcle = null
      this.fileSizeText = ''
      this.fileExcleName = ''
      this.$refs.fileExcle.value = ''
    },
    handleFileUpload() {
      if (!this.$refs.fileExcle.files[0]) return
      this.fileExcle = this.$refs.fileExcle.files[0]
      console.log(this.$refs.fileExcle.files)
      const fileSzie = this.fileExcle.size / 1024 / 1024
      if (fileSzie < 1) {
        this.fileSizeText = '小于1M'
      } else {
        this.fileSizeText = parseFloat(fileSzie).toFixed(2) + 'M'
      }
      this.fileExcleName = this.fileExcle.name
    },
    submitFile() {
      if (!this.fileExcle) {
        this.$message.error('请先选择文件！')
        return
      }
      const formData = new FormData()
      formData.append(this.name, this.fileExcle)
      if (this.other_data) {
        Object.keys(this.other_data).forEach(key => {
          formData.append(key, this.other_data[key])
        })
      }
      axios.post(this.url, formData).then(res => {
        this.$message({
          type: 'success',
          message: '上传成功'
        })
        this.$emit('success', { success: res })
        this.$emit('input', false)
      })
    }
  }
}
</script>
<style scoped>
.upload-input-file {
  position: absolute;
  opacity: 0;
  height: 30px;
  margin-left: -100px;
  cursor: pointer;
}
</style>
