@extends('wap-browser.template')

@section('head')
    <link rel="stylesheet" href="/wapbrowser/web/component.css">

    <style>
        .book-search {
            padding: .24rem;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
            -ms-flex-direction: row;
            flex-direction: row;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;
        }
        .x-input--search2 {
            width: 5.4rem;
            height: .6rem;
            border-radius: .06rem;
            position: relative;
            border: 1px solid #b3b3b3;
        }
        .x-input--search2 .x-input__icon {
            position: absolute;
            top: .13rem;
            left: .2rem;
            width: .34rem;
            height: .34rem;
        }
        .x-input--search2 .x-input__inner {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            padding: 0 .6rem;
            border: none;
            background-color: transparent;
        }
        input[type=button], input[type=reset], input[type=submit] {
            -webkit-appearance: none;
        }
        .x-input--button {
            background-color: #32a1ff;
            border-radius: .06rem;
            height: .6rem;
            line-height: .6rem;
            padding: 0 .4rem;
            border: none;
            font-size: .26rem;
            color: #fff;
        }
        .x-book--search{
            margin: .36rem .24rem;
        }
    </style>
@endsection

@section('body')
    @component('wap-browser.component.header',['name'=> $title,'link'=>'/'])
    @endcomponent
    <div class="book-search">
        <div class="x-input--search2">
            <img src="data:image/png;base64, "
                 class="x-input__icon">
            <input placeholder="请输入书名" type="text" class="x-input__inner">
        </div>
        <div class="book-search__btn">
            <input type="button" value="搜索" class="x-input--button">
        </div>
    </div>
    <div class="search-list">

    </div>
    <div class="spinner" style="heigth: 30px; overflow: hidden; display: none">
        <div class="mint-spinner-snake" style="margin: 0  auto;border-top-color: rgb(38, 162, 255); border-left-color: rgb(38, 162, 255); border-bottom-color: rgb(38, 162, 255); height: 28px; width: 28px;"></div>
    </div>
@endsection

@section('foot')
    <script>

        function createBook(book){
            var a = document.createElement('a')
            a.setAttribute('href','/detail?bid='+ book.book_id)
            a.innerHTML = '\
      <dl class="x-book x-book--multi x-book--search">\
        <dt class="x-book__coverbox" style="width: 1.8rem;height: 2.4rem">\
          <img src="'+book.cover_url+'" class="x-book__cover" style="width: 1.8rem;height: 2.4rem">\
        </dt>\
        <dd class="x-book__text--multi" style="width: calc(100% - 1.8rem);height: 2.4rem">\
          <div class="x-book-info">\
            <p class="x-book-info__name">'+ book.book_name +'</p>\
            <p class="x-book-info__flex">\
              <span class="x-book-info__author">'+ book.book_author +'</span>\
              <span class="x-book-info__finish"> '+ (book.book_end_status ? '完结' : '连载') +' </span>\
            </p>\
            <p class="x-book-info__count">字数：'+ book.book_word_count +'</p>\
            <p class="x-book-info__flex">\
              <span class="x-book-info__lastest">\
                <span class="red">最新：'+ book.last_chapter +'</span></span>\
                '+(book.last_chapter_is_vip ? '<img src="/wapbrowser/web/vip.png" class="x-book-info__vip">' : '<img src="/wapbrowser/web/vip.png" class="x-book-info__vip">')+'\
            </p>\
          </div>\
        </dd>\
      </dl>'
            return a
        }
        getList(true);
        function getList(append){
            var wrap = document.querySelector('.search-list')
            var key = document.querySelector('.x-input__inner').value
            //if(!key) return
            if(getList.prev && getList.prev.params.key === key && page === 1) return
            if(getList.prev) getList.prev.xhr.abort()
            if(!append) wrap.innerHTML = ''
            document.querySelector('.spinner').style.display = ''

            var params = {
                page: page,
                key: key
            }
            var url = '/api/books/library?' +  queryString(params)
            function callback(json){
                getList.loading = false
                json.data.list.map(function(book){
                    wrap.appendChild(createBook(book))
                })
                if( json.data.meta.last_page === json.data.meta.current_page ) {
                    last = true
                    document.querySelector('.spinner').style.display = 'none'
                }else{
                    last = false
                    document.querySelector('.spinner').style.display = ''
                }
            }
            function queryString(obj) {
                console.log(obj)
                var str = ''
                for (k in obj){
                    str += k+'='+obj[k]+'&'
                }
                if(str){
                    str = str.substr(0,str.length-1)
                }
                return str;
            }
            getList.prev = {
                params : params,
                xhr : getJSON(url,callback)
            }
            getList.loading = true
        }

        var page = 1,last = false

        addEvent(window, 'scroll', function(e){
            if(getList.loading || last) return
            var scrollbottom = Math.max(window.pageYOffset || 0, document.documentElement.scrollTop) + document.documentElement.clientHeight
            if(scrollbottom + 50 > document.body.offsetHeight){
                page++
                getList(true)
            }
        })

        addEvent( document.querySelector('.x-input--button'), 'click', function(){
            getList()
        })
    </script>
@endsection
