<template>
  <div class="auth">
    <div class="auth-loading">
      <p class="auth-loading-item"></p>
      <p class="auth-loading-item"></p>
      <p class="auth-loading-item"></p>
      <p class="auth-loading-item"></p>
      <p class="auth-loading-item"></p>
    </div>
  </div>
</template>

<script>
import env from '../../config/env'
export default {
  name: 'Auth',
  created () {
    const query = this.$route.query || {}
    // TODO 这里是演示代码
    if (env === 'local') {
      query.userId = 25
      query.token = '6a8e755b9bc29a679e5008703f418f72-20200927153629269-848562'
    }
    if (query.mk) { // 直接从OA跳转而来，通常对应项目自有鉴权
      this.$store.dispatch('getAuthToken', query).then(() => {
        if (this.$store.state.token) {
          this.getUserMenu()
        } else {
          // 跳转至OA
          location.replace('http://oa.2345.cn')
        }
      })
    } if (query.token) { // 直接携带token的，通常对应中台权限中心
      // 这里通常包含userId systemId
      this.$store.commit('token', query.token)
      this.$store.commit('userInfo', { userId: query.token })
      this.getUserMenu({
        reqTypeEnumValue: 'ALL',
        userId: query.userId,
        // TODO 这里修改为你申请到的子系统Id
        systemId: 176
      })
    } else {
      location.replace('http://oa.2345.cn')
    }
  },
  methods: {
    getUserMenu (payload = {}) {
      this.$store.dispatch('getUserMenu', payload).then(() => {
        this.$notify({
          title: '成功',
          message: '自动授权登录成功！',
          type: 'success'
        })
        this.$router.replace((Date.now() % 2) ? '/welcome1' : '/welcome2')
      })
    }
  }
}
</script>

<style scoped lang="scss">
  .auth {
    width: 100%;
    height: 100%;
    background-color: #f0f3f7;
    display: flex;
    justify-content: center;
    align-items: center;

    .auth-loading {
      width: 36px;
      height: 36px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .auth-loading-item {
        width: 4px;
        height: 36px;
        border-radius: 2px;
        background: #409eff;

        &:nth-child(1), &:nth-child(5) {
          animation: trans15 1.4s linear infinite;
        }

        &:nth-child(2), &:nth-child(4) {
          animation: trans24 1.4s linear infinite;
        }

        &:nth-child(3) {
          animation: trans3 1.4s linear infinite;
        }
      }
    }
  }

  @keyframes trans3 {
    0% {
      height: 34px;
    }
    25% {
      height: 12px;
    }
    50% {
      height: 12px;
    }
    75% {
      height: 34px;
    }
    100% {
      height: 34px;
    }
  }

  @keyframes trans24 {
    0% {
      height: 34px;
    }
    12.5% {
      height: 34px;
    }
    37.5% {
      height: 16px;
    }
    62.5% {
      height: 16px;
    }
    87.5% {
      height: 34px;
    }
    100% {
      height: 34px;
    }
  }

  @keyframes trans15 {
    0% {
      height: 34px;
    }
    25% {
      height: 34px;
    }
    50% {
      height: 20px;
    }
    75% {
      height: 20px;
    }
    100% {
      height: 34px;
    }
  }
</style>
