<template>
  <div class="login-container">
    <div class="login-wrap">
      <div class="login-header-line">
        <img style="height: 20px; bottom: 20px" src="@/assets/provided_w.png" />
        <br />
        <a-space align="baseline">
          <h2 @click="toPortal" style="cursor: pointer">{{ title }}</h2>
          <h3 style="color: #fff; margin-bottom: 0">v-{{ version }}</h3>
        </a-space>
      </div>
      <a-form class="plg-login" :form="form" @submit="handleSubmit">
        <div class="title">登录</div>
        <a-alert v-if="isLoginError" type="error" closable :message="loginMessage" :after-close="handleClose" />

        <a-form-item>
          <div class="input-wrapper">
            <a-input class="input" size="large" type="text" placeholder="请输入账号" v-decorator="['username', { rules: [{ required: true, message: '请输入账号' }], validateTrigger: 'change' }]">
            </a-input>
            <a-icon class="input-icon" type="user" />
          </div>
        </a-form-item>

        <a-form-item>
          <div class="input-wrapper">
            <a-input
              class="input"
              size="large"
              type="password"
              autocomplete="false"
              placeholder="请输入密码"
              v-decorator="['password', { rules: [{ required: true, message: '请输入密码' }], validateTrigger: 'blur' }]"
            >
            </a-input>
            <a-icon class="input-icon" type="lock" />
          </div>
        </a-form-item>

        <a-form-item style="margin-top: 24px">
          <a-button size="large" type="primary" htmlType="submit" class="login-button" :loading="state.loginBtn" :disabled="state.loginBtn">确定</a-button>
        </a-form-item>
        <a-form-item style="margin-top: 24px">
          <img style="margin: 0 auto; display: block" src="@/assets/ill_log_in_2.svg" />
        </a-form-item>
      </a-form>
    </div>
    <!-- <img
      style="margin: 0 auto;display: block; height: 20px;bottom: 20px;
    left: 50%;
    margin-left: -112px;
    position: absolute;"
      src="@/assets/provided.png"
    /> -->
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import { homePage } from '@/config/router.config'

import defaultSettings from '@/config/defaultSettings.js'
import { BASE_URL } from '@/config/serviceSettings.js'

export default {
  data() {
    return {
      version: APP_VERSION,
      title: defaultSettings.loginTitle,
      loginBtn: false,
      isLoginError: false,
      loginMessage: '',
      form: this.$form.createForm(this),
      state: {
        loginBtn: false,
      },
    }
  },
  created() {
    localStorage.removeItem('role')
    localStorage.removeItem('token')

  },
  destroyed() {
    this.$root.$el.style.display = ''
  },

  methods: {
    ...mapActions(['Login', 'Logout']),
    autoLogin() {
      // http://localhost:8001/?appid=2b2c0570&ticket=14c511d9-673f-4e91-9ee3-54b934a89126
      // http://140.249.179.49:2022/?&appid=2b2c0570&ticket=afc51851-15fc-4f78-b76d-a6edbee22de4
      const qs = require('qs')
      let search = this.$route.query.redirect
      if (search) {
        search = qs.parse(search)
        if (search.ticket) {
          let app = this.$root.$el
          app.style.display = 'none'
          this.axios
            .get(BASE_URL + '/login/attestation', { params: { ticket: search.ticket } })
            .then((response) => {
              if (response.success) {
                const { password, username } = response.data
                if (password && username) {
                  this.form.setFieldsValue(response.data)

                  this.handleSubmit(null)
                }
              } else {
                app.style.display = ''
              }
              app = null
            })
            .catch(() => {
              app.style.display = ''
              app = null
            })
        }
      }
    },

    toPortal() {
      this.$router.push('/portal')
    },

    handleSubmit(e) {
      e && e.preventDefault()
      const {
        form: { validateFields },
        state,
        Login,
      } = this

      state.loginBtn = true

      validateFields(['username', 'password'], { force: true }, (err, values) => {
        if (!err) {
          let role = values.username
          if (values.username === 'super') {
            role = 'super'
          }
          role = 'superuser'
          localStorage.setItem('role', role)

          const loginParams = { ...values }

          Login(loginParams)
            .then((res) => {
              let app = this.$root.$el
              if (res.success) {
                this.loginSuccess(res)
              } else {
                app.style.display = ''
                app = null
                this.loginMessage = res.message == 'Bad credentials' ? '账号或密码错误' : res.message
                this.isLoginError = true
              }
            })
            .catch((err) => {
              this.requestFailed(err)
            })
            .finally(() => {
              state.loginBtn = false
            })
        } else {
          setTimeout(() => {
            state.loginBtn = false
          }, 600)
        }
      })
    },

    loginSuccess(res) {
      let homePath = '/'
      if (res.homePage) {
        homePath = res.homePage
      } else {
        homePath = homePage
      }

      this.$router.push({ path: homePath })
      this.isLoginError = false
    },

    requestFailed(err) {
      this.$notification['error']({
        message: '错误',
        description: ((err.response || {}).data || err).message || '请求出现错误，请稍后再试',
        duration: 4,
      })
    },
    handleClose() {
      this.isLoginError = false
    },
  },
}
</script>

<style lang="less" scoped>
.login-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(~@/assets/admin/login_bg_n.png) no-repeat center;
  background-size: cover;
}
.login-wrap {
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 15%;
  left: 11%;
  width: 72%;
  .plg-login {
    margin-top: 50px;
    width: 360px;
    .ant-alert.ant-alert-no-icon {
      padding: 10px 15px;
    }
    .title {
      font-size: 24px;
      color: #333333;
      text-align: center;
      line-height: 24px;
      font-weight: 600;
      margin-bottom: 10px;
    }
    .slogn_blue {
      display: block;
      width: 259px;
      height: 67px;
      margin: 0 auto;
      margin-top: 34px;
    }
  }
}
.login-header-line {
  color: #ffffff;
}
.login-header-line h2 {
  font-size: 32px;
  color: #ffffff;
  margin-bottom: 0;
}
.login-header-line h3 {
  font-size: 20px;
  color: #ffffff;
}
.login-button {
  padding: 0 15px;
  font-size: 16px;
  height: 40px;
  width: 100%;
}
.input-wrapper {
  position: relative;
  margin-top: 20px;
  padding-bottom: 5px;
}
.input {
  text-indent: 40px;
}
.input-icon {
  position: absolute;
  left: 1px;
  top: 1px;
  width: 40px;
  line-height: 38px;
  font-size: 14px;
  color: #dce1e7;
  background: #f7f9fc;
  border-right: 1px solid #dce1e7;
}
@media screen and (min-width: 1000px) and (max-width: 1460px) {
  .login-wrap {
    left: 12%;
    width: 75%;
  }
  .login-header-line h2 {
    font-size: 28px;
  }
  .login-header-line h3 {
    font-size: 16px;
  }
}
@media screen and (min-width: 800px) and (max-width: 1200px) {
  .login-wrap {
    left: 12%;
    width: 78%;
  }
  .login-header-line h2 {
    margin-bottom: 20px;
    font-size: 26px;
  }
  .login-header-line h3 {
    font-size: 16px;
  }
}
</style>
