<template>
<div>
<el-radio-group v-model="type" size="small">
  <el-radio-button label="card">卡片模式</el-radio-button>
  <el-radio-button label="list">列表模式</el-radio-button>
</el-radio-group>

<el-checkbox v-model="disabled" style="margin-left: 24px;">禁用</el-checkbox>
<br/>
<br/>
<honjo-upload v-model="value" action="http://localhost:3000/nas/upload" :before-upload="beforeUpload" :resp="resp" :type="type" :disabled="disabled" :limit="2" max-size="100K">
<div slot="tip">个数不超过3个， 大小不超过 100K</div>
</honjo-upload>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { FileResp } from '@@/components/upload/HonjoUpload.vue'

/**
 * @title  上传前钩子
 * @desc 上传前钩子函数， 可做自定义校验和文件移除(如单文件上传提示是否移除)。
 */
@Component
export default class LimitExample extends Vue {
  type = 'card'

  disabled = false

  value: FileResp[] = [
    {
      name: '1.jpg',
      url: 'http://localhost:3000/nas/download/1.jpg'
    }
  ]

  beforeUpload (file: any, fileList: any[]) {
    return new Promise((resolve, reject) => {
      this.$confirm('是否覆盖之前的文件', '提示').then(() => {
        fileList.splice(0, 1)
        resolve()
      }).catch(() => {
        reject(new Error('cancel'))
      })
    })
  }

  resp = (response: any) => response.data
}
</script>
