<template>
  <div>
    <Modal v-model="showEditModal" :mask-closable="false" width="600">
      <p slot="header">{{modalTitle}}</p>
      <div>
        <Upload
          :action="action"
          :show-upload-list="false"
          :before-upload="_beupload"
          multiple
        >
          <Button type="dashed" icon="ios-cloud-upload-outline">上传文件（小于50MB）</Button>
        </Upload>
        <div>
          <Card :dis-hover="true" style="width: 100%;height: 400px;overflow: auto;">
            <p slot="title">已上传文件列表</p>
            <div v-for="(item,index) in fileList" :key="index" class="file-upload-list">
              <div>
                <div class="file-upload-list-cover">
                  <Icon @click.native.stop="_handleRemove(item)" type="md-trash" style="color: white;font-size: 20px;"></Icon>
                </div>
              </div>
              {{item.fileName }}
            </div>
          </Card>
        </div>
      </div>
      <div slot="footer" class="btn-width">
        <Button @click="showEditModal = false">取消</Button>
        <Button @click="_mutipleUpload" :loading="isLoading" type="primary">{{btnName}}</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
/**
 * 上传文件，在文件夹下
 */
import axios from 'axios'
import global from '../../api/config'
import loading from '../../api/loading'

export default {
  data() {
    return {
      id: '',
      ID: '',
      action: '',
      modalTitle: '',
      showEditModal: false,
      name: '',
      isLoading: false,
      btnName: '上传',
      fileList: []
    }
  },
  methods: {
    _open(obj) {
      this.fileList = []
      this.showEditModal = true
      this.ID = obj
      this.modalTitle = '上传文件'
    },
    _beupload(file) {
      // 单个文件上传超过50M时，取消上传
      const isLt50M = file.size / 1024 / 1024 < 50
      const fileName = file.name.split('.')[0]
      if (!isLt50M) {
        this.$Message.warning({
          content: '文件 ' + fileName + ' 大小超多50M，请重新上传!',
          duration: 3
        })
        this.isLoading = false
      } else {
        // 动态循环给文件命名
        const temObj = {
          file: file,
          fileName: fileName
        }
        this.fileList.push(temObj)
      }
      return false
    },
    _mutipleUpload() {
      if (this.fileList.length > 0 && this.btnName === '上传') {
        this.isLoading = true
        this.btnName = '上传中...'
        // 创建formula对象
        const formData = new FormData()
        formData.append('entrustId', this.ID)
        // 多个文件
        for (let i = 0; i < this.fileList.length; i++) {
          formData.append('file' + i, this.fileList[i].file)
        }
        const config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }
        const instanceFile = axios.create()
        instanceFile.defaults.withCredentials = true
        // 发起请求
        instanceFile
          .post(
            global.baseURL + '/soil/v1/sample_photo/upload_bath/' + this.ID,
            formData,
            {
              headers: config
            }
          )
          .then(res => {
            if (res.data.code === '1') {
              this.$Message.success('上传成功！')
              this.showEditModal = false
              this.$emit('on-result-change')
            } else if (res.data.code === '0') {
              loading.toast.show(res.data.code, res.data.msg)
              this.$Message.error('操作失败')
            }
            this._resetLoading()
          })
          .catch(err => {
            console.log(err)
            this._resetLoading()
          })
      } else {
        this.$Message.warning('请至少上传一个文件')
        this._resetLoading()
      }
    },
    _resetLoading() {
      this.isLoading = false
      this.btnName = '上传'
    },
    // 删除对应的上传的文件
    _handleRemove(data) {
      const index = this.fileList.findIndex(item => item === data)
      this.fileList.splice(index, 1)
    }
  }
}
</script>
<style>
.file-upload-list {
  display: inline-block;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  margin-right: 4px;
}
.file-upload-list:hover .file-upload-list-cover {
  display: block;
}
.file-upload-list-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
}
</style>
