<template>
    <div class="login-container">
        <form-data :item="config" ref="form">
            <template slot="verification">
                <v-btn class="getCode" v-if="codeShow" @click.stop="sendCode" color="primary">获取验证码</v-btn>
                <v-btn class="getCode" v-else disabled>重新获取{{count}}</v-btn>
            </template>
            <template slot="default">
                <v-btn
                    :loading="loading"
                    color="primary"
                    style="width: 100%; margin-bottom: 30px;"
                    @click.native.prevent="handleLogin"
                >
                    确 定
                </v-btn>
            </template>
        </form-data>
    </div>
</template>

<script>

import FormData from '@/components/Form'
// import { code } from '@/mixin/code'
// import { userPhoneResetApi } from '@/api/user'

export default {
  name: 'forgetPage',
  components: { FormData },
  data () {
    return {
      loading: false,
      config: {
        options: [
          {
            label: '手机号码',
            type: 'text',
            key: 'phone',
            value: '',
            rules: [
              v => !!v || '请输入手机号码',
              v => v.length >= 11 || '请输入正确格式的手机号码'
            ],
            outlined: true,
            prependInnerIcon: 'mdi-cellphone',
            change: this.handleChange
          },
          {
            label: '请输入用户名',
            type: 'text',
            key: 'username',
            value: '',
            outlined: true,
            prependInnerIcon: 'mdi-account',
            rules: [v => !!v || '请填写用户名'],
            change: this.handleChange
          },
          {
            label: '新密码',
            type: 'text',
            key: 'password',
            value: '',
            outlined: true,
            prependInnerIcon: 'mdi-account',
            rules: [v => !!v || '请输入新密码'],
            change: this.handleChange
          },
          {
            label: '验证码',
            type: 'text',
            key: 'code',
            slotName: 'verification',
            value: '',
            rules: [v => !!v || '请输入验证码'],
            outlined: true,
            prependInnerIcon: 'mdi-email',
            change: this.handleChange
          }
        ]
      },
      queryForm: {
        code: '',
        phone: '',
        username: '',
        password: ''
      },
      codeShow: true,
      count: 60
    }
  },
  methods: {
    handleChange (v) {
      Object.assign(this.queryForm, v)
    },
    sendCode () {
      this.codeShow = false
      const timer = this.changeCount()
      timer()
    },
    changeCount () {
      let timer = null
      return () => {
        if (timer) clearInterval(timer)
        timer = setInterval(() => {
          this.count--
          if (this.count === 0) {
            clearInterval(timer)
            this.codeShow = true
            this.count = 60
          }
        }, 1000)
      }
    },
    handleLogin () {
      // console.log(this.$refs.form.$refs.form)
      // if (this.$refs.form.validate()) {
      //   userPhoneResetApi (this.form).then(res => {
      //     if (res.code === 200) {
      //       this.text = '修改成功'
      //       this.color = 'success'
      //       this.snackbar = true
      //       setTimeout(() => {
      //         this.toLogin()
      //       }, 2000)
      //     }
      //   }).catch(err => {
      //     this.text = err.msg
      //     this.color = 'error'
      //     this.snackbar = true
      //   })
      // }
    },
    toLogin () {
      // this.$router.push('/login')
    }
  }
}
</script>

<style lang="scss" scoped>
.getCode {
  position: absolute;
  right: 10px;
  top: 8px
}
</style>
