<template>
  <div
    class="upload-pics"
    :class="{ readonly: attachments.length >= limit || readonly }"
  >
    <el-upload
      list-type="picture-card"
      :action="action"
      :headers="headers"
      accept="image/png,image/jpg,image/jpeg"
      :on-preview="handlePreview"
      :on-success="handleSuccess"
      :on-remove="handleRemove"
      :on-exceed="handleExceed"
      :on-change="handleChange"
      :before-upload="beforeUpload"
      :before-remove="beforeRemove"
      :file-list="fileList"
      :auto-upload="true"
      multiple
      :limit="limit"
      :disabled="readonly"
    >
      <i class="el-icon-plus" />
    </el-upload>
    <el-dialog
      :title="'图片预览 : ' + imgPreview.name"
      top="10vh"
      width="60%"
      :visible.sync="showImgPreviewDialog"
      append-to-body
    >
      <el-image :src="imgPreview.url" fit="contain">
        <div slot="placeholder" class="image-slot">
          加载中
          <span class="dot">...</span>
        </div>
      </el-image>
    </el-dialog>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'

export default {
  props: {
    value: {
      type: Array,
      default() {
        return []
      }
    },
    dirName: {
      type: String,
      default: process.env.VUE_APP_MODULE_CODE
    },
    readonly: {
      type: Boolean,
      default: false
    },
    limit: {
      type: Number,
      default: 10
    }
  },
  data() {
    return {
      showImgPreviewDialog: false,
      imgPreview: { url: '', name: '' },
      attachments: [...this.value],
      fileList: this.value.map(t => {
        return { name: t.name, url: t.url }
      })
    }
  },
  computed: {
    action() {
      return process.env.VUE_APP_BASE_API + '/api/files/' + this.dirName
    },
    headers() {
      return {
        'Authorization': 'Bearer ' + getToken()
      }
    }
  },
  methods: {
    reload(files) {
      this.attachments = [...files]
      this.fileList = files.map(t => {
        return { name: t.name, url: t.url }
      })
    },
    beforeUpload(file) {
      if (file.size > 10 * 1024 * 1024) {
        this.$message.error(`单个文件最大只支持10MB : ${file.name}`)
        return false
      }
      return true
    },
    handleChange(file) {
      // var reg = /\.(png|jpg|gif|jpeg|webp|xls|xlsx|doc|docx|pdf|ppt)$/;
      // if (!reg.test(file.name)) {
      //   this.$message.warning(`无效的文件格式 : ${file.name}`);
      //   return false;
      // }
      // return true;
    },
    handleRemove(file, fileList) {
      if (file.url || file.response) {
        var url
        if (file.response) {
          url = file.response.url
        }
        if (!url) {
          url = file.url
        }

        this.attachments = this.attachments.filter(t => t.url !== url)
        this.$emit('input', this.attachments)
      }
    },
    handleSuccess(response, file, fileList) {
      console.dir(response)
      this.attachments.push(response)
      this.$emit('input', this.attachments)
    },
    handlePreview(file) {
      this.imgPreview = {
        url: file.url || file.response.url,
        name: file.name
      }
      this.showImgPreviewDialog = true
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 ${this.limit}个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      )
    },
    beforeRemove(file, fileList) {
      // return this.$confirm(`确定移除 ${file.name}？`);
    }
  }
}
</script>

<style lang="scss" scoped>
.upload-pics {
  height: 86px;
  border: 1px solid;
  padding: 5px;
  border-radius: 5px;
  border-color: #d0d0d0;
  ::v-deep .el-upload--picture-card {
    height: 68px;
    width: 68px;
    margin: 4px;
    line-height: 68px;
    i {
      font-size: 16px;
    }
  }

  ::v-deep .el-upload-list--picture-card {
    line-height: 0px;
  }

  ::v-deep .el-upload-list__item {
    height: 68px;
    width: 68px;
    margin: 4px;
  }
}
.upload-pics.readonly {
  ::v-deep .el-upload {
    display: none;
  }
}
</style>
