<template>
  <view v-if="modalData.img" class="activityModal">
    <view class="content">
      <image :src="modalData.img" mode="widthFix" @click="goto" />
    </view>
    <view class="close">
      <i class="iconfont icon-close-line" @click="$emit('close')" />
    </view>
  </view>
</template>
<script>
import { saTrackEvent } from "@/utils/sa.js";
export default {
  props: {
    modalData: {
      type: Object,
      default() {
        return {};
      }
    },
    pageName: String
  },
  mounted() {
    saTrackEvent("MINI_PagePopupWindowExposure", {
      popupwindow_id: this.modalData.uid,
      popupwindow_name: this.modalData.componentName,
      page_name: this.pageName
    });
  },
  methods: {
    goto() {
      this.$emit("goto", this.modalData);
    }
  }
};
</script>

<style scoped lang="scss">
.activityModal {
  z-index: 9999;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  .content {
    max-width: 311px;
    // max-height: 360px;
    // background: $uni-bg-color;
    border-radius: $uni-border-radius-sm * 4;
    image {
      max-width: 100%;
      max-height: 100%;
      border-radius: $uni-border-radius-sm * 4;
    }
  }
  .close {
    margin-top: $uni-spacing-col-md;
    i {
      font-size: 33px;
      color: $white;
    }
  }
}
</style>
