<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-cell-group style="margin-top: 60px;" :border="false">
                <!-- 输入手机号，调起手机号键盘 -->
                <van-row type="flex" justify="center">
                    <van-col span="20">
                        <van-field
                                :class="height_light_phone?'dk-border':'dk-border-empty'"
                                v-model="phone"
                                center
                                clearable
                                type="tel"
                                :left-icon="height_light_phone?img_phone:img_phone_empty"
                                placeholder="请输入手机号"
                                @focus="height_light_phone = true"
                                @blur="height_light_phone = false"
                        ></van-field>
                    </van-col>
                </van-row>

                <!-- 允许输入整数，调起数字键盘 -->
                <van-row type="flex" justify="center" align="center" style="margin-top: 40px">
                    <van-col span="20">
                        <van-field
                                v-model="code"
                                maxlength="6"
                                type="digit"
                                :left-icon="height_light_code?img_code:img_code_empty"
                                placeholder="请输入验证码"
                                @focus="height_light_code = true"
                                @blur="height_light_code = false"
                                :class="height_light_code?'dk-border':'dk-border-empty'">
                            <van-button
                                    :disabled="state.smsSendBtn"
                                    slot="button"
                                    size="small"
                                    type="default"
                                    @click="sendCode"
                                    style="border:none"
                                    class="dk-button "
                                    :plain="true"
                                    :color="height_light_code?'#0177FF':''"
                                    :class="state.smsSendBtn&&'dk-color'">
                                {{!state.smsSendBtn && '获取验证码' || ('重发 '+state.time+' s')}}
                            </van-button>
                        </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="!isMobile(phone)||!code?'#DDDDDD':'#0177FF'"
                            @click="login"
                            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 {satffLogin} from '@/api/index'
    import {Button, Cell, CellGroup, Field, Toast, Col, Row, Dialog} from 'vant';
    import {setStore, getStore} from "@/utils/storage";
    import img_phone from '@/assets/phone.png'
    import img_code from '@/assets/code.png'
    import img_phone_empty from '@/assets/phone_empty.png'
    import img_code_empty from '@/assets/code_empty.png'
    import {isMobile} from "@/utils/validate";

    export default {
        name: "stafflogin",
        components: {
            [Button.name]: Button,
            [Cell.name]: Cell,
            [CellGroup.name]: CellGroup,
            [Field.name]: Field,
            [Col.name]: Col,
            [Row.name]: Row,
        },
        data() {
            return {
                height_light_phone: false,
                height_light_code: false,
                loading: false,
                enterprise_id: '',
                text: "登录",
                phone: '',
                code: '',
                img_phone,
                img_phone_empty,
                img_code_empty,
                img_code,
                state: {
                    time: 60,
                    smsSendBtn: false,
                },
                url: {
                    getSmsCaptcha: '/f/api/login/getAuthCode',
                }
            };
        },

        created() {
            //员工已登录，跳转员工首页
            if (getStore('staff')) {
                setStore('role', 'staff');
                this.$router.replace({
                    path: '/index',
                    query: {
                        enterprise_id: getStore('staff').enterpriseId,
                        enterprise_name: getStore('staff').enterpriseName
                    }
                });
            }
        },
        methods: {
            isMobile(value) {
                return isMobile(value)
            },
            login() {
                if (!this.phone) {
                    Toast('请输入手机号~');
                    return
                }
                if (!this.code) {
                    Toast("请输入验证码~");
                    return;
                }
                if (!isMobile(this.phone)) {
                    Toast('手机号格式错误~');
                    return
                }
                this.loading = true;
                postAction(satffLogin, {phone: this.phone, code: this.code}).then(data => {
                    this.loading = false;
                    console.log(data);
                    //登录成功，缓存用户信息，跳转相应页面
                    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 === 3002) {
                        Dialog.alert({
                            message: '您还未加入任何企业，请同事发送链接邀请给您'
                        });
                    }
                    if (data.errcode === 3003) {
                        Dialog.alert({
                            message: '您还未加入任何企业，请同事发送链接邀请给您'
                        });
                    }
                })
            },
            //获取验证码
            sendCode() {
                if (!this.phone) {
                    Toast('请输入手机号~');
                    return;
                }
                if (!isMobile(this.phone)) {
                    Toast('手机号格式错误~');
                    return
                }
                this.state.smsSendBtn = true;
                let interval = window.setInterval(() => {
                    if (this.state.time-- <= 0) {
                        this.state.time = 60;
                        this.state.smsSendBtn = false;
                        window.clearInterval(interval);
                    }
                }, 1000);
                let smsParams = {};
                smsParams.phone = this.phone;
                postAction(this.url.getSmsCaptcha, smsParams)
                    .then(() => {
                        Toast('验证码发送中~')
                    })
                    .catch(() => {
                        Toast('验证码发送失败~');
                        clearInterval(interval);
                        this.state.time = 60;
                        this.state.smsSendBtn = false;
                    });
            }
        }
    }
</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-border-empty {
        font-family: PingFangSC-Medium, PingFang SC;
        font-size: 14px;
        border: 1px solid #CCCCCC;
        border-radius: 47px;
        box-sizing: border-box;
    }

    .dk-button {
        height: auto;
        width: auto;
        font-size: 14px;
        color: #999999;
        opacity: 1;
    }

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

    .dk-join {
        font-size: 12px;
        color: #0177FF;
    }

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

    }
</style>
