<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('护照管理')" />
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="formId">
                <div class="select-list">
                    <ul>
                        <li>
                            <label>护照编号：</label>
                            <input type="text" name="passportNo" placeholder="模糊匹配"/>
                        </li>
                        <li>
                            <label>绑定状态：</label>
                            <select name="bindStatus">
                                <option value="">全部</option>
                                <option value="1">已绑定</option>
                                <option value="0">未绑定</option>
                                <option value="2">已作废</option>
                            </select>
                        </li>
                        <li>
                            <label>用户昵称/姓名：</label>
                            <input type="text" name="userName" placeholder="昵称或真实姓名"/>
                        </li>
                        <li>
                            <label>手机号：</label>
                            <input type="text" name="mobile" placeholder="完整或片段"/>
                        </li>
                        <li>
                            <label>证件号：</label>
                            <input type="text" name="idCard" placeholder="完整或片段"/>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>

        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table"></table>
        </div>
    </div>
</div>
<th:block th:include="include :: footer" />
<script th:inline="javascript">
    var unbindFlag = [[${@permission.hasPermi('adam:caomei:passport:edit')}]];
    var detailFlag = [[${@permission.hasPermi('adam:caomei:passport:list')}]];
    var prefix = ctx + "adam/caomei/passport";

    $(function() {
        var options = {
            url: prefix + "/list",
            formId: "formId",
            modalName: "护照",
            columns: [
                { field: 'mid', title: '主键', visible: false },
                { field: 'passportNo', title: '护照ID' },
                {
                    field: 'nickname',
                    title: '关联用户',
                    formatter: function(value, row, index) {
                        if (!value && row.bindStatus !== 1) {
                            return '<span class="text-muted">未绑定用户</span>';
                        }
                        return value || '-';
                    }
                },
                { field: 'realName', title: '姓名', formatter: function(v) { return v || '-'; } },
                { field: 'mobile', title: '手机号', formatter: function(v) { return v || '-'; } },
                { field: 'idCard', title: '证件号', formatter: function(v) { return v || '-'; } },
                {
                    field: 'bindStatus',
                    title: '绑定状态',
                    align: 'center',
                    formatter: function(value) {
                        if (value === 1) {
                            return '<span class="label label-info">已绑定</span>';
                        }
                        if (value === 0) {
                            return '<span class="label label-default">未绑定</span>';
                        }
                        if (value === 2) {
                            return '<span class="label label-warning">已作废</span>';
                        }
                        return value;
                    }
                },
                { field: 'claimedBadgeCount', title: '已领取徽章数', align: 'center' },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function(value, row) {
                        var actions = [];
                        actions.push('<a class="btn btn-info btn-xs ' + detailFlag + '" href="javascript:void(0)" onclick=\'openDetail(' + JSON.stringify(row.passportNo) + ')\'><i class="fa fa-eye"></i>查看详情</a> ');
                        if (row.bindStatus === 1) {
                            actions.push('<a class="btn btn-warning btn-xs ' + unbindFlag + '" href="javascript:void(0)" onclick=\'unbind(' + JSON.stringify(row.passportNo) + ')\'><i class="fa fa-unlink"></i>解绑用户</a>');
                        }
                        return actions.join('');
                    }
                }
            ]
        };
        $.table.init(options);
        setTimeout(function() {
            renderBoundPassportCountToolbar();
            loadBoundPassportCount();
        }, 0);
    });

    function renderBoundPassportCountToolbar() {
        if ($("#boundPassportCountBox").length > 0) {
            return;
        }
        var html = '' +
            '<div id="boundPassportCountBox" class="pull-left" style="margin-top: 10px; margin-right: 8px;">' +
            '  <span style="display: inline-block; line-height: 30px; margin-right: 6px;">已绑定护照数量：<strong id="boundPassportCount">加载中...</strong></span>' +
            '  <button type="button" class="btn btn-default btn-outline" onclick="loadBoundPassportCount()" title="刷新已绑定护照数量">' +
            '    <i class="fa fa-refresh"></i>' +
            '  </button>' +
            '</div>';
        var $toolbar = $(".fixed-table-toolbar").first();
        if ($toolbar.length > 0) {
            $toolbar.prepend(html);
        }
    }

    function loadBoundPassportCount() {
        $.get(prefix + "/bound/count", function(res) {
            if (res && res.code === 0) {
                $("#boundPassportCount").text(res.data || 0);
            } else {
                $("#boundPassportCount").text("-");
            }
        });
    }

    function openDetail(passportNo) {
        $.modal.openTab("护照详情", prefix + "/detail/" + encodeURIComponent(passportNo));
    }

    function unbind(passportNo) {
        $.modal.confirm("解绑后该护照将变为未绑定状态，用户需重新绑定。确认解绑？", function() {
            $.operate.post(prefix + "/unbind", { passportNo: passportNo });
        });
    }
</script>
</body>
</html>
