{extend name="public/container"}
{block name="content"}
<style>
    .backlog-body {
        padding: 10px 15px;
        background-color: #f8f8f8;
        color: #999;
        border-radius: 2px;
        transition: all .3s;
        -webkit-transition: all .3s;
        overflow: hidden;
        max-height: 84px;
    }

    .backlog-body h3 {
        margin-bottom: 10px;
    }

    .right-icon {
        position: absolute;
        right: 10px;
    }

    .backlog-body p cite {
        font-style: normal;
        font-size: 17px;
        font-weight: 300;
        color: #009688;
    }

    .layuiadmin-badge, .layuiadmin-btn-group, .layuiadmin-span-color {
        position: absolute;
        right: 15px;
    }

    .layuiadmin-badge {
        top: 50%;
        margin-top: -9px;
        color: #01AAED;
    }
</style>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12 layui-col-sm12 layui-col-lg12">
            <div class="layui-card">
                <div class="layui-card-header">计划详情</div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-sm-12">
        <div class="ibox">
            <div class="ibox-content">
                <div class="table-responsive">
                    <div class="layui-btn-container">
                        <button class="layui-btn layui-btn-sm layui-btn-normal" lay-submit="" lay-filter="search">
                            <i class="layui-icon layui-icon-refresh layuiadmin-button-btn"></i>刷新
                        </button>
                    </div>
                    <table class="layui-hide" id="List" lay-filter="List"></table>
                    <script type="text/html" id="user">
                        {{d.user.nickname}}({{d.uid}})
                    </script>
                    <script type="text/html" id="activity">
                        {{d.activity.nickname}}({{d.aid}})
                    </script>
                    <script type="text/html" id="time">
                        <p>参与时间：{{d._add_time}}</p>
                    </script>
                    <!--                    <script type="text/html" id="barDemo">-->
                    <!--                        <button type="button" class="layui-btn layui-btn-xs" lay-event="edit"><i-->
                    <!--                                    class="layui-icon layui-icon-edit"></i>编辑-->
                    <!--                        </button>-->
                    <!--                        <button type="button" class="layui-btn layui-btn-xs" onclick="dropdown(this)">操作 <span-->
                    <!--                                    class="caret"></span></button>-->
                    <!--                        <ul class="layui-nav-child layui-anim layui-anim-upbit">-->
                    <!--                            <li>-->
                    <!--                                <a href="javascript:void(0);" lay-event="see">-->
                    <!--                                    <i class="layui-icon layui-icon-edit"></i> 投票人详情</a>-->
                    <!--                            </li>-->
                    <!--                        </ul>-->
                    <!--                    </script>-->
                </div>
            </div>
        </div>
    </div>
</div>
<script src="{__ADMIN_PATH}js/layuiList.js"></script>
{/block}
{block name="script"}
<script>
    layList.form.render();
    layList.tableList('List', "{:Url('get_sub_list',array('id'=>$id))}", function () {
        return [
            {field: 'id', title: '编号', event: 'id', width: '4%', align: 'center'},
            {field: 'user', title: '参与用户', align: 'center', templet: '#user', width: '20%'},
            {field: 'status_name', title: '状态', align: 'center', width: '20%'},
            {field: 'group_num', title: '点位', width: '20%', align: 'center'},
            {field: 'time', title: '时间', templet: '#time'},
        ];
    });
    //监听并执行 uid 的排序
    $('.conrelTable').find('button').each(function () {
        var type = $(this).data('type');
        $(this).on('click', function () {
            action[type] && action[type]();
        })
    })
    //下拉框
    $(document).click(function (e) {
        $('.layui-nav-child').hide();
    })
    layList.search('search', function (where) {
        layList.reload(where, true);
    });

    function dropdown(that) {
        var oEvent = arguments.callee.caller.arguments[0] || event;
        oEvent.stopPropagation();
        var offset = $(that).offset();
        var top = offset.top - $(window).scrollTop();
        var index = $(that).parents('tr').data('index');
        $('.layui-nav-child').each(function (key) {
            if (key != index) {
                $(this).hide();
            }
        })
        if ($(document).height() < top + $(that).next('ul').height()) {
            $(that).next('ul').css({
                'padding': 10,
                'top': -($(that).parent('td').height() / 2 + $(that).height() + $(that).next('ul').height() / 2),
                'left': offset.left - $(that).parents('td').offset().left - 20,
                'min-width': 'inherit',
                'position': 'absolute'
            }).toggle();
        } else {
            $(that).next('ul').css({
                'padding': 10,
                'top': $(that).parent('td').height() / 2 + $(that).height(),
                'left': offset.left - $(that).parents('td').offset().left - 20,
                'min-width': 'inherit',
                'position': 'absolute'
            }).toggle();
        }
    }

</script>
{/block}