<?php include_once(mvc::$cfg['PATH_TPL'].'public/headMenu.php');?>
<link rel="stylesheet" href="<?php echo mvc::$cfg['SYS_URL'];?>static/css/user.css?ver=<?php echo mvc::$cfg['VER']['css'];?>">
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">查询历史</h1>
    <button class="mui-btn mui-btn-blue mui-btn-link mui-pull-right del-all" data-type="clear" id="empty-all">清空</button>
</header>
<footer class="his-foot">
    <div class="mui-input-row mui-checkbox mui-left footer-list">
        <input value="1" class="all" type="checkbox">
        <label>全选</label>
    </div>
    <div class="footer-list">
        <a href="javascript:;" data-type="check"  class="del-all">删除</a>
    </div>
</footer>
<!-- 下拉容器 -->
<div id="search_history" class="mui-content mui-scroll-wrapper">
    <div style="padding: 10px 10px;">
        <div id="segmentedControl" class="mui-segmented-control">
            <a class="mui-control-item mui-active" href="#item1">VIN历史</a>
            <a class="mui-control-item" href="#item2">OE历史</a>
        </div>
    </div>
    <div id="search_history_box"  style="padding: 10px 10px;">
        <div id="item1" class="mui-control-content mui-active">
           <ul id="search-lists-vin" class="mui-table-view search-lists" data-type="vin">
                
            </ul>
        </div>
        <div id="item2" class="mui-control-content">
            <ul id="search-lists-number" class="mui-table-view search-lists" data-type="number">
                
            </ul>
        </div>
    </div>
</div>
<script type="text/javascript" src="<?php echo mvc::$cfg['SYS_URL'];?>static/js/user.js?ver=<?php echo mvc::$cfg['VER']['js'];?>"></script>
<script type="text/javascript">
    (function(mui){
        var vinArr=LOCALHISTORY.get('vin');
        if(vinArr!=null&&vinArr.length>0){
            var html='';
            for(var i in vinArr){
                html+=`<li class="mui-table-view-cell" data-type="vin" data-val="`+vinArr[i]+`">
                    <div class="mui-slider-right mui-disabled">
                        <a class="mui-btn mui-btn-red">删除</a>
                    </div>
                    <div class="mui-slider-handle mui-table">
                        <div class="mui-table-cell">
                            `+vinArr[i]+`
                        </div>

                    </div>
                </li>`;
            }
            $('#search-lists-vin').append(html);
        }else{
            $('#search-lists-vin').replaceWith('<div class="mui-pull-caption mui-pull-caption-nomore">没有更多记录了</div>');
            $('#item1').addClass('center');
        }
        var vinArr=LOCALHISTORY.get('number');
        if(vinArr!=null&&vinArr.length>0){
            var html='';
            for(var i in vinArr){
                html+=`<li class="mui-table-view-cell" data-type="number" data-val="`+vinArr[i]+`">
                    <div class="mui-slider-right mui-disabled">
                        <a class="mui-btn mui-btn-red">删除</a>
                    </div>
                    <div class="mui-slider-handle mui-table">
                        <div class="mui-table-cell">
                            `+vinArr[i]+`
                        </div>

                    </div>
                </li>`;
            }
            $('#search-lists-number').append(html);
        }else{
            $('#search-lists-number').replaceWith('<div class="mui-pull-caption mui-pull-caption-nomore">没有更多记录了</div>');
            $('#item2').addClass('center');
        }
        var btnArray = ['确认', '取消'];
        //第二个demo，向左拖拽后显示操作图标，释放后自动触发的业务逻辑
        $('.search-lists').on('slideleft', '.mui-table-view-cell', function(event) {
            var elem = this;
            mui.confirm('确认删除该条记录？', '', btnArray, function(e) {
                if (e.index == 0) {
                    elem.parentNode.removeChild(elem);
                    LOCALHISTORY.del($(elem).data('type'),$(elem).data('val'))
                } else {
                    setTimeout(function() {
                        mui.swipeoutClose(elem);
                    }, 0);
                }
            });
        });
        $('.search-lists').on('tap','.mui-table-view-cell',function(){
            var url=SELF_URI+'item/search?type='+$(this).data('type')+'&keyword='+$(this).data('val');
            window.location.href=url;
        })
        $('.del-all').click(function(){
            var item=$('.mui-control-content.mui-active');
            mui.confirm('确认清空记录？', '', btnArray, function(e) {
                if (e.index == 0) {
                    item.find('ul').html('');
                    LOCALHISTORY.clear(item.find('ul').data('type'))
                    item.find('ul').replaceWith('<div class="mui-pull-caption mui-pull-caption-nomore">没有更多记录了</div>');
                    item.addClass('center');
                }
            }); 
        })
    })(mui)
</script>
<?php include_once(mvc::$cfg['PATH_TPL'].'public/footBase.php');?>