{extend name="public/base"/}
{block name="css"}
<style>
    .broker {background:white;margin-top:10px;padding:10px 20px;}
    .broker .header {padding-bottom:10px;border-bottom:1px solid #eee;color:#000;font-weight:bold;text-align:center;}
    .broker .content {padding-top:10px;display:flex;justify-content:space-between;align-items:center;}
    .broker .content .region,.broker .content .phone {display:flex;align-items:center;}
    .broker .content .region .region-name {margin-left:5px;}
    .detail-header {padding:10px;border-bottom:1px solid #eee;text-align:center;}
    .detail-content {padding:0 10px 20px 10px;}
    .detail-content .item {margin-top:10px;}
    .detail-content .title{color:#999;}
</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-search
        v-model="form.mobile"
        placeholder="请输入手机号"
        @search="onSearch"
        @cancel="onCancel"
        show-action
>
    <template #action>
        <div @click="onCancel">重置</div>
    </template>
</van-search>
<van-empty  v-if="!broker.title" image="search" description="暂无信息"></van-empty>

<div v-if="broker.title">
    <div class="broker">
        <div class="header">经纪人信息</div>
        <div class="content">
            <div class="region">
                <van-image
                        width="14px"
                        src="/static/images/applet/index/cardA.png"
                ></van-image>
                <span class="region-name">{{broker.title}}</span>
            </div>
        </div>
        <div class="content">
            <div class="region">
                <van-image
                        width="14px"
                        src="/static/images/applet/index/cardD.png"
                ></van-image>
                <span class="region-name">{{broker.region}}</span>
            </div>
            <a class="phone" :href="'tel:' + broker.mobile">
                <van-image
                        height="20px"
                        src="/static/images/applet/broker/contact.png"
                ></van-image>
            </a>
        </div>
    </div>

    {include file="public/list_load" list="<worker-report-list @detail='onDetail' :list='list'></worker-report-list>" /}
</div>

<van-popup
        v-model:show="showDetail"
        position="bottom"
>
    <div class="detail-header">报备详情</div>
    <div class="detail-content">
        <div class="item"><span class="title">招聘标题：</span>{{detail.recruit.title}}</div>
        <div class="item"><span class="title">报备姓名：</span>{{detail.realname}}</div>
        <div class="item"><span class="title">报备电话：</span>{{detail.mobile}}</div>
        <div class="item"><span class="title">身份证号：</span>{{detail.idcard}}</div>
        <div class="item"><span class="title">预到时间：</span>{{detail.arrivetime}}</div>
        <div class="item"><span class="title">报备时间：</span>{{detail.createtime}}</div>
        <div class="item"><span class="title">报备备注：</span>{{detail.remark}}</div>
        <div class="item"><span class="title">反馈备注：</span>{{detail.retremark}}</div>
    </div>
</van-popup>

<van-tabbar v-model="active" :placeholder="true">
    <van-tabbar-item icon="newspaper-o" url="{:url('worker/index')}">招聘信息</van-tabbar-item>
    <van-tabbar-item icon="user-o" url="{:url('worker/broker')}">经纪人</van-tabbar-item>
    <van-tabbar-item icon="search" url="{:url('worker/reportFind')}">报备查询</van-tabbar-item>
</van-tabbar>
{/block}
{block name="script"}
<script>
    function v_setup() {
        let base = list_load('worker/listReport',{mobile:''});
        base.active = 2;
        base.form = Vue.reactive({mobile:''});

        //经济人信息
        base.broker = Vue.reactive({});

        //搜索
        base.onSearch = () => {
            postJson("{:url('worker/reportFind')}", base.form).then(({data}) => {
                for (let i in data) {
                    base.broker[i] = data[i];
                }
                base.onRefresh();
            });
        };
        base.onCancel = () => {
            base.form.mobile = "";
            base.broker.title = '';
        };

        //选择简历库
        base.onDeal = (info) => {
            base.form.realname = info.name;
            base.form.mobile = info.mobile;
            base.form.idcard = info.idcard;
            base.active.value = 0;
        };

        //详情
        base.detail = Vue.reactive({});
        base.showDetail = Vue.ref(false);
        base.onDetail = (item) => {
            base.detail = item;
            base.showDetail.value = true;
        };

        return base;
    }
</script>
{/block}
{block name="vue"}
<script src="__COMPONENTS__/workerReportList.js"></script>
{/block}