<template>
  <scroll id="login">
    <transition name="trans">
      <div v-show="downNum" class="modal-show">
        <div class="down">
          <div class="policy">
            <p>隐私政策</p>
            <span>演示demo遵守隐私相关的法律规范，在使用演示demo前，请先阅读《演示demo隐私政策》</span>
            <button @click="downNum=false;privacyPolicy()">立即查看</button>
          </div>
        </div>
      </div>
    </transition>
    <div class="bird-icon" />
    <div class="login-wrap">
      <img class="title" src="../assets/login/right-title.png" >
      <div class="pwd">
        <div class="pwd-input">
          <input
            id="userInput" v-model.trim="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="both-button">
        <div class="button submit" @click="access">登录</div>
        <div class="button submit" @click="goHome">游客体验</div>
      </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 || '',
      downNum: false, // 关闭查看隐私协议,
      imgSrc: null,
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      if (from.name !== 'PrivacyPolicy') {
        // vm.getAccessToken()
      }
      if (!window.localStorage.getItem('isReadPolicy')) {
        setTimeout(() => {
          vm.downNum = true
        }, 1000)
      }
    })
  },
  created () {
    const winSize = vum.$vumPlatform.getWinSize()
    if (window.localStorage.isReadPolicy === 'false') {
      window.localStorage.clear()
    } else if (window.localStorage.isReadPolicy === 'true') {
      window.localStorage.clear()
      window.localStorage.setItem('isReadPolicy', true)
    } else {
      window.localStorage.clear()
    }
    if (winSize.width) {
      window.localStorage.setItem('width', winSize.width)
    }
    if (winSize.height) {
      window.localStorage.setItem('height', winSize.height)
    }
  },
  mounted () {
    window.addEventListener('native.keyboardhide', function () {
      document.getElementById('userInput').blur()
      document.activeElement.blur()
    })
    if (vum.Platform.isAndroid()) { // 安卓
      document.getElementById('userInput').focus() // 进入页面强行给dom增加点击事件，为了解决进入页面黑屏
    }
  },
  methods: {
    async goHome () {
      hlsPopup.showLongCenter('游客体验暂不可用！')
      /*let flag = await this.getAccessToken()
      if (flag) {
        this.$router.push('tab')
      }*/
    },
    changeType () {
      this.pwdType = this.pwdType === 'password' ? 'text' : 'password'
      this.openEye =
        this.pwdType === 'password'
          ? require('@/assets/login/pwd.png')
          : require('@/assets/login/pwd-show.png')
    },
    privacyPolicy () {
      this.$router.push({
        name: 'PrivacyPolicy',
        params: {
          button: true,
        },
      })
    },
    login: function () {
      let vm = this
      // vm.password = CryptoJS.MD5(vm.password).toString().toUpperCase();
      let url = process.env.basePath + 'app_login'
      let md5passwprd = CryptoJS.MD5(vm.password)
        .toString()
        .toUpperCase()
      let param = {
        phone: vm.username,
        password: md5passwprd,
      }
      vm.hlsHttp.post(url, param).then(function (res) {
        if (res.result === 'S' && res.info.login_flag === 'Y') {
          vm.hlsPopup.hideLoading()
          // vm.updateVersion() // 版本更新
          window.localStorage.setItem('password', md5passwprd)
          window.localStorage.setItem('user_phone', vm.username)
          window.localStorage.setItem('app_user_id', res.info.app_user_id)
          // vm.$router.push('tab')
          vm.$router.push('/choose-user');
          let tagOption = {
            'username': isNaN(Number(vm.username)) ? '11111111111': vm.username
          }
          let phone = isNaN(Number(vm.username)) ? '11111111111': vm.username;
            vm.Jpush._jpush_config(tagOption, phone);
        } else {
          hlsPopup.hideLoading()
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    async getAccessToken () {
      let vm = this
      let url = process.env.loginPath + 'appadmin'
      let param = {}
      // vm.hlsPopup.showLoading('请稍等')
      let res = await vm.$post(url, param)
      // vm.hlsPopup.hideLoading()
      if (res) {
        window.localStorage.setItem('access_token', res.access_token)
        return true
      }
    },
    async access () {
      document.getElementById('passwordInput').blur()
      document.getElementById('userInput').blur()
      document.activeElement.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('正在登录')
        let flag = await this.getAccessToken()
        if (flag) {
          vm.login()
        }
      }
    },

    registerNew: function () {
      document.getElementById('userInput').blur()
      document.getElementById('passwordInput').blur()
      this.$router.push('regiester2')
    },
    pwdForgotten: function () {
      document.getElementById('userInput').blur()
      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)
          }
        },
      })
    },
    entrySign () {
      let vm = this
      let sendStr = {
        'url': process.env.fileUploadSvcPath + 'attachment_upload',
        'access_token': window.localStorage.getItem('access_token'),
        'params': {
          'user_id': '1',
          'source_type': 'PRJ_PROJECT_VIDEO',
          'pkvalue': 1,
        },
      }
      alert('111')
      vm.hlsPopup.showConfirm({
        title: '提示',
        content: '登录成功，进入会话',
        onConfirm: (res) => {
          if (res) {
            hls.cordova.cloudroom.CloudRoomService.helpYourSelf(sendStr, function (data) {
              alert(JSON.stringify(data, '', 2))
            },
            function (fail) {
              vm.hlsPopup.showLongCenter('进入会话失败')
            })
          } else {

          }
        },
      })
    },
  },
}
</script>

<style lang="less" scoped type="text/less">
  .trans-enter-active,
  .trans-leave-active {
    transition: opacity 0.5s;
  }
  .trans-enter,
  .trans-leave-active {
    opacity: 0;
  }
#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;
  }
   .modal-show {
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    z-index: 900;
    background-color: rgba(56, 63, 69, 0.3);
    justify-content: center;
    align-items: center;
    .policy{
      width:80%;
      height:90%;
      margin:0 auto;
      display: flex;
      justify-content: center;
      flex-direction: column;
      flex-wrap: wrap;
      align-items: center;
    }
    .down {
      position: relative;
      width: 301px;
      height: 202px;
      display: flex;
      justify-content: center;
      flex-flow: column wrap;
      align-items: center;
      background-size: 301px 24.7px;
      background-color: #fff;
      border-radius: 8px;
      p {
        font-family: PingFangSC-Semibold;
        font-size: 16px;
        color: #1d3fff;
        margin-top: 16px;
        flex: 2;
      }
      span {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #383f45;
        flex: 3;
        line-height: 25px;
        text-indent: 10px;
        letter-spacing: 0;
        // margin-top: 6px;
      }
      button {
        width: 159px;
        flex: 2;
        margin-bottom: 16px;
        height: 40px;
        background-color: @headerColor;
        font-family: PingFangSC-Semibold;
        font-size: 15px;
        color: #fafafa;
        line-height: 20px;
      }
    }
  }
  .bird-icon {
    padding-top: 30%;
    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;
  }
  .both-button{
    display: flex;
    justify-content: space-around;
  }
  .submit {
    background: #1d3fff;
    border-radius: 4px;
    width: 130px;
    margin-top: 32px;
    height: 45px;
    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>
