<template>
  <div v-if="!options.text" @click="click" class="image mb-6 last:mb-0 mx-auto">
    <img :style="options.style" :src="options.image" @click="handleClick" />
    <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 class="mb-1" :style="options.style" :src="options.image" @click="handleClick" />
    <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 { image, preview } = this.options;
      console.log('1');
      this.click();
      if(!preview) return;
      EventBus.$emit('preview', image);
    }
  }
}
</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>
