<template>
    <Cn-page :loading="loading">
        <view slot="body">
            <view class="login">
                <view class="login-title" style="font-size: 36rpx">欢迎登录</view>
                <!-- <view class="login-des">灿能物联</view> -->
                <view class="login-box">
                    <!-- <image class="login-box-logo" mode="widthFix" src="/static/logo.png"></image> -->
                    <image class="login-box-logo" mode="widthFix" src="/static/logo.png"></image>
                    <view style="font-size: 40rpx; text-align: center; font-weight: 500" class="mt20">灿能物联</view>
                    <template v-if="loginType == 'yzm'">
                        <view class="login-box-input mt100">
                            <input
                                class="login-box-input-main"
                                maxlength="11"
                                v-model="phone"
                                placeholder="请输入手机号"
                            />
                        </view>
                        <!-- <view class="login-box-input mt40">
                            <input class="login-box-input-main" v-model="yzmForm.imgCode" placeholder="图形验证码" />
                            <view class="login-box-input-img"></view>
                        </view> -->
                        <view class="login-box-input mt40">
                            <input
                                type="text"
                                class="login-box-input-main"
                                v-model="yzmForm.code"
                                placeholder="手机验证码"
                                maxlength="6"
                            />
                            <view
                                class="ml40"
                                style="font-size: 28rpx; color: #666; width: 200rpx; text-align: center"
                                v-if="waitTime > 0"
                                >{{ waitTime + 's后重新获取' }}
                            </view>
                            <button class="login-box-input-btn" v-else @click="getCode" size="mini">获取验证码</button>
                        </view>
                    </template>
                    <template v-else>
                        <view class="login-box-input mt100">
                            <input
                                class="login-box-input-main"
                                maxlength="11"
                                v-model="phone"
                                placeholder="请输入手机号"
                            />
                        </view>
                        <view class="login-box-input mt40">
                            <input
                                type="password"
                                class="login-box-input-main"
                                v-model="pwdForm.pwd"
                                placeholder="请输入密码"
                            />
                        </view>
                        <!-- <view class="login-box-input mt40">
                            <view class="login-box-input-icon"></view>
                            <input class="login-box-input-main" v-model="pwdForm.imgCode" placeholder="图形验证码" />
                            <view class="login-box-input-img"></view>
                        </view> -->
                    </template>
                    <view class="login-box-btn" @click="login"> 登录</view>
                    <view class="login-box-footer">
                        <view @click="loginType = 'pwd'" v-if="loginType == 'yzm'">账号密码登录</view>
                        <view @click="loginType = 'yzm'" v-else>短信验证码登录</view>
                        <view style="flex: 1"></view>
                        <template v-if="loginType === 'pwd'">
                            <navigator url="/pages/user/forget" hover-class="none">忘记密码</navigator>
                            <view style="margin: 0 10px; color: #999">|</view>
                        </template>
                        <navigator url="/pages/user/register" hover-class="none">快速注册</navigator>
                    </view>
                    <view class="login-box-tips">
                        <view style="color: #999">
                            <checkbox style="transform: scale(0.7)" :checked="checkbox" @click="checkbox = !checkbox" />
                            我已阅读并同意
                        </view>
                        <navigator url="/pages/mine/agreement" hover-class="none">《用户协议》</navigator>
                        <navigator url="/pages/mine/policy" hover-class="none">《隐私政策》</navigator>
                    </view>
                </view>
            </view>
        </view>
    </Cn-page>
</template>
<script>
import { apiGetYms, apiPwdLogin, apiYsmLogin, gongkey } from '@/common/api/user'
import { sm2, encrypt } from '@/common/js/sm2.js'
import { sm3Digest } from '@/common/js/sm3.js'

export default {
    data() {
        return {
            checkbox: true,
            loading: false,
            loginType: 'pwd',
            phone: '',
            pwdForm: {
                pwd: '',
                imgCode: '',
            },
            yzmForm: {
                code: '',
                imgCode: '',
            },
            waitTime: 0,
            tenantId: '',
            companyName: '',
            inter: null,
        }
    },
    components: {},
    methods: {
        getCode() {
            if (!this.checkbox) {
                return this.$util.toast('请先阅读并同意用户协议和隐私政策！')
            }
            if (!this.phone) {
                return this.$util.toast('请输入手机号！')
            }
            uni.showLoading({
                title: '请稍等...',
                mask: true,
            })
            apiGetYms({
                phone: this.phone,
                type: 0,
            })
                .then((res) => {
                    uni.hideLoading()
                    console.log(res)
                    this.waitTime = 60
                    this.inter = setInterval(() => {
                        if (this.waitTime == 0) {
                            clearInterval(this.inter)
                        } else {
                            this.waitTime--
                        }
                    }, 1000)
                })
                .catch((err) => {
                    uni.hideLoading()
                    console.log(err)
                })
        },
        login() {
            if (!this.checkbox) {
                return this.$util.toast('请先阅读并同意用户协议和隐私政策！')
            }
            console.log(this.loginType)
            if (this.loginType == 'pwd') {
                this.pwdLogin()
            } else {
                this.yzmLogin()
            }
        },
        pwdLogin() {
            if (!this.phone && !this.pwdForm.pwd) {
                return this.$util.toast('请填写登录信息！')
            }
            console.log(this.phone)
            let loginName = encrypt(this.phone)
            console.log(loginName)
            gongkey({ loginName }).then((response) => {
                let publicKey = response.data
                let sm3Pwd = sm3Digest(this.pwdForm.pwd)
                let jiamipassword = sm2(sm3Pwd + '|' + this.pwdForm.pwd, publicKey, 0)
                apiPwdLogin({
                    username: loginName,
                    password: jiamipassword,
                    imageCode: '',
                    grant_type: 'captcha',
                    verifyCode: 0,
                }).then((res) => {
                    this.$util.loginSuccess(res.data)
                })
            })
        },
        yzmLogin() {
            if (!this.phone && !this.yzmForm.code) {
                return this.$util.toast('请填写登录信息！')
            }
            apiYsmLogin({
                phone: this.phone,
                smsCode: this.yzmForm.code,
            }).then((res) => {
                this.$util.loginSuccess(res.data)
            })
        },
    },
    onLoad(o) {
        // 移除所有的缓存
        // uni.clearStorageSync()
        let userInfo = uni.getStorageSync(this.$cacheKey.userInfo)
        if (userInfo) {
            this.phone = userInfo.user_name
        }
        uni.removeStorageSync(this.$cacheKey.access_token)
    },
}
</script>
<style lang="scss">
.login {
    .login-title {
        padding-left: 64rpx;
        padding-top: 48rpx;
        font-size: 56rpx;
        font-weight: 600;
        color: #111;
    }

    .login-des {
        padding-left: 64rpx;
        margin-top: 12rpx;
        font-size: 28rpx;
        color: #999;
    }

    .login-box {
        display: flex;
        flex-direction: column;
        margin: 40rpx auto 0;
        box-sizing: border-box;
        width: 680rpx;
        padding: 100rpx 40rpx;
        border-radius: 40rpx;
        background: $uni-theme-white;
        overflow: hidden;

        .login-box-logo {
            height: 100rpx;
            width: 100rpx;
            margin: 0 auto;
        }

        .login-box-input {
            height: 110rpx;
            display: flex;
            align-items: center;
            border-bottom: 1rpx solid #f0f0f0;

            .login-box-input-icon {
                width: 40rpx;
                margin-right: 40rpx;
            }

            .login-box-input-main {
                font-size: 28rpx;
                flex: 1;
                height: 100rpx;
                line-height: 100rpx;
            }

            .login-box-input-btn {
                padding: 0 40rpx;
                margin-left: 40rpx;
                background: $uni-theme-color;
                color: #fff;
            }

            .login-box-input-img {
                margin-left: 40rpx;
                background: skyblue;
                height: 80rpx;
                width: 200rpx;
            }
        }

        .login-box-switch {
            margin-top: 60rpx;
            color: $uni-theme-color;
            font-size: 28rpx;
            text-align: center;
        }

        .login-box-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 80rpx;
            width: 100%;
            background: $uni-theme-color;
            color: #fff;
            height: 80rpx;
            border-radius: 12rpx;
        }

        .login-box-footer {
            display: flex;
            margin-top: 40rpx;
            font-size: 28rpx;
            color: $uni-theme-color;
        }

        .login-box-tips {
            margin-top: 60rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 20rpx;
        }
    }
}
</style>
