<template>
    <div class="upload-file">
        <upload 
          :action="url" 
          :headers="headers ? headers : null"
          :multiple="multiple === true ? true : false" 
          :paste="paste === false ? false : true"
          :disabled="disabled === true ? true : false" 
          :data="data ? data : null"
          :type="type === 'select' ? 'select' : 'drag'" 
          :show-upload-list="showuploadlist === true ? true : false"
          :accept="accept ? accept : null" 
          :format="format ? format : []"
          :maxsize="maxsize ? maxsize : null" 
          :on-before-upload="beforeupload" 
          :on-success="success"
          :on-error="error" 
          :on-remove="remove" 
          :on-format-error="formaterror"
          :on-exceeded-size="exceededsize" 
          :on-progress="progress">
            <div class="upload-text">
                <p>将图片拖到这里替换</p>
                <p><span class="text-style">本地上传</span>或<span class="text-style">从素材库选择</span></p>
            </div>
        </upload>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Emit } from 'vue-property-decorator';

@Component({})
export default class UploadFile extends Vue {

    /**
     * 上传路径
     * @type {any}
     * @memberof UploadFile
     */
    public url: string = '//jsonplaceholder.typicode.com/posts/';

    /**
     * 设置上传的请求头部
     * @type {Object}
     * @memberof UploadFile
     */
    @Prop() public headers?: Object;

    /**
     * 是否支持多选文件
     * @type {boolean}
     * @memberof UploadFile
     */
    @Prop() public multiple?: boolean;

    /**
     * 是否支持粘贴上传文件
     * @type {boolean}
     * @memberof UploadFile 
     */
    @Prop() public paste?: boolean;

    /**
     * 是否禁用
     * @type {boolean}
     * @memberof UploadFile 
     */
    @Prop() public disabled?: boolean;

    /**
     * 上传时附带的额外参数
     * @type {any}
     * @memberof UploadFile 
     */
    @Prop() public data?: any;

    /**
     * 上传控件的类型,可选值为 select(点击选择),drag(支持拖拽)
     * @type {any}
     * @memberof UploadFile 
     */
    @Prop() public type?: any;

    /**
     * 是否显示已上传文件列表
     * @type {boolean}
     * @memberof UploadFile
     */
    @Prop() public showuploadlist?: boolean;

    /**
     * 接受上传的文件类型
     * @type {string}
     * @memberof UploadFile
     */
    @Prop() public accept?: string;

    /**
     * 支持的文件类型,与 accept 不同的是,format 是识别文件的后缀名,accept 为 input 标签原生的 accept 属性,
     * 会在选择文件时过滤,可以两者结合使用
     * @type {Array<any>}
     * @memberof UploadFile
     */
    @Prop() public format?: Array<any>;

    /**
     * 文件大小限制,单位 kb
     * @type {number}
     * @memberof UploadFile
     */
    @Prop() public maxsize?: number;

    /**
     * 上传文件之前的钩子,参数为上传的文件,若返回 false 或者 Promise 则停止上传
     */
    @Emit()
    public beforeupload(file:any) {
        console.log('beforeupload---------'+file);
    }

    /**
     * 文件上传成功时的钩子,返回字段为 response, file, fileList
     */
    @Emit()
    public success(response: any, file: any, fileList: any) {
        console.log('success---------' + file);
    }

    /**
     * 文件上传时的钩子,返回字段为 event, file, fileList
     */
    @Emit()
    public progress(event: any, file: any, fileList: any) {
        console.log('progress---------' + file);
    }

    /**
     * 文件上传失败时的钩子,返回字段为 error, file, fileList
     */
    @Emit()
    public error(error: any, file: any, fileList: any) {
        console.log('error---------' + file);
    }

    /**
     * 文件列表移除文件时的钩子,返回字段为 file, fileList
     */
    @Emit()
    public remove(file: any, fileList: any) {
        console.log('remove---------' + file);
    }

    /**
     * 文件格式验证失败时的钩子,返回字段为 file, fileList
     */
    @Emit()
    public formaterror(file: any, fileList: any) {
        console.log('formaterror---------' + file);
    }

    /**
     * 文件超出指定大小限制时的钩子,返回字段为 file, fileList
     */
    @Emit()
    public exceededsize(file: any, fileList: any) {
        console.log('exceededsize---------' + file);
    }

}
</script>

<style lang='less'>
@import './upload-file.less';
</style>