{extend name="public/base"/}
{block name="css"}
<style>
</style>
{/block}
{block name="body"}
<van-nav-bar
        class="nav-theme"
        :fixed="true"
        :placeholder="true"
>
    <template #title>
        <span class="text-white">省外经纪人注册</span>
    </template>
</van-nav-bar>
<van-image src="__STATIC__/images/applet/bg/broker.png"></van-image>
<van-form @submit="onSubmit">
    <van-cell-group>
        <van-field
                v-model="form.title"
                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="agent_name"
                is-link
                required
                readonly
                label="门店"
                placeholder="选择门店"
                @click="showAgent = true"
                :rules="[
                        { required: true, message: '请选择门店' }
                    ]"
        ></van-field>
        <van-popup v-model:show="showAgent" round position="bottom">
            <van-picker
                    :columns="agentList"
                    @cancel="showAgent = false"
                    @confirm="onAgentListConfirm"
            ></van-picker>
        </van-popup>
        <van-field
                v-model="form.region"
                required
                label="区域"
                placeholder="请输入区域"
                :rules="[
                        { required: true, message: '请输入区域' }
                    ]"
        ></van-field>
    </van-cell-group>
    <div style="margin: 16px;">
        <van-button block type="primary" native-type="submit">确定</van-button>
    </div>
</van-form>
{/block}
{block name="script"}
<script>
    function v_setup() {
        let base = {};

        //表单
        base.form = Vue.reactive({
            title: '',
            mobile: '',
            agent_id: 0,
            region: '',
        });

        //门店选择
        base.agent_name = Vue.ref('');
        base.showAgent = Vue.ref(false);
        base.agentList = Vue.reactive({$agent_list});
        base.onAgentListConfirm = ({selectedOptions}) => {
            base.showAgent.value = false;
            base.form.agent_id = selectedOptions[0].value;
            base.agent_name.value = selectedOptions[0].text;
        };

        //登录
        base.onSubmit = () => {
            const param = base.form;

            postJson("{:url('login/brokerPost')}", param).then(({data}) => {
                location.href = data.url;
            });
        };

        //手机号验证
        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);
        };

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