@extends('wap-browser.template')

@section('head')
    <link rel="stylesheet" href="/wapbrowser/web/component.css">
    <style>
        .book-detail-book {
            padding: .24rem;
            font-size: .24rem;
            line-height: .6rem;
        }
        .x-book__title{
            margin-bottom: 0;
        }
        .x-book__category,.x-book__count{
            color: #999;
        }
        .book-detail-handle__add {
            margin-right: .4rem;
        }
        .book-detail-handle {
            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: start;
            -ms-flex-pack: start;
            justify-content: flex-start;
        }
        .book-detail-handle__btn {
            width: 1.8rem;
            height: .55rem;
            line-height: calc(.55rem - 2px);
            text-align: center;
            box-sizing: border-box;
            border: 1px solid #ff6060;
            color: #ff6060;
            border-radius: .06rem;
        }
        .book-detail-handle__read {
            background-color: #ff6060;
            color: #fff;
        }
        .book-detail-intro {
            padding: 0 .24rem .24rem;
            font-size: .26rem;
            color: #666;
            line-height: 1.8;
        }
        .book-detail-extend {
            color: #32a1ff;
        }
        .book-detail-lastest, .book-detail-more {
            padding: 0 .24rem;
            font-size: .26rem;
            height: .9rem;
            background-color: #f7f7f7;
            color: #32a1ff;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            line-height: .9rem;
        }
        .book-detail-catalog,.similar__section-title,.similar__list{
            padding: 0 .24rem;
            margin: .24rem 0;
        }
        .book-catalog-total {
            font-size: .24rem;
            color: #999;
            position: absolute;
            right: .24rem;
            line-height: .42rem;
        }
        .catalogs-list{
            padding: 0 .24rem;
        }

        .similar__list{
            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;
        }
    </style>
@endsection

@section('body')
    @component('wap-browser.component.header',['name'=> $book->book_name])
    @endcomponent
    @component('wap-browser.component.bookdetail',['book'=> $book, 'multi'=> true, 'class'=>'book-detail-book', 'width'=> 1.8, 'prevent'=>true,'recom'=>false])
    <p class="x-book__title">{{$book->book_name}}</p>
    <p class="x-book__category">{{$book->book_category}}</p>
    <p class="x-book__count">字数：{{$book->book_word_count}}</p>
    <div class="book-detail-handle">

        {{--<div class="book-detail-handle__read book-detail-handle__btn">--}}
            {{--立即阅读--}}
        {{--</div>--}}
    </div>
    @endcomponent
    <div class="book-detail-intro">
        <span class="book-detail-text">{{str_limit($book->book_summary, 200)}}</span>
        @if(strlen($book->book_summary)>200)
            <span class="book-detail-extend">展开</span>
        @endif
    </div>
    <div class="book-detail-lastest">最新章节：{{$book->last_chapter}}</div>
    <div class="book-detail-catalog">
        <span class="section-title">目录</span>
        <span class="book-catalog-total">共{{$book->book_chapter_total}}章</span>
    </div>
    @component('wap-browser.component.catalogdetail',['catalogs'=> $catalog])
    @endcomponent
    <div class="book-detail-more" style="text-align: center" ><a href="/catalog?bid={{$book->book_id}}">更多目录 &gt; </a></div>
    <div class="similar">
        <div class="section-title similar__section-title"> 同款推荐 </div>
        <div class="similar__list">
            @foreach($recommend as $similar_item)
                @component('wap-browser.component.bookdetail',['book'=> $similar_item,'recom'=>true])
                @endcomponent
            @endforeach
        </div>
    </div>
@endsection

@section('foot')
    <script>
        @if(strlen($book->book_summary)>200)
          addEvent(document.querySelector('.book-detail-extend'),'click',function(e){
            document.querySelector('.book-detail-text').innerHTML = '{{$book->book_summary}}'
            e.target.style.display = 'none'
        })
        @endif
    </script>
@endsection