<template>
    <div class="row  go-form-row flex-div go-form-file" v-show="inputItem.display == null ? true : inputItem.display"
         :style="txStyle">
        <div class="attach_header_bar clearfix" ref="attach_header_bar">

            <div style="position: relative;" :class="type">
                <Upload
                    ref="upload"
                    :data="posData"
                    :multiple="multiple"
                    :action="uploadAction"
                    :before-upload="handleBeforeUpload"
                    :format="formateAry"
                    :on-format-error="handleFormatError"
                    :on-exceeded-size="handleMaxSize"
                    :on-success="handleSuccess"
                    :on-error="handleError"
                    :headers="headers"
                    :on-remove="handleRemove"
                    :max-size="maxSize"
                >
                    <Button icon="ios-cloud-upload-outline">附件上传</Button>

                </Upload>

                <Button style="position: absolute;top:0;left:110px;" icon="md-copy">关联文档</Button>
            </div>


        </div>

        <div class="attach_container clearfix" v-show="fileList.length > 0" ref="attach_container" style="margin-top: 3px;">
            <div class="attach_number pull-left">
                <i class="icon goingicon icon-attachment"></i>
                <span>({{ fileList.length }})</span>
            </div>

            <div class="attach_items pull-left">
                <div :key="item.name" class="attachment_block attachmentShowDelete clearfix" v-for="item of fileList"
                     @mouseenter="onAttachmentMouseEnter(item)" @mouseleave="onAttachmentMouseLeave(item)">
                    <div v-show="item.showOperateFlag && !item.delFlag" class="attachment_operate clearfix">
                        <div class="operate_item" title="收藏">
                            <i class="icon goingicon icon-shoucang"></i>
                        </div>
                        <div class="operate_item" title="查看">
                            <i class="icon goingicon icon-chakanpingzheng"></i>
                        </div>
                        <div @click="downloadFile(item)" class="operate_item" title="下载">
                            <i class="icon goingicon icon-xiazai"></i>
                        </div>
                    </div>

                    <span class="fileTypeIcon pull-left" :class="fileTypeClass(item)"></span>
                    <a class="file_name pull-left" :href="downFileUrl(item)" :title="item.fileName"
                       target="downloadFileFrame" style="font-size:12px;color:#757575;"><i class="icon goingicon icon-attachment"></i>{{ item.fileName }}({{item.size}}KB)</a>

                    <span class="attach_preview_text" v-if="showPreview" @click="previewAttachment(item)">预览</span>
                    <span class="attach_del_text" v-if="showDelete" @click="deleteAttachment(item)">删除</span>
                </div>
            </div>
        </div>

        <!--附件上传窗口-->
        <div :id="fileDivId" style="display: none">
            <div style="padding: 20px">

            </div>
        </div>
    </div>
</template>

<script>
    import {AssertUtils, fileUtils} from "goingutils";
    import formMixin from "../../mixins/formMixins";
    import UploadFileMixins from "../ctlMixins/UploadFileMixins";
    import FileUtils from "../../jsCom/utils/FileUtils";


    export default {
        name: "go-form-file",
        mixins: [formMixin, UploadFileMixins],
        data: function () {
            return {
                fileList: []
            };
        },
        props: {
            type: {
                type: String,
                default: 'button'
            },
            //是否显示关联文档
            relFileBox: {
                type: Boolean,
                default: false
            },
            value: {}
        },
        computed: {
            txStyle() {
                let bcJson = {};
                if (this.type === 'simple') {
                    bcJson["lineHeight"] = '25px';
                } else {
                    bcJson["lineHeight"] = '30px';
                }
                return bcJson;
            },
            fileLen() {
                return this.fileList.length;
            }
        },
        methods: {
            //将bid的值回填
            beforeUpload() {
                this.$emit("input", this.bid);

                return true;
            },
            //根据bid获取到相应的附件
            loadRelFiles() {
                //加载附件信息
                FileUtils.loadFilesByBid(this.value, (datas) => {
                    if (datas && datas.length) {
                        this.datas = datas;
                        if (this.datas != null && this.datas[0] != null) {
                            this.datas.forEach((dataItem) => {

                                this.fileList.push({
                                    fileId: dataItem.id,
                                    fileName: dataItem.name,
                                    size:dataItem.size
                                });
                            });
                        }
                    }
                });
            },
            //鼠标移出事件
            onAttachmentMouseLeave(item) {
                item.showOperateFlag = false;
            },
            //鼠标移入事件
            onAttachmentMouseEnter(item) {
                item.showOperateFlag = true;
            },
            fileTypeClass({name}) {
                if (name != null && name.split(".").length > 0) {
                    let fileType = fileUtils._getFileType(
                        name.split(".")[name.split(".").length - 1]
                    );
                    if (AssertUtils.isNotEmpty(fileType)) {
                        return "icon goingicon icon-file-" + fileType;
                    } else {
                        return "icon goingicon icon-file";
                    }
                } else {
                    return "icon goingicon icon-file";
                }
            }
        },
        mounted() {
            this.loadRelFiles(false);
        },
        watch: {
            value() {
                this.loadRelFiles(false);
            }
        },
        components: {}
    };
</script>

