{extend name="public/base"/}
{block name="css"}
<style>
.recruit-title {background:white;padding:10px 20px;color:#000;font-size:18px;}
</style>
{/block}
{block name="body"}
<van-nav-bar
        class="nav-theme"
        :fixed="true"
        :placeholder="true"
        left-text="返回"
        left-arrow
        @click-left="onBack"
>
    <template #title>
        <span class="text-white">报备信息</span>
    </template>
</van-nav-bar>
<div class="recruit-title">{{info.title}}</div>
<van-form @submit="onSubmit">
    <div class="lw-title">基础信息</div>
    <van-cell-group inset>
        <van-field
                v-model="form.realname"
                required
                label="姓名"
                placeholder="请填写姓名"
                :rules="[{ required: true, message: '请填写姓名' }]"
        ></van-field>
        <van-field
                v-model="form.mobile"
                required
                label="手机号"
                placeholder="请填写手机号"
                :rules="[
                        { required: true, message: '请填写手机号' },
                        { validator, message: '请输入正确的手机号'}
                    ]"
        ></van-field>

        <van-field
                v-model="form.arrivetime"
                required
                is-link
                readonly
                label="出发日期"
                placeholder="出发日期"
                @click="showArrivetime = true"
        ></van-field>
        <van-popup v-model:show="showArrivetime" round position="bottom">
            <van-date-picker
                    title="选择日期"
                    :min-date="minDate"
                    @confirm="selectArrivetime"
                    @cancel="showArrivetime = false"
            ></van-date-picker>
        </van-popup>
        <van-field
                v-model="form.idcard"
                label="身份证"
                placeholder="请填写身份证号"
        ></van-field>
        <div v-if="brokerList.length > 0">
            <van-field
                    v-model="brokerText"
                    is-link
                    readonly
                    label="经纪人"
                    placeholder="不选择系统将随机分配"
                    @click="showBrokerPicker = true"
            ></van-field>
            <van-popup v-model:show="showBrokerPicker" round position="bottom">
                <van-picker
                        :columns="brokerList"
                        @cancel="showBrokerPicker = false"
                        @confirm="onBrokerConfirm"
                ></van-picker>
            </van-popup>
        </div>
        <van-field
                v-model="form.remark"
                rows="2"
                autosize
                label="备注"
                type="textarea"
                maxlength="1000"
                placeholder="请输入备注"
                show-word-limit
        ></van-field>
    </van-cell-group>
    <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
            提交
        </van-button>
    </div>
</van-form>

<van-dialog v-model:show="dialogShow" title="提示" @confirm="onConfirm">
    <div v-html="dialogVlue" style="padding:10px 20px;"></div>
</van-dialog>
{/block}
{block name="script"}
<script>
    function v_setup() {
        let base = {};
        base.dialogShow = Vue.ref(false);
        base.dialogVlue = Vue.ref('');

        //表单
        base.info = {$info};
        base.url = '';
        base.form = Vue.reactive({
            recruit_id: base.info.id,
            realname: '',
            mobile: '',
            idcard: '',
            arrivetime: '',
            brokerid: 0,
            remark: '',
        });
        base.onSubmit = () => {
            postJson("{:url('worker/reportPost')}", base.form, function({msg}){
                base.dialogShow.value = true;
                base.dialogVlue.value = msg;
            }).then(({data,msg}) => {
                base.dialogShow.value = true;
                base.dialogVlue.value = msg;
                base.url = data;
            });
        };
        base.onConfirm = () => {
            console.log(base.url);
            if (base.url != '') {
                location.href = base.url;
            }
        };

        //经纪人
        base.brokerList = {$broker_list};
        base.brokerText = Vue.ref('');
        base.showBrokerPicker = Vue.ref(false);
        base.onBrokerConfirm = ({selectedOptions}) => {
            base.showBrokerPicker.value = false;
            base.brokerText = selectedOptions[0].text;
            base.form.brokerid = selectedOptions[0].value;
        };

        //出发日期
        base.showArrivetime = Vue.ref(false);
        base.minDate = new Date();
        base.selectArrivetime = (value) => {
            base.form.arrivetime = value.selectedValues.join('-');
            base.showArrivetime.value = false;
        };

        //手机号验证
        base.validator = (val) => {
            return /^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/.test(val);
        };

        base.onBack = () => {
            history.back();
        };


        return base;
    }
</script>
{/block}