<route lang="jsonc" type="page">{
    "layout": "default",
    "style": {
        "navigationStyle": "custom"
    }
}</route>

<template>
    <view class="login-bg">
        <wd-navbar safeAreaInsetTop :bordered="false"
            custom-style="background-color: transparent !important;"></wd-navbar>
        <view class="px-68rpx">
            <view class="font-bold text-44rpx text-[#333333] leading-60rpx">你好，欢迎使用</view>
            <view class="font-bold text-44rpx text-[#333333] leading-60rpx mt-18rpx">茶艺师平台</view>
            <view class="mt-18rpx font-400 text-26rpx text-[#606266] leading-40rpx w-354rpx">此小程序仅供企业内部员工登录，请凭茶艺师账号密码登录
            </view>
        </view>

        <!-- 登录表单 -->
        <view class="mt-100rpx px-58rpx">
            <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] !rounded-16rpx"
                            custom-input-class="!px-32rpx !h-104rpx"/>
                    </view>
                </view>

                <view class="mt-40rpx">
                    <view class="font-400 text-30rpx text-[#606266] leading-44rpx">密码</view>
                    <view class="mt-20rpx password-input">
                        <wd-input v-model="model.passowrd" showPassword placeholder="请输入密码" no-border
                            custom-class="!bg-[#F6F7F8] !rounded-16rpx"
                            custom-input-class="!px-32rpx !h-104rpx">
                        </wd-input>
                    </view>
                </view>

                <view class="mt-74rpx">
                    <wd-button custom-class="!bg-[#4C9F44] !rounded-8rpx !text-[#fff] !text-30rpx !leading-42rpx !h-90rpx !w-[100%] box-border" @click="Login.handleToLogin">立即登录</wd-button>
                </view>

                <view class="mt-44rpx font-400 text-28rpx text-[#4C9F44] leading-40rpx" @click="router.navigateTo('/pages/login/password')">
                    忘记密码？
                </view>
            </wd-form>
        </view>
    </view>
</template>

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

    const OSS = inject('OSS')
    const toast = useToast()

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


    onLoad((args) => {
        // 读取缓存的账号密码
        const savedMobile = uni.getStorageSync('loginMobile')
        const savedPassword = uni.getStorageSync('loginPassword')
        if (savedMobile) {
            model.mobile = savedMobile
        }

        if (savedPassword) {
            model.passowrd = savedPassword
        }
    })

    const Login = {
        // 登录
        handleToLogin: async () => {
            // TODO 如果是edit的话就是修改手机号
            if (!testMobile(model.mobile)) {
                toast.info('请输入正确的账号')
                return
            }

            if (!model.passowrd) {
                toast.info('请输入密码')
                return
            }

            uni.showLoading({
                title: '登录中...'
            })

            try {
                const userStore = useUserStore()
                const res = await userStore.mobileLogin(model.mobile, model.passowrd, 1, 1, 1)
                uni.hideLoading()

                // 这里记录用户账号密码，下次自动填充
                uni.setStorageSync('loginMobile', model.mobile)
                uni.setStorageSync('loginPassword', model.passowrd)

                toast.success('登录成功')
                setTimeout(() => {
                    router.reLaunch('/pages/index/index')
                }, 1000)
            } catch (error) {
                toast.info('登录失败，请稍后重试')
                uni.hideLoading()
                return
            }

        }
    }
</script>

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

    .login-bg {
        background-color: #fff;
        background-image: url(#{$OSS}images/chayishi/login_image1.png);
        background-size: 100% 420rpx;
        background-repeat: no-repeat;
    }

    .password-input {
        :deep() {
            .wd-input__icon {
                padding-right: 20rpx !important;
                background: transparent !important;
            }
        }
    }
</style>
