<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sptg="http://www.thymeleaf.org">
    <head>
        <script th:replace="common/head"></script>
        <style>
            .xm-toolbar .toolbar-tag {
                width: 100%;
                display: flex;
                justify-content: center;
                background-color: #1E9FFF!important;
                color: #fff!important;
            }
        </style>
    </head>
    <body>
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-form layui-card-header layuiadmin-card-header-auto" style="padding:0;">
                <div class="layui-form-item border-b">
                    <div class="layui-inline">
                        <label class="layui-form-label">所属小区</label>
                        <div class="layui-input-block">
                            <div id="residential_name"></div>
                            <input id="residential_id" type="hidden" />
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">所属单元</label>
                        <div class="layui-input-block">
                            <div id="unit_name"></div>
                            <input id="unit_id" type="hidden" />
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">所属房间</label>
                        <div class="layui-input-block">
                            <div id="room_name"></div>
                            <input id="room_id" type="hidden" />
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label" style="width: auto;">授权密码</label>
                        <div class="layui-input-block">
                            <input type="number" name="password" placeholder="请输入" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label" style="font-size: 13px">密码生成时间</label>
                        <div class="layui-input-block">
                            <input type="text"  class="layui-input date-icon" id="create_date"  placeholder="请选择" autocomplete="off">
                            <input type="hidden" id="select_begin_date"  name="beginDate"/>
                            <input type="hidden" id="select_end_date"  name="endDate" />
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label" style="width: auto;">被访住户</label>
                        <div class="layui-input-block">
                            <input type="text" name="userName" placeholder="请输入" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">访客类型</label>
                        <div class="layui-input-block">
                            <select id="guest_type" name="guestType">
                                <option value="">全部</option>
                                <option value="0">朋友</option>
                                <option value="1">外卖</option>
                                <option value="2">快递</option>
                                <option value="3">其他</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline" style="margin-left: 38px;">
                        <button class="layui-btn layuiadmin-btn-useradmin"  lay-submit lay-filter="query">查询</button>
                        <button class="layui-btn  layui-btn-primary"  lay-submit lay-filter="reset">重置</button>
                    </div>
                </div>

                <!-- 表格+头部按钮 -->
                <div class="layui-card-body" style="padding:0;">
                    <table id="table_id" lay-filter="table_event"></table>
                </div>
            </div>
        </div>
    </div>

    <script type="text/html" id="table-useradmin-webuser">
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="access_records" sptg:security="estate:guestAuthorize:records">出入记录</a>
        {{#  if(d.enableType == 0 && new Date(d.endDate)> new Date()){ }}
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="abate" sptg:security="estate:guestAuthorize:invalid">失效</a>
        {{# } }}
    </script>

    <!-- 访客类型 -->
    <script type="text/html" id="is_guestType">
        {{#  if(d.guestType == 0){ }}
        <span>朋友</span>
        {{#  }else if(d.guestType == 1){ }}
        <span>外卖</span>
        {{#  }else if(d.guestType == 2){ }}
        <span>快递</span>
        {{# }else { }}
        <span>其他</span>
        {{# } }}
    </script>

    <script type="text/html" id="is_enableType">
        {{#  if( d.enableType==0 && new Date(d.endDate)> new Date()) { }}
        <span style="color: blue">有效</span>
        {{# }else { }}
        <span style="color: red">已失效</span>
        {{# } }}
    </script>

    <!--去掉input type="number"后面的箭头-->
    <style type="text/css">
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }
        input[type="number"] {
            -moz-appearance: textfield;
        }
    </style>

    <!-- javascript -->
    <script th:src="@{'/layui/layui.js'}"></script>
    <script>
        layui.config({
            base: '/' //静态资源所在路径
        });
    </script>
    <script th:src="@{'/js/estate/guest-authorize-manage.js'}"></script>
    </body>
</html>