<template>
  <div class="wrapper" >
    <div class="bg_div">
      <image :src="bgUrl" class="bg_img"  ></image>
    </div>

    <div class="logo_div">
      <image :src="headUrl" class="logo_img"  ></image>
    </div>

    <div class="input_div" style="margin-top:100px ">
      <div class="input_border">
        <image :src="personUrl" class="input_small_logo"  ></image>
        <input type="text" placeholder="账       号" class="pwd" @change="onchange" @input="oninput"  />
      </div>
    </div>
    <div  class="input_div" style="margin-top: 30px">
      <div class="input_border">
        <image :src="lockUrl" class="input_small_logo"  ></image>
        <!--<input type="password" placeholder="登录密码" class="pwd" @change="onchange" @input="oninput"  />-->
        <!--<input :type="inputType ?'text':'password'"  placeholder="登录密码" class="pwd" @change="onchange" @input="oninput"  />-->
        <input :type=inputType   placeholder="登录密码" class="pwd" @change="onchange" @input="oninput2"  :value=pwd />

        <image :src="eyeUrl" style="width: 40px;height: 40px;"  @click="changePwd()"></image>
      </div>
    </div>
    <div class="input_div">
      <div class="login_btn" @click="signin()">
        <text class="login_font">{{sign}}</text>

      </div>
    </div>




  </div>
</template>

<style>
  .wrapper {
    align-items: center;

  }
  .bg_div {
    position: absolute;
    width: 750px;
    height: 1250px;
  }
  .bg_img{
    width: 750px;
    height: 1250px;
  }
  .logo_img {
    width: 100px;
    height: 100px;
  }

  .logo_div{
    width: 750px;
    height: 300px;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
  }

  .input_div{
    width: 750px;
    flex-direction: row;
    justify-content: center;
  }

  .input_border{
    width: 560px;
    height: 80px;
    border-width: 1px;
    border-color: #aaa;
    border-radius: 40px;
    flex-direction: row;
    align-items: center;
  }
  .input_small_logo{
    width: 40px;
    height: 40px;
    left: 20px;
  }

  .pwd{
    width: 460px;
    height: 80px;
    align-items: center;
    text-align: center;
    background-color: transparent;
    color: #ccc;
  }

  .eye_img{
    position: absolute;
    right: 10px;
    width: 40px;
    height: 40px;
  }

  .login_btn{
    height:80px ;
    width: 560px;
    font-size:30px ;
    background-color: #34aacd;
    border-radius: 40px;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    margin-top: 60px;
  }
  .login_font{
    color: white;
  }

</style>

<script>
    var  modal = weex.requireModule('modal');
    var navigator = weex.requireModule('navigator');
    var popModule = weex.requireModule('popWindow');
    export default {
        data: {
            personUrl: 'dist/images/more.png',
            headUrl:'https://alibaba.github.io/weex/img/weex_logo_blue@3x.png',
            bgUrl: '',
            lockUrl:'dist/images/more.png',
            eyeUrl:'dist/images/more.png',
            changepwd: '修改密码',
            sign:'登       录 ',
//            inputType:false
            inputType:"text",
            pwd:""
        },
        methods: {
            changePwd: function () {
//                this.inputType = !this.inputType;
//                console.log("inputType2",this.inputType);
                if(this.inputType == 'password'){
                    console.log("inputType1",this.inputType);
                    this.inputType = "text";
                    console.log("inputType2",this.inputType);

                 //   this.eyeUrl = '';
                } else{
                    console.log("inputType3",this.inputType);
                    this.inputType = "password";
                    console.log("inputType4",this.inputType);

                }

            },
            signin: function (e) {
                console.log("popwindow")
               popModule.confirmPop("请输入用户名密码");
            },
            eyeclick: function (e) {
                navigator.push({
                    url: 'dist/content2.js',
                    animated: "true"
                }, event => {
                    modal.toast({ message: 'callback: ' + event })
                })
            },
            back: function (e) {
                navigator.push({
                    url: 'dist/content2.js',
                    animated: "true"
                }, event => {
                    modal.toast({ message: 'callback: ' + event })
                })
            },
            ready: function () {
                var self = this;
                setTimeout(function () {
                    self.autofocus = true;
                }, 1000);
            },
            onchange: function (event) {
                this.txtChange = event.value;
               // console.log('onchange', event.value);
              //  popModule.confirmPop(event.value);
               // event.valueOf('sssss')

            },
            onreturn: function (event) {
                this.txtReturnType = event.returnKeyType;
                console.log('onreturn', event.type);
            },
            oninput: function (event) {
                this.txtInput = event.value;

                console.log('oninput', event.value);
            },
            oninput2: function (event) {
                this.txtInput = event.value;
                pwd = this.txtInput;
                console.log('oninput2', event.value);
            },
            focus: function () {
                this.$refs['input1'].focus();
            },
            blur: function () {
                this.$refs['input1'].blur();
            },
            setRange: function() {
                console.log(this.$refs["inputselection"]);
                this.$refs["inputselection"].setSelectionRange(2, 6);
            },
            getSelectionRange: function() {
                console.log(this.$refs["inputselection"]);
                var self = this;
                this.$refs["inputselection"].getSelectionRange(function(e) {
                    self.txtSelection = e.selectionStart +'-' + e.selectionEnd;
                });
            }
        }
    }
</script>