<template>
  <div class="login">
    <div class="login-con">
      <Card icon="log-in" :bordered="false">
        <!-- <ukeyPassword @reload-data="ukeyPassword"
                      ref="ukeyPasswordEdit"
                      :loginName.sync="loginName"
                      :useUkeyFlag.sync="useUkeyFlag"></ukeyPassword> -->
        <div class="form-con">
          <login-form ref="loginForm" @on-success-valid="handleSubmit" :loginName="loginName"
                      :loggingIn="loggingIn"></login-form>
          <p class="login-tip">请输入用户名和密码</p>
        </div>
      </Card>
    </div>
    <Footer class="layout-footer-center" style="bottom: 0px;position: absolute;width: 100%;">2015-2022 &copy;
      湖南大邦数字软件有限公司 <br> <a onclick="window.open('http://beian.miit.gov.cn')">湘ICP备17020641号</a></Footer>

  </div>
</template>
<script>

  import ukeyPassword from '../../ukey/ukey-password'
  import LoginForm from './login-form'
  import { mapActions } from 'vuex'
  let $this
  export default {
    components: {
      LoginForm,
      ukeyPassword
    },
    data () {
      return {
        loggingIn: false,
        loginName: '',
        useUkeyFlag: false,
        ukey: null
      }
    },
    methods: {
      ...mapActions([
        'handleLogin',
        'getUserInfo'
      ]),
      ukeyPassword (bean) {
        this.ukey = bean
      },
      handleSubmit ({ username, password }) {
        if (this.$config.deploymentStandAlone){
          this.handleCommon(username, password)
        }else {
          this.$refs.ukeyPasswordEdit.checkBasicUkey({
            ukeyHolderLoginname: this.$refs.loginForm.form.username,
            state: 1
          })
            .then(data => {
              let result = data.result
              if (result) {
                let loginIsCheck = result.loginIsCheck
                if (loginIsCheck) {
                  let ukeyCode = result.ukeyCode
                  if (ukeyCode) {
                    if (!this.ukey) {
                      this.$Message.error('请先点击检测UKEY按钮进行检测!')
                      return false
                    }
                    if (ukeyCode != this.ukey.ukeyCode) {
                      this.$Message.error('用户名和ukey不匹配，请更换ukey插入!')
                      return false
                    }
                    if (!this.useUkeyFlag) {
                      this.$Message.error('ukey验证失败！')
                      return false
                    }
                  }
                }
              }
              this.handleCommon(username, password)
            }).catch(err => {
            this.handleCommon(username, password)
          })
        }

      },
      handleCommon (username, password) {
        let ukeyId

        this.loggingIn = true//开启登录中模式
        this.handleLogin({ username, password, ukeyId }).then(res => {
          this.$Message.success('登录成功')
          this.getUserInfo().then(res => {
            this.loggingIn = false//关闭登录中模式
            if(this.$config.deploymentStandAlone){
              /**/
              window.location.href = '/home'
              /*this.$router.push({
                name: this.$config.homeName
              })*/
            }else {
              this.$router.push({
                name: this.$config.PThomeName
              })
            }

          }).catch(err => {
            this.$Message.error(err)
            this.loggingIn = false//关闭登录中模式
          })
        }).catch(err => {
          console.log(err)
          if (err.response.data.error == '400') {
            this.$Message.error('用户名或密码错误')
          } else if (err.response.data.error == '500') {
            this.$Message.error('系统异常,请稍后再试')
          } else {
            this.$Message.error(err.response.data.message)
          }
          this.loggingIn = false//关闭登录中模式
        })
      }
    },
    mounted () {
      $this = this
    }
  }
</script>
<style lang="less">
  @import './login.less';
</style>
<style>
  .layout-footer-center {
    text-align: center;
  }

  .layout {
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
  }
</style>
