{layout name="layout2" /}
<style>
.tbody{
    margin: 30px;
    width: 98%;
    margin: 30px auto;
}
.tbody table{border:1px solid #F00} 
table, th, td {
  border: 1px solid #f2f2f2;
  border-collapse: collapse; /* 移除单元格之间的间隔 */
  width: 10%;
  height: 45px;
  padding-left: 10px;
}
</style>
<div class="layui-form" lay-filter="layuiadmin-form-user_group" id="layuiadmin-form-user_group" >
    <div style="padding: 30px;">
         <div style="display: flex; width:80%">
            <div style="width: 90px; height: 90px; background-color: aqua;"> <img src="{$detail.image}" style="height:90px;width: 90px" class="image-show"></div>
            <div style="margin-left: 10px;">
                  <div style="display: flex; margin-top: 5px;">
                    <div style="font-size: 16px;">{$detail.name}</div>
                  </div>
                  <div style="display: flex; justify-content: space-between; width: 350px; margin-top: 10px; color: #999;">
                    <div>工号:{$detail.jon}</div>
                    <div>性别：{$detail.sex}</div>
                    <div>年龄：25</div>
                  </div>
                  <div style="display: flex;width: 350px; margin-top: 10px; color: #999;">
                    <div>电话:{$detail.mobile}</div>
                    <div style="color: #000; margin-left: 20px;">地址：{$detail.addr}</div>
                  </div>
            </div>
         </div>
    </div>


    <div class="layui-form-item div-flex">
        <fieldset class="layui-elem-field layui-field-title" style="width: 97%; margin:  0 auto;">
         
        </fieldset>
    </div>
   <div style="margin-left: 1.3%;">基本信息</div>
    <div class="layui-form-item div-flex">
        <fieldset class="layui-elem-field layui-field-title" style="width: 97%; margin: 12px auto;">
        </fieldset>
    </div>


    <div style="margin-left: 1.3%; display: flex;" >
      <div style="background-color: aqua; width: 5px;"></div>
      <div style="margin-left: 0.5%;">员工资料</div>
    </div>

    <div>

    
    <table class="tbody">
        <tbody style="border:1px solid #666">
          <tr>
            <td style="background-color: #e6e6e6;">工号</td>
            <td>{$detail.jon}</td>
            <td style="background-color: #e6e6e6;">学历</td>
            <td>{$detail.education}</td>
            <td style="background-color: #e6e6e6;"> 紧急联系人</td>
            <td>{$detail.urgent_name}</td>
            <td style="background-color: #e6e6e6;">身份证号码</td>
            <td>{$detail.identity}</td>     
          </tr>  
          <tr>
            <td style="background-color: #e6e6e6;">姓名</td>
            <td>{$detail.name}</td> 
            <td style="background-color: #e6e6e6;">婚姻状况</td>
            <td> {if $detail.marry == 0}是{/if}{if $detail.marry == 1}否{/if}{if $detail.marry == 2}/{/if}</td>
            <td style="background-color: #e6e6e6;"> 紧急联系人手机号</td>
            <td>{$detail.urgent_phone}</td>
            <td style="background-color: #e6e6e6;">健康证有效期</td>
            <td>{$detail.birthday}</td>     
          </tr>
          <tr>
            <td style="background-color: #e6e6e6;">性别</td>
            <td>{if $detail.sex == 0}男{/if}{if $detail.sex == 1}女{/if}{if $detail.sex == 2}/{/if}</td>
            <td style="background-color: #e6e6e6;">手机号</td>
            <td>{$detail.mobile}</td>
            <td style="background-color: #e6e6e6;"> 关系</td>
            <td>/</td>
            <td style="background-color: #e6e6e6;">状态</td>
            <td>{if $detail.onwork == 1}在职{/if}{if $detail.onwork == 0}离职{/if}</td>     
          </tr>
          <tr>
            <td style="background-color: #e6e6e6;">出生日期</td>
            <td>/</td>
            <td style="background-color: #e6e6e6;">籍贯</td>
            <td>{$detail.native}</td>
            <td style="background-color: #e6e6e6;"> 推荐人信息</td>
            <td>/</td>
            <td style="background-color: #e6e6e6;">属相</td>　
            <td>{$detail.sign}</td>     
          </tr>
          <tr>
            <td style="background-color: #e6e6e6;">年龄</td>
            <td>/</td>
            <td style="background-color: #e6e6e6;">现居住地</td>
            <td>{$detail.addr}</td>
            <td style="background-color: #e6e6e6;"> 推荐人工号</td>
            <td>/</td>
            <td style="background-color: #e6e6e6;">隶属部门</td>
            <td>/</td>     
          </tr>
          <tr>
            <td style="background-color: #e6e6e6;">隶属职位</td>
            <td>/</td>
            <td style="background-color: #e6e6e6;">上级管理</td>
            <td>/</td>
            <td style="background-color: #e6e6e6;"> 提交来源</td>
            <td>/</td>
            <td style="background-color: #e6e6e6;">招聘来源</td>
            <td>/</td>     
          </tr>
          <tr>
            <td style="background-color: #e6e6e6;">位置精度</td>
            <td>{$detail.lat}</td>
            <td style="background-color: #e6e6e6;">位置维度</td>
            <td>{$detail.lng}</td>
            <td style="background-color: #e6e6e6;"> 雷达距离</td>
            <td>{$detail.distance}</td> 
            <td style="background-color: #e6e6e6;">出行工具</td>
            <td>{$detail.transit}</td>     
          </tr>
          <tr>
            <td style="background-color: #e6e6e6;">工资银行卡</td>
            <td>{$detail.bank}</td>
            <td style="background-color: #e6e6e6;">银行卡卡号</td>
            <td>{$detail.account}</td>
            <td style="background-color: #e6e6e6;"> 社保银行卡</td>
            <td>{$detail.sbyhk}</td>
            <td style="background-color: #e6e6e6;">社保账号</td>
            <td>{$detail.social}</td>     
          </tr>
          <tr>
            <td style="background-color: #e6e6e6;">乙肝两对半</td>
            <td>{if $detail.physical == 1}是{/if}{if $detail.physical == 0}否{/if}</td>
            <td style="background-color: #e6e6e6;">是否购买社保</td>
            <td>{if $detail.security == 1}是{/if}{if $detail.security == 0}否{/if}</td>
            <td style="background-color: #e6e6e6;"> 是否购买工伤保险</td>
            <td>{if $detail.insurances == 1}是{/if}{if $detail.onwork == 0}否{/if}</td>
            <td style="background-color: #e6e6e6;">是否购买五险</td>
            <td>{if $detail.onwork == 1}在职{/if}{if $detail.onwork == 0}否{/if}</td>     
          </tr>
        </tbody>
      </table>

    </div>
   

</div>
<script>
    layui.config({
        version:"{$front_version}",
        base: '/static/plug/layui-admin/dist/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index','table','like','element'], function(){
        var $ = layui.$
            ,form = layui.form
            ,table = layui.table
            ,like = layui.like
            ,element = layui.element
            ,id = {$detail.id};
        element.on('tab(tab-all)', function (data) {
            var index = data.index;
            getList(index);
        })
        $(document).on('click', '.image-show', function () {
            var src = $(this).attr('src');
            like.showImg(src,600);
        });
        getList(0)
        function getList(index){
            switch (index) {
                case 0:
                    var cols = [
                        {field: 'order_sn', title: '服务订单号'}
                        ,{field: 'consignee', title: '客户姓名',align: 'center'}
                        ,{field: 'phone', title: '客户电话',align: 'center',}
                        ,{field: 'address', title: '房屋地址',align: 'center',}
                        ,{field: 'createtime',title:'服务时间' ,width: 160}
                    ];
                    break;
                case 1:
                    var cols = [
                        {field: 'source_type', title: '来源用途',}
                        ,{field: 'change_amount', title: '变动积分',}
                        ,{field: 'left_amount', title: '剩余积分',}
                        ,{field: 'remark', title: '备注',}
                        ,{field: 'create_time', title: '变动时间',}
                    ];
                    break;
                case 2:
                    var cols = [
                        {field: 'source_type', title: '动作',}
                        ,{field: 'change_amount', title: '获得积分',}
                        ,{field: 'remark', title: '备注',}
                        ,{field: 'create_time', title: '变动时间',}
                    ];
                    break;
                case 3:
                    var cols = [
                        {field: 'source_type', title: '来源用途',}
                        ,{field: 'change_amount', title: '变动金额',}
                        ,{field: 'left_amount', title: '剩余金额',}
                        ,{field: 'remark', title: '备注',}
                        ,{field: 'create_time', title: '变动时间',}
                    ];
                    break;
                case 4:
                    var cols = [
                        {field: 'referrer', title: '直推会员信息',toolbar: '#referrer'}
                        ,{field: 'level_name', title: '会员等级',}
                        ,{field: 'total_order_amount', title: '消费金额',}
                        ,{field: 'account', title: '账户金额',toolbar: '#account'}
                    ];
                    break;
                case 5:
                    var cols = [
                        {field: 'contact', title: '联系人',}
                        ,{field: 'telephone', title: '联系手机',}
                        ,{field: 'address', title: '收货地址',}
                        ,{field: 'default', title: '默认地址',}
                    ];
                    break;
                
            }
            table.render({
                id:'lists'
                ,elem: '#lists'
                ,url: '{:url("staff/getList")}?type='+index+'&user_id='+id //模拟接口
                ,cols: [cols]
                ,page:true
                ,text: {none: '暂无数据！'}
                ,parseData: function(res){ //将原始数据解析成 table 组件所规定的数据
                    return {
                        "code":res.code,
                        "msg":res.msg,
                        "count": res.data.count, //解析数据长度
                        "data": res.data.lists, //解析数据列表
                    };
                }
            });

        }

    })
</script>