
@extends('wap-browser.template')

@section('head')
<link rel="stylesheet" href="/wapbrowser/web/component.css">
<style>
  .book-city-header, .book-city-theme {
    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;


  }
  .book-city-header{
    padding: 0 .24rem;
    height: 1rem;
    border-bottom: 1px solid #e6e6e6;
  }
  .book-city-theme__item.is-active:first-child {
    border-bottom: .06rem solid #32a1ff;
    color: #32a1ff;
    font-size: .36rem;
    font-weight: 700;
    line-height: .94rem;
    margin-right: .6rem;
  }
  .book-city-theme__item.is-active:last-child {
    border-bottom: .06rem solid #ff6060;;
    color: #ff6060;;
    font-size: .36rem;
    font-weight: 700;
    line-height: .94rem;
    margin-left: .6rem;
  }
  .x-input--search {
    width: 4.32rem;
    height: .6rem;
    border-radius: .3rem;
    background-color: #f7f7f7;
    position: relative;
  }
  .x-input--search .x-input__icon {
    position: absolute;
    top: .13rem;
    left: .2rem;
    width: .34rem;
    height: .34rem;
  }
  .x-input--search .x-input__inner {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0 .6rem;
    border: none;
    background-color: transparent;
  }
  .book-city-nav {
    padding: 0 .5rem;
    margin: .3rem 0;
    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;
  }
  .book-city-nav__text {
    font-size: .28rem;
    color: #333;
    margin-top: .2rem;
    line-height: 1;
    text-align: center;
  }
  .book-city-nav__icon {
    width: 1rem;
    height: 1rem;
    display: block;
    margin: 0 .1rem;
  }
  .book-city-subject{
    margin: .3rem .24rem .38rem;
    overflow: hidden;    
  }
  .LOOP{
    touch-action: pan-y; 
    height: 2.4rem;
    background-color: #eff8ff;
    border-radius: .06rem;    
  }
  .FEMALE.LOOP{
    background-color: #fff2f2;;    
  }
  .LOOP .x-book{
    padding: .2rem .56rem .2rem .28rem;        
  }
  .HOT a, .RECOM a{
    float: left;
    padding-right: .5rem;
    margin-top: .36rem;
  }
  .HOT a:nth-child(3n+1), .RECOM  a:nth-child(3n+1){
    padding-right: 0;
  }
  .ZHIBO .x-book,.NEW_RECOM .x-book{
    margin: .4rem 0;
  }
  .ZHIBO .x-book__title,.NEW_RECOM .x-book__title{
    font-size: .36rem;
    margin-bottom: .3rem;
  }
  .ZHIBO .x-book__intro,.NEW_RECOM .x-book__intro{
    -webkit-line-clamp: 4;
    font-size: 13px;
    line-height: 1.7;
  }
  .ZHIBO .x-book--single,.NEW_RECOM .x-book--single{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: .28rem;
    line-height: 2.3;
  }
  .ZHIBO .x-book--single__type,.NEW_RECOM .x-book--single__type{
    width: 2rem;
    color: #999;
  }
  .ZHIBO .x-book--single__name,.NEW_RECOM .x-book--single__name{
    width: 5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: inherit;
    color: #666;
  }
  .book-city-rank__types {
    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;
    padding: 0 .24rem;
    margin-top: .36rem;
  }
  .book-city-rank__type {
    position: relative;
    padding-bottom: .3em;
    font-size: .28rem;
  }
  .book-city-rank__type.is-active {
    color: #ff6060;
  }
  .book-city-rank__type:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: calc(50% - .2rem);
    width: .4rem;
    height: .04rem;
    border-radius: .2rem;
  }
  .book-city-rank__type.is-active:after {
    background-color: #ff6060;
  }
  .book-city-rank{
    overflow: hidden;
    touch-action: pan-y;     
  }
  .rank-item {
    font-size: .26rem;
    padding: 0 .24rem;
    height: .85rem;
    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;
  }
  .book-city-rank__icon--hot {
    background: url(data:image/png;base64,[encoded data, 5648 characters]) no-repeat 0/100%
  }
  .book-city-rank__name {
    width: 6.5rem;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.5;
  }
  .book-city-rank__icon--normal {
    border-radius: 50%;
    background-color: #ccc;
    color: #fff;
  }
  .book-city-rank__icon {
    width: 1.2em;
    height: 1.2em;
    margin-right: .15rem;
    text-align: center;
  }
</style>
@endsection

@section('body')
  <div class="book-city-header">
    <div class="book-city-theme">
      <a href="/?type=male" class="book-city-theme__item {{ $sex==='MALE' ? 'is-active' : ''}}">男生</a>
      <a href="/" class="book-city-theme__item {{ $sex==='FEMALE' ? 'is-active' : ''}}">女生</a>
    </div>
    <div class="x-input--search">
      <img src="data:image/png;base64,[encoded data, 5904 characters]"
        class="x-input__icon">
      <input placeholder="作者/书名" type="text" class="x-input__inner">
    </div>
  </div>
  <!--<div class="book-city-nav">
    <dl class="book-city-nav__item">
      <dt>
        <img src="https://yueduyun.oss-cn-hangzhou.aliyuncs.com/static/img/library.png" class="book-city-nav__icon">
      </dt>
      <dd class="book-city-nav__text">书库</dd>
    </dl>
    <dl class="book-city-nav__item">
      <dt>
        <img src="https://yueduyun.oss-cn-hangzhou.aliyuncs.com/static/img/rank.png" class="book-city-nav__icon">
      </dt>
      <dd class="book-city-nav__text">排行榜</dd>
    </dl>
    <dl class="book-city-nav__item">
      <dt>
        <img src="https://yueduyun.oss-cn-hangzhou.aliyuncs.com/static/img/bookshelf.png" class="book-city-nav__icon">
      </dt>
      <dd class="book-city-nav__text">书架</dd>
    </dl>
    <dl class="book-city-nav__item">
      <dt>
        <img src="https://yueduyun.oss-cn-hangzhou.aliyuncs.com/static/img/presonal.png" class="book-city-nav__icon">
      </dt>
      <dd class="book-city-nav__text">个人中心</dd>
    </dl>
  </div>-->
  @foreach ($subjects as $subject)
  <div class="book-city-subject {{$subject['key']}} {{$sex}}">
      @switch($subject['key'])
        @case('LOOP')
          <div id="loop-wrap">
            @foreach ($subject['list'] as $book)
              <div class="loop-item">
                @component('wap-browser.component.book', [ 'book' => $book, 'width' => 1.5, 'multi' => true ])
                  <p class="x-book__title">{{$book->book_name}}</p>
                  <p class="x-book__intro">{{$book->intro}}</p>
                @endcomponent
              </div>
            @endforeach
          </div>
          @break;
        @case('HOT')
        @case('RECOM')
          <div class="section-title">{{$subject['label']}}</div>
          @foreach ($subject['list'] as $book)
            @component('wap-browser.component.book', [ 'book' => $book ])
            @endcomponent
          @endforeach
          @break;
        @case('ZHIBO')
        @case('NEW_RECOM')
          <div class="section-title">{{$subject['label']}}</div>
          @foreach ($subject['list'] as $book)
            @if ($loop->first)
              @component('wap-browser.component.book', [ 'book' => $book, 'multi' => true ])
                <p class="x-book__title">{{$book->book_name}}</p>
                <p class="x-book__intro">{{$book->intro}}</p>
              @endcomponent
            @else
            <a href="/detail?bid={{ book_hash_encode($book->bid) }}">
              <p class="x-book--single">
                <span class="x-book--single__type">[{{$book->category_name}}] </span>
                <span class="x-book--single__name">{{$book->book_name}}</span>
              </p>
            </a>
            @endif
          @endforeach
          @break;
      @endswitch
    </div>
  @endforeach
  <div class="book-city-rank">
    <div class="book-city-rank__types">
      <div class="book-city-rank__type is-active" data-index="1">点击榜</div>
      <div class="book-city-rank__type" data-index="2">字数榜</div>
      <div class="book-city-rank__type" data-index="3">新书榜</div>
    </div>
    <hr style="border-color: rgb(247, 247, 247);">
    <div id="rank-list-wrap">
      @foreach ($ranks as $rank)
        <div class="rank-list">
          @foreach ($rank as $book)
            <div class="rank-item">
              @if($loop->index<3)
                <span class="book-city-rank__icon book-city-rank__icon--hot"></span>
              @else
                <span class="book-city-rank__icon book-city-rank__icon--normal">{{$loop->index + 1}}</span>
              @endif
              <span class="book-city-rank__name"><a href="/detail?bid={{book_hash_encode($book->bid)}}">{{$book->book_name}}</a></span>
            </div>
          @endforeach
        </div>
      @endforeach
    </div>
  </div>
@endsection

@section('foot')
  <script src="/wapbrowser/web/TouchSlider.js"></script>
  <script>
    new TouchSlider('loop-wrap',{
      duration:600, 
      direction:0, 
      interval:3000, 
      fullsize: true,
    });
    var rank = new TouchSlider('rank-list-wrap',{
      duration:600, 
      direction:0, 
      fullsize: true,
      mouse: true,
      autoplay: false
    });
    
    var rankType = document.querySelectorAll('.book-city-rank__type')
    addEvent(rankType,'click',function(e,i){
      rank.slide(i)
    })
    rank.on('before',function(a,b,c){
      removeClass(rankType, 'is-active')
      addClass(rankType[b], 'is-active')
    });
    addEvent('.x-input--search','click',function(){
      console.log(11);
      location.href='/search'
    })
    addEvent('.x-input__inner','focus',function(){
      console.log(11);
      location.href='/search'
    })
  </script>
@endsection