<template>
    <div>
        <div class="form-image-group">
            <div class="form-image"
                v-for="(item, index) in fileList"
                :key="index"
                :style="{ width: width == null ? '250px' : (width + 'px'), height: height == null ? '250px' : (height + 'px') }">
                <img v-if="item"
                    :src="getImgUrl(item)" />
                <div class="action"
                    :style="{ width: width == null ? '250px' : (width + 'px'), height: height == null ? '250px' : (height + 'px') }">
                    <Icon v-if="!readonly"
                        custom="fa fa-times-circle"
                        @click="removeImage(index)"></Icon>
                    <Icon v-if="!readonly && index < fileList.length - 1 && fileList.length > 1"
                        custom="fa fa-arrow-circle-right"
                        @click="forwardImage(index)"></Icon>
                    <Icon v-if="!readonly && index > 0 && fileList.length > 1"
                        custom="fa fa-arrow-circle-left"
                        @click="backwardImage(index)"></Icon>
                    <Icon custom="fa fa-picture-o"
                        @click="previewImage(item)"></Icon>
                </div>
            </div>
            <Upload v-if="!readonly"
                accept="image/*"
                :action="uploadURL"
                :headers="uploadHeaders"
                :show-upload-list="false"
                :before-upload="beforeUpload"
                :on-success="onUploadSuccess">
                <div class="form-image"
                    v-if="fileList.length < maxCount || maxCount == null"
                    :style="{ width: width == null ? '250px' : (width + 'px'), height: height == null ? '250px' : (height + 'px') }">
                    <Icon custom="fa fa-plus-circle"
                        color="#999"
                        :style="{ 'font-size': width == null ? '25px' : ((width / 3) + 'px'), cursor: 'pointer' }"></Icon>
                </div>
            </Upload>
            <Input type="text"
                :value="value"
                v-show="false" />
        </div>
        <Modal title="预览"
            v-model="preview"
            width="70%">
            <img :src="getImgUrl(imageUrl)"
                v-if="preview"
                style="width: 100%">
        </Modal>
    </div>
</template>
<script>
    import mixinPage from '../../mixins/page';

    export default {
        mixins: [mixinPage],
        data() {
            return {
                preview: false,
                imageUrl: null
            };
        },
        props: {
            // 值
            value: {
                type: String
            },
            // 只读
            readonly: {
                type: Boolean,
                default: false
            },
            // 最大上传数量
            maxCount: {
                type: Number
            },
            // 图片宽度
            width: {
                type: Number
            },
            // 图片高度
            height: {
                type: Number
            }
        },
        computed: {
            // 文件列表
            fileList() {
                let list = [];
                if (this.value && this.value !== '') {
                    try {
                        list = this.value.split(',');
                    } catch (e) {
                        // console.log(e);
                    }
                }

                return list;
            },
            // 显示列表
            showList() {
                if (this.fileList === []) {
                    return [null];
                } else {
                    return this.fileList;
                }
            }
        },
        methods: {
            // 上传之前
            beforeUpload() {
                if (this.maxCount != null) {
                    let list = this.fileList;
                    if (list.length >= this.maxCount) {
                        this.error('数量不能大于' + this.maxCount + '！');
                        return false;
                    }
                }
            },
            // 上传成功
            onUploadSuccess(res, file) {
                let list = this.fileList;

                list.push(file.response.data[0]);

                this.$emit('input', list.join(','));
            },
            // 前移图片
            forwardImage(index) {
                let list = this.fileList;
                if (index < list.length - 1) {
                    let id = list.splice(index, 1);
                    list.splice(index + 1, 0, id);

                    if (list.length === 0) {
                        this.$emit('input', null);
                    } else {
                        this.$emit('input', list.join(','));
                    }
                }
            },
            // 后移图片
            backwardImage(index) {
                let list = this.fileList;
                if (index > 0) {
                    let id = list.splice(index, 1);
                    list.splice(index - 1, 0, id);

                    if (list.length === 0) {
                        this.$emit('input', null);
                    } else {
                        this.$emit('input', list.join(','));
                    }
                }
            },
            // 移除图片
            removeImage(index) {
                // this.confirm('确定要移除吗？', () => {
                let list = this.fileList;

                list.splice(index, 1);

                if (list.length === 0) {
                    this.$emit('input', null);
                } else {
                    this.$emit('input', list.join(','));
                }
                // })
            },
            // 预览
            previewImage(item) {
                this.imageUrl = item;
                this.preview = true;
            }
        }
    };
</script>
