<template>
  <div class="login-container">
    <div class="company-name">
      {{ title }}
      <!-- <img src="./images/logo.png" /> -->
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Watch } from 'vue-property-decorator'
// import { userFirstLogin, getMsgCode } from '@/api/user'
import { changePassword } from '@/api/base'
import { regNewPassword } from '@/utils/reg'
import { ElForm } from 'element-ui/types/form'
const defaultPwd = '000000'
import { sysTitle } from '@/settings'

import { getUserMenu } from '@/api/user'
@Component
export default class Login extends Vue {
  name = 'Login'
  url = '@/assets/images/login/logo.png'
  title = sysTitle
  loginForm = {
    username: '',
    password: '',
    msg: ''
  }
  btnTitle = '发送验证码'
  btnDisabled = false
  time = 60
  loginRules = {
    username: [{ required: true, trigger: 'blur', message: '请输入账号' }],
    password: [{ required: true, trigger: 'blur', message: '请输入密码' }],
    msg: [{ required: true, trigger: 'blur', message: '请输入短信验证码' }]
  }
  loading = false
  passwordType = 'password'
  redirect = undefined
  error = 1
  // warning: true,
  msg = ''
  passwordDialog = false // 重置密码用弹窗显隐控制
  changePwd = {
    pass: '', // 重置密码用新密码
    checkPass: '' // 重置密码用确认密码
  }
  pwdRules = {}
  userId = ''
  get sysTitle() {
    return this.$store.state.settings.sysTitle
  }
  /**mydesk登录验证 */
  beforeMount() {
    const search = window.location.hash.split('?')[1]
    if (search) {
      //const codeIndex = search.indexOf('prjcode')
      const tokenIndex = search.indexOf('token')
      // if (codeIndex > -1 && tokenIndex > -1) {
      //   const token = this.getSearchString('token', search)
      //   const prjcode=this.getSearchString('prjcode', search)
      //   this.loginWithTokenCheck(token,prjcode)
      // }else{
      //   this.$message.error('登录失败')
      // }
      if (tokenIndex > -1) {
        const token = this.getSearchString('token', search)
        this.loginWithTokenCheck(token, '')
      } else {
        this.$message.error('登录口令缺失')
      }
    }
  }
  mounted() {}
  getSearchString(key, Url) {
    var str = Url
    //str = str.substring(1, str.length) // 获取URL中?之后的字符（去掉第一位的问号）
    // 以&分隔字符串，获得类似name=xiaoli这样的元素数组
    var arr = str.split('&')
    var obj = new Object()
    // 将每一个数组元素以=分隔并赋给obj对象
    for (var i = 0; i < arr.length; i++) {
      var tmp_arr = arr[i].split('=')
      obj[decodeURIComponent(tmp_arr[0])] = decodeURIComponent(tmp_arr[1])
    }
    return obj[key]
  }

  /**
   * 根据mydesk token登录
   * @param {*} token
   */
  loginWithTokenCheck(token, prjcode) {
    this.$store
      .dispatch('user/gisLogin', { token: token })
      .then((result) => {
        if (result.code === 1) {
          setTimeout(() => {
            //this.$router.push({ path: '/prjSelection' })
            this.$router.push({ path: '/' })
          }, 0)
        }
      })
      .catch((err) => {
        console.error(err)
      })
  }
  @Watch('$route', { immediate: true })
  changeValue(route, oldvalue) {
    this.redirect = route.query && route.query.redirect
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: url('./images/background.png') no-repeat fixed center/100%;
  background-size: cover;
  .company-name {
    position: absolute;
    font-size: 40px;
    color: white;
    font-weight: 500;
    letter-spacing: 4px;
    width: 100%;
    text-align: center;
    top: calc((100% - 534px) / 2);
    -webkit-box-reflect: below 1px -webkit-gradient(linear, 0 0, 0 50%, from(transparent), color-stop(0.2, transparent), to(rgba(3, 3, 3, 0.1)));
  }
  img {
    user-select: none;
    height: 100%;
  }
  .fill-container {
    position: relative;
    width: 926px;
    height: 434px;
    border-radius: 10px;
    background-color: rgb(228, 242, 255);
    left: calc((100% - 926px) / 2);
    top: calc((100% - 334px) / 2);
    .left {
      position: relative;
      float: left;
      width: 538px;
      overflow: hidden;
    }
    .right {
      width: 388px;
      width: 388px;
      position: relative;
      float: left;
      .top {
        font-size: 25px;
        font-weight: 700;
        color: rgb(45, 116, 231);
        text-align: center;
        width: 100%;
        top: 50px;
        position: relative;
        float: left;
        > span {
          line-height: 30px;
          &:nth-of-type(2) {
            margin-top: 16px;
          }
        }
      }
      /deep/ input.el-input__inner {
        padding-left: 40px !important;
      }
      /deep/ i.el-input__icon.el-icon-user,
      /deep/ i.el-input__icon.el-icon-lock,
      /deep/ i.el-input__icon.el-icon-tickets {
        font-size: 20px;
        color: #2d74e7;
        top: -2.25px;
        position: relative;
      }
      .middle {
        width: 320px;
        height: 106px;
        margin-bottom: 80px;
        > .form-input {
          height: 36px;
          line-height: 36px;
          /deep/ input {
            height: 36px;
          }
          &:nth-of-type(2) {
            margin-top: 15px;
          }
          &:nth-of-type(3) {
            margin-top: 15px;
          }
        }
      }
      .login-btn {
        width: 320px;
        height: 44px;
        border-radius: 22px;
        position: relative;
        float: left;
        left: calc((100% - 320px) / 2);
        top: 120px;
        overflow: hidden;
        font-size: 16px;
        background: #2d74e7;
        transition: background 0.3s linear;
        color: #ffffff;
        &:hover {
          background: #2467d3;
        }
      }
    }
  }
}
</style>
