@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,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UmVhZHlxyWU8AAADIWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS41LWMwMTQgNzkuMTUxNDgxLCAyMDEzLzAzLzEzLTEyOjA5OjE1ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjczRDhFM0Y3QkVBQjExRTdBMzVCREU0QjZEMUJGREJFIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjczRDhFM0Y4QkVBQjExRTdBMzVCREU0QjZEMUJGREJFIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NzNEOEUzRjVCRUFCMTFFN0EzNUJERTRCNkQxQkZEQkUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NzNEOEUzRjZCRUFCMTFFN0EzNUJERTRCNkQxQkZEQkUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7c34QjAAACsUlEQVR42mL8//8/A1VARIwlkLzNsGLJG3KNYGKgHvgNxOeBjlIl1wBGqoUMJHSeAkkeIJYDhtDHgQwZEMgCYj4gvgB0GPNAO+YWlFYA4n0D7ZhvSGw7YOisH0jH/ATiP0j8AKCDqgbKMcxYzGwFOshuIBzDjcPMjUAHMdLbMZI4xAWAeCnljomIKQTiJCId449HLhJoji35jomIAcn3AXEQkY4JISA/i5KQmQalLYkIQSsgKUtAlQZQXTzpjomI0QeS6VCeEJDfTMCiiUSGXic5IYNueA3QQa44HA6ywIRIx4gD1XsQX1FGxGgCyWs4DCsBx/2KJZ+h6oqBOJnEXLcJqN+fWMesA5KBeAwDtVnuA7EpmUXAX2jN/gx/NEXECBFwCAiIUOAQWEntSUya8aJyQXgciP9hEbclxjGOVHTIMSBuxmEPRsiyEKOIAlAExC/wRDXBkBGikkPmAxPoSSCtiUOehxjHcFHBIdOADoHVZzI41PwjJpr+kmgxqDH1HYhBDfBL0DJoI5K8FLEFLguBpiMu8ASIu4H4IrTd+wWIvwIdgS3XiOIw4xcxjrkGLpBwg3NAbA+0+AuRIYerH/WImDSzCY/BoOI6mGiHRMSwAUkHHLI7iHHMSjzGvwI65AEJ6ckJiNlxyM0k7JgVS94ByQYcBvAR05ZFAsU4xCcB7blHXBNixZJGIHkDiwwnENcTGUXhQNIFi8x7IC4jtT3jDs2u6KAeaJEnAYdY4GiA/wF37lYs+Ul6xz8iBpSrTuBo9U8HN8BWLLmJpB5UpuTj8PkXcOW4YskF8kchImJEoBbjamzfBpcxDAxs0GzMikXNHiBOATrkIXWGRCBRA0ov5iQk4CtA3AR0xGrajM9ExNhAyw5Q4pQGYkFoqIDSAygnPgfi/WC8Ysl+UowGCDAASSmym4a5hdQAAAAASUVORK5CYII=) 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,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UmVhZHlxyWU8AAADIWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS41LWMwMTQgNzkuMTUxNDgxLCAyMDEzLzAzLzEzLTEyOjA5OjE1ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkI5OTAxOTE3QkVBOTExRTc4RjcyODI1RUJCREY5ODMyIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkI5OTAxOTE4QkVBOTExRTc4RjcyODI1RUJCREY5ODMyIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Qjk5MDE5MTVCRUE5MTFFNzhGNzI4MjVFQkJERjk4MzIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Qjk5MDE5MTZCRUE5MTFFNzhGNzI4MjVFQkJERjk4MzIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7WWk5fAAADcUlEQVR42sSYaUhUURiGr0tRVmTRQvtGtqdB2QISlUERrYSQW/tYSUH9sf600B8V+hHRMhNFphUUYQWtQkFFZET7IkX5w7QiESMqE8fp/eK9cbvN3HvuzFzmg4dzvPc6953vfOec90yc1+vVFKIrWAQyQSoYApLBL9AMasBdcAVUaw7C4/H883eizfODQBFYDZKC3E8i/cFssBO8BKWgArRrDiM+xPU4sA28AoV86TWwCUwGvUEHZm4gmAP2gQdgHChjpsY7FRQsQ13AGbCQf0u/BDwN8mwb+A7qwU1eW0+mUJRk92y4GZJM3KCYD2AZyA4iJgXkgVmgo+neUZDOLCXxC60LJ0MyTKfADApYCmpNz88Ee8E0FrRkZlKIz14FWkABOALqwHUnGdoKloCPzIxRTCd+6C2QAd6BJvCNLw0VG4APJIBy0FdVkMymPexLEb83PNOT9VHALIqwsZz6UicBm3fI/53nRChRFbSdM0bGu9JUU7K2TAdPOGs2KogwRxFbqbtRdoK6cbwlik3394Op4BFYwDUmnJAhPsb3FdoJWsxMXAXPTAW8lv0c0KBFFgfZZlmsf39uZLJ/0XRvN/CDQ9waIo3H/MJS2BOsBKWyb9yDxoCh4LZdih2GPgITrQQNZr/OcD2Z9/pp0Q199g6zWhi7s//VlN76MGaTXfw0zN6QglpBZ24BbbzewhXbrQhYDVkT+z0096MP2y9WgmoMhex2pLB9YyXoHvvzXBaTwMVVTNt9K0GX2c9wWVAOWzFxjVaCqukM0534ljAil+1xlc21VPfcLokRBzmX20+FiiB56CHtxIkoixFrs4v9HYa1yFKQn973B1gJDkdJTC9QBQaASzRpyo7xBYcsQKfnjVCMnEbu0P808wsHnAjS6KnXMGMi7hwYHmbNyGwazS1J9sYDnPqOz2VSQ/O5mi6nuRJfnKawzuRyiHzcmC+AEXSicno5aScq1Mm1ihahhC/Rz1rPaWVrDcUp/mYkFz09GljA5RymPF7PZpvPUVAWJPGJBV7ME2sWjVUoc9XONa2MGE8jflVRiQr18BpsBlsoJo3mTbcQn8FbbgeNFp+jJCpO8dePaO9pMpQrwGkR5fF4/HY/NrgZeqb+FrrP50uIpSBLUYla7OK/moKo/FgKCiaqNT7GgjQWdB4Lvfm3AAMAspXMV/h2SqgAAAAASUVORK5CYII="
        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