<template>
  <a-form-item v-bind="formItemLayout" :label="label">
    <a-upload
      v-decorator="[
        decoration,
        {
          rules: [{ required, message: `请上传${label}` }],
          getValueFromEvent: normFile
        }
      ]"
      style="width: 100%"
      :fileList="imageList"
      name="files"
      :beforeUpload="beforeUpload"
      listType="picture-card"
      :action="getUploadImageUrl(business)"
      :headers="uploadImageHeader"
      @change="handleChangeImg"
      @preview="handlePreview"
      :multiple="multiple"
    >
      <div v-if="imageList.length < maxLength">
        <a-icon type="plus" />
        <div class="ant-upload-text">上传图片</div>
      </div>
    </a-upload>
    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>
  </a-form-item>
</template>
<script>
import {
  getOneImageURL,
  getUploadImageHeader,
  handleUploadChange,
  imgBeforeUpload,
  getImageUrlList
} from '@/api/common/fileUpload'

export default {
  name: 'ImageUploader',
  props: {
    form: Object, // antdv form
    decoration: String, // 定义名称 如'image' 'thumbnail' 之类的
    label: String, // 字段标签
    // 布局设置参照antdv Form组件文档 https://www.antdv.com/components/form-cn/
    formItemLayout: {
      type: Object,
      default: () => ({
        labelCol: { sm: { span: 8 } },
        wrapperCol: { sm: { span: 16 } }
      })
    },
    required: Boolean, // 是否必填
    business: {
      type: String,
      default: 'default'
    }, // 上传业务编码 拼oss路径需要
    maxLength: {
      // 最大上传数量,一般就1个
      type: Number,
      required: false,
      default: 1
    },
    multiple: {
      // 是否支持多选, 不指定时且当最大上传数量大于1时为true
      type: Boolean,
      required: false,
      default() {
        return this.maxLength > 1
      }
    }
  },
  data() {
    return {
      imageList: [], // 文件List
      getUploadImageHeader,
      handleUploadChange,
      imgBeforeUpload,
      uploadImageHeader: getUploadImageHeader(),

      previewImage: null, // 预览图url
      previewVisible: false // 预览modal显示
    }
  },
  methods: {
    getOneImageURL,
    getUploadImageUrl() {
      return process.env.VUE_APP_URL + 'upload?fileType=IMG'
    },
    getImageUrlList,
    normFile(e) {
      if (Array.isArray(e)) {
        return e
      }
      return e && e.fileList
    },
    handleChangeImg({ fileList }) {
      this.loading = handleUploadChange(fileList)
      this.imageList = fileList
    },
    /**
     * 预览
     */
    handlePreview(file) {
      this.previewImage = file.url || file.thumbUrl
      this.previewVisible = true
    },
    // 上传文件之前的钩子
    beforeUpload(file, fileList) {
      // 如果选择的文件数量超过最大数量,取消多余的文件
      const index = fileList.findIndex((f) => f.uid == file.uid)
      if (index + 1 > this.maxLength) {
        return false
      }
      return imgBeforeUpload(file)
    },
    //
    handleCancel() {
      this.previewVisible = false
    },
    /**
     * 设置图片
     * @param urls 图片url数组
     */
    setValue(urls) {
      if (!urls || urls.length == 0) {
        console.warn('urls is empty or null')
        return
      }
      this.imageList = urls.map((url, i) => ({
        uid: -i - 1,
        name: `${i}.png`,
        status: 'done',
        url
      }))
      this.form.setFieldsValue({ [this.decoration]: this.imageList })
    },
    // 重置
    reset() {
      this.imageList = []
    },
    /**
     * 获取图片
     * @returns 图片url数组
     * */
    getValue() {
      return this.getImageUrlList(this.imageList)
    }
  },
  mounted() {}
}
</script>