<template>
    <div>
        <el-image
            class="img"
            v-for="(item, index) in value"
            :key="index"
            :src="getFileUrl(item)"
            fit="cover"
            @click.native="preview(index)"
        >
            <div class="error" slot="error">
                <i class="el-icon-picture-outline fz24"></i>
            </div>
        </el-image>

        <template v-if="!value.length">-</template>

        <!-- 图片预览 -->
        <el-image
            class="preview"
            ref="preview"
            :preview-src-list="value.map(item => getFileUrl(item))"
        ></el-image>
    </div>
</template>

<script>
import { getFileUrl } from '@/assets/utils/host.js'
export default {
    name: 'FormImg',
    props: {
        value: { type: Array, default: () => [] }
    },
    data () {
        return {
            getFileUrl
        }
    },
    methods: {
        preview (index) {
            this.$refs.preview.showViewer = true
            this.$refs.preview.$children[0].index = index
        }
    }
}
</script>

<style lang="less" scoped>
.img {
    width: 64px;
    height: 64px;
    border: 1px solid #DCDFE6;
    border-radius: 4px;
    margin-right: 10px;
    margin-bottom: 10px;
    vertical-align: top;
    cursor: pointer;
    /deep/ .error {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #C0C4CC;
        background-color: #F5F7FA;
    }
}
.preview /deep/ .el-image__error {
    display: none;
}
</style>
