<template>
  <scroll id="login" ref="scroll" class="content">
    <div>
      <div class="bird-icon"><img src="../assets/image/login/bird-icon.png"></div>
      <div class="pwd">
        <div class="pwd-icon"><img src="../assets/image/login/user.png"></div>
        <div class="pwd-input"><input v-model="username" type="text" placeholder="请输入用户名/手机号"></div>
        <div v-if="username" class="delete" @click="clearAccount"><img src="../assets/image/login/delete.png"></div>
      </div>
      <div class="pwd">
        <div class="pwd-icon"><img src="../assets/image/login/password.png"></div>
        <div class="pwd-input"><input v-model="password" type="password" placeholder="请输入密码"></div>
        <div v-if="password" class="delete" @click="clearPassword"><img src="../assets/image/login/delete.png"></div>
      </div>
      <div class="other-function">
        <div class="register" @click="registerNew">用户注册</div>
        <div class="pwd-forgotten" @click="pwdForgotten">忘记密码</div>
      </div>
      <div class="button submit" @click="access">登录</div>
    </div>
  </scroll>
</template>

<script>
var CryptoJS = require('crypto-js')
export default {
  data () {
    return {
      username: window.localStorage.username ? window.localStorage.username : '',
      password: '',
      version: process.env.currentVersion,
      routeName: this.$route.params.routeName || '',
    }
  },
  methods: {
    login: function () {
      let vm = this
      vm.$router.push('tab')
     /* let vm = this
      // debugger;
      // vm.password = CryptoJS.MD5(vm.password).toString().toUpperCase();
      let md5passwprd = CryptoJS.MD5(vm.password).toString().toUpperCase()
      let param = {
        'user_name': vm.username,
        'user_password': md5passwprd,
        'platform': 'C',
      }
      vm.$post(process.env.basePath + 'tc_app_login', param)
        .then(function (res) {
          if (res.result === 'S') {
            vm.hlsPopup.hideLoading()
            window.localStorage.setItem('username', vm.username.toUpperCase())
            window.localStorage.setItem('password', md5passwprd)
            window.localStorage.setItem('user_id', res.user_id)
            if (res.bp_id && res.bp_id !== 'undefined') {
              window.localStorage.setItem('bp_id', res.bp_id)
            }

            // if (vm.routeName) {
            //  vm.$router.push({name: vm.routeName})
            // } else {
            vm.$router.push('tab')
            // }
            let tagOption = {
              'username': vm.username.toUpperCase(),
              'user_id': res.user_id,
            }
            vm.Jpush._jpush_config(tagOption)
          }
          // 极光推送
        })*/
    },
    access: function () {
      let vm = this
      if (!vm.username || vm.username === undefined) {
        vm.hlsPopup.showLongCenter('请输入用户名')
      } else if (!vm.password || vm.password === undefined) {
        vm.hlsPopup.showLongCenter('请输入密码')
      } else {
        let url = process.env.loginPath + 'appadmin'
        let param = {}
        vm.hlsPopup.showLoading('请稍等')
        vm.$post(url, param).then(function (res) {
          vm.hlsPopup.hideLoading()
          window.localStorage.setItem('access_token', res.access_token)
          vm.login()
        })
      }
    },
    registerNew: function () {
      this.$router.push('regiester')
    },
    pwdForgotten: function () {
      this.$router.push('pwd-forgot')
    },
    clearAccount: function () {
      this.username = ''
    },
    clearPassword: function () {
      this.password = ''
    },
  },
}
</script>

<style lang="less" scoped type="text/less">
  #login {
    background: url("../assets/image/login/bg@2x.png") no-repeat;
    background-size: cover;
    background-position-x: 0px;
    color: #FFFFFF;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    .bird-icon {
      padding-top: 25%;
      width: 100%;
      display: flex;
      display: -webkit-flex;
      justify-content: center;
      -webkit-justify-content: center;
      img {
        width: 138px;
        height: 48px;
      }
    }
    .login {
      border-bottom: 1px solid #5D98F6;
      display: flex;
      display: -webkit-flex;
      margin: 15% auto 0;
      width: 250px;
      justify-content: center;
      .person-icon {
        margin-bottom: 9px;
        margin-right: 15px;
        margin-left: 3px;
        img {
          width: 18px;
          height: 20px;
        }
      }
      .admin-input {
        //width: 380px;
        height: 25px;
        display: flex;
        display: -webkit-flex;
        align-items: center;
        -webkit-align-items: center;
        input {
          width: 100%;
          height: 100%;
          font-size: 16px;
          color: #9e9e9e;
          margin-bottom: 5px;
          line-height: 22px;
        }
        input::-webkit-input-placeholder {
          font-size: 16px;
          color: #CDD1D3;
        }
      }
      .delete {
        img {
          margin-top: 5px;
          width: 12px;
          height: 12px;
        }
      }
    }
    .pwd {
      border-bottom: 1px solid #5D98F6;
      display: flex;
      display: -webkit-flex;
      margin: 15% auto 0;
      width: 250px;
      .pwd-icon {
        margin-bottom: 9px;
        margin-right: 15px;
        margin-left: 3px;
        img {
          width: 18px;
          height: 20px;
        }
      }
      .pwd-input {
        //width: 380px;
        height: 25px;
        display: flex;
        display: -webkit-flex;
        align-items: center;
        -webkit-align-items: center;
        input {
          width: 100%;
          height: 100%;
          font-size: 16px;
          color: #9e9e9e;
          line-height: 22px;
          margin-bottom: 5px;
        }
        input::-webkit-input-placeholder {
          font-size: 16px;
          color: #CDD1D3;
        }
      }
      .delete {
        img {
          margin-top: 5px;
          width: 12px;
          height: 12px;
        }
      }
    }
    .other-function {
      width: 250px;
      display: flex;
      display: -webkit-flex;
      justify-content: space-between;
      -webkit-justify-content: space-between;
      margin: 8% auto 0;
      .register {
        color: #5D98F6;
        font-size: 15px;
      }
      .pwd-forgotten {
        color: #5D98F6;
        font-size: 15px;
      }
    }
    .submit {
      width: 250px;
      opacity: 1;
      background-color: #5D98F6;
      border-radius: 4px;
      height: 40px;
      margin: 22% auto 0;
      font-size:16px;
      color: #FEFEFE;
      display: flex;
      display: -webkit-flex;
      justify-content: center;
      -webkit-justify-content: center;
      align-items: center;
      -webkit-align-items: center;
      &.activated {
        opacity: 0.8;
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1)
      }
    }
  }
</style>
