<template>
    <div>
        <slot></slot>

        <div class="value" v-if="value.length">
            <img
                v-for="(item, index) in value"
                :key="index"
                :src="getFileUrl(item)"
                @click="$refs.previewer.show(index)"
            >
        </div>

        <template v-else>-</template>

        <!-- 图片预览 -->
        <div v-transfer-dom>
            <previewer :list="previewerList" ref="previewer"></previewer>
        </div>
    </div>
</template>

<script>
import { Previewer, TransferDom } from 'vux'
import { getFileUrl } from '@/assets/utils/host.js'
export default {
    name: 'FormImg',
    directives: { TransferDom },
    components: { Previewer },
    props: {
        value: { type: Array, default: () => [] }
    },
    data () {
        return {
            getFileUrl
        }
    },
    computed: {
        previewerList: vm => vm.value.map(item => ({ src: getFileUrl(item) }))
    }
}
</script>

<style lang="less" scoped>
.value {
    margin-top: -10px;
    margin-right: -10px;
    padding-bottom: 5px;
    img {
        width: 50px;
        height: 50px;
        border: 1px solid #DCDFE6;
        border-radius: 4px;
        margin-top: 10px;
        margin-right: 10px;
        vertical-align: top;
        object-fit: cover;
        cursor: pointer;
    }
}
</style>
