<template>
  <div>
    <el-dialog title='图片上传' :visible.sync="isShow" style="margin:0 auto" @open="beforeDialogOpen" class="batch-image-upload-dialog">
      <el-form label-width="150px">
        <el-form-item label='文件：'>
          <el-upload
            class="upload-additional-dic"
            action=""
            ref="upload"
            :multiple="batchUploadImage.multiple"
            :limit="batchUploadImage.limit"
            :auto-upload="false"
            :before-remove="beforeRemoveFile"
            :on-remove="removeFile"
            :on-change="changeFile"
            :on-exceed="exceedFile"
            :file-list="batchUploadImage.fileList"
            :accept="batchUploadImage.allowType"
            style="width:330px;">
            <el-input disabled v-model="batchUploadImage.allowType" style="width:300px;">
              <el-button slot="append">浏 览</el-button>
            </el-input>
            <div slot="tip" class="el-upload__tip">只能上传 jpg / jpeg / gif / png / bmp 文件</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="描述：">
          <el-input v-model="info" style="width:300px;"></el-input>
        </el-form-item>
      </el-form>
      <div slot='footer'>
        <el-button @click="isShow = false">取 消</el-button>
        <el-button type="primary" @click="confirm" :loading="comfirmLoading">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>

import util from '@src/common/util.js'
export default {
  props: {
    imagePlayerID: {
      required: true
    },
    show: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      info: '',
      comfirmLoading: false,
      batchUploadImage: {}
    }
  },
  computed: {
    isShow: {
      get() {
        return this.show
      },
      set(val) {
        this.$emit('update:show', val)
      }
    }
  },
  methods: {
    beforeDialogOpen() {
      this.info = ''
      this.batchUploadImage = {
        allowType: '.jpg,.jpeg,.gif,.png,.bmp',
        fileList: [],
        multiple: true,
        limit: 5
      }
      this.comfirmLoading = false
    },

    // 移除前文件
    beforeRemoveFile(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    removeFile(file, fileList) {
      this.batchUploadImage.fileList = fileList
    },
    changeFile(file, files) {
      this.batchUploadImage.fileList = files
    },
    exceedFile(files) {
      let msg = `当前限制选择 ${this.batchUploadImage.limit} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + this.batchUploadImage.fileList.length} 个文件`
      this.$alert(msg, '系统提示', {
        type: 'warning'
      })
    },
    async confirm() {
      if (!this.batchUploadImage.fileList || this.batchUploadImage.fileList.length === 0) {
        this.$alert('请选择要上传的文件', '系统提示', {
          type: 'warning'
        })
        return
      }
      this.comfirmLoading = true
      try {
        let formData = new FormData()
        this.batchUploadImage.fileList.forEach(row => {
          formData.append('file', row.raw)
        })
        formData.append('info', this.info)
        let resp = await axios.post(
          `/ui/imageplayer/${this.imagePlayerID}/batchupload`,
          formData,
          {
            headers: {
              'Content-Type': 'multipart/form-data'
            }
          }
        )
        this.comfirmLoading = false
        util.showResponseMessage(resp.data)
        if (resp.data.status === 1) {
          this.isShow = false
          this.$refs.upload.clearFiles()
          this.$emit('callback', true)
        }
      } catch (e) {
        this.comfirmLoading = false
        // util.showErrorNotification(e)
      }
    }
  }
}
</script>
<style>
/* 在一般情况下dialog宽为600像素，在逻辑分辨率480像素以下dialog宽为96% */

.batch-image-upload-dialog .el-dialog {
  width: 600px;
}

@media (max-width: 480px) {
  .batch-image-upload-dialog .el-dialog {
    width: 96%;
  }
}
.batch-image-upload-dialog .el-icon-close-tip {
  top: 22px;
}
</style>
<style scoped>

</style>
