<template>
  <h-view class="public-style fingertip">
    <div class="bar header-bar bar-header">
      <h1 class="title">指纹登录</h1>
    </div>
    <div class="content scroll-content ionic-scroll has-header">
      <div class="userInfo">
        <div class="userPicture">
          <img :src="userPicture">
        </div>
        <div class="scan-img" @click="login"><img src="../assets/image/login/fingertip@2x.png"></div>
      </div>
      <div class="finger-exist" @click="login">请验证已有指纹</div>
    </div>
    <div class="switch" @click="switchLogin()">
      切换登录方式
    </div>
  </h-view>
</template>

<script>
export default {
  data () {
    return {
      userPicture: window.localStorage.userImg,
    }
  },
  created: function () {
    let vm = this
    setTimeout(function () {
      vm.login()
    }, 2000)
  },
  methods: {
    login: function () {
      let vm = this
      vm.hlsUtil.fingerLogin().then(function () {
        var username = window.localStorage.username
        var password = window.localStorage.password
        var netType = navigator.connection.type
        if (netType == Connection.NONE) {
          hlsPopup.showLongBottom('当前设备无网络连接请检查')
        } else if (netType == Connection.CELL_2G || netType == Connection.CELL) {
          hlsPopup.showLongBottom('当前设备网络连接较差请检查')
        } else {
          let url = process.env.loginPath + 'appadmin'
          let param = {}
          vm.hlsPopup.showLoading('请稍等')
          vm.$post(url, param).then(function () {
            vm.figinLogin(username, password)
          })
        }
      })
    },

    figinLogin: function (username, password) {
      let vm = this
      let param = {
        'user_name': username,
        'user_password': password,
      }
      let url = process.env.basePath + 'login'
      vm.$post(url, param)
        .then(function (res) {
          if (res.result === 'S') {
            vm.hlsPopup.hideLoading()
            window.localStorage.setItem('username', username.toUpperCase())
            window.localStorage.setItem('password', password)
            window.localStorage.setItem('user_id', res.user_id)
            vm.$router.push('tab')
            let tagOption = {
              'username': vm.userName.toUpperCase(),
              'user_id': res.user_id,
              'mobile': res.mobile,
            }
            vm.Jpush._jpush_config(tagOption)
          }
        })
    },
    switchLogin: function () {
      hlsPopup.showActionSheet({
        titleText: '选择登录方式',
        buttonArray: ['用户名密码登录'],
        callback: (index) => {
          if (index === 0) {
            this.$router.push({name: 'Login'})
          }
        },
      })
    },

  },
}
</script>

<style scoped lang="less" rel="stylesheet">
  .fingertip {
    background-color: #FFFFFF;
    height: 100%;
    .content {
      height: 100%;
      position: fixed;
      .title {
        font-size: 34px;
        margin-top: 20px;
        padding-bottom: 30px;
        padding-top: 10px;
        border-bottom: 1px solid #DFDFDF;
        color: #4A4A4A;
        display: flex;
        display: -webkit-flex;
        justify-content: center;
        -webkit-justify-content: center;
      }
      .userInfo {
        //text-align: center;
        display: flex;
        display: -webkit-flex;
        flex-direction: column;
        -webkit-flex-direction: column;
        align-items: center;
        -webkit-align-items: center;
        justify-content: center;
        -webkit-justify-content: center;
        .userPicture {
          width: 116px;
          height: 116px;
          margin-top: 70px;
          margin-bottom: 214px;
          line-height: 100px;
          border-radius: 50%;
          img {
            height: 110%;
            width: 110%;
            border-radius: 50%;
          }
        }
        .scan-img {
          margin-bottom: 90px;
          img {
            width: 150px;
            height: 150px;
          }
        }
      }
      .finger-exist {
        color: @headerColor;
        font-size: 32px;
        text-align: center;
      }

    }
    .switch {
      font-size: 32px;
      color: @headerColor;
      text-align: center;
      //margin-top: 50%;
      bottom: 4%;
      position: fixed;
      width: 100%;
      display: -webkit-flex;
      display: flex;
      align-items: center;
      justify-content: center;
      -webkit-align-items: center;
      -webkit-justify-content: center;

    }
  }

</style>
