<template>
  <view>
    <uni-nav-bar
      :fixed="true"
      color="#ffffff"
      background-color="#ffffff"
      :status-bar="true"
      :border="false"
      left-icon="closeempty"
      @clickLeft="close"
    />
    <view class="logo_area">
      <image class="logo" src="/static/logo.png"></image>
      <text class="title">纸掌柜</text>
    </view>
    <view class="form">
      <view class="phone">
        <uni-easyinput
          v-model="phoneNumber"
          :inputBorder="false"
          :placeholderStyle="'font-size:32rpx;'"
          placeholder="请输入手机号码"
          :maxlength="11"
          type="number"
        />
      </view>
      <view class="captcha">
        <uni-easyinput
          v-model="captcha"
          :inputBorder="false"
          :placeholderStyle="'font-size:32rpx;'"
          placeholder="请输入验证码"
          :maxlength="6"
          type="number"
        />
        <view v-show="timer > 0" class="timer_area">
          <text class="timer">{{ `(${timer}S后) ` }}</text>
          <text class="timer_text">重新获取</text>
        </view>
        <text v-show="timer <= 0" class="code" @click="getCode">
          获取验证码
        </text>
      </view>
      <view
        class="login-button"
        @click="login"
        :style="{ opacity: disabled ? '0.5' : '' }"
      >
        登录
      </view>
    </view>
    <view class="agreement_area">
      <checkbox-group @change="onCheck">
        <checkbox
          value="cb"
          :checked="checked"
          color="#000000"
          style="transform: scale(0.7)"
        />
      </checkbox-group>
      <view class="agreement">
        已阅读并同意纸掌柜
        <text class="agreement_text" @click="jumpAgreement">
          《用户与隐私协议》
        </text>
      </view>
    </view>
    <!-- 
    <uni-easyinput v-model="captcha" placeholder="验证码" />
    <button @click="getCode">获取验证码</button>
    <button @click="login">登录</button> -->
  </view>
</template>

<script>
import { getAuthCaptcha, loginByPhone, getQnToken } from '@/apis/loginApi'
import { accountType, verificationType, codePurpose } from '@/enums/index.js'
import store from '@/store/index.js'
import { go2, back } from '@/utils/hook.js'
export default {
  data() {
    return {
      phoneNumber: '',
      captcha: '',
      timer: 0,
      checked: false
    }
  },
  methods: {
    // 退出登录
    close() {
      back()
    },
    onCheck(e) {
      if (e.detail.value.length > 0) {
        this.checked = true
      } else {
        this.checked = false
      }
    },
    jumpAgreement() {
      go2('agreement')
    },
    // 获取验证码
    getCode() {
      if (this.phoneNumber.trim() === '') {
        uni.showToast({
          title: '请输入手机号码',
          icon: 'none'
        })
        return
      }
      if (this.phoneNumber.trim().length !== 11) {
        uni.showToast({
          title: '请输入正确的手机号码',
          icon: 'none'
        })
        return
      }
      this.countdown()
      getAuthCaptcha({
        purpose: codePurpose.CERTIFICATION,
        verifiableAccount: this.phoneNumber,
        verifiableAccountType: verificationType.PHONE
      }).then((res) => {
        console.log(res)
      })
    },
    // 倒计时
    countdown() {
      this.timer = 60
      let timer = setInterval(() => {
        this.timer--
        if (this.timer <= 0) {
          clearInterval(timer)
        }
      }, 1000)
    },
    // 登录
    login() {
      if (this.disabled) {
        return
      }
      if (!this.checked) {
        uni.showToast({
          title: '请同意用户与隐私协议',
          icon: 'none'
        })
        return
      }
      loginByPhone({
        accountType: accountType.PHONE,
        account: this.phoneNumber,
        captcha: this.captcha
      }).then((res) => {
        if (res) {
          store.commit('setUecToken', res.token)
          getQnToken({ loginToken: res.token }).then((token) => {
            if (token) {
              uni.showToast({
                title: '登录成功',
                icon: 'success',
                complete: () => {
                  setTimeout(() => {
                    store.commit('setToken', token)
                    // 登录成功先查看是否有下一个页面
                    const nextPage = store.state.nextPage
                    if (nextPage.name) {
                      go2(nextPage.name, nextPage.data)
                    } else {
                      go2('mine')
                    }
                    store.commit('removeNextPage')
                  }, 1000)
                }
              })
            }
          })
        }
      })
    }
  },
  computed: {
    disabled() {
      return (
        this.phoneNumber.trim() === '' ||
        this.phoneNumber.trim().length != 11 ||
        this.captcha.trim() === ''
      )
    }
  }
}
</script>

<style lang="scss">
.logo_area {
  margin-top: 187rpx;
  width: 750rpx;
  height: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  .logo {
    width: 100rpx;
    height: 100rpx;
    margin-right: 20rpx;
  }
  .title {
    opacity: 0.8;
    font-size: 60rpx;
    color: #000000;
    letter-spacing: 9rpx;
    text-align: center;
    font-weight: 400;
  }
}
.form {
  width: 750rpx;
  margin-top: 280rpx;
  padding: 0 64rpx;
  .phone {
    width: 622rpx;
    border-bottom: 2rpx solid #e0e0e0;
  }
  .captcha {
    margin-top: 44rpx;
    width: 622rpx;
    border-bottom: 2rpx solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .timer_area {
      width: auto;
      flex: 0 0 auto;
      .timer {
        font-size: 32rpx;
        color: #007aff;
      }
      .timer_area {
        font-size: 32rpx;
        color: #999999;
      }
    }
    .code {
      width: 160rpx;
      font-size: 32rpx;
      color: #007aff;
      flex: 0 0 auto;
    }
  }
  .login-button {
    font-size: 32rpx;
    margin-top: 92rpx;
    width: 622rpx;
    height: 86rpx;
    border-radius: 42px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #007aff;
    color: #ffffff;
  }
}
.agreement_area {
  position: fixed;
  bottom: 108rpx;
  width: 750rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  .agreement {
    font-size: 24rpx;
    color: #555555;
    .agreement_text {
      font-size: 24rpx;
      color: #007aff;
    }
  }
}
</style>
