<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>设备SIM卡映射记录</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <fieldset class="table-search-fieldset">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="" id="searchForm">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">查询类型</label>
                            <div class="layui-input-inline">
                                <select name="searchType" lay-verify="required">
                                    <option value="deviceId">设备号</option>
                                    <option value="iccid">ICCID</option>
                                    <option value="simNumber">SIM卡号</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">搜索内容</label>
                            <div class="layui-input-inline">
                                <input type="text" name="searchContent" id="searchInput" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="searchSubmit"><i class="layui-icon">&#xe615;</i> 搜 索</button>
                            <button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-export-btn"><i class="layui-icon">&#xe67d;</i> 导出</button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>
        <div class="layui-tab layui-tab-card" lay-filter="data-tab">
            <ul class="layui-tab-title">
                <li class="layui-this">设备映射记录</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <table class="layui-hide" id="deviceMappingTable" lay-filter="deviceMappingFilter"></table>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="statusTpl">
    {{#  if(d.isActive){ }}
    <span class="layui-badge layui-bg-green">使用中</span>
    {{#  } else { }}
    <span class="layui-badge">已结束</span>
    {{#  } }}
</script>

<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script th:inline="javascript">
    layui.use(['form', 'table','layer','element'], function () {
        var table = layui.table
            ,form = layui.form
            ,layer = layui.layer
            ,element = layui.element;

        var data_cols = [
            {field: 'deviceId', title: '设备号'},
            {field: 'iccid', title: 'ICCID'},
            {field: 'msisdn', title: 'SIM卡号'},
            {field: 'startTime', title: '开始时间', templet: "<div>{{layui.util.toDateString(d.startTime, 'yyyy-MM-dd HH:mm:ss')}}</div>"},
            {field: 'endTime', title: '结束时间', templet: function(d) {
                return d.endTime ? layui.util.toDateString(d.endTime, 'yyyy-MM-dd HH:mm:ss') : '-';
            }},
            {field: 'isActive', title: '状态', templet: '#statusTpl'},
            {field: 'duration', title: '使用时长', templet: function(d) {
                if (!d.startTime) return '-';
                
                var start = new Date(d.startTime);
                var end = d.endTime ? new Date(d.endTime) : new Date();
                var diffMs = end - start;
                
                if (diffMs < 0) return '-';
                
                var days = Math.floor(diffMs / (1000 * 60 * 60 * 24));
                var hours = Math.floor((diffMs % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                
                if (days > 0) {
                    return days + '天' + hours + '小时';
                } else if (hours > 0) {
                    return hours + '小时';
                } else {
                    var minutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60));
                    return minutes + '分钟';
                }
            }}
        ];

        form.render();
        table.render({
            elem: '#deviceMappingTable',
            url: '/sim/device-mapping',
            defaultToolbar: ['filter'],
            cols: [
                data_cols
            ],
            limits: [20, 50, 100, 200, 300],
            limit: 20,
            page: true,
            skin: 'line',
            done: function(res) {
                if(res.code !== 0) {
                    layer.msg(res.msg || '查询失败', {icon: 2});
                }
            }
        });

        form.verify({
            searchContent: function(value, item) {
                var type = $('select[name="searchType"]').val();
                if(!value) {
                    return '请输入搜索内容';
                }
                if(type === 'iccid' && !/^\d{19,20}$/.test(value)) {
                    return 'ICCID必须是19-20位数字';
                }
                if(type === 'simNumber' && !/^\d{11,13}$/.test(value)) {
                    return 'SIM卡号必须是11-13位数字';
                }
            }
        });

        form.on('submit(searchSubmit)', function(data){
            var loadIndex = layer.load(1);
            table.reload('deviceMappingTable', {
                page: {
                    curr: 1
                }
                ,where: {
                    searchType: data.field.searchType,
                    searchContent: data.field.searchContent
                }
                ,done: function(res) {
                    layer.close(loadIndex);
                    if(res.code !== 0) {
                        layer.msg(res.msg || '查询失败', {icon: 2});
                    } else if(res.count === 0) {
                        layer.msg('未找到符合条件的数据', {icon: 0});
                    }
                }
            });
            return false;
        });
        
        form.on('submit(data-export-btn)', function (data) {
            var searchData = data.field;
            var url = '/sim/device-mapping/export?';
            if (searchData.searchType) {
                url += 'searchType=' + searchData.searchType;
            }
            if (searchData.searchContent) {
                url += '&searchContent=' + encodeURIComponent(searchData.searchContent);
            }
            
            window.location.href = url;
            return false;
        });
    });
</script>
</body>
</html> 