<template>
  <div>
    <van-field
      :required="item.props[0].required"
      :name="item.label"
      :label="item.label"
      :disabled="item.props[0].disabled"
      :rules="rules(item.props[0], item.label)"
    >
      <template #input>
        <van-uploader
          v-model="fileList"
          :after-read="afterRead"
          :accept="item.accept"
          :max-count="item.props[0].limit"
          :max-size="50 * 1024 * 1024"
          :disabled="item.props[0].disabled"
          image-fit="contain"
          :before-delete="deleteImg"
          @oversize="onOversize"
        />
      </template>
    </van-field>
  </div>
</template>
<script>
import { Notify } from 'vant'
import { uploadUrlUpgrade, deleteUrlUpgrade } from './../../api/UpgradeUploadAttachments'

export default {
  name: 'UpgradeUploadAttachments',
  props: {
    item: {
      default: () => { },
      type: Object
    },
    // 校验规则
    rules: {
      type: Function,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      fileList: [],
      fileErrFlag: 0
    }
  },
  computed: {
    token () {
      return this.$store.state.app.token
    }
  },
  watch: {
    'item.props': {
      handler () {
        this.item.componentFeedback[0].value = this.item.props[0].value.map(val => {
          return {
            fileName: val.fileName,
            filePath: val.filePath
          }
        })
      },
      deep: true,
      immediate: true
    },
    'item.label': {
      handler () {
        this.item.componentFeedback[0].label = this.item.label
      },
      deep: true,
      immediate: true
    }
  },
  created () {
    this.init()
  },
  methods: {
    // 初始化默认值
    init () {
      this.item.props[0].limit = this.item.props[0].limit || 1000
      this.item.accept = this.item.accept || '.jpg,.jpeg,.png,.gif,.bmp,.xls,.xlsx,.doc,.docx,.pdf,.ppt,.pptx,.zip,.rar,.txt,.mp3,.mp4,.mkv,.mov,.m4v,.avi,.3gp'
    },
    // 上传
    afterRead (file) {
      // 此时可以自行将文件上传至服务器
      file.status = 'uploading'
      file.message = '上传中...'
      const formData = new FormData()
      formData.append('file', file.file, file.file.name)
      uploadUrlUpgrade(formData).then(res => {
        if (res.code === 200) {
          file.status = 'done'
          file.message = ''
          file.fileName = res.data.fileName
          file.filePath = res.data.filePath
          this.item.props[0].value.push({
            fileName: file.fileName,
            filePath: file.filePath
          })
        }
      }).catch(() => {
        file.fileName = ''
        file.filePath = ''
        this.fileErrFlag++
        file.fileErrFlag = this.fileErrFlag
        file.status = 'failed'
        file.message = '上传失败'
      })
    },
    // 文件超大小-升级单后端此处限制了10M
    onOversize (file) {
      Notify({ type: 'warning', message: '文件不能超过50M' })
    },
    // 删除功能
    deleteImg (file) {
      if (file.filePath !== '') {
        deleteUrlUpgrade(file.filePath).then(res => {
          if (res.code === 200) {
            Notify({ type: 'success', message: '删除成功' })
            this.fileList = this.fileList.filter(item => {
              return item.filePath !== file.filePath
            })
            this.item.props[0].value = this.item.props[0].value.filter(val => {
              return val.filePath !== file.filePath
            })
          }
        }).catch(() => {
          Notify({ type: 'danger', message: '删除失败' })
        })
      } else {
        // 上传失败文件的删除逻辑
        this.fileList = this.fileList.filter(item => {
          return item.fileErrFlag !== file.fileErrFlag
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  .preview-cover {
    position: absolute;
    box-sizing: border-box;
    bottom: 0;
    width: 100%;
    padding: 4px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background: rgba(0, 0, 0, 0.3);
  }
</style>
