<template>
    <div class="ht-base-upload-space-demo">
        <div class="demo-upload-list" v-for="item in uploadList">
            <template v-if="item.status === 'finished'">
                <img :src="item.url">
                <div class="demo-upload-list-cover">
                    <ht-base-icon type='LiRa_preview' @click.native="handleView(item.name)"></ht-base-icon>
                    <ht-base-icon type='LiRa_delete' @click.native="handleRemove(item)"></ht-base-icon>
                </div>
            </template>
            <template v-else>
                <ht-base-progress v-if="item.showProgress" :percent="item.percentage" hide-info></ht-base-progress>
            </template>
        </div>
        <ht-base-upload
                class="demo-upload-space"
                ref="upload"
                :show-upload-list="false"
                :default-file-list="defaultList"
                :on-success="handleSuccess"
                :format="['jpg','jpeg','png']"
                :max-size="20480"
                :on-exceeded-size="handleMaxSize"
                :before-upload="handleBeforeUpload"
                multiple
                type="drag"
                action="//jsonplaceholder.typicode.com/posts/"
                style="display: inline-block;width:120px;">
            <div class="demo-upload-operation">
                <ht-base-icon class="demo-upload-drag-icon" type='LiRa_upload'/>
                <div class="demo-upload-text">上传图片</div>
            </div>
        </ht-base-upload>
        <div class="demo-upload-tip">支持png、jpg、jpeg文件格式，大小不超过20MB</div>
        <ht-base-modal title="View Image" v-model="visible">
            <img :src="'https://o5wwk8baw.qnssl.com/' + imgName + '/large'" v-if="visible" style="width: 100%">
        </ht-base-modal>
    </div>
</template>
<script>
    export default {
        name: 'HtBaseUploadSpaceDemo',
        data() {
            return {
                defaultList: [
                    {
                        'name': 'a42bdcc1178e62b4694c830f028db5c0',
                        'url': 'https://i.loli.net/2017/08/21/599a521472424.jpg'
                    },
                    {
                        'name': 'bc7521e033abdd1e92222d733590f104',
                        'url': 'https://i.loli.net/2017/08/21/599a521472424.jpg'
                    }
                ],
                imgName: '',
                visible: false,
                uploadList: []
            }
        },
        methods: {
            handleView(name) {
                this.imgName = name;
                this.visible = true;
            },
            handleRemove(file) {
                const fileList = this.$refs.upload.fileList;
                this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
            },
            handleSuccess(res, file) {
                file.url = 'https://i.loli.net/2017/08/21/599a521472424.jpg';
                file.name = '7eb99afb9d5f317c912f08b5212fd69a';
            },
            handleMaxSize(file) {
                this.$HtBaseMessage.error('文件大小不超过20MB！')
            },
            handleBeforeUpload() {
                const check = this.uploadList.length < 5;
                if (!check) {
                    this.$HtBaseMessage.error('最多只能上传5张！')
                }
                return check;
            }
        },
        mounted() {
            this.uploadList = this.$refs.upload.fileList;
        }
    }
</script>
<style lang="less">
    .ht-base-upload-space-demo {
        .demo-upload-list {
            display: inline-block;
            width: 120px;
            height: 120px;
            text-align: center;
            line-height: 120px;
            border: 1px dashed #d7d7d7;
            overflow: hidden;
            background: #fff;
            position: relative;
            margin-right: 4px;
            transition: border-color 0.2s ease;

            .demo-upload-list-cover {
                display: none;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                background: rgba(0, 0, 0, .6);
                transition: background 0.2s ease;

                i {
                    color: #fff;
                    font-size: 20px;
                    cursor: pointer;
                    margin: 0 2px;
                }
            }

            &:hover {
                border-color: #228EF8;

                .demo-upload-list-cover {
                    display: block;
                }
            }

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

        .demo-upload-space {
            width: 120px;
            display: inline-block;

            .demo-upload-operation {
                width: 118px;
                height: 118px;
                display: table-cell;
                vertical-align: middle;

                .demo-upload-drag-icon {
                    font-size: 24px;
                    color: #595959;
                }

                .demo-upload-text {
                    font-size: 12px;
                    margin: 0 0 4px;
                    color: #595959;
                }
            }

            &:hover {
                .demo-upload-operation {
                    .demo-upload-drag-icon, .demo-upload-text {
                        color: #228EF8;
                        transition: color 0.2s ease;
                    }
                }
            }
        }

        .demo-upload-tip {
            margin-top: 8px;
        }
    }

</style>

