<template>
  <transition name="slide">
    <div class="login" :style="{backgroundImage:`url(${backgroundImg})`}">
      <!--<div class="logo">-->
        <!--<img :src="logoImg"/>-->
      <!--</div>-->
      <div class="test">
        <div>
          身份证号:{{card}}
        </div>
        <div>
          姓名:{{name}}
        </div>
        <div>
          运营商:{{yys}}
        </div>
        <div>
          token:{{token}}
        </div>
        <mt-button type="primary" @click="getFromAndroid">从安卓获取用户</mt-button>
      </div>
      <div class="test">
        <mt-button type="primary" @click="getToken">后台请求token</mt-button>
      </div>
      <div class="test">
        <mt-button type="primary" @click="getUser">获取用户信息</mt-button>
      </div>
      <div class="test">
        <mt-button type="primary" @click="goIndex">跳转主页</mt-button>
      </div>
    </div>
  </transition>
</template>

<script type="text/ecmascript-6">
  import { Button, Toast, MessageBox } from 'mint-ui'
  import { MyLocalStorage } from 'assets/js/utils'
  import { LOGIN_FLAG, AD_FLAG } from 'assets/js/storageConst'
  import { RSAencrypt } from '@/utils/security'

  export default {
    name: 'testpage',
    data () {
      return {
        backgroundImg: require('@/assets/image/login-back.png'),
        logoImg: require('@/assets/image/logo-casic.png'),
        token:'暂无',
        card:'暂无',
        name:'暂无',
        yys:'暂无'
      }
    },
    methods: {
      //请求配置
      getFromAndroid(){
        const userInfo = JSON.parse(window.android.getUser())
        console.log(userInfo)
        this.card = userInfo.card
        this.name = userInfo.name
        this.yys = userInfo.yys
      },
      getToken(){
        this.$store.dispatch('IDLogin').then(res => { // 拉取用户信息
          Toast("用身份证号登录后台成功");
          debugger
          this.token = res.data.token
        }).catch((err) => { // 获取token失败，跳转错误页面
          Toast("获取token失败")
        })
      },
      //获取用户信息
      getUser(){
        this.$store.dispatch('getUser').then(res => { // 拉取用户信息
          Toast("获取用户信息成功");
        }).catch((err) => { // 获取token失败，跳转错误页面
          Toast("获取用户信息失败")
        })
      },
      //登录
      goIndex () {
        this.$router.replace({name: 'index'})
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~assets/css/variable.styl"
  @import "~assets/css/transition.styl"
  .test
    line-height 1.5rem
    margin-left 4rem
    margin-bottom 0.5rem
  .login
    position fixed
    z-index 100
    top 0
    left 0
    right 0
    bottom 0
    background-color $color-background-w
    width 100%
    height 100%
    background-repeat no-repeat
    background-size cover
    -webkit-background-size cover
    -o-background-size cover
    input:-webkit-autofill
      -webkit-text-fill-color: $color-text !important
    .logo
      margin 25% auto
      text-align center
      img
        text-align center
        height: 7.5rem
    .login-form, .bg
      position absolute
      width 55%
      left 50%
    .bg
      top 15%
      transform translate3d(-50%, 0, 0)
    .login-form
      top 47%
      background-color #ffffff
      transform translate3d(-50%, -50%, 0)
      .userName, .password
        font-size 20px
        display flex
        align-items center
        height 40px
        line-height 40px
        margin-bottom 5px
        background-color #fff
        border-bottom: 1px solid #f0f0f0
        i
          flex 1
          font-size 23px
          text-align center
          color $color-text
        input
          flex 5
          height 30px
          outline 0
          padding-left 5px
          background-color #fff
          color $color-text!important
          outline: none
          -webkit-appearance: none
          border-radius: 0
          margin-left 5px
    .form-btn
      display flex
      position absolute
      width 56%
      left 50%
      top 55%
      transform translate3d(-50%, 0, 0)
      button
        margin-top 20px
        flex 1
        height 45px
        line-height 38px


    input:-webkit-autofill
      -webkit-box-shadow: 0 0 0px 1000px $color-background inset;
      -webkit-text-fill-color white

  .slide-enter-active, .slide-leave-active
    transition: all .3s

  .slide-enter, .slide-leave-to
    transform: translate3d(100%, 0, 0)
</style>