<div class="hjcl-layout-container" th:fragment="body">

  <!-- 内页 幻灯片区域 -->
  <div th:replace="~{components/sub-banner::sub-banner}"></div>

  <!-- 内容 -->
  <div class="sub-section-main">
    <div class="wrapper">

      <!-- 主要位置 -->
      <div class="sub-section-container">
        <div class="sub-section-container-title" th:text="${parameters.category_name}"></div>
        <div class="sub-section-container-content">

          <!-- 搜索框 -->
          <div class="sub-search">
            <div th:replace="~{components/article-search-input::search-input}"></div>
          </div>

          <div class="article-list" th:classappend="${isBrand ? 'column' : ''}">
            <div class="article-item" th:each="item, itemStat : ${article.list}">
              <a class="article-thumb" th:href="@{'/articleDetail/' + ${item.id}}"><img th:src="${item.thumb}" /></a>
              <div class="article-info">
                <a class="article-info-title" th:href="@{'/articleDetail/' + ${item.id}}">
                  <span th:text="${item.title}"></span>
                  <span th:if="${item.is_top == 1}" th:text="@{'[' + #{settop} + ']'}"></span>
                </a>
                <div class="article-info-description" th:text="${item.description}"></div>
                <div class="article-info-bottom">
                  <div class="article-info-time" th:text="${item.create_time}"></div>
                  <a class="article-info-btn" th:href="@{'/articleDetail/' + ${item.id}}" th:text="#{viewdetail}"></a>
                </div>
              </div>
            </div>
          </div>
          <div id="pagination-bar"></div>

        </div>
      </div>

      <!-- 侧边 -->
      <div class="sub-section-sider">
        <div class="sub-section-sider-title" th:text="#{category}"></div>

        <div class="sub-section-sider-content">
          <div class="article-category horizontal">
            <ul id="category-bar">
<!--              <li class="mb-4"><a href="javascript:;" th:classappend="${parameters.category_id == null ? 'font-bold text-blue' : ''}">全部</a></li>-->
              <li th:each="item, itemStat : ${articleCategory}" th:if="${item.is_brand == 1}">
                <a href="javascript:;" th:text="${lang} == 'zh' ? ${item.category_name} : ${item.category_name_en}" th:data-category-id="${item.article_category_id}"
                   th:classappend="(${item.article_category_id} == ${parameters.category_id} ? 'active' : '')"></a>
              </li>
            </ul>
          </div>
        </div>
        <div class="sub-section-sider-content mt-2">
          <p th:text="#{sub.sider.welcome}"></p>
          <p th:text="@{#{sub.sider.wechat} + ' cpnana8 / anywayto'}"></p>
        </div>
      </div>

    </div>
  </div>

</div>
<script th:inline="javascript">
  var lang = $.cookie('lang')

  // [Click] 分类
  $('#category-bar > li > a').on('click', function(){
      var category_id = $(this).attr('data-category-id')
      if (category_id) {
          window.location.href = QueryString.updateParams({ category_id: parseInt(category_id) })
      } else {
          window.location.href = window.location.href.split('?')[0];
      }
  })
  // [Click] 分页
  console.log(lang)
  layui.use('laypage', function(){
      var laypage = layui.laypage
      laypage.render({
          elem: 'pagination-bar', theme: '#333e46',
          prev: (lang == 'zh' ? '上一页' : 'Prev'),
          next: (lang == 'zh' ? '下一页' : 'Next'),
          count: [[${article.total}]], curr: [[${article.page_num}]], limit: [[${article.page_size}]],
          jump: function(obj, first) {
              // console.log(obj)
              // 首次不执行
              if (!first) {
                //do something
                window.location.href = QueryString.updateParams({ page_num: obj.curr, page_size: obj.limit })
              }
          }
      })
  })
</script>