<template>
    <div class="join">
        <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_name?'dk-border':'dk-border-empty'"
                                v-model="enterprise_name"
                                center
                                clearable
                                type="text"
                                :left-icon="height_light_name?img_company:img_company_empty"
                                placeholder="请输入公司名称"
                                @focus="height_light_name = true"
                                @blur="height_light_name = false"
                        ></van-field>
                    </van-col>
                </van-row>
                <!-- 输入手机号，调起手机号键盘 -->
                <van-row type="flex" justify="center" style="margin-top: 40px">
                    <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||!enterprise_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 {Button, Cell, CellGroup, Field, Toast, Col, Row} from 'vant';
    import {enterpriseCheckIn} from '@/api/index';
    import {postAction} from '@/api/manage';
    import {isMobile} from "@/utils/validate";
    import {setStore} from "@/utils/storage";
    import img_phone from '@/assets/phone.png'
    import img_company from '@/assets/company.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 img_company_empty from '@/assets/company_empty.png'

    export default {
        name: "join",
        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,
                height_light_name: false,
                loading: false,
                enterprise_name: '',
                text: "登录",
                phone: '',
                code: '',
                img_code,
                img_phone,
                img_company,
                img_phone_empty,
                img_code_empty,
                img_company_empty,
                state: {
                    time: 60,
                    smsSendBtn: false,
                },
                url: {
                    getSmsCaptcha: '/f/api/login/getAuthCode',
                }
            };
        },
        methods: {
            isMobile(value) {
                return isMobile(value)
            },
            //获取验证码
            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;
                    });
            },
            join() {
                if (!this.phone) {
                    Toast('请输入手机号~');
                    return;
                }
                if (!isMobile(this.phone)) {
                    Toast('手机号格式错误~');
                    return
                }
                if (!this.enterprise_name) {
                    Toast('请输入公司名~');
                    return;
                }
                if (!this.code) {
                    Toast('请输入验证码~');
                    return;
                }
                this.loading = true;
                postAction(enterpriseCheckIn, {
                    phone: this.phone,
                    enterprise_name: this.enterprise_name,
                    code: this.code
                }).then(data => {
                    //登录成功，缓存用户信息，跳转相应页面
                    this.loading = false;
                    //登录成功，缓存用户信息，跳转相应页面
                    setStore('company', data.data.dkEnterprise);
                    setStore('role', 'company');
                    this.$router.replace({
                        path: '/index',
                        query: {
                            enterprise_id: data.data.dkEnterprise.id,
                            enterprise_name: data.data.dkEnterprise.enterpriseName
                        }
                    });
                }).catch(data => {
                    if (data.errcode === 3004) {
                        Toast('该手机号已存在企业');
                        return
                    }
                    this.loading = false
                })

            }
        }
    }
</script>

<style scoped>
    .join {
        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-qrcode {
        margin-top: 90px;
        height: 135px;

    }
</style>
