<template>
  <div id="app" >
    <div class="changepwd__body">
        <div class="changepwd__item border-bottom">
            <span class="changepwd__label">输入验证码</span>
            <mu-text-field  hint-text="验证码" class="changepwd__input"
              type='number' @input="handleChange"
              toogleList
              :maxlength="length"
              @clear-input='handleClearInput("pwd")'
              value="123"
              full-width>
              <div slot="operationBar" class="operationBar">
                获取验证码
              </div>

            </mu-text-field>

        </div>
        <div class="changepwd__item border-bottom" style="margin-top:12px">
            <span class="changepwd__label">新密码</span>
            <mu-text-field v-model="oldPwd" hint-text="新密码" class="changepwd__input"
              type='number' @handleinput="handleChange"
              :ulist="ulist"
              :toogle-list="toogleList"
              full-width>

            </mu-text-field>
        </div>
      </div>
      <mu-raised-button :disabled="disable" label="登录" @btn-click="handleAccountLogin" style="margin-top:24px" full-width primary></mu-raised-button>
  </div>
</template>
<script>

import TextField  from 'muse-ui/form/textField';
import button  from 'muse-ui/raisedButton';


export default {
    name: 'app',
    components:{
      'mu-text-field':TextField,
      'mu-raised-button':button
    },
    data: function () {
      return {
        oldPwd:'',
        disable: true,
        length:Number(6),
        toogleList: true,
        ulist:[
          {password: "123456",remember: true,account: "ice02@qq.com"},
          {password: "123456",remember: true,account: "ice02@qq.com"},
          {password: "123456",remember: true,account: "ice02@qq.com"},
          {password: "123456",remember: true,account: "ice02@qq.com"},
          {password: "123456",remember: true,account: "ice02@qq.com"},

        ]
      };
    },
    created: function() {
      console.log(typeof(this.length))
    },
    mounted:function(){
    },
    methods: {
      handleChange(e){
        console.log(e)
      },
      handleAccountLogin(){
        console.log(8888)
      },
      handleClearInput(){
        this.oldPwd = ''
      }
    }
}
</script>
<style lang="less">
  #app{
    background: #f3f4f5;

  }

  .operationBar{
    position: absolute;
    right: 0;
    right: 12px;
    line-height: 54px;
    height: 54px;
    color:#1E80C7;
    font-size:14px;
  }
.changepwd__body {

    .mu-text-field__toolbar {
        position: absolute;
        right: 0px;
        display: inline-block;
    }
    .m-sys-eye-active:before {
        color: #1695f0!important;
    }
    .m-sys-eye-active, .m-sys-eye {
        width: 44px;
        height: 54px;
        font-size: 14px;
        text-align: center;
        line-height: 56px;
        display: inline-block;
    }
    .m-sys-yuanxingguanbi {
        width: 44px;
        height: 54px;
        line-height: 54px;
        justify-content: center;
        display: inline-flex;
        margin-right: -6px;
    }
  .changepwd__title {
    font-size:14px;
    color:#9da0a3;
    line-height:16px;
    padding: 0 12px;
    margin-top: 10px;
  }
  .changepwd__item.no-mt{
    margin-top: 0;
  }
  .changepwd__item {
    height: 54px;
    background-color: #fff;
    margin-top: 10px;
    position: relative;
    .changepwd__label {
      display: inline-block;
      text-align: center;
      font-size: 16px;
      color: #3a4247;
      line-height: 20px;
      position: absolute;
      left: 12px;
      top: 17px;
    }
    .changepwd__input {
        right: 0;
        position: absolute;
        width: calc(~"100% - 60px");
        margin-bottom: 0;
        .mu-text-field-line,.mu-text-field-focus-line {
            display: none;
        }
      .inputValue_del_icon {
        top: 12px!important;
      }
      .mu-text-field-hint {
          font-size: 16px;
          line-height: 20px;
          margin-top: 17px;
          margin-left: 40px;
      }
      .mu-text-field-input {
            font-size: 16px;
            line-height: 20px;
            width: 60%;
            margin-right: 12px;
            display:inline-block;
            position: absolute;
            left: 40px;
            padding-top: 17px;
            padding-bottom: 17px;
            top: -24px;
      }
    }
  }
}
::-webkit-input-placeholder {
  color:#bfc4c7;
}

</style>
