<template>
    <div>
         <el-dialog :visible.sync="inner_value" :before-close="beforeCloseDialog">
             <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>
  export default {
    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])
          })
        }
        this.$API.post_file(this.url, formData).then((res) => {
          this.$message({
            type: 'success',
            message: '上传成功'
          })
          console.log(res)
          this.$emit('success', { success: true })
          this.$emit('input', false)
        })
      }
    }
  }
</script>
<style scoped>
.upload-input-file {
  position: absolute;
  opacity: 0;
  height: 30px;
  margin-left: -100px;
  cursor: pointer;
}
</style>
