<template>
  <div v-if="!options.text" @click="click" class="image mb-6 last:mb-0 mx-auto">
    <img v-if="options.preview" :style="options.style" :src="options.image" :large="options.image.split('?')[0]" :preview="1" @click="handleClick"/>
    <img v-else :style="options.style" :src="options.image"/>
    <div v-if="options.marks" class="mark flex justify-center items-center">
      <span :style="options.marksStyle" v-html="options.marks"></span>
    </div>
  </div>
  <div v-else class="image mb-6 last:mb-0 mx-auto">
    <img  v-if="options.preview" class="mb-1" :style="options.style" :src="options.image" :large="options.image.split('?')[0]"  :preview="1" @click="handleClick"/>
    <img v-else class="mb-1" :style="options.style" :src="options.image"/>
    <v-text :options="descOptions"></v-text>
  </div>
</template>
<script>
import Base from './base';
// import EventBus from '@/utils/eventBus.js';

export default {
  name: 'v-image',
  extends: Base,
  computed: {
    descOptions(){
      const {text} = this.options;
      if(!text) return;
      return {
        color: '#333',
        size: 0.9,
        ...(typeof text === 'string' ? { text: text } : text),
      }
    }
  },
  methods: {
    handleClick(){
      const { preview } = this.options;
      console.log("preview", preview);
      this.click()
      if(preview==undefined) return;
      console.log("preview", preview);
      this.$previewRefresh()
    }
  }
}
</script>
<style lang="less">
.image {
  position: relative;
  .mark {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    color: #fff;
    // font-family: 'STXinwei', Times, serif;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 2px;
  }
}
</style>
