<style lang="less">
@import './login.less';
</style>

<template>
  <div class="login">
    <div class="login-bg">
      <div class="login-box">
        <div class="login-image">
          <img :src="loginImage" alt="" />
        </div>
        <div class="login-right">
          <div class="login-icon">
            <img src="../../assets/images/log-new-nav.png" alt="" />
            <span class="login-title">智能仓储管理系统</span>
          </div>
          <Tabs value="name2" style="width: 400px;">
            <!--    二维码登录      -->
            <TabPane label="扫码登录" name="name1">
              <div ref="qrCode" class="qr-code">
                <vue-qr
                  :text="qrCode"
                  :margin="0"
                  colorLight="#fff"
                  :logoSrc="loginIcon"
                  :logoScale="0.1"
                  :size="qrCodeHeight"
                >
                </vue-qr>
                <div class="tip">
                  {{
                    qrCodeReloading
                      ? '二维码加载中...'
                      : qrCode !== 'notfoundqrcode'
                      ? '使用杰生APP客户端扫码登录'
                      : '二维码加载失败，请点击刷新'
                  }}
                </div>
                <!--        连接失败样式        -->
                <div
                  class="not-found"
                  v-if="qrCode === 'notfoundqrcode'"
                  :style="{
                    width: qrCodeHeight + 'px',
                    height: qrCodeHeight + 'px'
                  }"
                >
                  <Icon
                    type="md-refresh"
                    color="#fff"
                    :size="qrCodeHeight / 5"
                    :class="qrCodeReloading ? 'rotate-active' : ''"
                  />
                </div>
              </div>
            </TabPane>
            <!--    账号密码登录        -->
            <TabPane label="账号密码登录" name="name2">
              <div class="login-form-box">
                <login-form @on-success-valid="handleSubmit" />
              </div>
            </TabPane>
          </Tabs>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import LoginForm from '_c/login-form'
import loginImage from '@/assets/images/login-left.png'
import loginIcon from '@/assets/images/login-icon.png'
import { mapActions } from 'vuex'
import vueQr from 'vue-qr'
export default {
  data () {
    return {
      qrCode: 'notfoundqrcode',
      loginImage,
      loginIcon,
      qrCodeHeight: 0,
      qrCodeReloading: true
    }
  },
  components: {
    LoginForm,
    vueQr
  },
  methods: {
    ...mapActions(['handleLogin', 'getUserInfo']),
    handleSubmit ({ userName, password }) {
      this.handleLogin({ userName, password }).then(res => {
        this.getUserInfo().then(res => {
          console.log(res)
          window.localStorage.setItem('jobNo',res.result.jobNo)
          /* 未在角色菜单配置首页的角色直接跳转第一个菜单 不显示首页 */
          let menus = this.$store.state.user.menu
          let home = menus.find(item => item.name === '_home')
          if (!home && menus[0]) {
            this.$router.push(menus[0].children[0].name)
          } else {
            this.$router.push({
              name: this.$config.homeName
            })
          }
        })
        // this.$router.push({
        //   name: this.$config.homeName
        // })
      })
    }
  },
  mounted () {
    localStorage.setItem('tagNaveList', '')
    // 生成二维码高度
    this.$nextTick(() => {
      this.qrCodeHeight = this.$refs.qrCode.clientHeight - 60
    })
  }
}
</script>

<style lang="less" scoped>
/deep/ .ivu-tabs-nav {
  width: 100%;
}
/deep/ .ivu-tabs-tab {
  width: 50%;
  text-align: center;
}
/deep/ .ivu-tabs-ink-bar {
  width: 50% !important;
  height: 3px;
}
/deep/ .ivu-tabs-bar {
  margin-bottom: 50px;
}
</style> 
