<template>
  <div ref="loginGuide" class="login-guide">
    <svg-icon icon-class="closeLoginGuide" class="closeLoginGuide" @click.native="close" />
    <cr-image src="https://img.lkbang.net/auth-logo.1c5fddec.png" />
    <span class="desc">登录羊小咩打开美好生活</span>
    <cr-button shape="circle" type="primary" @click="handleLogin">立即登录</cr-button>
  </div>
</template>
<style lang="less" scoped>
.login-guide {
  width: 355px;
  height: 54px;
  background: rgba(0, 0, 0, 0.7);
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 8px 47px 47px 8px;
  padding: 0 5px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .closeLoginGuide {
    position: absolute;
    width: 18px;
    height: 18px;
    top: -7px;
    left: -7px;
    z-index: 2;
  }
  /deep/ .cr-image {
    width: 44px !important;
    height: 44px !important;
    img {
      width: 44px;
      height: 44px;
      border-radius: 6px;
    }
  }
  .desc {
    color: @white;
    font-size: 14px;
  }
  /deep/ .cr-button {
    width: 115px;
  }
}
</style>
<script>
import { mapState } from 'vuex';
export default {
  data() {
    return {};
  },
  computed: {
    ...mapState({
      userInfo: state => state.pay.userInfo || {}
    })
  },
  methods: {
    handleLogin() {
      if (!this.userInfo.phoneNumber && (this.$config.qinghai || this.$config.yxm)) {
        this.$track.registeredEvents('H5_HomePageLoginSuspendedWindowClick');
        this.$router.push({ path: '/login', query: { backUrl: location.href } });
      }
    },
    close() {
      // console.log(this.$refs.loginGuide)
      if (this.$refs.loginGuide) {
        this.$refs.loginGuide.style.display = 'none';
      }
    }
  }
};
</script>
