<template>
    <div
        class="login"
        :class="{ loginHeight: bar && bar.show }"
        :style="{
            backgroundImage: `url(${companyInfo.bgImg || 'https://cdn.raex.vip/image/2022-10-27-10-06-29FNwkoxWc.png'})`
        }"
    >
        <!-- <img class="logo" v-if="active === 'phone'" src="../../assets/lvzhopu-logo.png" alt="" />
        <img class="logo" v-else src="../../assets/lvzhopu-logo2.png" alt="" /> -->
        <div class="tabs">
            <div class="tab" :class="{ active: active === 'phone' }" @click="active = 'phone'">账号密码登陆</div>
            <div class="tab" :class="{ active: active === 'code' }" @click="active = 'code'">验证码登陆</div>
        </div>

        <van-form @submit="submit" ref="form" v-if="active === 'phone'">
            <div class="field-box">
                <van-field
                    type="tel"
                    name="用户名"
                    placeholder="Account"
                    v-model="form.phone"
                    :rules="[
                        { required: true, message: '请输入手机号码' },
                        {
                            pattern: phonePattern,
                            message: '手机号码格式错误'
                        }
                    ]"
                >
                    <template #left-icon>
                        <img :src="require('@assets/svgs/login_icon_zhanghao.svg')" class="icon" />
                    </template>
                </van-field>
                <van-field
                    type="password"
                    name="密码"
                    placeholder="Password"
                    v-model="form.password"
                    :rules="[{ required: true, message: '请填写密码' }]"
                >
                    <template #left-icon>
                        <img :src="require('@assets/svgs/login_icon_mima.svg')" class="icon" />
                    </template>
                </van-field>
            </div>

            <div class="button">
                <!-- <van-button plain class="forget" v-if="$store.state.review" @click="getSim"> 获取手机号码 </van-button> -->

                <van-button block native-type="submit" type="primary" class="sure">现在出发！</van-button>
                <van-button
                    class="del"
                    block
                    plain
                    @click="$router.replace('/' + $route.params.companyId + '/register')"
                    >暂无登陆许可 立即申领</van-button
                >
            </div>
        </van-form>

        <van-form @submit="submit" ref="code" v-else>
            <div class="field-box">
                <van-field
                    type="tel"
                    name="手机号码"
                    placeholder="Account"
                    v-model="form.phone"
                    :rules="[
                        { required: true, message: '请输入手机号码' },
                        {
                            pattern: phonePattern,
                            message: '手机号码格式错误'
                        }
                    ]"
                >
                    <template #left-icon>
                        <img :src="require('@assets/svgs/login_icon_zhanghao.svg')" class="icon" />
                    </template>
                </van-field>

                <van-field
                    type="code"
                    name="验证码"
                    placeholder="Verify"
                    v-model="form.code"
                    :rules="[{ required: true, message: '请输入验证码' }]"
                >
                    <template #left-icon>
                        <img :src="require('@assets/svgs/login_icon_code.svg')" class="icon" />
                    </template>
                    <template #button>
                        <van-button class="sub-code" size="small" plain @click="sendPhone" :disabled="isSend">
                            {{ isSend ? `已发送(${sendNum})S` : '发送验证码' }}
                        </van-button>
                    </template>
                </van-field>
            </div>
            <div class="button">
                <!-- <van-button plain class="forget" @click="$router.replace('/forget')">
          忘记密码？
        </van-button> -->

                <van-button block native-type="submit" type="primary" class="sure">现在出发！</van-button>
                <van-button
                    class="del"
                    block
                    plain
                    @click="$router.replace('/' + $route.params.companyId + '/register')"
                    >暂无登陆许可 立即申领</van-button
                >
            </div>
        </van-form>

        <div class="xieyi">
            <van-checkbox v-model="checked">
                已阅读并同意
                <span @click.stop="$router.push('/' + $route.params.companyId + '/agreement?page=service')">
                    《用户服务协议》
                </span>
                和
                <span @click.stop="$router.push('/' + $route.params.companyId + '/agreement')"> 《平台隐私协议》 </span>
            </van-checkbox>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import phone from '../../mixins/phone';
let fromRoute = null;
export default {
    mixins: [phone],
    inject: ['bar'],
    data() {
        return {
            active: 'phone',
            form: {
                phone: '',
                password: '',
                code: ''
            },
            checked: localStorage.getItem('agreeTerm') === 'true'
        };
    },
    computed: {
        ...mapState(['companyInfo'])
    },
    beforeRouteEnter(to, from) {
        fromRoute = from;
    },
    mounted() {
        console.log(this.$store.state.loginBackUrl);
        try {
            window.cordova.plugins.UmengPlugin.login(
                res => {
                    this.$toast.loading('登录中');
                    this.$http
                        .post('/auth/oneKeyLogin', { token: res.token, umengKey: res.umengKey })
                        .then(res => {
                            localStorage.setItem('nineToken', res);
                            this.$store.dispatch('getUserInfo');
                            this.finish();
                        })
                        .catch(e => {
                            this.$toast.clear();
                            window.cordova.plugins.UmengPlugin.closeLogin();
                        });
                },
                err => {
                    console.log(err);
                }
            );
        } catch {}
    },
    methods: {
        sendPhone(e) {
            if (!this.checkWebDriver(e)) {
                return;
            }
            this.$refs.code.validate('手机号码').then(() => {
                this.sendMsg(this.form.phone);
            });
        },
        submit() {
            if (!this.checked) {
                this.$toast('请先阅读并同意隐私政策');
                return;
            }
            this.$toast.loading({
                message: '加载中...',
                forbidClick: true
            });
            this.check().then(() => {
                this.$toast.success('登录成功');
                this.finish();
            });
        },
        check() {
            if (this.active === 'phone') {
                return this.loginByPhone(this.form.phone, this.form.password);
            } else {
                return this.$http
                    .post('/auth/phoneLogin', {
                        phone: this.form.phone,
                        code: this.form.code
                    })
                    .catch(e => {
                        if (e) {
                            this.$toast(e.error);
                        }
                        return Promise.reject();
                    })
                    .then(res => {
                        localStorage.setItem('nineToken', res);
                        return this.$store.dispatch('getUserInfo');
                    });
            }
        },
        getSim() {
            // window.plugins.sim.requestReadPermission(
            //     function (res) {
            //         console.log(res);
            //     },
            //     function () {
            //         alert('error');
            //     }
            // );
            window.plugins.sim.getSimInfo(
                function (res) {
                    console.log(res);
                },
                function () {
                    alert('error');
                }
            );
        },
        finish() {
            setTimeout(() => {
                this.$toast.clear();
                if (this.$store.state.loginBackUrl) {
                    this.$router.replace('/' + this.$route.params.companyId + this.$store.state.loginBackUrl);
                } else if (
                    !fromRoute ||
                    !fromRoute.name ||
                    fromRoute.name === 'userRegister' ||
                    fromRoute.name === 'userLogin'
                ) {
                    this.$router.replace('/' + this.$route.params.companyId + '/home');
                } else {
                    this.$router.back();
                }
                setTimeout(() => {
                    try {
                        window.cordova.plugins.UmengPlugin.closeLogin();
                    } catch {}
                }, 100);
            }, 1500);
        }
    },
    watch: {
        checked(val) {
            if (val) {
                localStorage.setItem('agreeTerm', true);
            } else {
                localStorage.removeItem('agreeTerm');
            }
        }
    }
};
</script>

<style lang="less" scoped>
.login {
    padding: 40px 50px 100px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
}
/deep/input:-webkit-autofill {
    box-shadow: 0 0 0px 1000px #101010 inset;
    -webkit-text-fill-color: #898989;
}
/deep/.van-field__control {
    color: #fff;
    font-size: 14px;
}
.logo {
    width: 94px;
    height: 16px;
    display: block;
    margin-bottom: 2px;
}
.tabs {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 10px;
    .tab {
        font-size: 16px;
        color: #c8c9cc;
        line-height: 30px;

        &.active {
            font-size: 20px;
            font-weight: bold;
            color: var(--prim);
            line-height: 30px;
        }
    }
}

/deep/.field-box {
    background: #101010;
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.5);
    border-radius: 12px;
    .van-cell:after {
        left: 56px;
        right: 16px;
        border: none;
        height: 1px;
        background: rgba(137, 137, 137, 0.3);
    }
    .van-cell + .van-cell {
        margin-top: 0 !important;
    }
}

.icon {
    display: block;
    margin-top: 16px;
}
/deep/ .van-form {
    margin-top: 28px;
    .van-cell {
        padding: 0px 16px;

        .van-field__left-icon {
            margin-right: 16px;
        }
    }

    .van-cell + .van-cell {
        margin-top: 20px;
    }
    .van-field__body {
        height: 56px;
        align-items: center;
    }
}
.button {
    margin-top: 60px;
    position: relative;

    .del {
        margin-top: 20px;
        border-color: #ffffff;
        color: #ffffff;
        background-color: #101010;
    }

    .sure {
        color: #000000 !important;
    }

    .van-button {
        font-weight: bold;
        border-radius: 12px;
    }
}

.sub-code {
    padding-right: 0;
    border-width: 0;
    color: var(--prim);
}

.forget {
    position: absolute;
    font-weight: normal !important;
    right: 0;
    top: -65px;
}
.xieyi {
    .flex();
    justify-content: center;
    margin-top: 50px;
    font-size: @font1;

    color: #fff;
    span {
        color: var(--prim);
    }
}
.van-checkbox {
    background-color: #101010;
    padding: 5px 10px;
    border-radius: 12px;
}
/deep/.van-checkbox__label {
    color: #fff;
}

/deep/.van-checkbox__icon--checked .van-icon {
    background: var(--prim);
    border-width: 0;
}
</style>
