import { Vue, Component, Prop, Emit } from 'vue-property-decorator';
import './upload-file.less';

@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);
    }

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