<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2020-07-16 10:44:45
 * @LastEditors: 无尘
 * @LastEditTime: 2020-09-11 17:34:41
 -->
<template>
  <div class="login-wrap">
    <section>
      <div class="login-body-top">
        <div class="login-body-head">
          <div class="login-body-head_inner border-box flex">
            <img class="login-body-logo" src="../../assets/logo.png" alt="logo" />
            <span class="login-body-title p-l-7">好办管理后台</span>
          </div>
        </div>
        <div class="login-body-qrcode">
          <div class="login-qrcode-inner border-box">
            <div class="qrcode-title font-18 color-303133 m-b-20">企业微信扫码登录</div>
            <div id="qrcode" title=""></div>
            <div class="qrcode-refresh m-t-20">
              <el-button class="font-12" type="text" >刷新 <span class="color-2f54eb iconfont iconshuaxin"></span></el-button>
            </div>
          </div>
        </div>
        <div class="bg-dot"></div>
        <div class="bg-dot-center"></div>
      </div>
      <div class="login-body-bottom"></div>
    </section>
    <footer class="p-t-35">
      <vue-gic-footer></vue-gic-footer>
    </footer>
  </div>
</template>
<script>
import fetch from '@/api/login.js';
const { getLoginQrcode } = fetch;

export default {
  name: 'LoginPage',
  data() {
    return {
      qrcodeNum: '', // 二维码数据
    };
  },
  mounted() {
    const that = this;
    that.getQrcode();
    // that.toLogin();
    if (!!localStorage.getItem('haoBanUser')) {
      localStorage.removeItem('haoBanUser');
    }
  },
  methods: {
    /**
     * @description: 处理路由跳转
     * @param {Object} val
     * @author: 无尘
     */
    toRouterView(val) {
      const that = this;
      // 模拟检查数据,有两个参数
      that.$router.push({
        path: val.path
      });
    },

    /**
     * @description: 登录---获取二维码字符串 API
     * @author: 无尘
     */
    getQrcode() {
      getLoginQrcode({})
        .then(res => {
          window.location.href = `${res.result}`;
        })
        .catch(function(error) {

        });
    }
  },
};
</script>
<style lang="less" scoped>
.login-wrap {
  width: 100%;
  min-height: 100vh;
  .p-l-7 {
    padding-left: 7px;
  }
  .login-body-top {
    position: relative;
    width: 100%;
    height: 431px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-color: #2f54eb;
    .login-body-head {
      width: 100%;
      .login-body-head_inner {
        width: 100%;
        padding: 22px 0 0 24px;
        img {
          width: 25px;
        }
        .login-body-title {
          font-weight: 600;
          color: #fff;
          font-size: 18px;
          padding-top: 5px;
        }
      }
    }
    .bg-dot {
      position: absolute;
      left: 50%;
      bottom: -93px;
      margin-left: -500px;
      width: 87px;
      height: 142px;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center center;
    }
    .bg-dot-center {
      position: absolute;
      left: 50%;
      bottom: -233px;
      margin-left: -71px;
      width: 142px;
      height: 87px;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center center;
    }
    .login-body-qrcode {
      position: absolute;
      left: 50%;
      bottom: -173px;
      margin-left: -183px;
      width: 366px;
      height: 343px;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 6px 8px 0px rgba(208, 213, 232, 0.27);
      border-radius: 5px;
      z-index: 1;
      .login-qrcode-inner {
        width: 100%;
        padding: 40px 88px 25px 88px;
        text-align: center;
        #qrcode {
          width: 190px;
          height: 190px;
        }
      }
    }
  }
  .login-body-bottom {
    width: 100%;
    height: 300px;
    background: #fff;
  }
}
</style>
