{% load staticfiles %}
{% load i18n %}
{% load kidsrun_extras %}
{% block head_styles %}
<style type="text/css">

    .visitor_healthlist tbody > tr > td,
    .visitor_healthlist thead > tr > th{
        padding: 8px 0;
    }
    .visitor_healthlist tbody tr {
        background-color: #ffffff;
        border-bottom: 5px solid #F5F5F5;
    }

    .visitor_healthlist tbody tr td {
        vertical-align: middle;
    }

    .visitor_healthlist tbody tr td:last-of-type i {
        display: none;
        width: 20px;
        height: 20px;
        margin-right: 15px;
        cursor: pointer;
        background: url('/static/kidsrun/images/icon_edit.png') no-repeat;
    }
    .visitor_healthlist tr td .img-circle{
        width: 50px;
        height: 50px;
    }
    .visitor_healthlist tbody tr:hover td:last-of-type i {
        display: inline-block;
    }

    .visitor_ts_content .ts-dialog-one {
        display: inline-block;
        width: 80px;
    }

    .visitor_ts_content .ts-dialog-two {
        width: 260px;
    }

    .visitor_healthlist tr td:first-of-type ,
    .visitor_healthlist tr th:first-of-type{
        width: 30px;
    }
    .visitor_healthlist tr td:nth-child(2),
    .visitor_healthlist tr th:nth-child(2) {
        width: 80px;
    }
    .visitor_healthlist tr td:nth-child(3),
    .visitor_healthlist tr th:nth-child(3){
        width: 140px;
    }
    .visitor_healthlist tr td:nth-child(4),
    .visitor_healthlist tr th:nth-child(4){
        width: 110px;
    }
    .visitor_healthlist tr td:nth-child(5),
    .visitor_healthlist tr th:nth-child(5){
        width: 110px;
    }
    .visitor_healthlist tr td:nth-child(6),
    .visitor_healthlist tr th:nth-child(6){
        width: 170px;
    }
    .visitor_healthlist tr td:nth-child(7),
    .visitor_healthlist tr th:nth-child(7){
        width: 150px;
    }
    .visitor_healthlist tr td:nth-child(8),
    .visitor_healthlist tr th:nth-child(8){
        width: 180px;
    }
    .visitor_healthlist tr td:nth-child(9),
    .visitor_healthlist tr th:nth-child(9){
        width: 45px;
    }
    .visitor_name,
    .visitor_phone{
        display: inline-block;
        vertical-align: middle;
        border-radius: 0;
        box-shadow: none;
        padding: 6px 12px;
        font-size: 14px;
        line-height: 1.42857143;
        color: #555;
        border: 1px solid #ccc;
        width: 260px;
    }
    .visitor_healthlist .fever-temp{
        color: #d9534f;
    }
    .visitor_ts_content .else-reason-box{
        display: inline-block;
        position: relative;
        bottom: 30px;
        left: 140px;
    }
    .visitor_ts_content .else-reason .checkbox{
        display: inline-block;
    }
    .visitor_epidemiology{
        margin-left: 26px;
    }
    .visitor_epidemiology .tocc-item{
        display: inline-block;
        width: 100px;
    }
    .icon-fk-code{
        display: inline-block;
        width: 34px;
        height: 34px;
        cursor: pointer;
        margin-bottom: -14px;
        background: url('/static/facility/images/icon/code.png') no-repeat 0 0;
    }
    .fk-code{
        width:140px;
        margin:0 auto
    }
    .qr-text{
        opacity: 0.7;
        float: right;
    }

</style>
{% endblock %}
<!--tabs-->
<div class="settings">
    <div class="tabs">
        <ul class="nav nav-tabs">
            {% show_visitor_management as showv %}
            {% if showv  %}
            <li class="active">
                <a href="#visitor_health" >{% trans '健康登记' %}</a>
            </li>
            {% endif %}
        </ul>
    </div>
</div>


<div class="teachershealth">
    <div class="toolbar">
        <div class="pull-left form-group form-inline">

            <div class="form-group inline_block">
                <div id="health-type" class="dropdown"></div>
            </div>
            <div class="form-group inline_block t-datetimepicker">
                <a class="prev" href="javascript:void(0)"><i class="icon-angle-left"></i></a>
                <input  class="data_control form-control" size="16" type="text" readonly>
                <a class="next" href="javascript:void(0)"><i class="icon-angle-right"></i></a>
            </div>

            <div class="form-group inline_block">
                <button type="button" id="ts_health_refurbish" class="btn btn-default">{% trans '刷新' %}</button>
            </div>

            <div class="ts-eventps-state form-group inline_block">
                <span class="ts-eventpro-state fontcolor-green"></span>
                <span class="ts-eventnopeo-state"></span>
            </div>

        </div>

        <div class="centent_title_row form-group">
            <!--fangke code-->
            <span class="icon-fk-code" title="{% trans '访客二维码' %}"></span>
            <!-- export excel -->
            <div class="export-btns btn-group">
                <button type="button" class="btn btn-green dropdown-toggle" data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="false">
                    <span>{% trans "导出汇总" %}</span>
                </button>
                <ul class="dropdown-menu dropdown-menu-right">
                    <li><a href="javascript:void(0);" class="export-day">{% trans "日汇总" %}</a></li>
                    <li><a href="javascript:void(0);" class="export-mouth">{% trans "月汇总" %}</a></li>
                </ul>
            </div>
            <button id="addVisitor" class="btn btn-warning" type="button">{% trans "新增访客" %}</button>
        </div>
        <div style="clear:both"></div>
    </div>

</div>

<div class="table-responsive content" style="width: 100%;">
    <table class="visitor_healthlist">
        <thead>
        <tr>
            <th></th>
            <th></th>
            <th>{% trans '姓名' %}</th>
            <th>{% trans '入园时间' %}</th>
            <th>{% trans '离园时间' %}</th>
            <th></th>
            <th>{% trans '体温' %}</th>
            <th>{% trans '症状' %}</th>
            <th></th>
        </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

<div id="health_editor"></div>

<script type="text/javascript">

    var defaultFangke = "{% static 'facility/images/default/fangke.png' %}";

    $.iResources.getTemplate('health_edit.html', function(clientData, data) {
        $("#health_editor").html(data);
    });

</script>