<template>
  <div
    class="dev-main-item"
    :data-ref="itemObj.ref"
    :data-type="itemObj.type"
    :style="{ width: (100 / 24 * itemObj.options.span).toFixed(5) + '%'}"
    @click.stop="itemClick(itemObj)"
  >
    {{ itemObj.options.labelName }}

    <template v-if="itemObj.options.type == 'button'">
      <el-upload
        ref="upload"
        class="upload-demo"
        :list-type="itemObj.options.listType"
        :action="itemObj.options.action"
        :multiple="itemObj.options.multiple"
        :limit="itemObj.options.limit * 1"
        :auto-upload="itemObj.options.autoUpload"
        :show-file-list="itemObj.options.showFileList"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :on-success="handleSuccess"
        :on-error="handleError"
        :on-progress="handleProgress"
        :on-change="handleChange"
        :before-upload="handleBeforeUpload"
        :before-remove="handleBeforeRemove"
        :on-exceed="handleExceed"
        :file-list="fileList"
      >
        <el-button slot="trigger" size="small" type="primary">{{ itemObj.options.btnName }}</el-button>
        <template v-if="itemObj.options.autoUpload == false">
          <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">{{ itemObj.options.btnName2 }}</el-button>
        </template>
        <template v-if="itemObj.options.mark == true">
          <div slot="tip" class="el-upload__tip">{{ itemObj.options.remarks }}</div>
        </template>
      </el-upload>
    </template>

    <template v-else-if="itemObj.options.type == 'picture'">
      <el-upload
        ref="upload"
        list-type="picture-card"
        action="#"
        :multiple="itemObj.options.multiple"
        :limit="itemObj.options.limit * 1"
        :auto-upload="itemObj.options.autoUpload"
        :show-file-list="itemObj.options.showFileList"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :on-success="handleSuccess"
        :on-error="handleError"
        :on-progress="handleProgress"
        :on-change="handleChange"
        :before-upload="handleBeforeUpload"
        :before-remove="handleBeforeRemove"
        :on-exceed="handleExceed"
        :file-list="fileList"
      >
        <i class="el-icon-plus" />
        <div slot="file" slot-scope="{file}">
          <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
          <span class="el-upload-list__item-actions">
            <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
              <i class="el-icon-zoom-in" />
            </span>
            <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
              <i class="el-icon-download" />
            </span>
            <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
              <i class="el-icon-delete" />
            </span>
          </span>
        </div>
        <template v-if="itemObj.options.mark == true">
          <div slot="tip" class="el-upload__tip">{{ itemObj.options.remarks }}</div>
        </template>
      </el-upload>
      <template v-if="itemObj.options.autoUpload == false">
        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">{{ itemObj.options.btnName2 }}</el-button>
      </template>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
    </template>

    <template v-else-if="itemObj.options.type == 'drag'">
      <el-upload
        ref="upload"
        drag
        :action="itemObj.options.action"
        :multiple="itemObj.options.multiple"
        :limit="itemObj.options.limit * 1"
        :auto-upload="itemObj.options.autoUpload"
        :show-file-list="itemObj.options.showFileList"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :on-success="handleSuccess"
        :on-error="handleError"
        :on-progress="handleProgress"
        :on-change="handleChange"
        :before-upload="handleBeforeUpload"
        :before-remove="handleBeforeRemove"
        :on-exceed="handleExceed"
        :file-list="fileList"
      >
        <i class="el-icon-upload" />
        <div class="el-upload__text">将文件拖到此处，或<em>{{ itemObj.options.btnName }}</em> /
          <template v-if="itemObj.options.autoUpload == false">
            <em @click="submitUpload">{{ itemObj.options.btnName2 }}</em>
          </template>
        </div>
        <template v-if="itemObj.options.mark == true">
          <div slot="tip" class="el-upload__tip">{{ itemObj.options.remarks }}</div>
        </template>
      </el-upload>
    </template>
  </div>
</template>

<script>
import ApDevItemBase from './base/ApDevItemBase'

export default {
  name: 'ApDevUpload',
  extends: ApDevItemBase,
  data() {
    return {
      fileList: [],
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false
    }
  },
  created() {
    // 默认参数
    this.defaultOptions = {
      span: 12,
      type: 'button', // 类型
      btnName: '选择文件', // 按钮名称
      btnName2: '点击上传', // 按钮名称
      action: '', // 上传地址
      multiple: true, // 是否多选
      limit: '3', // 最大上传个数
      showFileList: true, // 是否显示已上传文件列表
      listType: '', // 上传文件列表展示类型
      remarks: '这里是备注信息', // 备注信息
      mark: true, // 是否显示备注
      autoUpload: false // 是否在选取文件后立即进行上传
    }
  },
  methods: {
    // 点击文件列表中已上传的文件时
    handlePreview(file) {
      console.log('点击文件列表中已上传的文件时')
      console.log(file)
    },
    // 文件列表移除文件时
    handleRemove(file, fileList) {
      console.log('文件列表移除文件时')
      console.log(file, fileList)
    },
    // 文件上传成功时
    handleSuccess(response, file, fileList) {
      console.log('文件上传成功时')
      console.log(response, file, fileList)
      this.$message.success(`文件上传成功`)
    },
    // 文件上传失败时
    handleError(err, file, fileList) {
      console.log('文件上传失败时')
      console.log(err, file, fileList)
      this.$message.warning(`${file.name} 上传失败`)
    },
    // 文件上传时
    handleProgress(event, file, fileList) {
      console.log('文件上传时')
      console.log(event, file, fileList)
    },
    // 文件状态改变时
    handleChange(file, fileList) {
      console.log('文件状态改变时')
      console.log(file, fileList)
    },
    // 上传文件之前
    handleBeforeUpload(file) {
      console.log('上传文件之前')
      console.log(file)
    },
    // 删除文件之前
    handleBeforeRemove(file, fileList) {
      console.log('删除文件之前')
      console.log(file, fileList)
    },
    // 文件超出个数限制时
    handleExceed(files, fileList) {
      console.log('文件超出个数限制时')
      console.log(files, fileList)
      this.$message.warning(`文件超出个数限制`)
    },
    // 放大缩略图
    handlePictureCardPreview(file) {
      console.log('放大缩略图')
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 下载缩略图
    handleDownload(file) {
      console.log('下载缩略图')
      console.log(file)
    },
    // 手动上传
    submitUpload(file) {
      console.log('手动上传')
      console.log(file)
      this.$refs.upload.submit()
    }
  }
}
</script>

<style scoped>

</style>
