<include file="Public:header" />
<div class="weui-toptips weui-toptips_warn js_tooltips"></div>

<div id="product_page">
    <div class="weui-search-bar weui-search-bar_focusing" id="searchBar">
        <form class="weui-search-bar__form" action="/Model/search_result.html" method="get">
            <div class="weui-search-bar__box">
                <i class="weui-icon-search"></i>
                <input type="search" class="weui-search-bar__input" id="searchInput" name="keyword" placeholder="搜索" value="{$Think.get.keyword}" required/>
                <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
            </div>
            <label class="weui-search-bar__label" id="searchText">
                <i class="weui-icon-search"></i>
                <span>产品搜索</span>
            </label>
        </form>
        <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
    </div>

    <div class="weui-cells searchbar-result" id="searchResult" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1); display: none;margin-top:0;">
        <div class="weui-cell weui-cell_access">
            <div class="weui-cell__bd weui-cell_primary">
                <p>实时搜索文本</p>
            </div>
        </div>
        <div class="weui-cell weui-cell_access">
            <div class="weui-cell__bd weui-cell_primary">
                <p>实时搜索文本</p>
            </div>
        </div>
    </div>

    <div class="weui-cells" id="result_container">
        <div class="weui-cell weui-cell_access theme-bg-color" >
            <div class="weui-cell__bd">型号</div>
            <div class="weui-cell__bd">内径<br />mm</div>
            <div class="weui-cell__bd">外径<br />mm</div>
            <div class="weui-cell__bd">宽/高度<br />mm</div>
            <div class="weui-cell__bd">质量<br />KG</div>
        </div>
        <volist name="list" id="v" empty="未搜索到相关数据" key="k">
            <a class="weui-cell weui-cell_access <?=$k%2==0?' bg ':''?>" href="<?=U('Model/model_detail','mid='.$v['mid'])?>" target="_blank">
                <div class="weui-cell__bd"> <p>{$v.model}</p> </div>
                <div class="weui-cell__bd"> <p>{$v.n_d|formatNumber}</p> </div>
                <div class="weui-cell__bd"> <p>{$v.u_d|formatNumber}</p> </div>
                <div class="weui-cell__bd"> <p>{$v.u_b|formatNumber}{$v.u_h|formatNumber}</p> </div>
                <div class="weui-cell__bd"> <p>{$v.n_m|formatNumber}</p> </div>
            </a>
        </volist>
    </div>

</div>

<include file="Public:footer" />
<script type="text/javascript">
    function showMsg(msg){
        var $tooltips = $('.js_tooltips');
        if ($tooltips.css('display') != 'none') return;
        $tooltips.html(msg);
        // toptips的fixed, 如果有`animation`, `position: fixed`不生效
        $('.page.cell').removeClass('slideIn');

        $tooltips.css('display', 'block');
        setTimeout(function () {
            $tooltips.css('display', 'none');
        }, 1500);
    }

</script>
<script type="text/javascript">
    $(function(){
        var $searchBar = $('#searchBar'),
            $searchResult = $('#searchResult'),
            $searchText = $('#searchText'),
            $searchInput = $('#searchInput'),
            $searchClear = $('#searchClear'),
            $searchCancel = $('#searchCancel'),
            $searchLoadmore = $('#loadmore'),
            $recommendList = [];

        function hideSearchResult(){
            $searchResult.hide();
            $searchInput.val('');
        }
        function cancelSearch(){
            hideSearchResult();
            $searchBar.removeClass('weui-search-bar_focusing');
            $searchText.show();
        }

        $searchText.on('click', function(){
            $searchBar.addClass('weui-search-bar_focusing');
            $searchInput.focus();
        });
        $searchInput
            .on('blur', function () {
                if(!this.value.length) cancelSearch();
            })
            .on('input', function(){
                var keyword = this.value;
                if(this.value.length) {
                    $.ajax({
                        url : '/Model/input_search.html',
                        type : 'post',
                        data : 'keyword='+keyword,
                        dataType : 'json',
                        beforeSend : function(){},
                        success : function(xhr){
                            console.log(xhr);
                            var html = '';
                            if(xhr.status==1){
                                for(var i = 0;i<xhr.info.length;i++){
                                    var item = xhr.info[i];
                                    console.log(item);
                                    html += '<div class="weui-cell weui-cell_access model_item" data-id="'+i+'"><div class="weui-cell__bd weui-cell_primary"><p><i class="weui-icon-search"></i> ' +
                                        item['model'] +'</p></div></div>';
                                }
                                $recommendList = xhr.info;
                            }
                            $searchResult.html(html);
                            $searchResult.show();
                        },
                        complete:function(){}
                    });
                } else {
                    $searchResult.hide();
                }
            })
        ;
        $searchClear.on('click', function(){
            hideSearchResult();
            $searchInput.focus();
        });
        $searchCancel.on('click', function(){
            cancelSearch();
            $searchInput.blur();
        });
        $('.searchbar-result').delegate('.model_item','click',function(){
            $searchInput.val($recommendList[$(this).attr('data-id')]['model']);
            $('.weui-search-bar__form')[0].submit();
        });

    });
</script>