<template>
  <a-upload
    :action="fileAction"
    :headers="headers"
    :accept="accept"
    :data="{ ...this.formData, modualName: module }"
    :multiple="multiple"
    :file-list="fileList"
    :disabled="disabled"
    @change="handleChange"
  >
    <a-button type="dashed"> <a-icon type="upload" /> {{ uploadText }} </a-button>
  </a-upload>
</template>

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

export default {
  name: 'HUpload',

  /**
   * 照片墙上传组件
   * @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: () => []
    },
    disabled: {
      type: Boolean,
      required: false,
      default: false
    },
    action: {
      type: String,
      required: false,
      default: '/sys/common/uploadNoWatermark'
    },
    accept: {
      type: String,
      required: false,
      default: ''
    },
    multiple: {
      type: Boolean,
      required: false,
      default: true
    },
    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 需用的字段格式存储
      fileList: []
      // // 最终提交接口的字段格式存储
      // 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
        }
      },
      immediate: true
    },
    value: {
      handler(val) {
        const files = []
        if (val?.length > 0) {
          for (let v of val) {
            const items = {}
            items.uid = v.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
            files.push(items)
          }
        }
        this.fileList = files
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    /**
     * 上传文件改变时回调
     * @author Matrix
     * @since 2022/09/16
     */
    handleChange(info) {
      this.fileList = info.fileList
      const files = []
      for (let v of info.fileList) {
        if (v.status === 'done') {
          const items = {}
          items.uid = v.uid
          items.fileName = v.name
          items.fileType = v.type
          items.fileSize = v.size
          items.filePath = v.path ?? v.response.message
          items.status = v.status
          files.push(items)
        }
      }
      const flag = find(info.fileList, { status: 'uploading' })
      if (flag && Object.keys(flag).length) return
      this.$emit('input', files)
      this.$emit('change', files)
    }
  }
}
</script>
