<script setup lang="ts">
    // import { PUSH_CLIENT_KEY } from '/@/enums/cacheEnum'
    import * as API from '/@/api/model/userInfo'

    onShow(async () => {})

    // 页面数据
    const defaultText = '湖南省农业服务平台'
    const form = ref()
    const model = reactive({
        show: false,
        isLogin: false,
        loading: false,
        text: defaultText,
        countdown: 0, // 倒计时秒数
        countdownTimer: null, // 倒计时定时器
        form: {
            rules: [
                {
                    name: 'phone',
                    rule: ['required'],
                    msg: ['请输入手机号'],
                },
                {
                    name: 'code',
                    rule: ['required'],
                    msg: ['请输入验证码'],
                },
            ],
            rulesPhone: [
                {
                    name: 'phone',
                    rule: ['required'],
                    msg: ['请输入手机号'],
                },
            ],
            data: {
                phone: '',
                password: '',
                code: '',
            },
        },
    })

    /**
     * 注册
     */
    function register() {
        form?.value.validator(model.form.data, model.form.rules).then(async (res: { isPassed: boolean }) => {
            if (res.isPassed) {
                // 注册参数
                const params = {
                    phone: model.form.data.phone,
                    password: model.form.data.password || '123@2025',
                    code: model.form.data.code,
                }

                // 短信登录
                model.loading = true
                API.sysRegister(params)
                    .then(async (body) => {
                        console.log('body', body)
                        if (body) {
                            // 打开登录页
                            goLogin()
                            Message.toast(`注册成功, 请登录~`)
                        } else {
                            Message.toast(body.message)
                            return false
                        }
                    })
                    .finally(() => {
                        model.loading = false
                    })
            }
        })
    }
    /**
     * 获取验证码
     */
    function smsCode() {
        form?.value.validator(model.form.data, model.form.rulesPhone).then(async (res: { isPassed: boolean }) => {
            if (res.isPassed) {
                // 如果已经在倒计时中，不重复发送
                if (model.countdown > 0) {
                    return
                }

                const params = {
                    phone: model.form.data.phone,
                }
                API.sysSmsCode(params)
                    .then(async (body) => {
                        console.log('body', body)
                        // 开始倒计时
                        startCountdown()
                    })
                    .catch(() => {
                        // 即使请求失败也显示倒计时，防止重复点击
                        startCountdown()
                    })
            }
        })
    }

    /**
     * 开始倒计时
     */
    function startCountdown() {
        model.countdown = 60

        model.countdownTimer = setInterval(() => {
            model.countdown--

            if (model.countdown <= 0) {
                clearInterval(model.countdownTimer)
                model.countdownTimer = null
            }
        }, 1000)
    }
    /**
     * 跳转到登录页
     */
    function goLogin() {
        uni.reLaunch({
            url: '/pages/login/login',
        })
    }

    // 添加欢迎登录的文字打字动态效果
    let loop = null
    let direction = 'right'
    const count = ref(defaultText.length)
    watch(
        () => model.show,
        (show) => {
            if (show) {
                loop && clearInterval(loop)
                loop = setInterval(() => {
                    if (direction === 'right') {
                        count.value++
                        if (count.value > defaultText.length + 20) {
                            direction = 'left'
                            count.value = defaultText.length
                        }
                    } else {
                        count.value--
                        if (count.value < 0) {
                            direction = 'right'
                        }
                    }

                    if (count.value > defaultText.length) {
                        model.text = defaultText
                    } else if (count.value < 0) {
                        model.text = ''
                    } else {
                        model.text = defaultText.slice(0, count.value)
                    }
                }, 200)
            }
        },
    )

    onHide(() => {
        loop && clearInterval(loop)
        loop = null
        direction = 'right'
        count.value = 0
        model.show = false
    })
</script>

<template>
    <view class="warp">
        <!-- <image class="login-warp" src="/static/login/login_bg.png" /> -->
        <view class="register-form">
            <view class="register-bg-wrap">
                <!-- <image class="register-bg" src="/static/images/register/register.png" /> -->
                <view class="logo-content-wrap">
                    <view class="logo-text-1">你好，欢迎使用</view>
                    <view class="logo-text">数字农业服务平台</view>
                </view>
            </view>
            <fui-form class="form" ref="form" top="50" :padding="['0rpx', '32rpx']">
                <view class="reigister-form-item">
                    <image class="reigister-form-image" src="/static/images/register/user.png" />
                    <text>手机号</text>
                </view>
                <fui-input
                    height="100rpx"
                    class="input"
                    autocomplete="off"
                    :required="false"
                    clearable
                    trim
                    placeholder="请输入手机号/账号"
                    v-model="model.form.data.phone"
                    name="mobile"
                    backgroundColor="transparent"
                    borderColor="#DDDDDD"
                    maxlength="11"
                />

                <view class="reigister-form-item !hidden">
                    <image class="reigister-form-image" src="/static/images/register/pwd.png" />
                    <text>密码</text>
                </view>
                <fui-input
                    height="100rpx"
                    class="input !hidden"
                    password
                    autocomplete="new-password"
                    code
                    :required="false"
                    clearable
                    trim
                    placeholder="请输入密码"
                    v-model="model.form.data.password"
                    name="code"
                    marginTop="10"
                    backgroundColor="transparent"
                    borderColor="#DDDDDD"
                />
                <view class="reigister-form-item">
                    <image class="reigister-form-image" src="/static/images/register/sms.png" />
                    <text>验证码</text>
                </view>
                <fui-input
                    :padding="['20rpx', '32rpx']"
                    placeholder="请输入验证码"
                    :bottomLeft="0"
                    marginTop="10"
                    v-model="model.form.data.code"
                    backgroundColor="transparent"
                    borderColor="#DDDDDD"
                >
                    <fui-button
                        width="200rpx"
                        height="64rpx"
                        :background="model.countdown > 0 ? '#CCCCCC' : '#67c17a'"
                        :color="model.countdown > 0 ? '#67c17a' : '#fff'"
                        @click="smsCode"
                        :size="28"
                        :disabled="model.countdown > 0"
                        :text="model.countdown > 0 ? `${model.countdown}秒后重试` : '获取验证码'"
                    />
                </fui-input>
                <view class="btn__box flex-center p-32rpx box-border">
                    <fui-button
                        height="88rpx"
                        background="#67c17a"
                        size="32rpx"
                        radius="8rpx"
                        text="立即注册"
                        @click="register"
                        :disabled="model.loading"
                        :loading="model.loading"
                    />
                </view>
                <view class="flex-center p-32rpx box-border btn-register" @click="goLogin"> 已有账号，立即登录 </view>
            </fui-form>
        </view>
    </view>
</template>

<style lang="less" scoped>
    // .login-warp {
    //     width: 100%;
    //     height: calc(100vh);
    //     position: absolute;
    //     // border: 1px solid #000;
    //     z-index: 0;
    // }

    @keyframes blink-caret {
        0%,
        100% {
            border-right-color: #333;
        }

        50% {
            border-right-color: transparent;
        }
    }

    .warp {
        position: relative;
        font-size: 24rpx;
        height: calc(100vh);
        block-size: 100% 100%;
        // background-size: 100% 100%;
        // border: 1px solid #000;
        background-color: #fff;
    }

    .fui-descr {
        letter-spacing: 1rpx;
        padding: 50rpx;
        font-size: 24rpx;
        color: #b2b2b2;
        padding-top: 12rpx;
        padding-bottom: 48rpx;

        ::v-deep(.fui-text__content) {
            text-indent: 0 !important;
        }
    }

    .register-bg-wrap {
        position: absolute;
        width: 100%;
        height: 30vh;
        // border: 1px solid #000;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-image: url('/static/images/register/register.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center;

        .logo-content-wrap {
            display: flex;
            flex-direction: column;
            justify-content: left;
            align-items: flex-start;
            width: 86%;

            .logo-text-1 {
                font-size: 30rpx;
                font-weight: 400;
                letter-spacing: 0;
                margin-top: 4.25rem;
                color: rgb(51 51 51 / 70%);
                vertical-align: middle;
            }

            .logo-text {
                font-size: 40rpx;
                font-weight: 500;
                letter-spacing: 0;
                margin-top: 40rpx;
                color: rgb(51 51 51 / 100%);
                vertical-align: middle;
            }
        }
    }

    .register-form {
        position: absolute;
        width: 100%;
        height: 60vh;
        left: 0;
        top: 0;
        opacity: 1;
        border-radius: 14.03px 14.03px 0 0;
        border: 1px solid #fff;
        background: linear-gradient(
            180deg,
            rgb(181 238 215 / 100%) 0%,
            rgb(181 238 215 / 50%) 30%,
            rgb(255 255 255 / 80%) 100%
        );
    }

    .reigister-form-item {
        color: #000;
        display: flex;
        flex-direction: row;
        justify-content: left;
        align-items: center;
        margin: 10rpx;

        .reigister-form-image {
            width: 60rpx;
            height: 60rpx;
        }

        text {
            font-size: 32rpx;
            display: flex;
            flex-direction: row;
            margin-left: 20rpx;
        }
    }

    .form {
        width: 100%;
        z-index: 10;
        margin-top: 540rpx;
    }

    .checkbox {
        position: fixed;
        left: 0rpx;
        bottom: 32rpx;
        width: 100%;
        z-index: 10;
    }

    .privacy-wrap {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .input,
    .btn__box {
        width: 100%;
        height: 100rpx;
        margin-top: 60rpx;
    }

    .fiexdText {
        // position: absolute;
        width: 100%;
        margin-top: 40rpx;
    }

    :deep(.fui-input__border-bottom) {
        right: 32rpx !important;
    }

    .btn-register {
        color: cadetblue;
    }
</style>
