<template>
  <div id="app">
    <mu-tab :button-list="buttonList"
            :default-index='index'
            :hasBg="hasBg"
            @clickbutton="clickbutton"
            @touch-move-animation='touchMoveAnimation'
    >
        <div slot="slot" style="position: absolute;margin-top: 34px;background: #ccc;width: 100%;text-align: center;">1234555555555</div>
        <div slot="panel">
          <mu-tab-panel class="cantainer">
            <form class="login__form">
dfsfaafdsa
            </form>
          </mu-tab-panel>
          <mu-tab-panel class="cantainer2" ref='remove'>
            123
          </mu-tab-panel>
          <!-- <mu-tab-panel class="cantainer3">
            123的撒发的撒发
          </mu-tab-panel> -->
        </div>

    </mu-tab>
  </div>
</template>
<script>
import {tab, tabPanel}  from 'muse-ui/tabbutton';
import textField from 'muse-ui/form/textField';
var start =  new Date().getTime();

export default {
    name: 'app',
    components:{
      'mu-tab':tab,
      'mu-tab-panel':tabPanel,
      'mu-text-field':textField
    },
    data: function () {
      return{
        buttonList:[{
          title:"短信登录",
          isActive:true,
          id:0,
        },{
          title:"验证码登录",
          isActive:false,
          id:1,
        }],
        index:1,
        startX:'',
        moveX: '',
        hasBg: false
      }
    },
    created: function() {
    },
    mounted:function(){
      var self = this;
      var end =  new Date().getTime();
        console.log(end - start);
    },
    methods: {
      touchMoveAnimation(){
        console.log(123)
      },
      touchStart(ev){
          ev = ev || event;
          //tounches类数组，等于1时表示此时有只有一只手指在触摸屏幕
          if(ev.touches.length == 1){
              // 记录开始位置
              this.startX = ev.touches[0].clientX;
          }
      },
      touchmove(ev){

      },
      touchEnd(){

      },
      clickbutton(id){
      console.log(123)
        console.log(id)
      }
    }
}
</script>
<style>
#app{
  background: #f3f4f5;
}
.cantainer{
  background: #bfbe47;
  height: 200px;
}
.cantainer2{
  background: #aa47bf;
  height: 200px;
}
.cantainer3{
  background: #ccc;
  height: 200px;
}
.login__input{
  margin-right: 22px;
}
.pwd__input{
      margin-top: 10px;
    }
    .pwd__input .mu-text-field-input{
      padding-top: 6px;
}
</style>
