<template>
  <div>
    <img src="../../assets/images/login/login-bj.png" alt class="backdrop" />
    <div class="content">
      <div class="tap-btn">
        <div :class="tapIndex ? '' : 'active'" @click="tapChange(0)">登录</div>
        <div :class="tapIndex ? 'active' : ''" @click="tapChange(1)">注册</div>
      </div>
      <template v-if="!tapIndex">
        <div class="login" v-if="!loginType">
          <div class="input">
            <input class="w_100" type="text" placeholder="请输入手机号" v-model="form.accountLogin1.account"/>
          </div>
          <div class="input">
            <input class="w_100" type="password" placeholder="请输入密码" v-model="form.accountLogin1.password"/>
          </div>
        </div>
        <div class="login" v-else>
          <div class="input">
            <input class="w_100" type="text" placeholder="请输入手机号" v-model="form.accountLogin2.mobile"/>
          </div>
          <div class="input">
            <input type="text" maxlength="4" placeholder="请输入验证码" v-model="form.accountLogin2.sms_code"/>
            <div @click="getLoginCode" :class="time.second == 60 ? 'yzm-btn' : 'active yzm-btn'">{{ time.second == 60 ? '获取验证码' : `已发送验证码（${time.second}）` }}</div>
          </div>
        </div>
        <div class="box-btn" @click="login">登录</div>
        <div class="tap-login" @click="loginType ? loginType = 0 : loginType = 1">{{ loginType ? '账号密码登录' : '验证码登录' }}</div>
      </template>
      <template v-else>
        <div class="login">
          <div class="input">
            <input class="w_100" type="text" placeholder="请输入真实姓名" v-model="form.register.username"/>
          </div>
          <div class="input">
            <input class="w_100" type="text" placeholder="请输入手机号" v-model="form.register.mobile"/>
          </div>
          <div class="input">
            <input type="text" maxlength="4" placeholder="请输入验证码" v-model="form.register.sms_code"/>
            <div @click="getRegisterCode" :class="time.second == 60 ? 'yzm-btn' : 'active yzm-btn'">{{ time.second == 60 ? '获取验证码' : `已发送验证码（${time.second}）` }}</div>
          </div>
        </div>
        <div @click="register" class="box-btn">注册</div>
      </template>
    </div>
  </div>
</template>

<script>
import action from '@action'
import { Toast } from 'vant'
export default {
  data() {
    return {
      form: {
        accountLogin1: {
          action: 1,
          account: '',
          password: ''
        },
        accountLogin2: {
          action: 2,
          mobile: '',
          sms_code: ''
        },
        register: {
          username: '',
          mobile: '',
          sms_code: ''
        }
      },
      tapIndex: 0,
      loginType: 0,
      time: {
        second: 60,
        clearTime: null
      }
    }
  },
  created() {
    this.isLogin()
  },
  mounted() {
    // this.getRegisterCode()
  },
  methods: {
    login() {
      const isNull1 = Object.values(this.form.accountLogin1).findIndex(item => { return item === '' })
      const isNull2 = Object.values(this.form.accountLogin2).findIndex(item => { return item === '' })
      console.log(this.form.accountLogin1)
      if (this.loginType) {
        if (isNull2 !== -1) {
          Toast('手机号或验证码不能为空')
          return false
        }
      } else {
        if (isNull1 !== -1) {
          Toast('手机号或密码不能为空')
          return false
        }
      }
      let urlParam = ''
      const urlParams = {}
      if (this.$route.query.activity_id) {
        urlParam = `activity_id=${this.$route.query.activity_id}&source=${this.$route.query.source}`
        urlParams.activity_id = this.$route.query.activity_id
        urlParams.source = this.$route.query.source
        // this.form.accountLogin2.activity_id = this.$route.query.activity_id
        // this.form.accountLogin2.source = this.$route.query.source
        // this.form.accountLogin1.activity_id = this.$route.query.activity_id
        // this.form.accountLogin1.source = this.$route.query.source
      }
      Toast.loading({
        message: '加载中...',
        duration: 3000
      })
      action.Login.login(this.loginType ? this.form.accountLogin2 : this.form.accountLogin1, urlParam).then((res) => {
        Toast.clear()
        if (res.code === 0) {
          this.$router.push({
            path: '/details',
            query: urlParams
          })
        }
        res.msg && (Toast(res.msg))
      })
    },
    isLogin() {
      let param = ''
      const pathParam = {}
      if (this.$route.query.activity_id) {
        param = `activity_id=${this.$route.query.activity_id}&source=${this.$route.query.source}`
        pathParam.activity_id = this.$route.query.activity_id
        pathParam.source = this.$route.query.source
      }
      Toast.loading({
        message: '加载中...',
        duration: 3000
      })
      action.Login.login({ action: 3 }, param).then((res) => {
        // Toast(res.msg)
        if (res.code === 5004) {
          this.$router.push({
            path: '/details',
            query: pathParam
          })
          // 跳转
        }
        // Toast(res.msg)
      })
    },
    register() {
      const isNull = Object.values(this.form.register).findIndex(item => { return item === '' })
      if (isNull !== -1) {
        Toast('填写正确信息')
        return false
      }
      Toast.loading({
        message: '加载中...',
        duration: 3000
      })
      action.Login.register(this.form.register).then((res) => {
        Toast.clear()
        Toast('注册成功！')
        if (res.code === 0) {
          this.$router.push({
            path: '/index'
          })
        }
        // Toast(res.msg)
      })
    },
    tapChange(i) {
      this.tapIndex = i
      this.clearTickCode()
    },
    getRegisterCode() {
      // const mobile = thisform.accountLogin2.mobile || this.form.register.mobile
      if (!(/^1[3-9]\d{9}$/.test(this.form.register.mobile))) {
        Toast('手机号不正确')
        return false
      }
      if (this.time.second === 60) {
        Toast.loading({
          message: '加载中...',
          duration: 3000
        })
        action.Login.getSendCode({ mobile: this.form.register.mobile }).then((res) => {
          Toast.clear()
          if (res.code === 0) {
            this.tickCode()
            Toast('发送验证码成功！')
            return
          }
          res.msg && (Toast(res.msg))
        })
      }
    },
    getLoginCode() {
      // const mobile = thisform.accountLogin2.mobile || this.form.register.mobile
      if (!(/^1[3-9]\d{9}$/.test(this.form.accountLogin2.mobile))) {
        Toast('手机号不正确')
        return false
      }
      if (this.time.second === 60) {
        Toast.loading({
          message: '加载中...',
          duration: 3000
        })
        action.Login.getSendCode({ mobile: this.form.accountLogin2.mobile }).then((res) => {
          Toast.clear()
          if (res.code === 0) {
            this.tickCode()
            Toast('发送验证码成功！')
            return
          }
          res.msg && (Toast(res.msg))
        })
      }
    },
    tickCode() {
      clearInterval(this.time.clearTime)
      this.time.clearTime = setInterval(() => {
        this.time.second--
        if (this.time.second === 0) {
          clearInterval(this.time.clearTime)
          this.time.second = 60
        }
      }, 1000)
    },
    clearTickCode() {
      clearInterval(this.time.clearTime)
      this.time.second = 60
      this.form.register.username = ''
      this.form.register.mobile = ''
      this.form.register.sms_code = ''
    }
  }
}
</script>

<style lang="scss" scoped>
.backdrop {
  width: 100%;
  height: 3rem;
  display: block;
}
.content {
  width: 6.3rem;
  margin: 0 auto;
  .tap-btn {
    padding-top: 0.4rem;
    display: flex;
    width: 6.3rem;
    div {
      text-align: center;
      flex: 1;
      line-height: 1.16rem;
      font-size: 0.36rem;
      color: #ccc;
      border-bottom: 0.02rem solid #f0c5d0;
      &.active {
        font-weight: bold;
        color: #af1b40;
        border-bottom: 0.02rem solid #af1b40;
      }
    }
  }
  .input {
    padding-top: 0.6rem;
    height: 0.77rem;
    width: 6.3rem;
    border-bottom: 0.01rem solid #cccccc;
    display: flex;
    align-items: center;
    input {
      color: #999;
      font-size: 0.26rem;
      border: none;
      outline: none;
      &::-webkit-input-placeholder {
        color: #999;
      }
    }
    .yzm-btn {
      margin-left: auto;
      color: #0075ff;
      font-size: 0.26rem;
      &.active{
        color: #ccc;
      }
    }
  }
  .box-btn {
    text-align: center;
    line-height: 0.86rem;
    width: 6.3rem;
    height: 0.86rem;
    background: linear-gradient(90deg, #af1b40 0%, #ea6183 100%);
    box-shadow: 0rem 0.06rem 0.1rem 0rem rgba(175, 27, 64, 0.2);
    border-radius: 0.5rem;
    font-size: 0.36rem;
    color: #fff;
    margin-top: 0.8rem;
  }
  .tap-login {
    text-align: center;
    height: 0.37rem;
    font-size: 0.26rem;
    font-weight: 400;
    color: #cccccc;
    line-height: 0.6rem;
  }
}
.w_100{
  width: 100%;
}
</style>
