<template>
    <div>
        <div class="exchange" v-if="isRegister === false">
            <img
                    src="../../assets/banner_talent_exchange.png"
                    alt=""
                    width="100%">
            <van-cell-group>
                <van-form
                        @submit="onSubmit"
                        :scroll-to-error="true"
                        :validate-first="true"
                        :show-error-message="false"
                        label-width="130"
                        ref="form">
                    <van-field
                            v-model="phone"
                            name="phone"
                            label="手机号码（必填）:"
                            placeholder="请输入手机号"
                            input-align="right"
                            maxlength="11"
                            :rules="[{validator:phoneRule,message: '请输入正确的手机号',trigger:'onChange' }]"
                    />
                    <van-field
                            v-model="name"
                            name="name"
                            label="姓名（必填）:"
                            placeholder="请输入姓名"
                            maxlength="30"
                            input-align="right"
                            :rules="[{validator:nameRule,message: '请输入姓名',trigger:'onChange' }]"
                    />
                    <div class="bar"></div>
                    <van-field label="意向企业（可选择多项）" label-width="200" readonly></van-field>
                    <van-field name="intent_company" style="padding: 0">
                        <template #input>
                            <van-checkbox-group
                                    v-model="intent_company"
                                    checked-color="#0177FF"
                                    class="checkbox-group">
                                <van-checkbox
                                        shape="square"
                                        v-for="(item,index) in intentIompany"
                                        :key="index"
                                        :name="item.label"
                                        icon-size="15px"
                                        class="checkbox">{{item.label}}
                                </van-checkbox>
                            </van-checkbox-group>
                        </template>
                    </van-field>
                    <div class="button-content">
                        <div class="button-con">
                            <van-button
                                    color="#0177FF"
                                    block
                                    :loading="loading"
                                    :disabled="disabled"
                                    type="info"
                                    native-type="submit"
                                    loading-text="提交中..."
                                    style="border-radius:5px;font-size: 17px;font-weight: 500;">
                                签到并入场
                            </van-button>
                        </div>
                    </div>
                </van-form>
            </van-cell-group>
        </div>
        <div v-if="isRegister === true" class="is-sign">
            <div class="sign-image">
                <img src="../../assets/submit_success_talent_exchange.png" alt="">
            </div>
            <div class="text">
                <div class="text-title">签到成功</div>
                <div>请主动向工作人员出示此页面</div>
            </div>
        </div>
    </div>
</template>

<script>
    import {
        Field,
        Form,
        Button,
        Cell,
        CellGroup,
        Col,
        Row,
        Checkbox,
        CheckboxGroup,
        Image as VanImage
    } from 'vant';
    import {isMobile} from "@/utils/validate";
    import {getIntentCompany, checkIns} from '../../api/index'
    import {getAction, postAction} from '../../api/manage'

    let miniProgram = false;
    const wx = window.wx;
    const message = {
        name: '请输入姓名',
        phone: '请输入手机号',
    }
    export default {
        name: "Index",
        components: {
            [Button.name]: Button,
            [Field.name]: Field,
            [Form.name]: Form,
            [Cell.name]: Cell,
            [CellGroup.name]: CellGroup,
            [Col.name]: Col,
            [Row.name]: Row,
            [Checkbox.name]: Checkbox,
            [CheckboxGroup.name]: CheckboxGroup,
            [VanImage.name]: VanImage,
        },
        data() {
            return {
                disabled: true,
                loading: false,
                name: '',
                phone: '',
                intentIompany: [],
                isRegister: false,
                intent_company: []
            }
        },
        mounted() {
            miniProgram = window.__wxjs_environment === 'miniprogram'
            this.getSignStatus()
        },
        methods: {
            getSignStatus() {
                getAction(getIntentCompany).then(data => {
                    const {intentIompany} = data.data;
                    this.intentIompany = intentIompany
                })
            },
            nameRule(val) {
                const status = Boolean(val);
                this.disabled = !(status && isMobile(this.phone));
                !status && this.$toast({icon: 'close', message: '请填写姓名'});
                return status
            },
            phoneRule(val) {
                if (val.length === 11) {
                    const status = isMobile(val);
                    this.disabled = !(status && Boolean(this.name));
                    !status && this.$toast({icon: 'close', message: '请输入正确的手机号'});
                    return status
                } else {
                    const status = isMobile(val);
                    this.disabled = !(status && Boolean(this.name));
                    return  status
                }
            },
            onSubmit(data) {
                delete data.undefined
                if (!this.loading && !this.disabled) {
                    this.loading = true
                    this.disabled = true
                    for (let key in message) {
                        if (!data[key]) {
                            this.loading = false
                            this.disabled = false
                            this.$toast(message[key]);
                            return
                        }
                    }
                    if (!isMobile(data.phone)) {
                        this.loading = false
                        this.disabled = false
                        this.$toast.fail({icon: 'close', message: '手机号格式错误'});
                        return
                    }
                    data.intent_company = data.intent_company.join(',') || undefined
                    postAction(checkIns, data).then(() => {
                        this.$toast.success({
                            message: '签到成功',
                            onOpened: () => {
                                document.title = '签到成功'
                                this.isRegister = true
                            }
                        })
                    })
                } else {
                    this.$toast.fail({
                        message: '请勿重复点击'
                    })
                }

            },
            backToIndex() {
                if (miniProgram) {
                    wx.miniProgram.switchTab({
                        url: '/pages/index/index'
                    })
                }
            }
        }
    }
</script>

<style scoped>
    .exchange {
        padding-bottom: 80px;
    }

    .button-content {
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 999;
        width: 100%;
        background: #fff;
        display: flex;
        align-content: center;
        justify-content: center;
    }

    .button-con {
        width: 90%;
        margin: 15px 5%;
    }

    .bar {
        height: 12px;
        background: #f5f5f5;
    }

    .checkbox-group {
        width: 100%;
    }

    .checkbox {
        /*margin-bottom: 5px;*/
        height: 58px;
        font-size: 15px;
        border-bottom: 1px solid #f5f5f5;
        padding: 0 15px;
        box-sizing: border-box;
    }

    /deep/ .van-checkbox__icon {
        margin-right: 15px;
    }

    .is-sign {
        width: 100%;
        height: 100%;
        position: absolute;
        background: #fff;
        padding-top: 50%;
        box-sizing: border-box;
    }

    .sign-image {
        text-align: center;
    }

    .sign-image img {
        width: 114px
    }

    .text {
        font-size: 15px;
        margin: 32px auto 90px auto;
        text-align: center;
    }

    .text-title {
        font-size: 24px;
        font-family: PingFangSC-Semibold, PingFang SC;
        margin-bottom: 5px
    }

    .sign-button-con {
        width: 50%;
        margin: 0 25%;
    }

    .van-button::before {
        border: 1px solid #000000;
        border-radius: 5px !important;
    }

    .van-checkbox .van-checkbox__label {
        margin-left: 30px !important;
    }
</style>
