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

<style lang="less" scoped>
.mid {
  .mid__box {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    background-color: rgba(0, 0, 0, 0.5);
    .mid__box__img {
      flex: 0 0 auto;
      margin: auto;
      padding-bottom: 0.4rem;
      position: relative;
      width: 90%;
      max-width: 3.15rem;
      height: 4rem;
      max-height: 90%;
      a,
      img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: scale-down;
      }
      .mid__box__img--close {
        position: absolute;
        bottom: 0;
        left: calc(50% - 0.15rem);
        z-index: 100;
        width: 0.3rem;
        height: 0.3rem;
        background-image: url('./img/icon-close.png');
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 100% 100%;
        cursor: pointer;
      }
    }
  }
}
</style>
