<template>
  <div v-if="isLoginPopup" class="login-popup">
    <img class="login-popup--img" :src="popupInfo.img" alt="login-popup" @click="handleToLogin" />
    <div class="login-popup__close">
      <img
        class="login-popup__close--icon"
        src="@/assets/images/home/loginPopupClose.png"
        alt="close"
        @click="isLoginPopup = false"
      />
    </div>
  </div>
</template>
<script>
import { sStorage } from '@/service/sessionStorage.service';
import localStorage from '@/service/localStorage.service';
import { getLoginPopup } from '@/api/home.api';

export default {
  name: 'LoginPopup',
  props: {
    value: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      isLoginPopup: false,
      popupInfo: {}
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      const [data] = await getLoginPopup('home');
      if (!data) return;
      this.popupInfo = data;
      if (data.img) {
        this.showLoginPopup();
      }
    },
    showLoginPopup() {
      // this.$config.yxm
      if (localStorage.get('vccToken')) return;
      if (!sStorage.getItem('loginPopup')) {
        this.isLoginPopup = true;
        sStorage.setItem('loginPopup', 'loginPopup');
      }
    },
    handleToLogin() {
      this.isLoginPopup = false;
      if (this.popupInfo.jumpUrl) {
        window.location.href = this.popupInfo.jumpUrl;
        return;
      }
      this.$router.push({ name: 'Login' });
    }
  }
};
</script>
<style lang="less" scoped>
.login-popup {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  &--img {
    width: 80%;
    display: block;
    margin: 0 auto;
  }
  &__close {
    color: #fff;
    margin: 50px auto 0 auto;
    &--icon {
      width: 33px;
      display: block;
    }
  }
}
</style>
