<template>
    <!-- 登录页面 -->
    <view class="login-container">
        <!-- 背景图 -->
        <up-image
            src="../../static/image/bg_new.png"
            height="240"
            width="335"
            mode="scaleToFill"
            style="margin-top: 30rpx"
        />
        <!-- 表单 -->
        <up-form
            :model="opinionModel"
            ref="loginModelRef"
            :rules="opinionRules"
            labelWidth="auto"
            class="opinion-form"
        >
            <up-form-item prop="username">
                <up-input
                    clearable
                    prefixIcon="account"
                    placeholder="填输入登录手机号"
                    v-model="opinionModel.username"
                />
            </up-form-item>
            <up-form-item prop="password">
                <up-input
                    clearable
                    prefixIcon="lock"
                    placeholder="填输入密码"
                    v-model="opinionModel.password"
                />
            </up-form-item>

            <up-form-item>
                <up-button type="primary" text="登录" @tap="onSubmitLogin" shape="circle" />
            </up-form-item>
        </up-form>
    </view>
</template>

<script setup>
import { ref } from 'vue'
import { loginApi } from '@/services/login.js'

// 表单数据源
const opinionModel = ref({
    userName: '',
    password: '',
})

const opinionRules = ref({
    username: [
        {
            type: 'string',
            required: true,
            message: '请填写登录手机号',
            trigger: ['blur', 'change'],
        },
        // {
        //     pattern: /^[\u4e00-\u9fa5]{2,6}$/,
        //     // 正则检验前先将值转为字符串
        //     transform(value) {
        //         return String(value)
        //     },
        //     message: '请填写正确的姓名',
        // },
    ],
    password: [
        {
            type: 'string',
            required: true,
            message: '请填写登录密码',
            trigger: ['blur', 'change'],
        },
    ],
})

// 表单实例
const loginModelRef = ref(null)

// 是否提交成功
const isSuccess = ref(false)

// 提示弹框
const showModal = ref(false)

// 提交按钮
const onSubmitLogin = () => {
    loginModelRef.value
        .validate()
        .then(async (valid) => {
            if (valid) {
                uni.$u.toast('登录成功')
                setTimeout(() => {
                    // uni.switchTab({ url: '/pages/workbenches/index' })
                    uni.switchTab({ url: '/pages/workbenches/index' })
                }, 500)
            }
        })
        .catch(() => {
            // 处理验证错误
        })
}

// 继续填写
const onContinueFill = () => {
    isSuccess.value = false
}
// 退出
const onExit = () => {
    showModal.value = true
}

// 确认退出
const onConfirm = () => {
    uni.redirectTo({ url: '/pages/index/index' })
}
</script>

<style lang="scss" scoped>
.login-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

    .opinion-form {
        width: 90%;
        margin-top: 10rpx;
    }
}

::v-deep .u-form-item__body__right__message {
    margin-left: 0 !important;
}
</style>
