<template>
    <div class="row go_file_single_input go-form-row" v-show="inputItem.display == null ? true : inputItem.display">
        <!--        常规label-->
        <go-label :labelWidth="labelWidth" :labelAlign="labelAlign" :item="inputItem"></go-label>
        <div class=" pull-left" :class="'go-content ' + getInputWid()" :style="getInputWidStyle()">
            <div class="go-content-body go-file-single-input">
                <Upload
                    ref="upload"
                    :data="posData"
                    :multiple="false"
                    :action="uploadAction"
                    :before-upload="handleBeforeUpload"
                    :format="formateAry"
                    :on-format-error="handleFormatError"
                    :on-exceeded-size="handleMaxSize"
                    :on-success="handleSuccess"
                    :on-error="handleError"
                    type="drag"
                    :on-remove="handleRemove"
                    :headers="headers"
                    :max-size="maxSize"
                >
                    <Button icon="ios-image">{{fileTempName}}</Button>
                </Upload>
            </div>

        </div>


        <Icon @click="downFile" v-show="downFlag&&showSeeImgFlag" title="下载" :size="20" style="margin-left: 5px;margin-top: 4px;cursor: pointer" type="md-cloud-download" class="pull-left"/>

        <Icon v-preview="showImage(value)" title="预览" :alt="fileTempName"  preview-title-enable="true"
              preview-nav-enable="true" type="ios-eye" style="margin-left: 5px;margin-top: 4px;cursor: pointer" v-show="showPreview&&showSeeImgFlag" :size="22" class="pull-left" />



    </div>
</template>

<script>
    import {AssertUtils} from "goingutils";
    import GoLabel from "./commponents/go-label";
    import formMixin from "../../mixins/formMixins";
    import UploadFileMixins from "../ctlMixins/UploadFileMixins";


    export default {
        name: "go-file-single-input",
        mixins: [formMixin, UploadFileMixins],
        data() {
            return {
                showDownLink: false,
                fileTempName: '附件上传',
                datas: []
            };
        },
        props: {
            btnStyle: {
                type: Object,
                default: null
            }
        },
        computed: {
            //显示查看图标
            showSeeImgFlag(){
                if(this.fileTempName==='附件上传'){
                    return false;
                }else if(AssertUtils.isNotEmpty(this.fileTempName)){
                    return true;
                }
                return false;
            },
            _inputStyle() {
                if (this.btnStyle) {
                    return {...this.btnStyle};
                } else {
                    return {};
                }
            },
        },
        methods: {
            beforeUploadFun() {
                //删除上次提交的附件
                this.clearPreUploadFile();
                this.showList = true;
            },
            // 处理数据
            afterUploadFile({fileId, fileName}, hasBackFlag = true) {
                if (AssertUtils.isNotEmpty(fileName)) {
                    this.showDownLink = true;
                    //隐藏上传进度
                    this.showList = false;
                    this.$refs.upload.clearFiles();
                    this.fileTempName = fileName;
                    //如果是进入界面  是初始化操作 不需要进行回调操作了
                    if (hasBackFlag) {
                        this.$emit("input", fileId);
                        this.$emit("backFun", {ids: fileId, names: fileName});
                    }
                }
            }
        },
        mounted() {
            if(AssertUtils.isNotEmpty(this.value)){
                this.fileTempId=this.value;
                this.loadFileName(this.value);
            }
        },
        watch: {
            //如果存在值 则需要修改内容值
            value(newVal) {
                this.fileTempId=newVal;
                if(!AssertUtils.isNotEmpty(this.fileTempName)){
                    this.loadFileName(this.value);
                }
            }
        },
        components: {
            GoLabel
        }
    };
</script>
