<template>
  <view>
    <view class="page-bg">
      <image class="ren1" src="@/static/login/ren1.png" />
      <!-- 登录 -->
      <view class="retop">
        <image class="logotop" src="@/static/login/logo@2x.png"></image>
        <view class="loginbox">

          <view class="formbox">
            <view class="nav active">团体会员注册</view>
            <form>
              <view class="round-input-item">
                <image class="icon" src="@/static/login/tag01@2x.png"></image>
                <uni-easyinput v-model="registerForm.telNo" placeholder="请输入手机号" />
              </view>
              <view class="round-input-item">
                <image class="icon" src="@/static/login/tag02@2x.png"></image>
                <uni-easyinput v-model="registerForm.password" placeholder="密码" />
              </view>
              <view class="round-input-item">
                <image class="icon" src="@/static/login/tag02@2x.png"></image>
                <uni-easyinput v-model="registerForm.password2" placeholder="确认密码" />
              </view>
              <view class="round-input-item">
                <image class="icon" src="@/static/login/tag02@2x.png"></image>
                <uni-easyinput placeholder="图形验证码" v-model="registerForm.captcha" />
                <image :src="codeUrl" @click="getCode" />
              </view>
              <view class="round-input-item">
                <image class="icon" src="@/static/login/tag04@2x.png"></image>
                <uni-easyinput placeholder="短信验证码" v-model="registerForm.code" />
                <text v-if="!countDown.start" @click="getCaptchaSms">获取验证码</text>
                <uni-countdown v-if="countDown.start" color="#014A9F" :show-day="false"
                               :show-hour="false" :show-min="false" @timeup="timeup" :start="countDown.start"
                               :second="countDown.second"></uni-countdown>
              </view>

            </form>


            <view class="center-item">
              <button @click="register" class="btn-red">注册会员</button>
            </view>
            <view class="center-item" @click="goLogin">
              <text class="text-red">已有账号，去登录</text>
            </view>

          </view>


        </view>
      </view>
      <image class="ren2" src="@/static/login/ren2.png" />
      <view class="fixedagree">
        <!-- <image @click="changeAgree(agree)" v-if="agree" src="@/static/login/xz_dwn@2x.png"></image>
			<image v-else src="@/static/login/xz2@2x.png"></image>
			<view>登录即代表您同意<text>《用户协议》</text><text>《隐私策略》</text></view> -->
      </view>
    </view>
  </view>
</template>

<script setup>
import {
  ref
} from 'vue'
import {
  getCodeImg,
  getSmsCode,
  groupMemberRegister
} from '@/common/login.js'

const agree = ref(false)

const registerForm = ref({
  telNo: null,
  password: null,
  password2: null,
  code: null,
  uuid: null,
  captcha: null
})
const countDown = ref({
  start: false,
  second: 60
})

function changeAgree(item) {
  item = !item
}

function register() {
  if (!registerForm.value.telNo) {
    uni.showToast({
      title: '手机号不能为空',
      icon: 'none'
    })
    return
  }
  if (!registerForm.value.password || !registerForm.value.password2) {
    uni.showToast({
      title: '密码不能为空',
      icon: 'none'
    })
    return
  }
  if (registerForm.value.password != registerForm.value.password2) {
    uni.showToast({
      title: '两次密码不一致，请重新输入',
      icon: 'none'
    })
    return
  }
  if (!form.value.code) {
    uni.showToast({
      title: '验证码不能为空',
      icon: 'none'
    })
    return
  }

  groupMemberRegister(registerForm.value)
    .then((res) => {
      uni.showToast({
        title: `恭喜你，您的账号 ${registerForm.value.telNo} 注册成功！`
      })
      registerForm.value = {}
      setTimeout(goLogin, 2000)
    })
}

function goLogin() {
  let path = '/pages/index/login';
  uni.navigateTo({
    url: path
  });
}

function getCode() {
  getCodeImg().then((res) => {
    codeUrl.value = 'data:image/gif;base64,' + res.data.img
    registerForm.value.uuid = res.data.uuid
  })
}

// 发送短信验证码
function getCaptchaSms() {
  if (!registerForm.value.telNo) {
    uni.showToast({
      title: '手机号不能为空',
      icon: 'none'
    })
    return
  }
  if (!registerForm.value.captcha) {
    uni.showToast({
      title: '图形验证码不能为空',
      icon: 'none'
    })
    return
  }

  getSmsCode({
    uuid: registerForm.value.uuid,
    telNo: registerForm.value.telNo,
    code: registerForm.value.captcha
  }).then(res => {
    uni.showToast({
      title: '短信验证码下发成功',
      icon: 'none'
    })
    countDown.value.start = true
  }).catch(getCode)
}

function timeup() {
  countDown.value.start = false
  countDown.value.second = 60
  getCode()
}
</script>

<style scoped lang="scss">
	.logotop {
		width: 510rpx;
		height: 215rpx;
		margin: 5vh auto 40rpx;
		display: block;
	}

	.ren1 {
		width: 300rpx;
		height: 560rpx;
		position: absolute;
		right: 0;
		top: 0;
	}

	.ren2 {
		width: 456rpx;
		height: 600rpx;
		position: relative;
		top: 20rpx;
	}

	.retop {
		position: relative;
		z-index: 1;
	}

	.page-bg {
		background: url('@/static/login/bg.png') no-repeat center;
		background-size: cover;
		height: 100vh;
		overflow: hidden;
		position: relative;
	}

	.loginbox {
		.loginNav {
			width: 700rpx;
			margin: 0 auto -53rpx;
			height: 133rpx;
			overflow: hidden;
			position: relative;

			view {
				text-align: center;
				height: 133rpx;
				box-sizing: border-box;
				padding: 26rpx 0 0;
			}

			.n1 {
				background: url('@/static/login/tab1.png') no-repeat top left;
				background-size: contain;
				opacity: 0.7;
				width: 407rpx;
				position: absolute;
				left: 0;
			}

			.n2 {
				background: url('@/static/login/tab2.png') no-repeat top right;
				background-size: contain;
				opacity: 0.7;
				width: 399rpx;
				position: absolute;
				right: 0;
			}

			.active {
				color: #AD181F;
				opacity: 1;

				&::after {
					content: '';
					position: absolute;
					width: 25rpx;
					height: 4rpx;
					background: #AD181F;
					border-radius: 2rpx;
					left: 0;
					right: 0;
					margin: auto;
					bottom: 50rpx;
				}
			}
		}
	}

	.formbox {
		background: #fff;
		width: 700rpx;
		padding: 50rpx;
		margin: auto;
		border-radius: 20rpx;
	}

	.flex-item {
		display: flex;
		justify-content: space-between;
		margin: 30rpx 0;
		font-size: 28rpx;

		image {
			width: 30rpx;
			height: 30rpx;
			margin-right: 16rpx;
		}
	}

	.member {
		color: #4C5359;
		display: flex;
		align-items: center;
	}

	.center-item {
		text-align: center;
		margin: 30rpx 0 0;
		font-size: 30rpx;

		.btn-red {
			border-radius: 40rpx;
			width: 600rpx;
			line-height: 80rpx;
			font-size: 36rpx;
		}
	}

	.btn-red {
		background: #AD181F;
		color: #fff;
	}

	.text-red {
		color: #AD181F;
	}

	.round-input-item {
		overflow: hidden;
		background: RGBA(247, 247, 248, 1);
		border-radius: 40rpx;
		padding: 0 0 0 30rpx;
		height: 80rpx;
		margin-bottom: 30rpx;
		display: flex;
		align-items: center;

		image {
			width: 180rpx;
			height: 80rpx;

			&.icon {
				width: 30rpx;
				height: 30rpx;
				margin-right: 16rpx;
			}
		}

		input {
			border-left: 1rpx solid RGBA(214, 216, 219, 1);
			padding: 0 0 0 20rpx;
			font-size: 30rpx;
		}

		input::-webkit-input-placeholder {
			color: RGBA(158, 166, 174, 1);
			font-size: 30rpx;
		}

		input::placeholder {
			color: RGBA(158, 166, 174, 1);
			font-size: 30rpx;
		}

		input::-moz-placeholder {
			color: RGBA(158, 166, 174, 1);
			font-size: 30rpx;
		}

		text {
			font-size: 28rpx;
			color: #014A9F;
		}
	}

	.fixedagree {
		position: fixed;
		bottom: 5vh;
		color: rgba(255, 255, 255, 0.7);
		display: flex;
		font-size: 24rpx;
		width: 100vw;
		justify-content: center;

		image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 20rpx;
		}
	}
</style>