<template>
  <div class="login">
    <vue-particles
      v-if="showbg"
      style="width: 100%;height: 100%;position: fixed;"
      color="#CAE9FD"
      :particleOpacity="1"
      :particlesNumber="80"
      shapeType="circle"
      :particleSize="4"
      linesColor="#CAE9FD"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="1"
      :linesDistance="100"
      :moveSpeed="8"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="false"
      clickMode="push"
    >
    </vue-particles>
<!--    <starry-sky v-if="!showbg"  style="width: 100%;height: 100%;position: fixed;"></starry-sky>-->
    <div class="login-content" v-if="true">
      <div class="login-content-left">
        <span class="login-content-left__title">cloud</span><br>
        <span class="login-content-left__title">authority-ui</span>
        <img src="/static/icons/login/login.svg" />
      </div>
      <div class="login-content-right">
        <div class="login-content-right__header">登录</div>
        <div class="login-content-right__form">
          <el-form ref="loginForm" :rules="rules" label-width="0px" :model="loginForm" size="large" @submit.native.prevent @keyup.enter.native="validateAndThenLogin">
            <el-form-item prop="username" size="large">
              <el-input placeholder="用户名" v-model="loginForm.username"></el-input>
            </el-form-item>
            <el-form-item  prop="password" size="large">
              <el-input placeholder="密码" v-model="loginForm.password" type="password"></el-input>
            </el-form-item>
            <el-form-item size="large">
              <el-checkbox v-model="loginForm.autoLogin">自动登录</el-checkbox>
            </el-form-item>
            <el-form-item style="padding-top: 10px; margin-bottom: 0;">
              <el-button type="primary" style="width: 100%" @click="validateAndThenLogin" :disabled="loginButtonDisabled">登录</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import expiringStorage from '@/utils/expiringStorage'
import md5 from 'crypto-js/md5'
import sha512 from 'crypto-js/sha512'

export default {
  name: 'Login',
  data () {
    return {
      showbg: true,
      loginButtonDisabled: false,
      // 保存登录form信息
      loginForm: {
        username: '', // 用户名
        password: '', // 密码
        extNo: '', // 分机号
        autoLogin: false // 自动登录
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    }
  },
  mounted () {
  },
  beforeDestroy () {
    this.destroryAnimFrame()
  },
  created () {
    // logout 会清空token信息，根据token是否为空和是否勾选自动登录进行自动登录操作
    const tenantId = expiringStorage.get('authentication_user_tenant_id')
    if (tenantId) {
      this.loginForm.username = '@' + tenantId
    }
    const accessToken = expiringStorage.get('authentication_access_token')
    this.loginForm.autoLogin = expiringStorage.get('authentication_user_auto_login') || false
    if (accessToken && this.loginForm.autoLogin) {
      // 从localstorage 获取登录需要的参数
      const params = expiringStorage.get('authentication_params')
      // 存在登录参数，调用登录方法
      if (params && params.username && params.password) {
        this.login(params)
      }
    }
  },
  methods: {
    destroryAnimFrame () {
      // 销毁 particlesJS
      // thanks https://github.com/d2-projects/d2-admin/issues/65
      // ref https://github.com/VincentGarreau/particles.js/issues/63
      if (window.pJSDom && window.pJSDom.length > 0) {
        window.pJSDom[0].pJS.fn.vendors.destroypJS()
        window.pJSDom = []
      }
    },
    validateAndThenLogin () {
      console.warn('@@@@@@@@@@@@@@')
      console.warn(md5('123456').toString())
      console.warn(sha512('123456').toString())
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          const params = {
            username: this.loginForm.username, // 用户名
            // password: md5(this.loginForm.username + this.loginForm.password), // 密码
            password: sha512(this.loginForm.username + this.loginForm.password).toString(), // 密码
            extNo: this.loginForm.extNo // 分机号
          }
          this.login(params)
        }
      })
    },
    login (params) {
      if (!(params && params.username && params.password)) {
        return this.$message.warning('用户名密码不能为空')
      }

      this.loginButtonDisabled = true
      this.$http.post(this.$apiUrl('login'), params, {
        timeout: 5000
      }).then(response => {
        // 保存access_token
        const user = response.data.data.user
        expiringStorage.set('authentication_params', params, 24 * 60)
        expiringStorage.set('authentication_user_tenant_id', user.tenantId, 24 * 60)
        expiringStorage.set('authentication_user_self_info', user, 24 * 60)
        expiringStorage.set('authentication_user', user, 24 * 60)
        expiringStorage.set('authentication_user_agent_no', user.agentNo, 24 * 60)
        expiringStorage.set('authentication_user_name', user.name, 24 * 60)
        expiringStorage.set('authentication_user_ext_no', this.loginForm.extNo || user.extNo, 24 * 60)
        expiringStorage.set('authentication_user_auto_login', this.loginForm.autoLogin)

        // 消息服务地址
        expiringStorage.set('authentication_access_token', response.data.data.accessToken, 24 * 60)

        // 设置菜单
        const menus = response.data.data.menus
        expiringStorage.set('menus', menus, 24 * 60)
        expiringStorage.set('actions', user.actions, 24 * 60)
        // 设置用户的权限列表
        this.$util.setPermissions(user.actions)
        // 跳转到主页
        this.$router.push({ name: 'root', params: { } })
      }).catch((error) => {
        if (error.response) {
          this.$message.error(`${error.response.data.message}`)
        } else {
          this.$message.error(`${error.message}`)
        }
      }).always(() => {
        this.loginButtonDisabled = false
      })
    }
  },
  components: {

  }
}
</script>

<style scoped lang="scss">
  @import '../../style/mixin';
  .login {
    background: #F8F8F8;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items:center;
    justify-content: center;
    &-content {
      display: flex;
      width:1000px;
      height:560px;
      background: #FFFFFF;
      border-radius:4px;
      border:1px solid $default-border-color;
      z-index: 1000;

      &-left {
        box-sizing: border-box;
        padding-top: 40px;
        height: 100%;
        width: 440px;
        background:linear-gradient(180deg, #25A0E4 0%,#1067C4 100%);
        border-radius:4px 0px 0px 4px;
        text-align: center;
        &__title {
          font-size:30px;
          font-family:MicrosoftYaHei;
          color:rgba(255,255,255,1);
          line-height:45px;
        }
        img {
          margin-top: 35px;
          width: 340px;
        }
      }
      &-right {
        width: calc(100% - 440px);
        &__header {
          font-size:32px;
          font-family:MicrosoftYaHei-Bold;
          font-weight:bold;
          color:$main-color;
          line-height:42px;
          text-align: center;
          margin-top: 62px;
          margin-bottom: 77px;
        }
        &__form {
          margin: 0px auto;
          width: 360px;
          .el-form {
            .el-form-item {
              margin-bottom: 20px;
            }
          }
        }
      }
    }
  }
</style>
