<template>
  <view class='content'>
    <image class='bg-image' :src='assetsUrl("bg_register.png")' />
    <view class='card-view'>
      <view class='mobile-view c-flex-row'>
        <image :src='assetsUrl("ic_register_mobile.png")' />
        <input placeholder='请输入手机号' inputmode='number' maxlength='11' />
      </view>

      <view class='captcha-view c-flex-row'>
        <view class='c-flex-row'>
          <image :src='assetsUrl("ic_register_captcha.png")' />
          <input placeholder='请输入验证码' inputmode='number' maxlength='6' />
        </view>
        <text @click.stop='startCountdown'>{{ countdown }}</text>
      </view>

      <text class='btn_register' @click.stop='register'>注册领券</text>
    </view>
  </view>
</template>

<script lang='ts' setup>
import { assetsUrl } from '@/utils/assets';

const countdown = ref('获取验证码');

onLoad((e) => {

});

const startCountdown = () => {
  if(countdown.value !== '获取验证码') {
    return;
  }
  let time = 120;
  let interval = setInterval(() => {
    time--;
    countdown.value = `${time}s 重新获取`;
    if(time == 0) {
      clearInterval(interval);
      countdown.value = '获取验证码';
    }
  }, 1000);
};

const register = () => {
};

</script>

<style lang='scss' scoped>
.content {
  position: relative;
  height: 100vh;
}

.bg-image {
  position: fixed;
  height: 100vh;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.card-view {
  background: #FFFFFF;
  border-radius: 10rpx;
  margin: 0 50rpx;
  padding: 40rpx;
  top: 600rpx;
  position: relative;

  .mobile-view {
    border-radius: 10rpx;
    border: 1rpx solid #D8D8D8;
    padding-left: 28rpx;

    image {
      width: 36rpx;
      height: 36rpx;
    }

    input {
      flex: 1;
      height: 80rpx;
      font-size: 30rpx;
      color: #333333;
      margin-left: 26rpx;
    }
  }

  .captcha-view {
    margin-top: 20rpx;

    .c-flex-row {
      border-radius: 10rpx;
      border: 1rpx solid #D8D8D8;
      padding-left: 28rpx;
      flex: 1;

      image {
        width: 33rpx;
        height: 26rpx;
      }

      input {
        height: 80rpx;
        font-size: 30rpx;
        color: #333333;
        margin-left: 26rpx;
      }
    }

    text {
      display: flex;
      height: 80rpx;
      background: #FFD436;
      border-radius: 10rpx;
      margin-left: 12rpx;
      padding: 0 15rpx;
      font-size: 28rpx;
      align-items: center;
      justify-content: center;
      color: #FFFFFF;
    }
  }

  .btn_register {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 90rpx;
    background: #F53636;
    border-radius: 10rpx;
    font-weight: 400;
    font-size: 30rpx;
    color: #FFFFFF;
    margin-top: 46rpx;
  }
}
</style>
