<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>爽约记录</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <link rel="icon" th:href="@{image/sgl.png}" sizes="32x32">
    <script th:src="@{/layui/layui.js}"></script>
    <script th:src="@{/layui/jquery-3.4.1.min.js}"></script>
    <script th:src="@{/js/common.js}"></script>
    <script th:src="@{/js/rules.js}"></script>
    <!--    <script th:src="@{/ueditor/ueditor.config.js}"></script>-->
    <!--    <script th:src="@{/ueditor/ueditor.all.min.js}"></script>-->
    <!--    <script th:src="@{/ueditor/lang/zh-cn/zh-cn.js}"></script>-->
    <script th:src="@{/js/compressor.min.js}"></script>
    <link rel="stylesheet" th:href="@{/css/common.css}">
</head>
<style>
    .btn:hover {
        color: #555;
    }

    .layui-table-view {
        margin: 0;
    }

    .layui-tab-card {
        box-shadow: none;
        border-radius: 0px;
    }

    .layui-tab {
        margin: 0;
    }

    .layui-tab-content {
        padding: 0;
    }

    .layui-form-radio {
        margin: 0;
    }

    .tdBackground-color {
        background-color: #ff0000;
    }
</style>

<body class="layui-layout-body">

<div class="toolbar">
    <div class="layui-inline">
        <span>卡号：</span>
        <input type="text" id="cardNo" placeholder="请输入卡号" autocomplete="off" class="layui-input formWidth"/>
    </div>
    <div class="layui-inline">
        <span>时间搜索：</span>
        <input type="text" id="startTime" placeholder="请选择时间 " autocomplete="off" class="layui-input formWidth"/>
    </div>
    <div class="layui-inline">
        <span>至&nbsp;&nbsp;&nbsp;</span>
        <input type="text" id="endTime" placeholder="请选择时间 " autocomplete="off" class="layui-input formWidth"/>
    </div>
    <div class="layui-inline">
        <span>是否查看三次以上：</span>
        <select id="isThree" class="layui-select formWidth">
            <option value="">-请选择-</option>
            <option value="3">是</option>
            <option value="">否</option>
        </select>
    </div>
    <div class="layui-inline">
        <button class="layui-btn layui-btn-sm" data-type="search" id="search"><i class="layui-icon">&#xe615;</i>查询
        </button>
    </div>
</div>

<table id="demo" lay-filter="test"></table>

<!-- 表格操作栏 -->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">加入黑名单</a>
</script>


<!-- 增加和修改 -->
<div id="Hospital" style="display:none;">
    <form id="zjHospital" class="layui-form" style="margin-top:20px;">
        <div class="layui-form-item">
            <label class="layui-form-label">卡号:</label>
            <div class="layui-input-block">
                <input type="text" id="card_no" required lay-verify="required" autocomplete="off"
                       placeholder="请输入卡号"
                       class="layui-input" style="width: 230px">
            </div>
        </div>
        <div class="layui-form-item" id="symptom_isShow">
            <label class="layui-form-label">备注:</label>
            <div class="layui-input-block">
                <input type="text" id="remark" required lay-verify="required" autocomplete="off"
                       placeholder="请输备注信息"
                       class="layui-input" style="width: 230px">
            </div>
        </div>
    </form>
</div>

</body>
</html>
<script th:inline="javascript">
</script>
<script>
    //修改、启用禁用
    var content = "";
    var element,
        table,
        laydate,
        layer,
        form,
        tree,
        upload;
    var tHeight = $(".toolbar").height() + 6;
    layui.use(['element', 'table', 'laydate', 'layer', 'form', 'tree', 'upload'], function () {
        element = layui.element;
        table = layui.table;
        laydate = layui.laydate;
        layer = layui.layer;
        form = layui.form;
        tree = layui.tree;
        upload = layui.upload;
        //表格加载
        table.render({
            elem: '#demo',
            height: 'full-' + tHeight,
            url: '/missedAppointRecord/findAllMissedAppointRecord', //数据接口
            title: '用户表',
            page: true,//开启分页
            limit: 20,
            limits: [20, 30, 50],
            //toolbar: '', //开启工具栏，此处显示默认图标，可以自定义模板
            defaultToolbar: [],
            id: 'test',
            cols: [
                [ //表头
                    {field: 'CARDNO', title: '卡号', width: 200},
                    {field: 'PATIENT_ID', title: '病人id', width: 100, totalRow: true},

                    {
                        field: 'KSMC', title: '预约科室名称', width: 100,
                    },
                    {
                        field: 'YYRQ', title: '预约日期', width: 100,
                    },
                    {
                        field: 'TRUE_NAME', title: '真实姓名', width: 100,
                    },
                    {
                        field: 'ID_CARD', title: '身份证号', width: 300,
                    },
                    {fixed: 'right', title: '操作', align: 'center', width: 240, toolbar: '#barDemo'}
                ]
            ]
        });

        //时间控件
        laydate.render({
            elem: '#startTime', //指定元素
            eventElem: '.date-input-icon',
            trigger: 'click',
        });
        laydate.render({
            elem: '#endTime', //指定元素
            eventElem: '.date-input-icon',
            trigger: 'click',
        });

        //查询
        $("#search").on('click', function () {
            findAllMissedAppointRecord();
        });

        table.on('tool(test)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') {
                $('#card_no').val(data.CARDNO)
                $('#card_no').attr("disabled", true);
                $('#remark').val("")
                form.render()
                layer.open({
                    type: 1,
                    title: "添加黑名单",
                    shade: 0,
                    zIndex: 5,
                    area: ['500px', '80%'],
                    offset: 'auto',
                    content: $("#Hospital"),
                    btn: ['保存', '取消'],
                    btnAlign: 'c',
                    yes: function (index, layero) {
                        var cardNo = data.CARDNO;
                        var patientId = data.PATIENT_ID;
                        var trueName = data.TRUE_NAME;
                        var idCard = data.ID_CARD;
                        var remark = $('#remark').val();
                        var param = {};
                        param.cardNo = cardNo;
                        param.patientId = patientId;
                        param.trueName = trueName;
                        param.idCard = idCard;
                        param.remark = remark;
                        var url = '/missedAppointRecord/addBlackList';
                        AjaxPostJson(url, param, function (data) {
                            if (data.errCode == "0") {
                                layer.close(index);
                                layer.msg('修改成功', {time: 1000});
                                findAllMissedAppointRecord();
                            } else {
                                layer.msg(data.errMsg, {time: 1000});
                            }
                        });
                    },
                    btn2: function () {
                    }
                });
            }
        });
    });

    function findAllMissedAppointRecord() {
        var cardNo = $("#cardNo").val();
        var startTime = $('#startTime').val();
        var endTime = $('#endTime').val();
        var isThree = $('#isThree').val();
        console.log("isThree is :" + isThree)
        table.reload('test', {
            method: 'get',
            url: '/missedAppointRecord/findAllMissedAppointRecord',
            where: {
                'cardNo': cardNo,
                'startTime': startTime,
                'endTime': endTime,
                'isThird': isThree,
            },
            page: {
                curr: 1
            }
        });
    }

</script>