<route lang="jsonc" type="page">{
    "layout": "default",
    "style": {
        "navigationBarTitleText": "",
        "navigationBarBackgroundColor": "#fff"
    }
}</route>

<template>
    <view>
        <view class="mx-60rpx mt-20rpx">
            <view class="text-[#303133] text-48rpx leading-80rpx font-600">
                设置新密码
            </view>
            <view class="font-400 text-28rpx leading-44rpx text-[#6B7280] mt-12rpx">请设置你得新密码</view>
        </view>
        <view class="mt-106rpx mx-48rpx">
            <wd-form ref="form" :model="model">
                <view>
                    <view class="font-400 text-30rpx text-[#606266] leading-44rpx">密码</view>
                    <view class="mt-20rpx">
                        <wd-input 
                            v-model="model.mobile" 
                            type="text" 
                            placeholder="请输入密码"
                            inputmode="numeric"
                            no-border 
                            custom-class="!bg-[#F6F7F8] !border !border-solid !border-[#EAECF0] !rounded-16rpx" 
                            custom-input-class="!px-32rpx !h-104rpx"
                            @input="mobile.handleInputMobile"
                        />
                    </view>
                </view>

                <view>
                    <view class="font-400 text-30rpx text-[#606266] leading-44rpx">再次确认</view>
                    <view class="mt-20rpx">
                        <wd-input 
                            v-model="model.mobile" 
                            type="text" 
                            placeholder="再次确认新的密码"
                            inputmode="numeric"
                            no-border 
                            custom-class="!bg-[#F6F7F8] !border !border-solid !border-[#EAECF0] !rounded-16rpx" 
                            custom-input-class="!px-32rpx !h-104rpx"
                            @input="mobile.handleInputMobile"
                        />
                    </view>
                </view>
            </wd-form>
        </view>

        <view class="h-90rpx leading-90rpx mx-60rpx rounded-8rpx text-center mt-112rpx bg-[#4C9F44] text-[#fff]" :class="disabled ? 'opacity-40' : ''" @click="mobile.handleToLogin">确定</view>

        <!-- 手机号修改成功 -->
        <wd-popup v-model="showEditSuccessPopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" position="bottom">
            <view class="relative pt-64rpx pb-74rpx">
                <view class="flex justify-center items-center">
                    <view class="bg-[#4C9F44] w-280rpx rounded-280rpx">
                        <wd-img width="280rpx" height="280rpx" :src="`${OSS}images/reserve_room/reserve_room_image7.png`"/>
                    </view>
                </view>
                <view class="text-[#303133] text-36rpx leading-46rpx text-center mt-48rpx">密码修改成功</view>
                <view class="text-[#9CA3AF] text-28rpx leading-44rpx mt-16rpx text-center">请记住你的登录密码</view>
                <view class="w-630rpx h-90rpx leading-90rpx text-center bg-[#4C9F44] rounded-8rpx text-[#fff] mt-174rpx mx-auto" @click="mobile.handleToBack">好的</view>
            </view>
        </wd-popup>
    </view>
</template>


<script lang="ts" setup>
    import {mobile as testMobile} from '@/utils/test'
    import { useToast  } from 'wot-design-uni'

	const OSS = inject('OSS')
    const toast = useToast()
    const disabled = ref<boolean>(true)

	/** 页面 **/
    let pageType = 'login' // 页面类型 login:登录 edit:修改手机号
    const page = ref<{title: string, desc: string}>({title: '其他手机号登录', desc: '请输入你要登录的手机号'})
    const showEditSuccessPopup = ref<boolean>(false) // 显示手机号修改成功弹窗
    const userId = ref<number>(0) // 用户ID，修改手机号时需要传

	/** 验证码倒计时 **/
    const countDownTime = ref<number>(1 * 60 * 1000)  // 60s倒计时
    const startCountDown = ref<boolean>(false) // 是否开始倒计时
    const countDown = ref<any>(null) // 倒计时组件

	/** 表单相关 **/
    const model = reactive<{
        mobile: string
        code: string
    }>({
        mobile: '',
        code: ''
    })
	/** 结束 **/

	/** 服务协议和隐私政策 **/
    const agree = ref<boolean>(false)
	/** 结束 **/

    onLoad((args) => {
        // 从个人登录页面进入
        if (args.type === 'edit') {
            userId.value = Number(args.userId) || 0 // userId仅做测试使用，实际请传真实用户ID
            
            page.value.title = '修改手机号'
            page.value.desc = '手机号一年内可修改2次'
            pageType = 'edit'
        }
    })

    const mobile = {
        // 验证手机号
        handleInputMobile: (e: {value: string}) => {
            model.mobile = e.value
            disabled.value = !testMobile(model.mobile)
        },

        // 发送验证码
        handleCountDown: () => {
            if (disabled.value) {
                toast.show({
                    iconClass: 'info-circle',
                    msg: '手机号码错误请重新输入',
                    direction: 'vertical'
                })
                return
            }

            startCountDown.value = true
            nextTick(() => {
                countDown.value?.start()

                // 发送验证码请求
            })
        },

        // 验证码倒计时结束
        handleFinishCountDown: () => {
            startCountDown.value = false
        },
        
        // 登录
        handleToLogin: () => {
            // TODO 如果是edit的话就是修改手机号

            if (pageType === 'login' && !agree.value) {
                toast.show({
                    iconClass: 'info-circle',
                    msg: '请同意服务协议和隐私政策',
                    direction: 'vertical'
                })
                return
            }

            if (!testMobile(model.mobile)) {
                toast.show({
                    iconClass: 'info-circle',
                    msg: '手机号码错误请重新输入',
                    direction: 'vertical'
                })
                return
            }

            if (!model.code) {
                toast.show({
                    iconClass: 'info-circle',
                    msg: '验证码错误',
                    direction: 'vertical'
                })
                return
            }
        },

        // 获取手机号
        handleGetPhoneNumber: (e: object) => {
            console.log("🚀 ~ e:", e)
        },

        handleAgree: (e: any) => {
            console.log('e', e)
        },

        // 跳转到服务协议页面
        handleToService: () => {
            disabled.value = !disabled.value
            console.log("🚀 ~ disabled:", disabled)
        },

        // 跳转到隐私政策页面
        handleToPrivacy: () => {

        },

        // 修改手机成功后返回
        handleToBack: () => {
            uni.navigateBack()
        }
    }
</script>

<style lang="scss">
    page {
        background-color: #fff;
    }

    .service {
        :deep() {
            .wd-checkbox {
                display: flex;
                align-content: flex-start;
            }

            .wd-checkbox__label {
                margin-left: 6rpx;
            }
        }
    }
</style>
