<template>
    <div class="input-group">
        <div :class="{ 'm-row': hasImage }">
            <div class="row">
                <span class="col-md-12">
                    <div class='room_img' v-for="item in newFieldValue.displayValue">

                        <AntdAuthImage :authSrc="Common.getThumbnailImageSrc(className, item)" />

                        <span @click="removeImage(item)" class="glyphicon glyphicon-trash" v-if="!readonly"></span>
                    </div>
                    <div class="clearfix"></div>
                </span>
            </div>
        </div>

        <div id="app">
            <div>
                <input autocomplete="off" id="file" type="file" class="form-control" @change="onFileChange"
                    :readonly="!readonly" />
            </div>
        </div>
        <Loading v-if="loading"></Loading>
    </div>
</template>

<script>

import AntdAuthImage from "../widget/AntdAuthImage.vue";
import Common from "../../common/Common.js";
import { notificationError } from '../../common/notification.js';

export default {
    props: ["field", "fieldValue", "className", "readonly"],

    data: function () {
        this.Common = Common;
        return {
            newFieldValue: {
                displayValue: [],
                displayType: "String"
            },
            show: false,
            loading: false,
        }
    },

    components: {
        AntdAuthImage
    },

    methods: {
        /**
         * 删除图片
         * @param  {String} item 图片Name
         */
        removeImage(item) {
            _self = this;
            var index = _self.newFieldValue.displayValue.indexOf(item);
            if (index > -1) {
                _self.newFieldValue.displayValue.splice(index, 1);
            }
            var images = _self.newFieldValue.displayValue.join(",");
            _self.fieldValue.displayValue[0] = images;
            this.$emit("valueChanged", _self.fieldValue);
        },

        /**
         * 选择图片发生改变
         * @param  {[type]} e [description]
         * @return {[type]}   [description]
         */
        onFileChange(e) {
            var files = e.target.files || e.dataTransfer.files;
            if (!files.length)
                return;
            this.uploadImage(files[0]);
        },

        /**
   * 上传图片
   * @param  {File} selectedFile 选择的文件
   */
        uploadImage: function (selectedFile) {
            var _self = this;
            if (selectedFile == undefined) {
                return;
            }
            if (!/image\/\w+/.test(selectedFile.type)) {
                alert("请确保文件为图像类型");
                return;
            }
            var formData = new FormData();
            formData.append("images", selectedFile);
            formData.append("className", _self.className);
            _self.loading = true;
            $.ajax({
                url: Common.getApiURL("file/imageUpload"),
                type: "post",
                beforeSend: function (request) {
                    Common.addTokenToRequest(request);
                },
                data: formData,
                contentType: false,
                processData: false,
                success: function (data) {
                    _self.loading = false;
                    if (data.errorCode == 0) {
                        _self.addImgs(data.datas);
                    } else {
                        notificationError(data.errorMessage, '图片上传失败');
                    }

                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    _self.loading = false;
                    Common.processException(XMLHttpRequest, textStatus, errorThrown);
                }
            });
        },

        /**
         * 添加图片
         * @param {String} imageName 添加的图片名称
         */
        addImgs: function (imageNames) {
            var _self = this;

            if (_self.newFieldValue.displayValue == undefined) {
                _self.newFieldValue.displayValue = new Array();
            }

            if (imageNames != null) {
                imageNames.forEach(element => {
                    _self.newFieldValue.displayValue.push(element);
                });
            }

            var images = _self.newFieldValue.displayValue.join(",");
            _self.fieldValue.displayValue[0] = images;
            this.$emit("valueChanged", _self.fieldValue);
            _self.show = false;
        },

        toggleShow() {
            this.show = !this.show;
        },
    },

    mounted: function () {
        var _self = this;
        var displayValue = _self.fieldValue.displayValue;
        if (displayValue != undefined
            && displayValue.length > 0) {
            _self.newFieldValue.displayValue = displayValue[0].split(",");
        }
    },

    computed: {
        /**
         * 判断是否有图片
         * @return {Boolean} 是否有图片
         */
        hasImage: function () {
            if (this.newFieldValue != undefined
                && this.newFieldValue.displayValue != undefined
                && this.newFieldValue.displayValue[0] != undefined
                && this.newFieldValue.displayValue[0].length > 0) {
                return true;
            } else {
                return false;
            }
        }
    }
}
</script>

<style scoped>
.inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.room_img {
    width: 150px;
    height: 100px;
    float: left;
    margin-right: 10px;
}

.room_img img {
    width: 100%;
    height: 100%;
}

.room_img span {
    position: relative;
    right: -130px;
    top: -100px;
    font-size: 20px;
    color: #43a51e;
    cursor: pointer;
}

.label-btn {
    color: white;
    background-color: #006699;
    display: inline-block;
    padding: 5px 15px;
    border-radius: 5px;
}

.label-btn:hover {
    color: white;
    background-color: #003399;
    display: inline-block;
    padding: 5px 15px;
    border-radius: 5px;
    cursor: pointer;
}
</style>