<template>
    <div class="image-purview">
        <template v-if="status === 'finished' || url">
            <img :src="url">
            <div class="image-purview-cover">
                <Icon type="ios-eye-outline" size="30" @click.native="purviewImage"></Icon>
                <Icon type="ios-trash-outline" v-if="remove" size="30" @click.native="removeImage"></Icon>
            </div>
        </template>
        <template v-else>
            <Progress v-if="progress" :percent="percentage" hide-info></Progress>
        </template>
        <modal-purview v-model="showModal" :url="url"></modal-purview>
    </div>
</template>

<script>

import modalPurview from './modal-purview'

export default {
    name: 'image-purview',
    props: {
        status: {
            type: String,
            default: 'finished'
        },
        url: {
            type: String,
        },
        progress: {
            type: Boolean,
            default: false,
        },
        percentage: {
            type: Number,
        },
        remove: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            showModal: false
        };
    },
    methods: {
        purviewImage() {
            this.showModal = true;
            this.$emit('purview', this.url);
        },
        removeImage() {
            this.$emit('remove-image', this.url);
        }
    },
    components: {
        modalPurview
    }
};
</script>

<style lang="scss">
.image-purview {
    margin: 0 auto;
    width: 100px;
    height: 100px;
    text-align: center;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    border: 1px solid #e8e8e8;
    align-items: center;
    justify-content: center;
    display: flex;

    .ivu-progress {
        width: 90%;
    }
}

.image-purview img {
    width: 100px;
    height: 100px;
}

.image-purview-cover {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
    align-items: center;
    justify-content: center;
}

.image-purview:hover .image-purview-cover {
    display: flex;
}

.image-purview-cover i {
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    margin: 0 2px;
}
</style>