<template>
  <div >
    <van-nav-bar
      title="登录"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
      style="background-color:#ececec;"
    />

    <van-form @submit="onSubmit">
    <van-field
      v-model="phone"
      type="tel"
      placeholder="手机号"
      :rules="[{ required: true, message: '请填写手机号' }]"
    />
    <van-field
      v-model="vericode"

      placeholder="验证码"
      :rules="[{  required: true, message: '请填写验证码' }]"
    >
    <van-button slot="button" size="small" type="primary" @click="sendS" :disabled="isdisabled">{{text}}</van-button>
    <!-- <template #button>
      <van-button size="small" type="default" @click="sendSms" ref="send" native-type="button"  :disabled="isdisabled">{{text}}</van-button>
    </template> -->
    </van-field>
    <div style="margin: 16px;">
      <van-button round block type="info" native-type="submit">提交</van-button>
    </div>
  </van-form>
  </div>
</template>

<script>
import {login, sendSms} from '@/common/api/loginApi.js'
export default {
  name: 'loginbytel',
  data () {
    return {
      phone: '',
      vericode: '',
      count: 60,
      isdisabled: false,
      text: '获取验证码'
    }
  },
  methods: {
    onSubmit () {
      var that = this
      let wxopenid = that.$store.state.wxopenid
      console.info('phone', that.phone)
      console.info('vericode', that.vericode)
      console.info('wxopenid', wxopenid)
      var data = {phone: that.phone, vericode: that.vericode, openid: wxopenid}
      // var data = {phone: that.phone, vericode: that.vericode}
      login(data).then((res) => {
        console.info('res', res)
        let obj = res
        // console.info('result',obj.result);
        if (!obj.isSuccess) {
          this.$toast(obj.errMsg)
          return
        }
        //设置状态中的各种值
        this.$store.commit('setResult', obj.isSuccess)
        this.$store.commit('setCode', obj.code)
        this.$store.commit('setMsg', obj.errMsg)
        this.$store.commit('setData', obj.data)
        this.$store.commit('setToken', obj.tnToken)
        // console.info('cookie',this.$cookie)
        this.$cookie.set('obj', JSON.stringify(obj)) // 设置cookie
        this.$router.push('/BindHouse')
      })
    },
    onClickLeft () {
      // this.$toast('返回')
      console.info('left')
    },
    onClickRight () {
      // this.$toast('按钮')
    },
    sendS () { // 发送手机验证码
      // var selft = this
      sendSms(this.phone).then((res) => {
        console.info('sendSms res', res)
        if (!res.isSuccess) {
          this.$toast(res.errMsg)
          return
        }
        // eslint-disable-next-line eqeqeq
        if (res.data == 'success') {
          // selft.GetNumber()
          selft.isdisabled = true
          this.$toast('验证码已发送，请查收')
        }
      })
    }
    // GetNumber () // 发送短信验证码后间隔一定时间才能重新发送
    // // eslint-disable-next-line brace-style
    // {
    //   let self = this
    //   var timer = setInterval(function () {
    //     self.count--
    //     self.text = self.count + '秒后重新获取'
    //     self.isdisabled = true

    //     if (self.count <= 0) {
    //       self.isdisabled = false
    //       self.text = '获取验证码'
    //       clearInterval(timer)
    //     }
    //   }, 1000)
    // }

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
