<template>
  <div style="height: 105px; box-sizing: border-box" class="clearfix">
    <a-upload
      :file-list="fileList"
      :custom-request="customRequest"
      list-type="picture-card"
      @preview="handlePreview"
      :remove="handleRemove"
      :before-upload="beforeUpload"
    >
      <div v-if="!imageUrl">
        <a-icon :type="loading ? 'loading' : 'plus'" />
        <div class="ant-upload-text">Upload</div>
      </div>
    </a-upload>
    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
      <img alt="example" style="width: 100%" :src="imageUrl">
    </a-modal>
  </div>
</template>

<script>
import { getAllowType,uploadFile } from '@/common/api/upload.js'

export default {
  props:
    ['imgClear', 'imgUrl','that','fileType'],
  data () {
    return {
      fileList: [],
      previewVisible: false,
      previewImage: '',
      imageUrl: '',
      loading: false,
      allowUpload:[]
    }
  },
  mounted () {
    this.imgUrl
      ? this.$set(this.fileList, 0, {
          uid: 'test',
          name: 'test',
          status: 'done',
          url: 'test',
          thumbUrl: this.imgUrl.indexOf('https://file.yallaludo.com/') == -1 ? 'https://file.yallaludo.com/' + this.imgUrl : this.imgUrl,
        }) && (this.previewImage = this.imgUrl) && (this.imageUrl = this.imgUrl)
      : '';
    
    getAllowType(this.fileType).then(res=>{
      this.allowUpload = res.data
    })
  },
  methods: {
    beforeUpload (file) {

      const isJpgOrPng  = !(this.allowUpload.indexOf('.'+file.type.substring(file.type.indexOf('/')+1,file.type.length))==-1)
  
      if(!isJpgOrPng){
        this.$message.error('文件格式错误！')
      }
        

      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
         this.$message.error('Image must smaller than 2MB!')
      }
      return isJpgOrPng && isLt2M
    },
    customRequest (obj) {
      this.loading = true

      // message 不允许的文件格式

      const formData = new FormData()
      formData.append('file', obj.file)

      uploadFile(formData,this.fileType).then((res) => {
        console.log(res)
        if (res.code == 10000) {
          this.$message.success(res.data.message)
          this.imageUrl = res.data.fullUrl
          console.log(res.data.fullUrl)

          //
          const rep = {
            uid: obj.file.uid,
            name: obj.file.name,
            status: 'done',
            url: window.URL.createObjectURL(obj.file),
            thumbUrl: window.URL.createObjectURL(obj.file),
          }
          this.$set(this.fileList, 0, rep)
        } else {
          this.$message.error(res.data.message)
        }
        this.loading = false

        this.$emit('getImgUrl', res.data.fullUrl,this.that)
      })
    },

    handleCancel () {
      this.previewVisible = false
    },

    async handlePreview (file) {
      console.log(file)
      file.uid == 'test' ? '' : (this.previewImage = file.url || file.preview)
      this.previewVisible = true
    },

    // 取消图片
    handleRemove (file) {
      console.log(file)
      this.fileList = []
      this.imageUrl = ''
      return true
    },

    getObjectURL (file) {
      var url = null
      if (window.createObjcectURL != undefined) {
        url = window.createOjcectURL(file)
      } else if (window.URL != undefined) {
        url = window.URL.createObjectURL(file)
      } else if (window.webkitURL != undefined) {
        url = window.webkitURL.createObjectURL(file)
      }
      return url
    },
  },
  watch: {
    imgClear (val) {
      console.log(val)
      this.fileList = []
      this.imageUrl = ''
    },
  },
}
</script>

<style lang="less" scoped>
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>
