<template>
    <div class="login">
        <van-cell-group>
            <van-form
                    @submit="onSubmit"
                    :show-error="false"
                    :scroll-to-error="true"
                    :validate-first="true"
                    label-width="100"
                    ref="form">
                <div class="bar"></div>
                <van-field
                        v-model="name"
                        name="name"
                        label="姓名"
                        placeholder="请输入姓名"
                        required
                        :rules="[{message: '请输入姓名' }]"
                />
                <van-field
                        v-model="phone"
                        name="phone"
                        label="手机号"
                        maxlength="11"
                        type="number"
                        placeholder="请输入手机号"
                        required
                        :rules="[{ message: '请输入手机号' }]"
                />
                <van-field
                        name="gender"
                        label="性别"
                        required
                        :rules="[{ message: '请选择性别' }]"
                        placeholder="请选择性别">
                    <template #input>
                        <van-radio-group v-model="gender" direction="horizontal">
                            <van-radio name="1">男</van-radio>
                            <van-radio name="2">女</van-radio>
                        </van-radio-group>
                    </template>
                </van-field>
                <van-field
                        v-model="idcardNumber"
                        name="idcardNumber"
                        label="身份证号"
                        maxlength="18"
                        placeholder="请输入身份证号"
                        required
                        :rules="[{ message: '请输入身份证号' }]"
                />
                <van-field
                        v-model="minority"
                        name="minority"
                        label="民族"
                        placeholder="请输入民族"
                />
                <van-field
                        v-model="is_marry"
                        name="is_marry"
                        label="婚姻状况"
                        placeholder="请选择"
                        required
                        :rules="[{ message: '请选择婚姻状况' }]"
                >
                    <template #input>
                        <van-radio-group v-model="is_marry" direction="horizontal">
                            <van-radio name="未婚">未婚</van-radio>
                            <van-radio name="已婚">已婚</van-radio>
                            <van-radio name="离异">离异</van-radio>
                        </van-radio-group>
                    </template>
                </van-field>
                <van-field
                        v-model="political"
                        name="political"
                        label="政治面貌"
                        placeholder="请选择"
                >
                    <template #input>
                        <van-radio-group v-model="political" direction="horizontal">
                            <van-radio name="群众">群众</van-radio>
                            <van-radio name="共青团员">共青团员</van-radio>
                            <van-radio name="中共党员">中共党员</van-radio>
                        </van-radio-group>
                    </template>
                </van-field>
                <van-field
                        v-model="account_type"
                        name="account_type"
                        label="户口类型"
                        placeholder="请选择"
                        required
                        :rules="[{ message: '请选择户口类型' }]"
                >
                    <template #input>
                        <van-radio-group v-model="account_type" direction="horizontal">
                            <van-radio name="农村">农村</van-radio>
                            <van-radio name="城镇">城镇</van-radio>
                        </van-radio-group>
                    </template>
                </van-field>
                <div class="bar"></div>
                <van-field
                        v-model="education"
                        name="education"
                        label="学历"
                        placeholder="请选择"
                        required
                        :rules="[{ message: '请选择学历' }]"
                >
                    <template #input>
                        <van-radio-group v-model="education" direction="horizontal">
                            <van-radio name="初中">初中</van-radio>
                            <van-radio name="高中/职高/技校">高中/职高/技校</van-radio>
                            <van-radio name="中专">中专</van-radio>
                            <van-radio name="大专">大专</van-radio>
                        </van-radio-group>
                    </template>
                </van-field>
                <van-field
                        v-model="school"
                        name="school"
                        label="毕业学校"
                        placeholder="请输入毕业学校"
                        required
                        :rules="[{ message: '请输入毕业学校' }]"
                />
                <van-field
                        v-model="graduation_date"
                        name="graduation_date"
                        label="毕业日期"
                        placeholder="请选择"
                        readonly
                        required
                        :rules="[{ message: '请选择毕业日期' }]"
                        @click="showDate('graduation_date')"
                >
                </van-field>
                <div class="bar"></div>
                <van-field
                        v-model="address"
                        name="address"
                        type="textarea"
                        label="无锡现居地址"
                        placeholder="详细到门牌号码"
                />
                <van-field
                        name="accommodation"
                        label="是否住宿"
                        required
                        :rules="[{ message: '请选择是否住宿' }]"
                        placeholder="请选择">
                    <template #input>
                        <van-radio-group v-model="accommodation" direction="horizontal">
                            <van-radio checked-color="#0177FF" name="是">是</van-radio>
                            <van-radio checked-color="#0177FF" name="否">否</van-radio>
                        </van-radio-group>
                    </template>
                </van-field>
                <div class="bar"></div>
                <van-field
                        name="dustCoatSize"
                        v-model="dustCoatSize"
                        label="防尘服尺寸"
                        placeholder="请按照实际尺寸大一码选择"
                        @click="show_dustCoatSize = true"
                        required
                        readonly
                >
                </van-field>
                <van-field
                        name="antiStaticShoeSize"
                        v-model="antiStaticShoeSize"
                        label="防静电鞋码数"
                        placeholder="请按照实际尺寸大两码选择"
                        @click="show_antiStaticShoeSize = true"
                        required
                        readonly
                >
                </van-field>
                <div class="bar"></div>
                <van-field
                        name="notLeave"
                        label="今年是否离锡"
                        placeholder="请选择"
                        required
                >
                    <template #input>
                        <van-radio-group v-model="notLeave" direction="horizontal">
                            <van-radio checked-color="#0177FF" name="是">是</van-radio>
                            <van-radio checked-color="#0177FF" name="否">否</van-radio>
                        </van-radio-group>
                    </template>
                </van-field>
                <van-field
                        v-if="notLeave === '是'"
                        v-model="come"
                        name="come"
                        label="从哪到达无锡"
                        placeholder="请选择"
                        readonly
                        required
                        @click="showLocation('come')"
                >
                </van-field>
                <van-field
                        v-if="notLeave === '是'"
                        v-model="to_date"
                        name="to_date"
                        label="到锡日期"
                        placeholder="请选择"
                        readonly
                        required
                        @click="showDate('to_date')"
                >
                </van-field>
                <van-field
                        v-if="notLeave === '是'"
                        name="transportation"
                        label="到锡交通工具"
                        placeholder="请选择">
                    <template #input>
                        <van-radio-group v-model="transportation" direction="horizontal">
                            <van-radio checked-color="#0177FF" name="大巴">大巴</van-radio>
                            <van-radio checked-color="#0177FF" name="火车">火车</van-radio>
                            <van-radio checked-color="#0177FF" name="高铁">高铁</van-radio>
                            <van-radio checked-color="#0177FF" name="自驾">自驾</van-radio>
                            <van-radio checked-color="#0177FF" name="其他">其他</van-radio>
                        </van-radio-group>
                    </template>
                </van-field>
                <van-field
                        v-if="notLeave === '是'"
                        v-model="license_plate"
                        name="license_plate"
                        label="车牌或车次"
                        placeholder="请输入汽车车牌,火车车次等"
                >
                </van-field>
                <div class="bar"></div>
                <van-field
                        v-model="emergency_contact"
                        name="emergency_contact"
                        label="紧急联系人"
                        placeholder="请输入紧急联系人姓名"
                >
                </van-field>
                <van-field
                        v-model="emergency_relationship"
                        name="emergency_relationship"
                        label="与本人关系"
                        placeholder="请输入您与联系人关系"
                >
                </van-field>
                <van-field
                        v-model="contact_number"
                        name="contact_number"
                        label="联系人电话"
                        type="number"
                        placeholder="请输入紧急联系人电话号码"
                >
                </van-field>
                <div class="bar"></div>
                <van-field
                        v-model="company"
                        name="company"
                        label="前工作单位"
                        placeholder="请输入上一份工作单位名称"
                >
                </van-field>
                <van-field
                        v-model="start_work"
                        name="start_work"
                        label="开始时间"
                        placeholder="请选择"
                        readonly
                        @click="showDate('start_work')"
                >
                </van-field>
                <van-field
                        v-model="end_work"
                        name="end_work"
                        label="结束时间"
                        placeholder="请选择"
                        readonly
                        @click="showDate('end_work')"
                >
                </van-field>
                <div class="button-content">
                    <div class="button-con">
                        <van-button
                                color="#0177FF"
                                block
                                :loading="loading"
                                type="info"
                                loading-text="提交中..."
                                style="border-radius:5px;font-size: 17px;font-weight: 500;">
                            提交登记表
                        </van-button>
                    </div>
                </div>
            </van-form>
        </van-cell-group>
        <!--        <van-calendar color="#0177FF" :min-date="minDate" v-model="show_date" @confirm="confirmDate"></van-calendar>-->
        <van-popup
                v-model="show_date"
                position="bottom"
                :safe-area-inset-bottom="true"
                :style="{ height: '45%' }"
                @closed="closedDate"
        >
            <van-datetime-picker
                    v-model="nowDate"
                    type="date"
                    title=""
                    :min-date="minDate"
                    @confirm="confirmDate"
                    @cancel="cancelDate"
            />
        </van-popup>

        <van-popup
                v-model="show_location"
                position="bottom"
                :safe-area-inset-bottom="true"
                :style="{ height: '45%' }"
        >
            <van-area :area-list="areaList" @cancel="show_location = false" @confirm="confirmForm"/>
        </van-popup>
        <van-popup
                v-model="show_dustCoatSize"
                position="bottom"
                :safe-area-inset-bottom="true"
                :style="{ height: '45%' }">
            <van-picker
                    title="标题"
                    show-toolbar
                    :columns="['M' ,'L' ,'XL','XXL' ,'XXXL' ,'XXXXL','XXXXXL']"
                    @confirm="dustCoatSizeConfirm"
                    @cancel="show_dustCoatSize = false"
            />
        </van-popup>
        <van-popup
                v-model="show_antiStaticShoeSize"
                position="bottom"
                :safe-area-inset-bottom="true"
                :style="{ height: '45%' }">
            <van-picker
                    title="标题"
                    show-toolbar
                    :columns="[35,36,37,38,39,40,41,42,43,44,45,46,47,48]"
                    @confirm="antiStaticShoeSizeConfirm"
                    @cancel="show_antiStaticShoeSize = false"
            />
        </van-popup>
    </div>

</template>

<script>
    import {
        Field,
        Form,
        Button,
        Cell,
        CellGroup,
        Col,
        Row,
        RadioGroup,
        Radio,
        DatetimePicker,
        Popup,
        Area,
        Picker
    } from 'vant';
    import {dk_formatDate} from '@/utils/util'
    import areaList from '@/utils/area'
    import {isMobile, isPhone} from "@/utils/validate";
    import {hpInterviewRegister, getCompanyStatus} from '../../api/index'
    import {postAction, getAction} from '../../api/manage'

    let miniProgram = false;
    const wx = window.wx;
    const message = {
        name: '请输入姓名',
        idcardNumber: '请输入身份证',
        is_marry: '请选择婚姻状况',
        account_type: '请选择户口',
        education: '请选择学历',
        school: '请选择毕业学校',
        graduation_date: '请选择毕业时间',
        accommodation: '请选择是否住宿',
        phone: '请填写手机号',
        dustCoatSize: '请选择防尘服尺寸',
        antiStaticShoeSize: '请选择防静电鞋码数',
        notLeave: '请选择今年是否离锡',
    }
    export default {
        name: "xiapu",
        components: {
            [Button.name]: Button,
            [Field.name]: Field,
            [Form.name]: Form,
            [Cell.name]: Cell,
            [CellGroup.name]: CellGroup,
            [Col.name]: Col,
            [Row.name]: Row,
            [Radio.name]: Radio,
            [RadioGroup.name]: RadioGroup,
            [DatetimePicker.name]: DatetimePicker,
            [Popup.name]: Popup,
            [Area.name]: Area,
            [Picker.name]: Picker,
        },
        data() {
            return {
                areaList,
                loading: false,
                minDate: new Date(1980, 1, 1),
                nowDate: new Date(),
                show_date: false,
                show_location: false,
                show_dustCoatSize: false,
                show_antiStaticShoeSize: false,
                condition: '',
                user_token: '',
                user_id: '',
                member_id: '',
                registerCompanyId: '',
                id: '',
                name: '',
                keyboard: [],
                gender: '1',
                idcardNumber: '',
                minority: '',
                is_marry: '',
                political: '',
                account_type: '',
                education: '',
                school: '',
                graduation_date: '',
                address: '',
                accommodation: '',
                phone: '',
                come: '',
                to_date: '',
                transportation: '',
                license_plate: '',
                emergency_contact: '',
                emergency_relationship: '',
                contact_number: '',
                company: '',
                start_work: '',
                end_work: '',
                dustCoatSize: '',
                antiStaticShoeSize: '',
                notLeave: '',
                params: {
                    minority: '民族',
                    is_marry: '婚姻状况',
                    political: '政治面貌',
                    account_type: '户口类型',
                    education: '学历',
                    school: '毕业学校',
                    graduation_date: '毕业日期',
                    address: '无锡现居地址',
                    accommodation: '是否住宿',
                    dustCoatSize: '防尘服尺寸',
                    antiStaticShoeSize: '防静电鞋码数',
                    notLeave: '今年是否离锡',
                    come: '从哪到达无锡',
                    to_date: '到锡日期',
                    transportation: '到锡交通工具',
                    license_plate: '车牌或车次',
                    emergency_contact: '紧急联系人',
                    emergency_relationship: '与本人关系',
                    contact_number: '联系人电话',
                    company: '前工作单位',
                    start_work: '开始时间',
                    end_work: '结束时间',
                }
            }
        },
        mounted() {
            miniProgram = window.__wxjs_environment === 'miniprogram'
            const {
                user_token,
                user_id,
                member_id,
                registerCompanyId,
                hpInterviewRegisterStatus
            } = this.$route.query;
            this.user_token = user_token;
            this.user_id = user_id;
            this.member_id = member_id;
            this.registerCompanyId = registerCompanyId;
            this.hpInterviewRegisterStatus = JSON.parse(hpInterviewRegisterStatus || null);
            if (this.hpInterviewRegisterStatus) {
                this.getDetails(this.user_token, this.user_id, this.member_id, this.registerCompanyId)
            }
        },
        methods: {
            getDetails(user_token, user_id, member_id, registerCompanyId) {
                // 翻转键值
                const _params = Object.keys(this.params).reduce((arr, value) => {
                    arr[this.params[value]] = value
                    return arr
                }, {})
                getAction(getCompanyStatus, {user_token, user_id, member_id, registerCompanyId}).then(data => {
                    this.id = data.data.hpInterviewRegister.id
                    this.name = data.data.hpInterviewRegister.name;
                    this.phone = data.data.hpInterviewRegister.phone;
                    this.gender = data.data.hpInterviewRegister.gender;
                    this.idcardNumber = data.data.hpInterviewRegister.idcardNumber;
                    const info = JSON.parse(data.data.hpInterviewRegister.registerInformation)
                    // 重新赋值
                    info.forEach(value => {
                        this[_params[value.name]] = value.value
                    })
                })
            },
            onSubmit(data) {
                if (!this.loading) {
                    this.loading = true
                    for (let key in data) {
                        if (message[key] && !data[key]) {
                            this.$toast(message[key]);
                            this.$refs.form.scrollToField(key)
                            this.loading = false
                            return
                        }
                    }
                    if (data.notLeave === '是') {
                        if (!data.come) {
                            this.$toast('请填写从哪到达无锡');
                            this.$refs.form.scrollToField('come')
                            this.loading = false
                            return
                        } else if (!data.to_date) {
                            this.$toast('请选择到锡日期');
                            this.$refs.form.scrollToField('to_date')
                            this.loading = false
                            return
                        }
                    } else {
                        data.come = ''
                        data.to_date = ''
                        data.transportation = ''
                        data.license_plate = ''
                    }
                    if (!isMobile(data.phone)) {
                        this.$toast('手机号格式错误');
                        this.$refs.form.scrollToField('phone')
                        this.loading = false
                        return
                    }
                    if (data.contact_number && !isMobile(data.contact_number) && !isPhone(data.contact_number)) {
                        this.$toast('紧急联系人电话号码格式错误');
                        this.$refs.form.scrollToField('contact_number')
                        this.loading = false
                        return
                    }
                    if (data.idcardNumber.length !== 15 && data.idcardNumber.length !== 18) {
                        this.$toast('身份证格式错误');
                        this.$refs.form.scrollToField('idcardNumber')
                        this.loading = false
                        return
                    }
                    const query = {}
                    query.id = this.id
                    query.user_token = this.user_token;
                    query.user_id = this.user_id;
                    query.member_id = this.member_id;
                    query.registerCompanyId = this.registerCompanyId;
                    query.name = data.name;
                    query.phone = data.phone;
                    query.gender = data.gender;
                    query.idcardNumber = data.idcardNumber;
                    query.registerInformation = [];
                    const _params = this.params;
                    for (let key in _params) {
                        query.registerInformation.push({
                            required: Boolean(message[key]),
                            name: _params[key],
                            value: data[key]
                        })
                    }
                    postAction(hpInterviewRegister, query).then(() => {
                        this.$toast.success({
                            forbidClick: true,
                            duration: 1200,
                            message: '提交成功',
                            onClose: () => {
                                if (miniProgram) {
                                    wx.miniProgram.switchTab({
                                        url: '/pages/index/index'
                                    })
                                }
                            }
                        })
                    })
                } else {
                    this.$toast.fail({icon: 'close', message: '请勿重复点击'})
                }
            },
            showLocation(data) {
                this.show_location = true
                this.condition = data
            },
            showDate(data) {
                this.show_date = true
                this.condition = data
            },
            confirmDate(e) {
                this[this.condition] = dk_formatDate(e, '-')
                this.show_date = false
            },
            cancelDate() {
                this.show_date = false
            },
            confirmForm(data) {
                this[this.condition] = data[0].name + data[1].name + data[2].name;
                this.show_location = false
            },
            closedDate() {
                this.nowDate = new Date()
            },
            dustCoatSizeConfirm(value) {
                this.dustCoatSize = value
                this.show_dustCoatSize = false
            },
            antiStaticShoeSizeConfirm(value) {
                this.antiStaticShoeSize = value
                this.show_antiStaticShoeSize = false
            }
        }
    }
</script>

<style scoped>

    .login {
        padding-bottom: 75px;
    }

    .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;
    }

    .van-cell {
        align-items: center;
    }

    .van-radio {
        margin-top: 8px;
        margin-bottom: 8px;
    }
</style>
