<template>
  <div class="login">
    <particles />
    <div class="login-container">
      <template v-if="isLoginShow === true">
        <div class="wz_login-form">
          <div class="logLeft">
            <img v-if="$showLogo" src="../../assets/images/login1.png">
            <img v-else src="../../assets/images/login1_nologo.png">
          </div>
          <div class="logright">
            <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" label-position="left" @keyup.enter.native="handleLogin">
              <div class="title-container">
                <div class="title">
                  <img src="../../assets/login_blue.png">
                  {{ $showLogo?'富士行云 · 总部管理平台':'总部管理平台' }}
                </div>
              </div>

              <el-form-item prop="username">
                <div class="loginInput">
                  <span class="svg-container"><svg-icon icon-class="name" /></span>
                  <el-input
                    ref="username"
                    v-model.trim="loginForm.username"
                    maxlength="16"
                    clearable
                    autocomplete="off"
                    placeholder="请输入账号"
                    name="username"
                    type="text"
                    tabindex="1"
                  />
                </div>
              </el-form-item>
              <el-tooltip v-model.trim="capsTooltip" content="大写锁定已开启" placement="right" manual>
                <el-form-item prop="password">
                  <div class="loginInput">
                    <span class="svg-container"><svg-icon icon-class="mm" /></span>
                    <el-input
                      :key="passwordType"
                      ref="password"
                      v-model.trim="loginForm.password"
                      maxlength="16"
                      clearable
                      :show-password="pwdicon"
                      autocomplete="new-password"
                      :type="passwordType"
                      placeholder="请输入登录密码"
                      name="password"
                      tabindex="2"
                      @keyup.native="checkCapslock"
                      @blur="capsTooltip = false"
                    />
                  </div>
                </el-form-item>
              </el-tooltip>
              <el-form-item prop="verifyCode">
                <div class="codeInput">
                  <div class="loginInput">
                    <span class="svg-container"><svg-icon icon-class="yzm" /></span>
                    <el-input
                      ref="verifyCode"
                      v-model.trim="loginForm.verifyCode"
                      maxlength="4"
                      clearable
                      placeholder="请输入验证码"
                      name="verifyCode"
                      type="text"
                      tabindex="3"
                    />
                  </div>
                  <div class="loginCode">
                    <el-image class="el-code" :src="codeUrl" @click="getCode()" />
                  </div>
                </div>
              </el-form-item>
              <el-button class="loginSubmit" :loading="loading" type="primary" @click.native.prevent="handleLogin">登录</el-button>
              <div class="remember"><el-checkbox v-model.trim="loginForm.rememberMe">记住我</el-checkbox></div>
              <footer v-if="$showLogo" class="menue">
                <p>&copy; {{ new Date().getFullYear() }} 深圳市富士智能股份有限公司 版权所有</p>
                <p><a href="https://beian.miit.gov.cn/" target="_blank" style="text-decoration:underline;">粤ICP备05046284号</a>粤公网安备 44030502001708号</p>
              </footer>
            </el-form>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import { getBufferImage, authConfig } from '@/apiV2/user'
import Particles from '@/components/particles/index'
import secret from '@/utils/secret.js'

var relpwd = '' // 存放真实密码
var fakepwd = '########' // 掩护真密码~
var loginparams = {}
export default {
  name: 'Login',
  components: {
    Particles
  },
  data() {
    const validateusername = (rule, value, callback) => {
      // console.log("validateusername",value)
      // var regName = /^[a-z0-9]+$/i
      if (!value) {
        callback(new Error('账号不能为空，请输入'))
      } else {
        callback()
      }
    }
    const validatepassword = (rule, value, callback) => {
      // var regPwd = /((?=.*[a-z])(?=.*\d)|(?=[a-z])(?=.*[!@#$%^&*()_+-=~])|(?=.*\d)(?=.*[!@#$%^&*()_+-=~]))[a-z\d!@#$%^&*()_+-=~]{6,16}/
      if (!value) {
        callback(new Error('密码不能为空，请输入'))
      } else {
        callback()
      }
    }
    const validateCode = (rule, value, callback) => {
      if (!value) {
        callback(new Error('验证码不能为空，请输入'))
      } else {
        callback()
      }
    }
    return {
      pwdicon: true, // 是否展示密码眼睛icon
      codeFlag: true, // 是否刷新验证码
      loginForm: {
        username: '',
        password: '',
        rememberMe: false,
        verifyCode: ''
      },
      loginRules: {
        username: [
          {
            required: true,
            trigger: 'blur',
            validator: validateusername
          }
        ],
        password: [
          {
            required: true,
            trigger: 'blur',
            validator: validatepassword
          }
        ],
        verifyCode: [
          {
            trigger: 'blur',
            validator: validateCode
          }
        ]
      },
      passwordType: 'password',
      capsTooltip: false,
      loading: false,
      redirect: undefined,
      otherQuery: {},
      ddCode: '',
      cropIdstr: '',
      appid: '',
      codeUrl: '',
      Codedata: '',
      isLoginShow: true
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        const query = route.query
        if (query) {
          this.redirect = query.redirect
          this.otherQuery = this.getOtherQuery(query)
        }
      },
      immediate: true
    }
  },
  created() {
    // this.getConfig()
    this.getCookie()
    this.getCode()
  },
  mounted() {
    if (this.loginForm.username === '') {
      this.$refs.username.focus()
    } else if (this.loginForm.password === '') {
      this.$refs.password.focus()
    }
  },
  destroyed() {
    // window.removeEventListener('storage', this.afterQRScan)
  },
  methods: {
    getConfig() { // 获取是否展示密码眼睛配置
      authConfig('loginShowEyeIcon').then(res => { // value不等于0时都是开启
        this.pwdicon = res.data[0]?.value != 0
      }).catch(() => {
        this.pwdicon = true
      })
    },
    // 获取验证码
    getCode() {
      this.loginForm.verifyCode = '0000' // 清空验证码文本框
      getBufferImage().then(res => {
        this.Codedata = res
        var src = window.URL.createObjectURL(this.Codedata)
        this.codeUrl = src
        window.URL.revokeObjectURL(this.Codedata)
      })
    },
    getCookie() {
      if (this.$cookies.get('manager-loginForm')) {
        const form = JSON.parse(this.$cookies.get('manager-loginForm'))
        const username = form.username
        relpwd = form.password
        const rememberMe = form.rememberMe
        this.loginForm.username = username === undefined ? this.loginForm.username : username
        this.loginForm.password = relpwd === undefined ? this.loginForm.password : fakepwd
        this.loginForm.rememberMe = rememberMe === undefined ? false : Boolean(rememberMe)
      }
    },
    checkCapslock({ shiftKey, key } = {}) {
      if (key && key.length === 1) {
        if ((shiftKey && (key >= 'a' && key <= 'z')) || (!shiftKey && (key >= 'A' && key <= 'Z'))) {
          this.capsTooltip = true
        } else {
          this.capsTooltip = false
        }
      }
      if (key === 'CapsLock' && this.capsTooltip === true) {
        this.capsTooltip = false
      }
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          loginparams = {
            username: this.loginForm.username,
            password: this.loginForm.password == fakepwd ? relpwd : this.loginForm.password,
            rememberMe: this.loginForm.rememberMe,
            verifyCode: this.loginForm.verifyCode
          }
          if (loginparams.password.length <= 16) {
            loginparams.password = secret(loginparams.password)
          }
          this.$store
            .dispatch('user/login', loginparams)
            .then(res => {
              this.codeFlag = res.code != 1000020
              if (res.code == 1000020) {
                return
              }
              if (res.data.code || !res.data.token) {
                // this.$message.error('账号或密码错误')
                this.getCode()
              } else {
                if (res.success) {
                  if (this.loginForm.rememberMe) {
                    const params = {
                      username: this.loginForm.username,
                      password: loginparams.password,
                      rememberMe: this.loginForm.rememberMe
                    }
                    this.$cookies.set('manager-loginForm', JSON.stringify(params), { expires: 30 })
                  } else {
                    this.$cookies.remove('manager-loginForm')
                  }
                }
                this.$router.push({ path: this.redirect || '/' })
              }
              this.loading = false
            })
            .then(res => {
              console.log('this.loginForm', this.loginForm)
              console.log('res.data.token', res.data.token)
              // getInfo(res.jwt)
              return this.$store.dispatch('user/getInfo', res.data.token)
            })
            .catch(err => {
              console.log('get info faile:', err)
              if (this.codeFlag) {
                this.getCode()
              }
              this.loading = false
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    getOtherQuery(query) {
      return Object.keys(query).reduce((acc, cur) => {
        if (cur !== 'redirect') {
          acc[cur] = query[cur]
        }
        return acc
      }, {})
    }
  }
}
</script>

<style lang="scss">
/* 修复input 背景不协调 和光标变色 */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
$bg: #283443;
$light_gray: #fff;
$cursor: #fff;
$default_color: #333;
@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
  .login-container .el-input input {
    color: $cursor;
  }
}
.login {
  background: linear-gradient(-90deg, #1c67ff, #5d8bff);
  min-height: 100%;
  display: flex;
}
/* reset element-ui css */
.login-container {
  z-index: 1;
  .el-input {
    font-size: 16px;
    display: inline-block;
    height: 52px;
    line-height: 52px !important;
    input {
      background: transparent;
      border: 0px;
      -webkit-appearance: none;
      border-radius: 0px;
      padding: 8px 5px;
      color: $light_gray;
      height: 47px;
      line-height: 47px !important;
      // caret-color: $cursor;

      &:-webkit-autofill {
        box-shadow: 0 0 0px 1000px $light_gray inset !important;
        -webkit-text-fill-color: $default_color !important;
      }
    }
  }
  .el-form-item__content {
    line-height: normal;
  }
  .loginInput {
    input {
      border-radius: 5px;
    }
  }
  .logright {
    .el-form-item {
      margin-bottom: 30px;
    }
  }
  .loginSubmit {
    font-size: 16px;
    background: linear-gradient(-90deg, #1c67ff, #5d8bff);
    box-shadow: 0px 0px 9px 0px rgba(87, 138, 255, 0.35);
    border: none;
    padding: 19px 0;
    width: 100%;
    margin-bottom: 20px;
  }
  .remember {
    .el-checkbox__input {
      vertical-align: bottom;
    }
    .el-checkbox__label {
      font-size: 15px;
    }
  }
  .svg-icon {
    vertical-align: -0.12rem;
  }
  .el-form-item__error {
    font-size: 14px;
  }
  @media (max-width: 1024px) {
    .el-input {
      height: 47px;
      line-height: 47px !important;
    }
    .loginSubmit {
      padding: 15px 0;
    }
    .el-input,
    .loginSubmit {
      font-size: 14px;
    }
    .wz_login-form {
      display: block !important;
      height: auto;
      min-height: 610px !important;
    }
    .login-form {
      padding: 6vh 25px !important;
    }
    .logLeft {
      width: 100% !important;
      height: 100%;
      position: absolute !important;
      left: 0;
      top: 0;
      z-index: 1;
      border-radius: 0px !important;
      img {
        display: none;
      }
      // display: none;
    }
    .logright {
      position: relative;
      z-index: 10;
      border-radius: 20px !important;
      left: 0;
      height: 100%;
      min-height: 610px;
      top: 50%;
      transform: translateY(-50%);
      .title {
        font-size: 20px !important;
        height: auto !important;
        margin-bottom: 5vh !important;
      }
      .menue {
        bottom: 20px !important;
        font-size: 14px;
      }
      .el-form-item {
        margin-bottom: 20px !important;
      }
      .loginCode {
        height: 49px !important;
        line-height: 49px !important;
      }
    }
    .remember {
      .el-checkbox__label {
        font-size: 14px;
      }
      .el-checkbox__input {
        vertical-align: sub;
      }
    }
    .svg-icon {
      vertical-align: -0.1rem;
    }
    .el-form-item__error {
      font-size: 13px;
    }
  }
}
</style>

<style lang="scss" scoped>
$bg: #fff; //#2d3a4b
$dark_gray: #b8b8b8;
$light_gray: #eee;
$default_color: #333;
.login-container {
  min-height: 100%;
  width: 100%;
  background-color: $bg;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(../../assets/images/loginqq.png) no-repeat 0 0;
  box-shadow: 0px 0px 9px 0px rgba(87, 138, 255, 0.35);
  .wz_login-form {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
  }
  .login-form {
    position: relative;
    width: 100%;
    max-width: 100%;
    padding: 88px 10% 0;
    margin: 0 auto;
    overflow: hidden;
  }
  .loginInput {
    display: flex;
    align-items: center;
  }
  .loginInput,
  .loginCode {
    border-radius: 5px;
    color: #454545;
    background-color: #fff;
    border: solid 1px #dcdfe6;
  }
  .codeInput {
    display: flex;
    align-items: center;
    .loginInput {
      width: 66%;
    }
    .loginCode {
      width: 32%;
      text-align: center;
      height: 54px;
      line-height: 54px;
      margin-left: 2%;
    }
  }
  .logLeft {
    width: 59%;
    position: relative;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 60px 0 0 60px;
    img {
      height: 105%;
      object-fit: contain;
      margin: -27px 0 0 45px;
      width: 83%;
    }
  }
  .logright {
    flex: 1;
    display: flex;
    background: rgba(255, 255, 255, 1);
    border-radius: 0 60px 60px 0;
  }
  .tips {
    font-size: 14px;
    color: #fff;
    margin-bottom: 10px;

    span {
      &:first-of-type {
        margin-right: 16px;
      }
    }
  }

  .svg-container {
    padding: 6px 15px 6px 15px;
    color: $dark_gray;
    vertical-align: middle;
    width: 40px;
    display: inline-block;
    font-size: 18px;
  }

  .title-container {
    position: relative;
    .title {
      font-size: 23px;
      color: $default_color;
      margin: 0px auto 60px auto;
      text-align: center;
      font-weight: 400;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      > img {
        margin-right: 8px;
        width: 30px;
      }
    }
  }

  .show-pwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
    color: $dark_gray;
    cursor: pointer;
    user-select: none;
  }

  .thirdparty-button {
    position: absolute;
    right: 0;
    bottom: 6px;
  }
  // footer{
  //   width: 100%;
  //   position: absolute;
  //   bottom: 0;
  //   left: 0;
  //   text-align: center;
  //   color: #999;
  //   background-color: #fff;
  //   z-index: 99;
  //   padding-top: 12px;
  //   >div>a{
  //     margin: 0 10px;
  //     // display: inline-block;
  //   }
  // }

  @media only screen and (max-width: 470px) {
    .thirdparty-button {
      display: none;
    }
  }
}
.carousel {
  position: relative;
  flex: 1;
}

.carousel .el-carousel__item .is-animating {
  height: 100%;
}

.el-carousel,
.el-carousel__container {
  height: 100%;
}

.carousel .el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.carousel .el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.menue {
  position: absolute;
  z-index: 9999;
  bottom: 5px;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
  color: #a9a9a9;
  font-size: 16px;
  a {
    display: inline-block;
    margin: 0 1%;
  }
}
.wz_login-form {
  width: 93%;
  height: 84%;
  min-height: 610px;
  box-shadow: 0px 9px 17px 2px rgba(10, 47, 130, 0.09);
  border-radius: 60px;
}

.login-container .el-input input {
  color: #999;
}

.el-divider--horizontal {
  display: block;
  height: 1px;
  width: 100%;
  margin: 24px 0;
}

.el-divider {
  background-color: #dcdfe6;
  position: relative;
}
.el-divider__text.is-center {
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.el-divider__text {
  position: absolute;
  background-color: #fff;
  padding: 0 20px;
  font-weight: 500;
  color: #303133;
  font-size: 14px;
}
</style>
<style scoped="scoped">
.Propaganda {
  width: 288px;
  height: 66px;
  font-size: 24px;
  font-weight: 600;
  color: rgba(255, 255, 255, 1);
  line-height: 33px;
  position: absolute;
  left: 18px;
  bottom: 123px;
  z-index: 9999;
}
#Loadings {
  top: 50%;
  left: 50%;
  position: absolute;
  -webkit-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
  z-index: 100;
}
@-webkit-keyframes ball-beat {
  50% {
    opacity: 0.2;
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes ball-beat {
  50% {
    opacity: 0.2;
    -webkit-transform: scale(0.75);
    transform: scale(0.75);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.ball-beat > div {
  background-color: #1890ff;
  width: 15px;
  height: 15px;
  border-radius: 100% !important;
  margin: 2px;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  display: inline-block;
  -webkit-animation: ball-beat 0.7s 0s infinite linear;
  animation: ball-beat 0.7s 0s infinite linear;
}
.ball-beat > div:nth-child(2n-1) {
  -webkit-animation-delay: 0.35s !important;
  animation-delay: 0.35s !important;
}
.el-code {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}
</style>
