<template>
  <div class="container">
    <div class="bgimg"></div>
    <div class="content">
      <div class="title">登录信息</div>
      <div class="loginForm">
        <mt-field placeholder="姓 名" v-model="form.name"></mt-field>
        <div style="display:flex;">
          <div style="width:80%;">
            <mt-field placeholder="手机号" v-model="form.phone"></mt-field>
          </div>
          <div style="width:20%;">
            <mt-button :disabled="disable" type="primary" class="sendPhcode" @click="timeCounter">{{timeCouterText}}
            </mt-button>
          </div>
        </div>
        <mt-field placeholder="短信验证码" v-model="form.phcode" type="number"></mt-field>
      </div>
      <div class="footer">
        <div class="jbbtn" @click="submit">提交</div>
        <div class="agreeInfo">
          <input type="checkbox" checked v-if="form.isagree" @change="checkOnClick" />
          <input type="checkbox" v-else @change="checkOnClick" />
          <!-- <mt-checklist v-model="form.isagree" :options="['选项A', '选项B', '选项C']"></mt-checklist> -->
          <span>我已知晓<a href="/#/agreedoc?from=1" @click.native="checkOnClick">《PK程序用户隐私条款》</a></span>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    Field,
    Button,
    Toast,
    MessageBox,
    Checklist
  } from 'mint-ui'

  export default {
    name: 'Index',
    components: {
      Field,
      Button,
      Toast,
      MessageBox,
      Checklist
    },
    data() {
      return {
        email: '',
        timeCouterText: '发送',
        seconds: 60,
        disable: false,
        isagree: false,
        form: {}
      }
    },
    methods: {
      goPage(path) {
        this.$router.push(path)
      },
      timeCounter() {
        if(!this.form.phone){
          MessageBox({
            title: '提示',
            message: '请输入手机号?'
          })
          return
        }
        let _this = this
        this.$api.sendPhcode(this.form).then(res=>{})
        var timer = setInterval(function () {
          if (_this.seconds < 2) {
            clearInterval(timer)
            _this.seconds = 60
            _this.timeCouterText = '发送'
            _this.disable = false
            return
          }
          _this.seconds -= 1
          _this.timeCouterText = _this.seconds + '秒后重新发送'
          _this.disable = true
        }, 1000)
      },
      checkOnClick(e){
        if(e.target.checked){
          this.form.isagree = true
        }else{
          this.form.isagree = false
        }
      },
      submit() {
        if (!this.form.name) {
          MessageBox({
            title: '提示',
            message: '请输入姓名'
          })
          return 
        }
        if (!this.form.phone) {
          MessageBox({
            title: '提示',
            message: '请输入手机号'
          })
          return
        }
        if (!this.form.phcode) {
          MessageBox({
            title: '提示',
            message: '请输入验证码'
          })
          return
        }
        if (!this.form.isagree) {
          MessageBox({
            title: '提示',
            message: '请先同意《PK程序用户隐私条款》'
          })
          return
        }
        let params = this.form
        params.role = 1
        this.$api.login(params).then(res=>{
          if(!res.data.code){
            localStorage.setItem("token",res.data.data.token)
            this.goPage("/docindex")
          }else{
            Toast(res.data.message)
          }
        })
      }
    }
  }

</script>

<style scoped lang="scss">
  .content {
    position: relative;
    z-index: 1;

    .loginForm {
      .sendPhcode {
        /* width: 6rem; */
        width: 100%;
        margin-top: 1rem;
        height: 3.0rem;
        border-radius: 1.4rem;
      }
    }

    .footer {
      /* position: absolute; */
      bottom: 1rem;
      margin: 0 auto;
      left: 0;
      right: 0;
      bottom: 1rem;

      .agreeInfo {
        margin: 2rem 0;
      }
    }
  }

</style>
