<template>
  <div class="mid-right">
    <transition name="move-right">
      <div class="mid-right__box" v-if="isShow">
        <div class="mid-right__box__img">
          <a v-if="goUrl" :href="goUrl" target="_blank">
            <img :src="config.imgUrl || 'javascript:;'" alt="" />
          </a>
          <img v-else :src="config.imgUrl" alt="" />
          <div class="mid-right__box__img--close" @click="_close"></div>
        </div>
      </div>
    </transition>
  </div>
</template>
<script>
export default {
  name: 'extend-ad-midRight',
  props: {
    config: {}
  },
  data() {
    return {
      isShow: true
    };
  },
  computed: {
    goUrl() {
      return this.config.link;
    }
  },
  methods: {
    _close() {
      this.isShow = false;
    }
  }
};
</script>

<style lang="less" scoped>
.mid-right {
  position: fixed;
  top: 50%;
  right: 0;
  .mid-right__box {
    .mid-right__box__img {
      position: relative;
      display: inline-block;
      height: 0.5rem;
      a,
      img {
        display: block;
        height: 100%;
        width: auto;
      }
      .mid-right__box__img--close {
        position: absolute;
        top: -0.1rem;
        left: -0.1rem;
        z-index: 100;
        width: 0.2rem;
        height: 0.2rem;
        background-image: url('./img/icon-close.png');
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 100% 100%;
        cursor: pointer;
      }
    }
  }
}
</style>
