<template>
    <div class="login">
        <van-row>
            <van-col span="24">
                <div class="dk-banner">
                    <img src="@/assets/banner.png" alt="" style="height: 100%;width: 100%;">
                </div>
            </van-col>
        </van-row>
        <div>
            <van-row type="flex" justify="center" class="dk-invitation">
                <span>您是哪位同事？ </span>
            </van-row>
            <van-cell-group :border="false">
                <!-- 输入手机号，调起手机号键盘 -->
                <van-row type="flex" justify="center">
                    <van-col span="20">
                        <van-field
                                class="dk-border"
                                v-model="name"
                                center
                                clearable
                                type="text"
                                :left-icon="img_name"
                                placeholder="请输入姓名"
                        ></van-field>
                    </van-col>
                </van-row>
            </van-cell-group>
            <van-row type="flex" justify="center">
                <van-col span="20">
                    <van-button
                            :loading="loading"
                            type="small"
                            size="large"
                            :color="!name?'#DDDDDD':'#0177FF'"
                            @click="join"
                            text="立即加入"
                            style="height:47px;margin-top: 65px;border-radius: 47px;font-size: 16px;border-width: 0">

                    </van-button>
                </van-col>
            </van-row>
        </div>

        <van-row>
            <van-col span="24">
                <div class="dk-qrcode">
                    <img src="@/assets/qrcode.png" alt="" style="height: 100%;width: 100%">
                </div>
            </van-col>
        </van-row>
    </div>
</template>

<script>
    import {postAction} from '@/api/manage'
    import {staffCheckIn} from '@/api/index'
    import {Button, Cell, CellGroup, Field, Col, Row, Toast, Dialog} from 'vant';
    import img_name from '@/assets/name.png'
    import {setStore} from "@/utils/storage";

    export default {
        name: "next",
        components: {
            [Button.name]: Button,
            [Cell.name]: Cell,
            [CellGroup.name]: CellGroup,
            [Field.name]: Field,
            [Col.name]: Col,
            [Row.name]: Row,
        },
        data() {
            return {
                loading: false,
                text: "登录",
                phone: '',
                enterprise_id: '',
                name: '',
                img_name,
                state: {
                    time: 60,
                    smsSendBtn: false,
                },
                url: {
                    getSmsCaptcha: '/f/api/login/getAuthCode',
                }
            };
        },
        mounted() {
            this.phone = this.$route.params.phone;
            this.enterprise_id = this.$route.params.enterprise_id;
        },
        methods: {
            join() {
                if (!this.name) {
                    Toast('请输入您的姓名~');
                    return
                }
                this.loading = true;
                postAction(staffCheckIn, {
                    phone: this.phone,
                    name: this.name,
                    enterprise_id: this.enterprise_id
                }).then(data => {
                    this.loading = false;
                    Dialog.confirm({
                        message: '您已注册，\n' +
                            '是否现在进行登录'
                    }).then(() => {
                        //登录成功，缓存用户信息，跳转相应页面
                        setStore('staff', data.data.dkStaff);
                        setStore('role', 'staff');
                        this.$router.replace({
                            path: '/index',
                            query: {
                                enterprise_id: data.data.dkStaff.enterpriseId,
                                enterprise_name: data.data.dkStaff.enterpriseName
                            }
                        });
                    })
                }).catch((data) => {
                    this.loading = false;
                    if (data.errcode === 3005) {
                        Dialog.confirm({
                            message: '该手机号已存在用户'
                        }).then(() => {
                            this.$router.replace('stafflogin');
                        }).catch(() => {
                            // on cancel
                        });
                    }
                })
            }
        }
    }
</script>

<style scoped>
    .login {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .dk-banner {
        height: 160px;

    }

    .dk-border {
        font-family: PingFangSC-Medium, PingFang SC;
        font-size: 14px;
        border: 1px solid #0177FF;
        border-radius: 47px;
        box-sizing: border-box;
    }

    .dk-button {
        font-family: PingFangSC-Medium, PingFang SC;
        height: auto;
        width: auto;
        font-size: 14px;
        color: #999999;
        opacity: 1;
    }

    .dk-color {
        color: #0177FF;
    }

    .dk-invitation {
        height: 60px;
        font-size: 16px;
        color: #333;
        margin-top: 30px;
        margin-bottom: 15px;
    }

    .dk-company {
        font-weight: bold;
    }

    .dk-qrcode {
        margin-top: 90px;
        height: 135px;

    }
</style>
