<template>
  <a-upload
    :action="fileAction"
    :headers="headers"
    :accept="accept"
    :data="{ ...this.formData, modualName: module }"
    list-type="picture-card"
    :file-list="files"
    :multiple="multiple"
    @change="handleChange"
  >
    <div>
      <a-icon :type="loading ? 'loading' : 'plus'" />
      <div class="ant-upload-text">{{ uploadText }}</div>
    </div>
  </a-upload>
</template>

<script>
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'

export default {
  name: 'HPhotoUpload',

  /**
   * 照片墙上传组件
   * @property {Array} value v-model 语法糖
   * @property {String} action 文件上传的地址
   * @property {String} accept 接受上传的文件类型
   * @property {Boolean} multiple 是否可多选
   * @property {String} module 后端文件分类字段
   * @property {String} fileList 已经上传的文件列表
   * @property {String} formData 上传文件所需参数
   * @property {String} uploadText 上传文件提示文字
   * @author Matrix
   * @since 2022/09/29
   */
  props: {
    value: {
      type: Array,
      required: false,
      default: () => []
    },
    action: {
      type: String,
      required: false,
      default: '/sys/common/uploadNoWatermark'
    },
    accept: {
      type: String,
      required: false,
      default: 'image/*'
    },
    multiple: {
      type: Boolean,
      required: false,
      default: false
    },
    module: {
      type: String,
      required: false,
      default: ''
    },
    fileList: {
      type: Array,
      required: false,
      default: () => []
    },
    formData: {
      type: Object,
      required: false,
      default: () => ({})
    },
    uploadText: {
      type: String,
      required: false,
      default: '上传附件'
    }
  },
  data() {
    return {
      loading: false,
      fileAction: '',
      headers: {
        'X-Access-Token': Vue.ls.get(ACCESS_TOKEN)
      },
      // 组件 fileList 需用的字段格式存储
      files: [],
      // 最终提交接口的字段格式存储
      filesCopy: []
    }
  },
  watch: {
    action: {
      handler(url) {
        if (url) {
          const isProd = process.env.NODE_ENV === 'production'
          const PROXY = isProd ? '' : process.env.VUE_APP_PROXY || []
          const PREFIX = process.env.VUE_APP_BASE_API || ''
          this.fileAction = PROXY + PREFIX + url
          console.log('fileAction: ', this.fileAction)
        }
      },
      immediate: true
    },
    fileList: {
      handler(files) {
        if (files.length > 0) {
          this.$emit('input', files)
          for (let v of files) {
            const items = {}
            items.uid = v.id
            items.name = v.fileName
            items.type = v.fileType
            items.size = v.fileSize
            items.status = 'done'
            items.url = window._CONFIG['imgDomainURL'] + v.filePath
            items.path = v.filePath
            this.files.push(items)
          }
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    /**
     * 上传文件改变时回调
     * @author Matrix
     * @since 2022/09/16
     */
    handleChange(info) {
      this.files = info.fileList
      this.filesCopy = []
      for (let v of info.fileList) {
        if (v.status === 'done') {
          const files = {}
          files.uid = v.uid
          files.fileName = v.name
          files.fileType = v.type
          files.fileSize = v.size
          files.filePath = v.path ?? v.response.message
          files.status = v.status
          this.filesCopy.push(files)
        }
      }
      this.$emit('input', this.filesCopy)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .ant-upload-picture-card-wrapper {
  width: 105px;
}
</style>
