<template>
    <div class="es-simple-td">
        <div class="img-wrapper" v-if="info.type === '2'">
            <img
                class="img"
                v-for="(url, index) in info.imgList"
                :src="url"
                :key="index"
                @click="clickImg(index)"
            />
        </div>
        <div v-else-if="info.type === '3'">
            <a @click="checkImg" href="javascript:void(0)">{{
                $common.trim(info.imgBtnTitle, '查看图片')
            }}</a>
        </div>
        <div v-else>
            {{ $common.trim(info.content === 0 ? '0' : info.content, '--') }}
        </div>
        <template v-if="info.type === '2' || info.type === '3'">
            <es-image-viewer
                v-show="showImg"
                :imgUrlList="info && info.imgList"
                :index="currentIndex"
                @closeImageViewer="closeImageViewer"
            >
            </es-image-viewer>
        </template>
    </div>
</template>
<script>
export default {
    name: 'es-simple-td',
    props: {
        // title        标题
        // content      内容
        // type         展示内容的类型  1：文本， 2：图片， 3：图片并用查看图片
        // imgList      图片数组
        // imgBtnTitle  ‘查看图片’按钮文本
        info: {
            type: Object,
            default() {
                return {
                    title: '',
                    content: '',
                    type: '1',
                    imgList: [],
                    imgBtnTitle: ''
                };
            }
        }
    },
    data() {
        return {
            showImg: false,
            currentIndex: 0
        };
    },
    methods: {
        checkImg() {
            let self = this;
            self.showImg = true;
        },
        closeImageViewer() {
            let self = this;
            self.showImg = false;
            self.currentIndex = 1;
        },
        clickImg(index) {
            let self = this;
            self.currentIndex = index;
            self.showImg = true;
        }
    }
};
</script>
<style lang="scss" scoped>
.es-simple-td {
    .img {
        height: 50px;
        margin-right: 10px;
        display: inline-block;
    }
}
</style>
