<template>
    <el-button @click="batchUploadClickHandler" :priv="'com.zving.cms.Catalog.Content.Edit.'+content.catalogID">
      <i class="fa fa-plus"></i>添加图片
      <el-dialog title="添加图片" :visible.sync="isShowModal" @close="dialogClose" :append-to-body="true" class="batch-upload-images-dialog">
        <el-form label-position="right" label-width="100px" style="margin-top:20px;">
          <el-form-item label="文件：">
              <el-upload
                ref="batchUploadImages"
                action=''
                :auto-upload="false"
                :on-remove="removeFile"
                :on-change="changeFile"
                :on-exceed="exceedFile"
                :file-list="batchUploadImage.fileList"
                :multiple="batchUploadImage.multiple"
                :limit="batchUploadImage.limit"
                :accept="batchUploadImage.allowType">
                  <el-input disabled v-model="batchUploadImage.allowType">
                    <el-button slot="append">上传 <i class="fa fa-plus"></i></el-button>
                  </el-input>
            </el-upload>
          </el-form-item>
          <resource-tags :tags.sync="resourcesTag"></resource-tags>
        </el-form>
      <div slot="footer">
        <el-button @click="isShowModal = false">取 消</el-button>
        <el-button type="primary" @click="confirm" :loading="submitLoading">确 定</el-button>
      </div>
      </el-dialog>
    </el-button>
</template>
<script>
import util from '@src/common/util.js'
import resourceTag from '../../workspace/components/ResourceTags.vue'
export default {
  components: {
    'resource-tags': resourceTag
  },
  props: {
    content: {
      type: Object
    }
  },
  data() {
    return {
      submitLoading: false,
      isShowModal: false,
      batchUploadImage: {},
      resourcesTag: ''
    }
  },
  methods: {
    batchUploadClickHandler() {
      this.batchUploadImage = {
        allowType: '.jpg,.jpeg,.gif,.png,.bmp',
        fileList: [],
        multiple: true,
        limit: 100
      }
      this.submitLoading = false
      this.isShowModal = true
    },
    removeFile(file, fileList) {
      this.batchUploadImage.fileList = fileList
    },
    changeFile(file, files) {
      let suffix = file.name.substring(file.name.lastIndexOf('.')).toLocaleLowerCase()
      let allowType = this.batchUploadImage.allowType
      let isAllowType = allowType.split(',').some(type => type === suffix)
      if (!isAllowType) {
        files.splice(files.length - 1, 1)
        this.$message.info('请选择指定的文件格式')
        return
      }
      this.batchUploadImage.fileList = files
    },
    exceedFile(files) {
      let msg = `当前限制选择 ${this.batchUploadImage.limit} 个文件`
      this.$alert(msg, '系统提示', {
        type: 'warning'
      })
    },
    async confirm() {
      if (!this.batchUploadImage.fileList || this.batchUploadImage.fileList.length === 0) {
        this.$alert('请选择要上传的文件', '系统提示', {
          type: 'warning'
        })
        return
      }
      this.submitLoading = true
      let formData = new FormData()
      this.batchUploadImage.fileList.forEach(row => {
        formData.append('file', row.raw)
      })
      formData.append('catalogID', this.content.catalogID)
      formData.append('groupID', this.content.ID)
      formData.append('tag', this.resourcesTag)
      let resp = await axios.post(`/ui/contentcore/contents/${this.content.ID}/images/batchupload`,
        formData,
        event => {
          // TODO: 这儿的逻辑有问题吧？请检查测试
          window.onProgress(event)
        },
        {
          headers: {'Content-Type': 'multipart/form-data'}
        }
      )

      util.showResponseMessage(resp.data)
      this.submitLoading = false
      if (resp.data.status === 1) {
        this.isShowModal = false
        this.resourcesTag = ''
        this.$emit('refresh-content')
      }
    },
    dialogClose() {
      this.batchUploadImage.fileList = []
      this.$refs.batchUploadImages.clearFiles()
    }
  }

}
</script>
<style>
.batch-upload-images-dialog .el-dialog {
  width:550px;
}
@media (max-width:480px){
  .batch-upload-images-dialog .el-dialog{
    width: 96%;
  }
}
.batch-upload-images-dialog .el-upload {
  display: block;
  width:90%!important
}
</style>
