{extend name="public/base"/}
{block name="css"}
<style>
    .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"
        left-text="返回"
        left-arrow
        @click-left="onBack"
>
    <template #title>
        <span class="text-white">报备管理</span>
    </template>
</van-nav-bar>
<van-search
        v-model="form.searchKey"
        placeholder="请输入姓名或手机号"
        @search="onSearch"
        @cancel="onCancel"
        show-action
>
    <template #action>
        <div @click="onCancel">重置</div>
    </template>
</van-search>

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

<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>
{/block}
{block name="script"}
<script>
    function v_setup() {
        let base = list_load('my/listReport',{searchKey:''});

        //搜索
        base.onSearch = () => {
            base.onRefresh();
        };
        base.onCancel = () => {
            base.form.searchKey = "";
            base.onRefresh();
        };

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

        //头部
        base.onBack = () => {
            location.href = "{:url('/mobile/my/index')}";
        };

        //详情
        base.detail = Vue.reactive({});
        base.showDetail = Vue.ref(false);

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