<template>
  <div class="login-wrapper">
    <div class="login-writh">
    <div class="login-padding">
    <div class="login-left">
      <img src="../../static/img/simple-img.jpg" alt="">
    </div>
    <div class="login-box">
      <div class="white-box">
        <h3 class="white-box-title">欢迎回来</h3>
        <el-form ref="form" :model="loginForm" label-width="80px">
          <el-form-item label-width="0px" class="border-bottom username">
            <el-input v-model="loginForm.userName" placeholder="账号" @change="refreshLoginVerifyStatus">
              <template slot="prepend"><!--<i class="el-icon-user"></i>--><i></i></template>
            </el-input>
          </el-form-item>
          <el-form-item label-width="0px" class="border-bottom key-name">
            <el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="密码">
              <template slot="prepend"><!--<i class="el-icon-lock"></i>--><i></i></template>
            </el-input>
          </el-form-item>
          <el-form-item label-width="0px" class="border-bottom key-name" v-show="isLoginVerify">
            <el-input type="verifyCode" v-model="loginForm.verifyCode" auto-complete="off" @keyup.enter.native="onSubmit" placeholder="验证码">
              <template slot="prepend"><i></i></template>
            </el-input>
            <el-image :src="captchaUrl" @click="changeCaptcha">
            </el-image>
          </el-form-item>
          <el-form-item label-width="0px" style="border-radius: 0">
            <el-button class="submit-button" type="primary" @click="onSubmit" :loading="submitButtonStat">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
      <div class="trxtTooltip" v-if="isWeChatTooltip" @click="openIsWeChatModal">
          <div>
          检测到您正在微信中使用系统
          </div>
          <div class="chere">
            <span>建议</span>
            <el-link type="primary" :underline="false" style="font-size: 15px">点击这里</el-link>
            <span>使用手机浏览器登录系统</span>
          </div>
      </div>
  </div>


    </div>
<!--    微信内打开提示-->
    <transition name="el-fade-in-linear">
      <div v-show="isWeChat" class="isWeChatModal">
        <div class="modal-box">
          <div class="transition-box">
            <img class="arrow" src="../../static/img/arrow_icon.png" alt="">
            <div class="browser">
              <span>请点击右上角“<i class="el-icon-more"></i>”</span>
            </div>
            <div class="browser">
              <span>选择“</span>
              <img src="../../static/img/browser.png" alt="" style="width: 20px">
              <span>在浏览器中打开 ”</span>
            </div>
          </div>
          <div>
            <i class="el-icon-close closeWechat" style="font-size: 45px" @click="closeIsWeChatModal"></i>
          </div>

        </div>

      </div>
    </transition>
  </div>

</template>

<script>
import network from '@/utils/network'
import tool from '@/utils/tool'
import userInfo from '@/utils/userInfo'
import store from '@/utils/vuexStore'
import baseInfo from '@/utils/baseInfo'
import {REQUEST_URL} from '@/utils/config'
import axiosObj from "@/utils/axiosPlugin";

export default {
  name: 'login',
  data () {
    return {
      errorMsg: {
        title: '',
        type: ''
      },
      loginForm: {
        userName: '',
        password: '',
        verifyCode: '',
      },
      submitButtonStat: false,
      pageId:'',
      captchaUrl: '',
      isLoginVerify:false,
      isWeChat: false,
      isWeChatTooltip: false,
    }
  },
  beforeCreate () {
    let path = 'site/page-data'
    axiosObj.get(path, this.passwordInfo).then(response => {
      this.pageId = response.pageId
      this.captchaUrl = REQUEST_URL + 'site/captcha?page_id=' + this.pageId + '&v=' + Math.random()
    }).catch(error => {
      error = tool.errorHandle(error)
      this.$message.error(error.message)
      console.log(error)
    })
  },
  mounted () {
    if(this.is_weixn()){
      setTimeout(()=>{
        this.isWeChatTooltip = true
      },500)
    }else{
      this.isWeChatTooltip = false
    }
    network.getSiteInfo()
    // 检测用户是否已经登录，如果已经登录则直接跳转到控制台页
    // if(userInfo.hasLogin()){
    //     this.$router.push('dashboard/index');
    // }
  },
  methods: {
    onSubmit () {
      this.submitButtonStat = true
      let promise = null
      // 查看是否存在当前时间差，如果不存在，则向服务器请求时间差
      let userName = this.loginForm.userName
      let password = this.loginForm.password
      let pageId = this.pageId
      if (baseInfo.daysDiff() === null) {
        promise = network.getDaysDiff().then(response => {
          if( this.isLoginVerify ) {
            let verifyCode = this.loginForm.verifyCode
            let data = {
              userName,
              password,
              verifyCode,
            }
            return network.loginGetAccessToken(userName, password, `oauth/login?page_id=${pageId}`, data)
          }else {
            return network.loginGetAccessToken(userName, password)
          }
        })
      } else {
        if( this.isLoginVerify ) {
          let verifyCode = this.loginForm.verifyCode
          let data = {
            userName,
            password,
            verifyCode,
          }
          promise = network.loginGetAccessToken(userName, password, `oauth/login?page_id=${pageId}`, data)
        }else {
          promise = network.loginGetAccessToken(userName, password)
        }
      }
      promise.then(response => {
        return network.getUserInfo()
      }).then(response => {
        return network.getBaseInfo()
      }).then(response => {
        return network.getData('message/unread-num')
      }).then(response => {
        if (response > 0) {
          store.state.baseInfo.messageUnreadNum = response
        }
        this.$router.push('dashboard/index')
      }).catch(error => {
        console.log(error);
        this.refreshLoginVerifyStatus();
        if( this.isLoginVerify ) {
          this.changeCaptcha()
        }
        if( error.message === 'ERROR_IS_MODIFY_PASSWORD' ) {
          // this.submitButtonStat = false
          // console.log(this.loginForm.userName);
          this.$router.push(`/modify-password/${this.loginForm.userName}`)
        }else {
          error = tool.errorHandle(error)
            this.$message.error(error.message)
            // this.submitButtonStat = false
        }
        // error = tool.errorHandle(error)
        // this.$message.error(error.message)
        // this.submitButtonStat = false
      })

    },
    changeCaptcha() {
      this.captchaUrl = REQUEST_URL + 'site/captcha?page_id=' + this.pageId + '&v=' + Math.random();
    },
    refreshLoginVerifyStatus() {
      let path = 'oauth/is-login-verify'
      axiosObj.post(path, {userName:this.loginForm.userName}).then(response => {
        this.isLoginVerify = response === 1;
        this.submitButtonStat = false
      }).catch(error => {
        error = tool.errorHandle(error)
        this.$message.error(error.message)
        console.log(error)
        this.submitButtonStat = false
      })
    },
    is_weixn(){
      const ua = navigator.userAgent.toLowerCase();
      return ua.indexOf('micromessenger') !== -1;
    },
    openIsWeChatModal(){
      this.isWeChat = true
    },
    closeIsWeChatModal(){
      this.isWeChat = false
    }
  }
}

</script>

<style>
  @import '../../static/plugins/css/font-awesome.min.css';

  .login-wrapper {
    background: url(../../static/img/login-register.jpg) center center no-repeat;
    width: 100%;
    height: 100%;
    position: fixed;background-size: 100% 100% ;
  }
  .username .el-input-group__prepend{ background: url(../../static/img/user.png) center center no-repeat;background-size:contain }
  .key-name .el-input-group__prepend{ background: url(../../static/img/key.png) center center no-repeat;background-size:contain}
  .login-wrapper .login-box {
    width: 40%;
    margin: 0% auto 0;float: right;
  }

  .login-wrapper .white-box {
    background: #fff;
    padding: 25px;
    margin-bottom: 15px;
    border-radius: 0;box-shadow: 0 0 10px #f2f1f4;
  }

  .white-box .white-box-title {
    margin: 0 0 12px;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 20px;
    line-height: 30px;
    text-align: center;
    color: #522989;
  }

  .login-wrapper .el-input-group__prepend {
    background-color: #fff !important;
    border-radius: 0 !important;
    padding: 0 15px 0 10px ;width: 5%;display: block;;float: left;padding: 0px!important;height:35px;
  }

  .login-wrapper .el-input-group--prepend i{font-size: 16px;}

  .login-wrapper .el-input__inner {
    border-radius: 20px !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
  }

  .login-wrapper .submit-button {
    width: 80%;margin: 0 auto;display: block;
    border-radius: 20px !important;margin-top: 15px;
    background-color: #0c195d !important;
    border-color: #0c195d !important;
  }
  .el-input-group--prepend .el-input__inner, .el-input-group__append{border: none;background: none;border-radius: 0;width:94%;float: right;display: block; }
  .border-bottom {border-bottom:2px #0c195d solid;}
  .el-input-group__append, .el-input-group__prepend{border: none;}
  input:-webkit-autofill {
    transition: background-color 5000s ease-in-out 0s;
  }
  input:-webkit-autofill:focus {
    transition: background-color 5000s ease-in-out 0s;
  }
  .login-padding:after{content: '';display: table;clear: both;}
  .login-left{width: 40%;float: left; }
  .login-left img{width: 100%;height: auto;}
  .login-padding{background: url(../../static/img/shu.png) center center no-repeat;background-size:contain}
  @media (min-width: 34em) {
    .login-padding{width:600px;margin: 20% auto;}
  }
  @media (min-width: 48em) {
    .login-padding{width: 700px;margin: 20% auto;}
  }
  @media (min-width: 62em) {
    .login-padding{width: 1000px;margin: 13% auto;/*padding: 5% 0;*/}
  }
  @media (min-width:1550px) {
    .login-padding{width: 1000px;margin: 11% auto;/*padding: 5% 0;*/}
  }

  @media only screen and (max-width:766px) {
    .login-left{width: 40%;float: left;display: none; }
    .login-wrapper .login-box{width: 70%;float: none;margin: 25% auto 0;}
    .login-wrapper .el-input-group__prepend{ }
    .login-padding{background: none;}
    .login-wrapper .white-box{box-shadow: none;}
    .login-wrapper .el-input-group__prepend{width: 8%;}
    .el-input-group--prepend .el-input__inner, .el-input-group__append{width: 90%;}
  }
  .isWeChatModal{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.8); /* 黑色背景，50% 透明度 */
    z-index: 9999;
    color: white;
    font-size: 24px;
  }
  .modal-box{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
  }
  .transition-box{
      display: flex;
      align-items: center;
      flex-direction: column;
  }
  .transition-box div{
    padding: 20px 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .browser img, i{
    padding: 0 6px;
  }
  .closeWechat{
    transform: translateY(-10rem);
  }
  .arrow{
    width: 50%;
    align-self: flex-end;
    transform: translateX(-10px);
  }
  .trxtTooltip{
    display: flex;
    align-items: center;
    flex-direction: column;
    color: #522989;
  }
  .trxtTooltip div{
    padding: 5px 0;
  }
  .chere{
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
</style>
