<!--
 * @Author: PoJun
 * @Date: 2023-09-28 10:38:11
 * @LastEditors: PoJun
 * @LastEditTime: 2024-01-08 10:20:32
 * @Message: 登录页面
-->
<template>
    <view class="login uv-flex-col" :style="[getbgIamge]">
        <uv-navbar :border="false" :autoBack="true" bgColor="transparent" :placeholder="true"></uv-navbar>

        <view class="login-content">
            <view class="login-content-title">
                <view class="login-content-title-main">欢迎使用盛泰SRM</view>
                <view class="login-content-title-sub">登录后查看更多信息</view>
            </view>

            <view class="login-content-form">
                <uv-form labelPosition="top" :model="auth" ref="form">
                    <uv-form-item prop="name">
                        <uv-input
                            v-model="auth.name"
                            clearable
                            placeholder="请输入您的账号"
                            :customStyle="{ backgroundColor: '#f8f8f8', padding: '10px' }"
                            border="none"
                            prefixIcon="account-fill"
                        ></uv-input>
                    </uv-form-item>
                    <uv-form-item prop="password">
                        <uv-input
                            :password="true"
                            v-model="auth.password"
                            clearable
                            placeholder="请输入密码"
                            :customStyle="{ backgroundColor: '#f8f8f8', padding: '10px' }"
                            border="none"
                            prefixIcon="lock-opened-fill"
                        ></uv-input>
                    </uv-form-item>
                </uv-form>

                <view class="login-content-register">
                    <view class="uv-primary" @tap="toRegister">账号注册</view>
                </view>
                <view class="uv-m-t-40">
                    <uv-button
                        :disabled="checkboxValue.length == 0 || !auth.password || !auth.name"
                        @click="authLogin"
                        type="primary"
                        text="账号登录"
                        shape="circle"
                    ></uv-button>
                </view>
            </view>
        </view>
        <view class="login-agree uv-font-26">
            <view>
                <uv-checkbox-group v-model="checkboxValue">
                    <uv-checkbox name="agree"></uv-checkbox>
                </uv-checkbox-group>
            </view>
            <view>我已仔细阅读并同意</view>
            <view class="login-agree-text" @tap="check('service')">《服务协议》</view>
            <view class="login-agree-text" @tap="check('privacy')">《隐私协议》</view>
        </view>
    </view>
</template>

<script>
import { wechatLogin } from "@/config/http.js";
import LoginGg from "@/static/login_bg.png";

export default {
    data() {
        return {
            auth: {
                name: "",
                password: "",
            },
            checkboxValue: [],
            LoginGg,
        };
    },
    onLoad() {},
    methods: {
        check(type) {
            uni.$uv.route({
                url: "/subpkg/agreement/index",
                params: { type },
            });
        },
        toRegister() {
            uni.$uv.route("/subpkg/setting/register");
        },
        // h5登录通道,开发用
        async authLogin() {
            uni.showLoading();
            const data = await wechatLogin(this.auth.name, this.auth.password, "Password");
            uni.setStorageSync("vuex_token", data.token);
            this.$store.commit("$updateLoginInfo", data);
            await uni.$uv.sleep(100);
            // await this.$store.dispatch("UPDATELOGININFO");
            try {
                uni.$uv.route({ type: "back" });
            } finally {
                uni.hideLoading();
            }
        },
    },
    computed: {
        getbgIamge() {
            return { "background-image": `url(${LoginGg})` };
        },
    },
};
</script>

<style lang="scss">
.login {
    height: calc(100vh - var(--status-bar-height) - 44px);
    /* #ifdef APP-PLUS */
    height: 100vh;
    /* #endif */
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    &-content {
        display: flex;
        flex-direction: column;
        flex: 1;
        &-title {
            margin: 100rpx 60rpx 150rpx;
            &-main {
                font-size: 50rpx;
            }
            &-sub {
                font-size: 14px;
                color: $uv-tips-color;
                margin-top: 14rpx;
            }
        }
        &-form {
            width: 630rpx;
            margin: 0 auto;
        }
        &-register {
            font-size: 14px;
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            margin-top: 20rpx;
            color: $uv-tips-color;
        }
    }
    &-agree {
        padding: 100rpx 0;
        display: flex;
        flex-direction: row;
        justify-content: center;
        &-text {
            color: $uv-primary;
        }
    }
}
</style>
