<template>
    <div class="zj-fileUpload">
        <div class="nr" :class="{'nr-100': !uploadBut}">
            <div
                v-for="(item, index) of files"
                :key="index"
                class="item"
            >
                <div
                    class="name"
                    :class="{'del': item.operation === 'del'}"
                >
                    <span :title="item.name">{{ item.name }}</span>
                </div>
                <div class="operation">
                    <i
                        v-show="item.operation !== 'del'"
                        class="el-icon-download"
                        title="下载"
                        @click="down(item)"
                    ></i>
                    <i
                        v-if="uploadBut"
                        v-show="item.operation !== 'del'"
                        class="el-icon-delete"
                        title="删除"
                        @click="delFile(item)"
                    ></i>
                    <i
                        v-show="item.operation === 'del'"
                        class="el-icon-refresh"
                        title="撤销"
                        @click="item.operation = ''"
                    ></i>
                </div>
            </div>
        </div>
        <button
            v-if="uploadBut"
            class="but"
            @click="selectFile()"
        >上传文件</button>
        <input
            ref="licFile"
            type="file"
            style="display: none;"
            @change="tirggerFile($event)"
        >
    </div>
</template>

<script>
export default {
    name: 'fileUploadBox',
    props: {
        files: {
            type: Array,
            default: function () {
                return [
                    {
                        name: '测试', // 文件名
                        url: '', // 已上传的文件的路径
                        file: null, // 选择上传的文件
                        operation: '' // add：新添加的文件，需要向后台上传 del：删除已上传的文件，需要让后台删除
                    }
                ];
            }
        },
        uploadBut: {
            type: Boolean,
            default: function () {
                return true;
            }
        }
    },
    data () {
        return {
        };
    },
    mounted () {
        let that = this;
    },
    methods: {
        // 上传文件按钮
        selectFile () {
            let that = this;
            that.$refs['licFile'].click();
        },
        // 实现文件选择功能
        tirggerFile ($event) {
            let that = this;
            if (event.target.files[0]) {
                that.files.push({
                    name: event.target.files[0].name,
                    url: '',
                    file: event.target.files[0],
                    operation: 'add' // add or del
                })
            }
        },
        // 文件删除
        delFile (fileObj) {
            let that = this;
            if (fileObj.operation === 'add') {
                for (let i = 0; i < that.files.length; i++) {
                    if (that.files[i] === fileObj) {
                        that.files.splice(i, 1);
                        break;
                    }
                }
            } else {
                fileObj.operation = 'del';
            }
        },
        // 文件下载
        down (fileObj) {
            let that = this;
            if (fileObj.url && fileObj.name) {
                let url = fileObj.url.replace(/\\/g, '/');
                const xhr = new XMLHttpRequest();
                xhr.open('GET', url, true);
                xhr.responseType = 'blob';
                xhr.onload = () => {
                    if (xhr.status === 200) {
                        var fileName = fileObj.name;
                        // 获取文件blob数据并保存
                        that.saveAs(xhr.response, fileName);
                    }
                };
                xhr.send();
            }
        },
        saveAs (data, name) {
            var urlObject = window.URL || window.webkitURL || window;
            var exportBlob = new Blob([data]);
            var saveLink = document.createElementNS('http://www.w3.org/1999/xhtml', 'a')
            saveLink.href = urlObject.createObjectURL(exportBlob);
            saveLink.download = name;
            saveLink.click();
        }
    }
}
</script>

<style lang="less">
.zj-fileUpload {
    min-height: 130px;
    position: relative;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    resize: vertical;
    overflow: hidden;
    .nr {
        height: calc(100% - 30px);
        padding: 5px 0;
        overflow: auto;
        .item {
            height: 23px;
            line-height: 23px;
            padding: 1px 15px;
            overflow: hidden;
            .name {
                width: calc(100% - 50px);
                height: 100%;
                color: #006fff;
                float: left;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
            .del {
                color: #ccc;
                text-decoration: line-through;
            }
            .operation {
                width: 50px;
                height: 100%;
                float: right;
                font-size: 16px;
                text-align: right;
                .el-icon-download {
                    color: #006fff;
                    cursor: pointer;
                }
                .el-icon-delete {
                    margin-left: 7px;
                    color: red;
                    cursor: pointer;
                }
                .el-icon-refresh {
                    color: #006fff;
                    cursor: pointer;
                }
            }
        }
    }
    .nr-100 {
        height: 100%;
    }
    .but {
        height: 30px;
        width: 100%;
        position: absolute;
        bottom: 0;
        border-radius: 0;
        // 外观
        font-size: 12px;
        line-height: 1;
        color: #fff;
        text-align: center;
        padding: 7px 15px;
        background-color: #409EFF;
        border: 1px solid #409EFF;
        cursor: pointer;
        &:hover {
            background: #66b1ff;
            border-color: #66b1ff;
            color: #fff;
        }
    }
}
</style>
