<template>
  <div class="login-form">
    <div class="login-form-title">{{ activeModel.title }}</div>
    <div class="login-form-account">
      <input class="hidden-input" >
        
      <input class="hidden-input" type="password" name="password1"  />
      <div v-for="item in activeModel.item" :key="item.name" class="form-item">
        {{ item.name }}
        
        <input
          v-model="loginForm[item.model]"
          :type="item.type"
          @keyup.enter="handleLogin"
          autocomplete="off"
        >
        <span class="sendCode-btn" v-if="item.code" @click="handleGetCode">{{sendCodeSecend ? `${sendCodeSecend}s后重试` : '获取验证码'}}</span>
      </div>
      <div v-if="activeModel.type === 'login'" class="form-subjoin login-sub">
        <a class="forget" target="_blank" href="https://4dkankan.com">忘记密码</a>
        <a class="register" target="_blank" href="https://4dkankan.com">账号注册</a>
      </div>
      <div v-else-if="activeModel.type === 'register'" class="form-subjoin">
        已有账号？
         <router-link to="login" class="login-up">登录</router-link>
      </div>
      <div v-else class="form-subjoin">
        想起来了，
         <router-link to="login" class="login-up">登录</router-link>
      </div>
      <div class="form-button">
        <Button type="primary" long @click="handles(activeModel.handle)">{{ activeModel.buttonText }}</Button>
      </div>
    </div>
  </div>
</template>

<script>
import { Message } from 'view-design'
import { mapActions } from 'vuex'
import { register, getCode, changePassword } from 'api'
import encode from '@/utils/encode'
  
export default {
  name: 'LoginForm',
  components: {},
  data() {
    return {
      sendCodeSecend: 0,
      loginForm: {
        nickName: '',
        password: '',
        confirmPwd: '',
        phoneNum: '',
        msgAuthCode: '',
        country: '中国',
        randomcode: '',
        rememberMe: true
      },
      loginModel: {
        type: 'login',
        handle: 'handleLogin',
        title: '后台登录',
        buttonText: '登录',
        item: [{
          name: '账号',
          type: 'text',
          model: 'phoneNum'
        }, {
          name: '密码',
          type: 'password',
          model: 'password'
        }]
      },
      registerModel: {
        type: 'register',
        handle: 'handleRegister',
        title: '账号注册',
        buttonText: '注册',
        item: [{
          name: '手机号',
          type: 'text',
          model: 'phoneNum',
          errorMsg: '请填写手机号'
        }, {
          name: '验证码',
          type: 'text',
          code: true,
          model: 'msgAuthCode',
          errorMsg: '请填写验证码'
        }, {
          name: '输入密码',
          type: 'password',
          model: 'password',
          errorMsg: '请填写密码'
        }, {
          name: '确认密码',
          type: 'password',
          model: 'confirmPwd',
          errorMsg: '请填写确认密码'
        }]
      },
      forgetModel: {
        type: 'forget',
        handle: 'handleForget',
        title: '密码重置',
        buttonText: '重置',
        item: [{
          name: '手机号',
          type: 'text',
          model: 'phoneNum'
        }, {
          name: '验证码',
          type: 'text',
          code: true,
          model: 'msgAuthCode'
        }, {
          name: '新密码',
          type: 'password',
          model: 'password'
        }, {
          name: '确认密码',
          type: 'password',
          model: 'confirmPwd'
        }]
      }
    }
  },
  computed: {
    activeModel() {
      const type = this.$route.query.type ? this.$route.query.type : 'login'
      return this[type + 'Model']
    }
  },
  watch: {
    activeModel (val) {
      let phoneNum = this.loginForm.phoneNum
      this.resetForm()
      this.loginForm.phoneNum = phoneNum
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.resetForm()
    })
  },
  methods: {
    ...mapActions([
      'login'
    ]),
    resetForm() {
      this.loginForm = {
        nickName: '',
        password: '',
        confirmPwd: '',
        phoneNum: '',
        msgAuthCode: '',
        country: '中国',
        randomcode: '',
        rememberMe: true
      }
    },
    handles(handle) {
      this[handle]()
    },
    handleGetCode() {
      this.$bebounce(() => {
        if (this.sendCodeSecend) return
        console.log(this.activeModel.type)
        let typeMap = {
          register: 1,
          forget: 2
        }
        const type = typeMap[this.activeModel.type] || ''
        getCode({ phone_num: this.loginForm.phoneNum, type }).then(
          res => {
            Message.info({
              content: '验证码发送成功',
              background: true
            })
            this.sendCodeSecend = 60
            let timer
            timer = setInterval(() => {
              if (this.sendCodeSecend <= 1) {
                clearInterval(timer)
              }
              this.sendCodeSecend = this.sendCodeSecend - 1
            }, 1000)
            // this.loginForm.code = res.data
          }
        ).catch (err => {
          this.sendCodeSecend = 0
        })
      })
      
    },
    handleLogin() {
      if (!this.loginForm.phoneNum.trim()) {
        Message.error({
          content: '请输入账号',
          background: true
        })
        return false
      }
      if (!this.loginForm.password.trim()) {
        Message.error({
          content: '请输入密码',
          background: true
        })
        return false
      }
      let form = Object.assign({}, this.loginForm)
      form.password = encode(this.loginForm.password)
      this.login(form).then(
        res => {
          this.$router.push({ path: '/' })
        }
      )
    },
    handleRegister() {
      if (!this.loginForm.phoneNum || !(/^1[3456789]\d{9}$/.test(this.loginForm.phoneNum))) {
        Message.error({
          content: '请输入正确的手机号',
          background: true
        })
        return false
      }
      if (!this.loginForm.msgAuthCode || !(/\d{6}/.test(this.loginForm.msgAuthCode))) {
        Message.error({
          content: '请输入正确的验证码',
          background: true
        })
        return false
      }
      if (!this.loginForm.password) {
        Message.error({
          content: '请输入密码',
          background: true
        })
        return false
      }
      if (this.loginForm.password !== this.loginForm.confirmPwd) {
        Message.error({
          content: '两次输入的密码不一致'
        })
        return
      }

      this.loginForm.password = encode(this.loginForm.password)
      this.loginForm.confirmPwd = encode(this.loginForm.confirmPwd)
      register(this.loginForm).then(
        () => {
          Message.info({
            content: '注册成功',
            background: true
          })
          this.$router.push({ path: '/' })
        }
      ).catch((err) => {
        console.log(err, 'err')
        this.loginForm.password = ''
        this.loginForm.confirmPwd = ''
      })
    },
    handleForget() {
      if (!this.loginForm.phoneNum || !(/^1[3456789]\d{9}$/.test(this.loginForm.phoneNum))) {
        Message.error({
          content: '请输入正确的手机号',
          background: true
        })
        return false
      }
      if (!this.loginForm.msgAuthCode) {
        Message.error({
          content: '请输入验证码',
          background: true
        })
        return false
      }
      if (!this.loginForm.password) {
        Message.error({
          content: '请输入密码',
          background: true
        })
        return false
      }
      if (this.loginForm.password !== this.loginForm.confirmPwd) {
        Message.error({
          content: '两次输入的密码不一致'
        })
        return
      }
      this.loginForm.password = encode(this.loginForm.password)
      this.loginForm.confirmPwd = this.loginForm.password
      changePassword(Object.assign(this.loginForm)).then(
        () => {
          Message.info({
            content: '重置成功',
            background: true
          })
          this.resetForm()
          this.$router.push({ path: 'login' })
        }
      ).catch((err) => {
        console.log(err, 'err')
        this.loginForm.password = ''
        this.loginForm.confirmPwd = ''
      })
    }
  },
}
</script>

<style scoped lang="less">
.login-form {
  background-color: #252828;
  border-radius: 2px;
  &-title {
    font-size: 16px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    color: rgba(255, 255, 255, 0.88);
    border-bottom: 1px solid #1FE4DC;
  }
  &-account {
    position: relative;
    padding: 30px;
    .form-item {
      width: 280px;
      height: 48px;
      padding: 10px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 2px;
      margin-bottom: 20px;
      font-size: 14px;
      color: #fff;
      input {
        width: 135px;
        color: #fff;
        padding: 4px;
        background: none;
        border: none;
        outline: none;
      }
    }
    .form-subjoin {
      text-align: right;
      margin-bottom: 20px;
    }
    .login-sub {
      a {
        color: rgba(255, 255, 255, 0.38);
      }
      a:nth-child(2):before {
        content: "|";
        margin: 0 8px;
      }
    }
    .form-button {
      button {
        border-radius: 2px;
        height: 48px;
        background-color: #1FE4DC;
      }
    }
  }
}
.sendCode-btn {
  cursor: pointer;
}

</style>
