<template>
  <scroll id="login">
    <div class="bird-icon" />
    <div class="login-wrap">
      <img class="title" src="../assets/login/title.png" >
      <div class="pwd">
        <div class="pwd-input">
          <input id="userInput" v-model="username" class="user" type="text" placeholder="请输入用户名/手机号" >
        </div>
        <div v-if="username" class="delete" @click="clearAccount">
          <img src="../assets/login/login-delete.png" >
        </div>
      </div>
      <div class="pwd">
        <div class="pwd-input">
          <input
            id="passwordInput" v-model="password" :type="pwdType" placeholder="请输入密码"
            oninput="value=value.replace(/[^\w\.\&\/\|\,\\_\-\+\=\[\]\{\}\'\^\%\$\@\!\~\`\*\《\》\<\>\/\;\:\,\，\。\【\】\？\?\、\；\：\‘\“\(\#)]/i,'')" >
        </div>
        <div v-if="password" class="delete" @click="changeType">
          <img :src="openEye" >
        </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 class="clear-button" id="clearBtn"></div>
    </div>
  </scroll>
</template>

<script>
var CryptoJS = require('crypto-js')
export default {
  data () {
    return {
      pwdType: 'password', // 密码类型
      openEye: require('@/assets/login/pwd.png'), // 图片地址
      username: window.localStorage.username
        ? window.localStorage.username
        : '',
      password: '',
      currentVersion: process.env.currentVersion,
      routeName: this.$route.params.routeName || '',
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.getAccessToken()
    })
  },
  created () {

  },
  mounted () {
    window.addEventListener('native.keyboardhide', function () {
      document.activeElement.blur()
    })
    if (vum.Platform.isAndroid()) { // 安卓
      document.getElementById('userInput').focus()  // 进入页面强行给dom增加点击事件，为了解决进入页面黑屏
    }
  },
  methods: {
    changeType () {
      this.pwdType = this.pwdType === 'password' ? 'text' : 'password'
      this.openEye =
        this.pwdType === 'password'
          ? require('@/assets/login/pwd.png')
          : require('@/assets/login/pwd-show.png')
    },
    login: function () {
      let vm = this
      // vm.password = CryptoJS.MD5(vm.password).toString().toUpperCase();
      let md5passwprd = CryptoJS.MD5(vm.password)
        .toString()
        .toUpperCase()
      let param = {
        phone: vm.username,
        password: md5passwprd,
      }
      vm.$post(process.env.basePath + 'app_login', param).then(function (res) {
        if (res.result === 'S' && res.info.login_flag === 'Y') {
          vm.hlsPopup.hideLoading()
          window.localStorage.setItem('user_phone', vm.username)
          window.localStorage.setItem('password', md5passwprd)
          vm.$router.push('tab')
          let tagOption = {
            'username': vm.username,
          }
          vm.Jpush._jpush_config(tagOption)
        } else {
          hlsPopup.hideLoading()
          hlsPopup.showLongCenter('手机号未注册或密码错误')
        }
        // 极光推送
      })
    },
    getAccessToken () {
      let vm = this
      let url = process.env.loginPath + 'admin'
      let param = {}
      // vm.hlsPopup.showLoading('请稍等')
      vm.$post(url, param).then(function (res) {
      //  vm.hlsPopup.hideLoading()
        window.localStorage.setItem('access_token', res.access_token)
        vm.updateVersion() // 版本更新
      })
    },
    access: function () {
      document.getElementById('passwordInput').blur()
      let vm = this
      if (!vm.username || vm.username === undefined) {
        vm.hlsPopup.showLongCenter('请输入用户名')
      } else if (!vm.password || vm.password === undefined) {
        vm.hlsPopup.showLongCenter('请输入密码')
      } else {
        hlsPopup.showLoading('正在登录')
        vm.login()
      }
    },
    registerNew: function () {
      document.getElementById('passwordInput').blur()
      this.$router.push('regiester2')
    },
    pwdForgotten: function () {
      document.getElementById('passwordInput').blur()
      this.$router.push('pwd-forgot')
    },
    clearAccount: function () {
      this.username = ''
      this.password = ''
    },
    clearPassword: function () {
      this.password = ''
    },
    // 版本更新
    updateVersion () {
      let vm = this
      let url = $config.basePath + 'version_update'
      let param = {}
      vm.$post(url, param).then(function (res) {
        if (res.result === 'S') {
          // 版本更新
          var updateUrl = ''
          var content = ''
          if (vum.Platform.isAndroid()) {
            if (res.android_version_list.length) {
              if (res.android_version_list[0].app_version !== vm.currentVersion) {
                updateUrl = res.android_version_list[0].version_url
                content = res.android_version_list[0].update_content
                if (res.android_version_list[0].big_version === 'Y') {
                  vm.open_new_win(content, updateUrl)
                } else {
                  vm.hote_update_version(content, updateUrl)
                }
              } else {

              }
            }
          } else if (vum.Platform.isIOS()) {
            if (res.ios_version_list.length) {
              if (res.ios_version_list[0].app_version !== vm.currentVersion) {
                updateUrl = res.ios_version_list[0].version_url
                content = res.ios_version_list[0].update_content
                if (res.ios_version_list[0].big_version === 'Y') {
                  vm.open_new_win(content, updateUrl)
                } else {
                  vm.hote_update_version(content, updateUrl)
                }
              } else {

              }
            }
          }
        }
      })
    },
    open_new_win (content, url) {
      if (url) {
        hlsPopup.showConfirm({
          title: '版本更新',
          content: content,
          onConfirm: function (index) {
            if (index === 1) {
              cordova.InAppBrowser.open(url, '_system', 'location=yes')
            } else {

            }
          },
        })
      }
    },
    hote_update_version (content, url) {
      hlsPopup.showConfirm({
        title: '版本更新',
        content: content,
        onConfirm: function (index) {
          if (index === 1) {
            hotpatch.updateNewVersion(url)
          }
        },
      })
    },
  },
}
</script>

<style lang="less" scoped type="text/less">
#login {
  background: url("../assets/login/back.png") no-repeat;
  background-size: 100% 100%;
  background-position-x: 0px;
  color: #ffffff;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  .scrollContent {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .bird-icon {
    padding-top: 30%;
    background: url("../assets/login/right.png") 90% no-repeat;
    background-size: 51px 25px;
  }
  .login-wrap {
    width: 87%;
    height: 355px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 8px;
    // margin-top: 15%;
    margin-top: 6%;
    padding: 32px 24px;
    .title {
      width: 227px;
      height: 71px;
      margin-left: -10px;
    }
  }
  .pwd {
    position: relative;
    width: 279px;
    margin: 0 auto;
    display: flex;
    display: -webkit-flex;
    .pwd-icon {
      margin-top: 2px;
      margin-right: 6px;
      margin-left: 4px;
      img {
        width: 18px;
        height: 20px;
      }
    }
    .pwd-input {
      width: 100%;
      .user {
        background: url("../assets/login/phone.png") 2px 2px no-repeat;
        background-size: 25px 25px;
      }
      #passwordInput {
        background: url("../assets/login/passwordConfirm.png") 2px 2px no-repeat;
        background-size: 25px 25px;
      }
      input {
        width: 100%;
        text-indent: 30px;
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #2a2a2a;
        height: 35px;
        line-height: 35px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid rgba(42, 42, 42, 0.4);
        margin-top: 30px;
        border-top:1px solid #FFF;
        border-left: 1px solid #FFF;
        border-right: 1px solid #FFF;
      }
      input:focus {
        border-bottom: 1px solid #1d3fff;
      }
      input::-webkit-input-placeholder {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: rgba(75, 74, 75, 0.4);
      }
    }
    .delete {
      position: absolute;
      right: -15px;
      top: 30px;
      img {
        margin-right: 20px;
        margin-top: 5px;
        width: 20px;
        // height: 14px;
      }
    }
  }
  .other-function {
    width: 279px;
    margin: 0 auto;
    display: flex;
    font-family: PingFangSC-Regular;
    font-size: 13px;
    color: #1d3fff;
    margin-top: 8px;
    font-weight: 500;
    display: -webkit-flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
  }
  .submit {
    background: #1d3fff;
    border-radius: 4px;
    width: 279px;
    margin-top: 32px;
    height: 49px;
    font-size: 16px;
    color: #fff;
    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);
    }
  }
}
.platform-ios {
  #login {
    .pwd-input{
      input{
        line-height: 20px;
      }
    }
  }
}
@media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
  .platform-ios {
    #login {
      .pwd-input{
        input{
          line-height: 20px;
        }
      }
      .login-wrap{
        margin-top:20%
      }
    }
  }
}
// iPhoneXR适配
@media (device-width: 414px) and (device-height: 896px) {
  .platform-ios {
    #login {
      .pwd-input{
        input{
          line-height: 20px;
        }
      }
      .login-wrap{
        margin-top:20%
      }
    }
  }
}
</style>
