<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <script th:replace="common/head"></script>
    <link xmlns:th="http://www.thymeleaf.org" rel="stylesheet"
          th:href="${'/css/estate/server-user-open-permission.css'}" media="all">

    <style>
        .picture-img-list{
            padding: 0px;
        }
        .layer-photos-content{
            margin: 21px;
        }
        #video{
            width: 320px;
            height: 240px;
            line-height: 240px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-form">
                <div class="layui-tab" lay-filter="openPermission">
                    <ul class="layui-tab-title">
                        <li class="layui-this">人脸门禁</li>
<!--                        <li>门禁卡门禁</li>-->
                    </ul>
                    <div class="layui-tab-content" style="margin-top: 10px">
                        <div class="layui-tab-item layui-show">
                            <div class="layui-form-item">
                                <div class="layui-col-md3">
                                    <div class="layui-upload-picture picture-bg">
                                        <p class="name-info" th:text="'姓名：'+ ${serverUser?.name}"></p>
                                        <div id="picture-img" class="picture-img">
                                            <img id="default_img" th:src="@{'/images/picture.png'}" alt="">
<!--                                            <div id="webcam"></div>-->
                                            <canvas id="canvas" hidden="hidden"></canvas>
                                        </div>
                                        <video id="video" controls style="display: none"></video>
                                        <div class="picture-btn">
                                            <button type="button" class="layui-btn layui-bg-cyan" id="photo_webcam">人脸采集
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-md8 layui-upload-picture">
                                    <div class="layui-upload-list layui-inline ">
                                        <div class="layer-photos-content"
                                             th:if="${serverUser.serverUserFaceImage != null && serverUser.serverUserFaceImage != ''}">
                                            <input type="hidden" name="imgUri"
                                                   th:value="${serverUser.serverUserFaceImage.imageUri}"/>
                                            <img class="layui-upload-img" src=""
                                                 th:src="${fastDfsServer + serverUser.serverUserFaceImage.imageUri}">
                                            <span class="layui-layer-setwin">
                                   <a class="layui-layer-ico layui-layer-close layui-layer-close2"
                                      href="javascript:;"></a>
                            </span>
                                        </div>
                                    </div>
                                    <div class="layui-inline photo-upload" style="margin-top: 40px;">
                                        <div class="upload-btn" id="photo_upload">
                                            <i class="layui-icon layui-icon-add-1"></i>
                                            <p>上传图片(最多1张)</p>
                                        </div>
                                        <input type="file" id="btn_file" multiple="multiple" accept="image/*"
                                               style="display:none">
                                        <input type="hidden" id="image_id" name="imageId"
                                               th:value="${serverUser.serverUserFaceImage?.id}">
                                        <input type="hidden" id="image_uri" name="imageUri"
                                               th:value="${serverUser.serverUserFaceImage?.imageUri}">
                                        <input type="hidden" id="face_code" name="faceCode"
                                               th:value="${serverUser.serverUserFaceImage?.faceCode}">
                                    </div>
                                    <div class="layui-inline">
                                        <p class="name-info">人脸登记注意事项：</p>
                                        <p class="name-info">1.保证背景为白色的情况下拍摄。</p>
                                        <p class="name-info">2.保证光线均匀，避免头像出现左右亮度不均。</p>
                                        <p class="name-info">3.刘海不要遮住眉毛，头发不要遮住脸部。</p>
                                        <p class="name-info">4.保持自然状态，请将人脸处于显示屏正中，注视摄像头。</p>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-inline">
                                            <label class="layui-form-label">人脸有效：</label>
                                            <div class="layui-input-inline" style="width:316px;">
                                                <input type="text"
                                                       th:if="${serverUser?.serverUserFaceImage?.beginDate!=null}"
                                                       th:value="${serverUser?.serverUserFaceImage?.beginDate+' - '+serverUser?.serverUserFaceImage?.endDate}"
                                                       class="layui-input date-icon" id="faceRangeDate"
                                                       placeholder="请选择人脸有效期"
                                                       autocomplete="off" lay-key="1">
                                                <input type="text"
                                                       th:if="${serverUser?.serverUserFaceImage?.beginDate==null}"
                                                       class="layui-input date-icon" id="faceRangeDate"
                                                       placeholder="请选择人脸有效期"
                                                       autocomplete="off" lay-key="1">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--<div class="layui-tab-item">
                            <div class="layui-form-item">
                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">卡号：</label>
                                        <div class="layui-input-block">
                                            <input type="text" id="card_no" name="cardNo"
                                                   th:value="${serverUser?.accessCard?.cardNo}" placeholder="请输入"
                                                   autocomplete="off" class="layui-input">
                                        </div>

                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">卡有效：</label>
                                    <div class="layui-input-inline" style="width:316px;">
                                        <input type="text" th:if="${serverUser?.accessCard?.beginDate!=null}"
                                               th:value="${serverUser?.accessCard?.beginDate+' - '+serverUser?.accessCard?.endDate}"
                                               class="layui-input date-icon" id="rangeDate" placeholder="请选择卡号有效期"
                                               autocomplete="off" lay-key="2">
                                        <input type="text" th:if="${serverUser?.accessCard?.beginDate==null}"
                                               class="layui-input date-icon" id="rangeDate" placeholder="请选择卡号有效期"
                                               autocomplete="off" lay-key="2">
                                    </div>
                                </div>
                            </div>
                        </div>-->
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <input name="openPermissionType" type="hidden" value="1">
                            <button class="layui-btn" lay-filter="submitButton" lay-submit>下发</button>
                            <button type="reset" id="cancel_btn" class="layui-btn layui-btn-primary">取消</button>
                        </div>
                    </div>
                    <input type="hidden" name="id" id="card_id" class="layui-input"
                           th:value="${serverUser?.accessCard?.id}">
                    <input type="hidden" name="userId" class="layui-input" th:value="${serverUser?.id}">
                    <input type="hidden" id="fastDfsServer" th:value="${fastDfsServer}">
                </div>
            </div>
        </div>
    </div>
</div>
<!-- javascript -->
<script th:src="@{'/layui/layui.js'}"></script>
<script>
    layui.config({
        base: '/' //静态资源所在路径
    });
</script>
<script th:src="@{'/js/estate/server-user-open-permission.js'}"></script>
<script th:src="@{'/lib/jquery-1.11.3.js'}"></script>
<script th:src="@{'/lib/jquery.webcam.min.js'}"></script>
<script th:src="@{'/js/util/base64image.js'}"></script>
<script th:src="@{'/js/util/exif.js'}"></script>
</body>
</html>
