<template>
    <view class="login-container">
        <!-- 顶部图标和标题 -->
        <view class="header">
            <image class="logo" src="/static/logo.png" mode="aspectFit"></image>
            <text class="title">欢迎登录考勤系统</text>
        </view>

        <!-- 表单区域 -->
        <view class="form-box">
            <!-- 手机号输入框 -->
            <view class="menu-item-left">
                <image
                    style="width: 20px; height: 20px; margin-right: 5px; vertical-align: middle"
                    src="/static/phone.png"
                    mode="aspectFit"
                ></image>
                <text class="menu-text" style="vertical-align: middle">手机号</text>
            </view>
            <view class="input-item">
                <uni-icons type="person" size="20" color="#999"></uni-icons>
                <input
                    type="number"
                    v-model="form.phone"
                    placeholder="请输入手机号"
                    maxlength="11"
                />
            </view>

            <view class="menu-item-left">
                <image
                    style="width: 20px; height: 20px; margin-right: 5px; vertical-align: middle"
                    src="/static/password.png"
                    mode="aspectFit"
                ></image>
                <text class="menu-text" style="vertical-align: middle">密码</text>
            </view>
            <!-- 密码输入框 -->
            <view class="input-item">
                <uni-icons type="locked" size="20" color="#999"></uni-icons>
                <input type="password" v-model="form.password" placeholder="请输入密码" />
            </view>

            <!-- 登录按钮 -->
            <button class="login-btn" @click="handleLogin">登录</button>

            <!-- 一键登录链接 -->
            <!-- <view class="quick-login" @click="handleQuickLogin">
				本机号码一键登录
			</view> -->

            <button class="login-btn" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">
                一键登录
            </button>

            <!-- https://blog.csdn.net/weixin_73318685/article/details/141530696 -->
            <!-- <button bindphoneoneclicklogin="onHandleLogin" open-type="phoneOneClickLogin">本机号码一键登录</button> -->
        </view>

        <!-- 版本号 -->
        <view class="version">{{ version }}</view>
    </view>
</template>

<script>
    import { loginApi, getPhonenumberLogin, getPhonenumberByCode } from '../../api/index.js'
    import { encryptCBC, decryptCBC } from '../../utils/http.js'
    export default {
        data() {
            return {
                form: {
                    // phone: '15240004260',
                    // password: 'GZkq@123456!',
                  phone: '',
                  password: '',
                },
                version: '1.0.7',
            }
        },
        onLoad() {
            // develop开发版  trial体验版  release正式版
            this.checkForUpdates()

            let miniProgram = wx.getAccountInfoSync().miniProgram
            if (miniProgram == 'release' || miniProgram == 'trial') {
                this.version = wx.getAccountInfoSync().miniProgram.version || this.version
            }
            var isLoginOut = uni.getStorageSync('isLoginOut')
            if (isLoginOut != 'yes') {
                wx.login({
                    success: (res) => {
                        if (res.code) {
                            const data = {
                                code: res.code,
                            }
                            getPhonenumberByCode(data)
                                .then((response) => {
                                    console.log('responsessss', response)
                                    if (response.resMsg === 'success') {
                                        // var phoneLogin = response.obj;
                                        // console.log('phoneLogin', phoneLogin);
                                        // if (phoneLogin != "" && phoneLogin != null) {
                                        // 	this.getLogin(phoneLogin);
                                        // }
                                    }
                                })
                                .catch((err) => {
                                    console.log('登录失败，请稍后再试')
                                })
                        } else {
                            uni.showModal({
                                title: '提示',
                                content: '请允许授权，用于该服务',
                                showCancel: false,
                            })
                        }
                    },
                })
            }
        },
        methods: {
            // 处理登录
            handleLogin() {
                if (!this.form.phone || !this.form.password) {
                    uni.showToast({
                        title: '请输入手机号和密码',
                        icon: 'none',
                    })
                    return
                }
                if (this.form.phone.length != 11) {
                    uni.showToast({
                        title: '请输入正确的手机号',
                        icon: 'none',
                    })
                    return
                }

                wx.login({
                    success: (res) => {
                        if (res.code) {
                            const data = {
                                username: encryptCBC(this.form.phone), // 假设这里使用手机号作为用户名
                                password: encryptCBC(this.form.password),
                                flage: '1',
                                code: res.code,
                            }
                            // return
                            loginApi(data)
                                .then((response) => {
                                    if (response.status === 'success') {
                                        console.log('登录成功', response)
                                        uni.setStorageSync('token', response.token)
                                        uni.setStorageSync('userId', response.id)
                                        uni.setStorageSync('phone', response.phone)
                                        uni.setStorageSync('username', response.username)
                                        uni.setStorageSync('isCader', response.isCader)
                                        uni.setStorageSync('isFace', response.isFace)
                                        uni.setStorageSync('isPd', response.isPd)
                                        uni.setStorageSync('isLoginOut', 'no')
                                        uni.showToast({
                                            icon: 'success',
                                            title: '登录成功！',
                                            duration: 2000,
                                            success: () => {
                                                uni.switchTab({
                                                    url: '/pages/index/index',
                                                })
                                            },
                                        })
                                    } else {
                                        // 显示错误信息
                                        uni.showToast({
                                            title: response.msg || '登录失败，请稍后再试',
                                            icon: 'none',
                                        })
                                    }
                                })
                                .catch((error) => {
                                    console.error('登录请求出错', error)
                                    uni.showToast({
                                        title: '网络请求异常，请检查您的网络连接',
                                        icon: 'none',
                                    })
                                })
                        } else {
                            uni.showModal({
                                title: '提示',
                                content: '请允许授权，用于该服务',
                                showCancel: false,
                            })
                        }
                    },
                })
            },

            // 手机号
            async onGetPhoneNumber(e) {
                console.log(e, '打印手机号信息')
                try {
                    wx.login({
                        success: (res) => {
                            if (res.code) {
                                const data = {
                                    code: res.code,
                                }
                                this.sendCodeToGetPhonenumber(data, e)
                            } else {
                                uni.showModal({
                                    title: '提示',
                                    content: '请允许授权，用于该服务',
                                    showCancel: false,
                                })
                            }
                        },
                    })
                } catch (error) {
                    console.error('获取手机号失败:', error)
                }
            },

            sendCodeToGetPhonenumber(data, e) {
                getPhonenumberByCode(data)
                    .then((response) => {
                        console.log('responsessss', response)
                        if (response.resMsg === 'success') {
                            var phoneLogin = response.obj
                            console.log('phoneLogin', phoneLogin)
                            if (phoneLogin != '' && phoneLogin != null) {
                                this.getLogin(phoneLogin)
                            } else {
                                console.log('没有获取到openid', e)
                                if (e.detail.errMsg == 'getPhoneNumber:ok') {
                                    var code = e.detail.code
                                    this.sendPhoneInfoToServer(code)
                                } else {
                                    console.error('用户拒绝提供手机号')
                                }
                            }
                        } else {
                            uni.showToast({
                                title: response.msg || '登录失败，请稍后再试',
                                icon: 'none',
                            })
                        }
                    })
                    .catch((err) => {
                        uni.showToast({
                            title: '登录失败，请稍后再试',
                            icon: 'none',
                        })
                    })
            },

            sendPhoneInfoToServer(code) {
                var data = {
                    code: code,
                }
                getPhonenumberLogin(data)
                    .then((response) => {
                        console.log('responsessss', response)
                        if (response.resMsg === 'success') {
                            console.log('手机号', response.obj)
                            var phoneLogin = response.obj
                            this.getLogin(phoneLogin)
                        } else {
                            uni.showToast({
                                title: response.msg || '登录失败，请稍后再试',
                                icon: 'none',
                            })
                        }
                    })
                    .catch((err) => {
                        uni.showToast({
                            title: '登录失败，请稍后再试',
                            icon: 'none',
                        })
                    })
            },

            getLogin(phoneLogin) {
                var username = decryptCBC(phoneLogin)
                console.log('useraname', username)
                wx.login({
                    success: (res) => {
                        if (res.code) {
                            const data = {
                                username: encryptCBC(username + 'wechat'), // 假设这里使用手机号作为用户名
                                flage: '1',
                                code: res.code,
                            }
                            // return
                            loginApi(data)
                                .then((response) => {
                                    if (response.status === 'success') {
                                        console.log('登录成功', response)
                                        uni.setStorageSync('token', response.token)
                                        uni.setStorageSync('userId', response.id)
                                        uni.setStorageSync('phone', response.phone)
                                        uni.setStorageSync('username', response.username)
                                        uni.setStorageSync('isCader', response.isCader)
                                        uni.setStorageSync('isFace', response.isFace)
                                        uni.setStorageSync('isPd', response.isPd)
                                        uni.setStorageSync('isLoginOut', 'no')
                                        uni.showToast({
                                            icon: 'success',
                                            title: '登录成功！',
                                            duration: 2000,
                                            success: () => {
                                                uni.switchTab({
                                                    url: '/pages/index/index',
                                                })
                                            },
                                        })
                                    } else {
                                        // 显示错误信息
                                        uni.showToast({
                                            title: response.msg || '登录失败，请稍后再试',
                                            icon: 'none',
                                        })
                                    }
                                })
                                .catch((error) => {
                                    console.error('登录请求出错', error)
                                    uni.showToast({
                                        title: '网络请求异常，请检查您的网络连接',
                                        icon: 'none',
                                    })
                                })
                        } else {
                            uni.showModal({
                                title: '提示',
                                content: '请允许授权，用于该服务',
                                showCancel: false,
                            })
                        }
                    },
                })
            },
            /**
             * 检查并处理小程序更新
             */
            checkForUpdates() {
                const updateManager = uni.getUpdateManager()

                // 检查更新
                updateManager.onCheckForUpdate((res) => {
                    console.log('[App] 是否有新版本:', res.hasUpdate)
                })

                // 监听新版本下载成功
                updateManager.onUpdateReady(() => {
                    this.promptForUpdate(updateManager)
                })

                // 监听新版本下载失败
                updateManager.onUpdateFailed(() => {
                    console.error('[App] 新版本下载失败')
                })
            },

            /**
             * 提示用户应用新版本
             * @param {Object} updateManager - 更新管理对象
             */
            promptForUpdate(updateManager) {
                uni.showModal({
                    title: '更新提示',
                    content: '新版本已准备好，是否重启应用？',
                    showCancel: false,
                    success: (res) => {
                        if (res.confirm) {
                            console.log('[App] 用户确认重启应用')
                            updateManager.applyUpdate()
                        }
                    },
                })
            },
        },
        onHandleLogin(e) {
            console.log(e)
        },
    }
</script>

<style lang="scss">
    .login-container {
        min-height: 100vh;
        padding: 0 50rpx;
        background-color: #fff;

        .header {
            padding-top: 100rpx;
            // text-align: center;

            .logo {
                width: 45px;
                height: 45px;
            }

            .title {
                display: block;
                margin-top: 20rpx;
                font-size: 16px;
                color: #333;
                font-weight: bold;
            }
        }

        .form-box {
            margin-top: 80rpx;

            .input-item {
                display: flex;
                align-items: center;
                height: 100rpx;
                margin-bottom: 30rpx;
                padding: 0 20rpx;
                border-bottom: 1rpx solid #eee;

                input {
                    flex: 1;
                    margin-left: 20rpx;
                    font-size: 32rpx;
                }
            }

            .login-btn {
                margin-top: 60rpx;
                height: 90rpx;
                line-height: 90rpx;
                background-color: #4080ff;
                color: #fff;
                font-size: 32rpx;
                border-radius: 45rpx;
            }

            .quick-login {
                margin-top: 30rpx;
                text-align: center;
                font-size: 28rpx;
                color: #666;
            }
        }

        .version {
            position: fixed;
            bottom: 60rpx;
            left: 0;
            right: 0;
            text-align: center;
            font-size: 24rpx;
            color: #999;
        }
    }
</style>
