<template>
  <div>
    <div v-if="imgList.length > 0">
      <el-tooltip effect="dark" placement="right">
        <el-button type="text" @click="isShowImgPreviewDialog = true">点击查看</el-button>
        <div slot="content"><img :src="HOME_URL + imgList[0]" width="100"></div>
      </el-tooltip>

      <img-preview :is-show="isShowImgPreviewDialog" :home-url="HOME_URL" :img-list="imgList" @closeImgPreviewDialog="closeImgPreviewDialog" />
    </div>

    <div v-else>-</div>
  </div>
</template>

<script>
import ImgPreview from '@/components/common/img-preview'
export default {
  name: 'TableColumnImgPreview',
  components: {
    'img-preview': ImgPreview
  },
  props: {
    homeUrl: {
      type: String,
      default: () => {
        return ''
      }
    },
    imgURL: {
      type: String,
      default: () => {
        return ''
      }
    }
  },
  data() {
    return {
      isShowImgPreviewDialog: false
    }
  },
  computed: {
    imgList() {
      if (this.imgURL && this.imgURL !== '' && this.imgURL !== null) {
        return this.imgURL.split(',')
      } else {
        return []
      }
    }
  },
  methods: {
    closeImgPreviewDialog() {
      this.isShowImgPreviewDialog = false
    }
  }
}
</script>

<style scoped>

</style>
