<template>
  <div id="aCoursesList" class="bg-fa of">
    <section class="container">
      <section class="i-article">
        <div class=" col-club" style="white-space: nowrap;">
          <section style="background: linear-gradient(to right,bisque,sandybrown);height: 360px;margin-top: 60px;">
            <div style="position: absolute;">
              <img :src="imgUrl" alt="大图标" style="display: inline-block;margin-top: 20px; margin-left: 15px;width: 190px;">
              <button style="background-color:peru; margin-top: 60px; margin-left: 750px; font-size: 23px;color:sienna;height: 35px; width: 115px;position: absolute;" > 查看更多</button>
              <p style="font-size: clamp(1rem, 2vw, 24px); margin-left: 45px;margin-right: 60px; font-weight: 500; margin-top: -10px;position: absolute;width: 100%; height: 100%;">
                博股国际投资论坛(Bogulnternational InvestmentForum)立足中国，面向全球。聚集了国际
                政要、<br>投资大师、经济学家和高端投资人士。该论坛旨在为一小部分高端投资人士提供深度学习，
                解读<br>国际经济形势，并研判经济发展机遇。博股会员是博股国际投资论坛的终身会员，我们注重
                知识<br>体系的深度，与大师为伍，强调价值投资，并利用大波段进行盈利。
              </p>
            </div>
          </section>
          <section class="mr30">
            <header class="comm-title all-article-title">
              <h2 class="fl tac">
                <span class="c-333" style="color:cornflowerblue;text-decoration: underline;text-underline-offset: 9px;">专题</span>
              </h2>
              <section class="c-tab-title">
                <a href="javascript: void(0)">&nbsp;</a>
              </section>
            </header>
            <!-- /无数据提示 开始-->
            <!-- /无数据提示 结束-->
            <article class="i-article-list" style="background: linear-gradient(cornsilk,white); ">
              <!-- /文章列表 开始-->
              <div>
                <p style="font-size: 23px; margin-left: 40px; margin-bottom: 30px; display: inline-block;margin-top: 20px;" >前言股市投资分享之左侧交易</p>
                <p style="margin-left: 635px; font-size: 18px;margin-top: 20px;position: absolute;display: inline-block;" >查看更多</p>
              </div>
              <ul>

                <li v-for="Subject in SubjectList" :key="Subject.id">
                  <aside class="i-article-pic" style="margin-left: 40px;">
                    <img :src="Subject.coverImg" :alt="1">
                  </aside>
                  <img :src="imgjinUrl" alt="" width="35px" height="35px" style="margin-left: 30px; display: inline-block;">
                  <span class="hLh30 txtOf" style="margin-left: 10px; display: inline-block;">
                    <a :title="Subject.sectionTitle" href="/club/1" class="i-art-title">{{ Subject.sectionTitle }}</a>
                  </span>
                  <!-- <img style="margin-left: 40px;" src="/assets/img/jinbi.jpg"> -->

                  <section class="i-q-txt mt5 i-q-txt2" style="margin-left: 30px;">
                    <img :src="Subject.club" alt="" >
                  </section>
                  <section class="hLh30 txtOf mt5 pr10 a-list-extrainfo">
                    <div
                      class="fl"
                      style="margin-left: 30px;">
                      <img :src="Subject.head" alt="" style="display: inline-block; width: 20px; height: 20px;border-radius: 80px;" >&nbsp;&nbsp;&nbsp;
                      <span class="c-999 f-fM">{{ Subject.author }}</span>&nbsp;
                      <span class="c-999 f-fM">{{ Subject.publishTime }}</span>&nbsp;
                      <span class="el-icon-view">&nbsp;{{ Subject.viewCount }}</span>&nbsp;&nbsp;
                      <!-- <span> <a class="noter-dy vam" title="回答" href="http://127.0.0.1:81/front/articleinfo/23.html">
                        <em class="icon18">&nbsp;</em><span>{{ Subject.commentCount }}</span>
                      </a> <tt title="赞一下" class="noter-zan vam ml10 f-fM" onclick="addPraise('23',3)">
                        <em class="icon18">&nbsp;</em><span class="addPraise23_3 praiseCount">{{ Subject.likeCount }}</span>
                      </tt>
                      </span> -->

                      <span class="el-icon-chat-dot-square">&nbsp;{{ Subject.commentCount }}</span>&nbsp;&nbsp;
                      <span>
                        <i
                          :id="'like-count'+Subject.id"
                          :style="{color: Subject.isLiked==0 ? '#f56c6c' : '#c0c4cc'}"
                          class="el-icon-thumb "
                          @click="praise(Subject.id,Subject.isLiked,index)"
                        >&nbsp;{{ Subject.likeCount }}</i>
                        <!-- <i v-if="recommendation.isLiked==0" class="el-icon-thumb">&nbsp;{{ recommendation.likes }}</i>&nbsp;&nbsp;
                        <i class="el-icon-thumb" style="color: aqua;">&nbsp;{{ recommendation.likes }}</i> -->
                      </span>
                    </div>
                  </section>
                </li>
              </ul>
              <!-- /文章列表 结束-->
            </article>

            <!-- 公共分页 开始 -->
            <!-- <div>
              <div class="paging">
                <a class="undisable" title>首</a>
                <a id="backpage" class="undisable" href="#" title>&lt;</a>
                <a href="#" title class="current undisable">1</a>
                <a href="#" title>2</a>
                <a id="nextpage" href="#" title>&gt;</a>
                <a href="#" title>末</a>
                <div class="clear"/>
              </div>
            </div> -->
            <!-- 公共分页 结束 -->

          </section>
        </div>

  </section></section></div>
</template>
<script>
import indexApi from '~/api/club'
import service from '../../utils/request'

export default {

  async asyncData() {
    // 获取课程和讲师数据
    const SubjectResponse = await indexApi.getSubject()
    const SubjectList = SubjectResponse.data
    const mainTitle = SubjectList.mainTitle
    // var time = recommendationList.publishTime
    // var d = new Date(time)
    // var times = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds()
    return {
      SubjectList,
      mainTitle,
      imgjinUrl: require('@/assets/img/jin.jpg'),
      imgUrl: require('@/assets/img/da.jpg')
      // imgUrl: '/assets/img/1.jpg'
      // currentMonth: new Date().getMonth() + 1
    }
  },
  methods: {
    praise(id, index) {
      service.post('special-topic/api/isLikedById/' + id)
        // .then(response => response.json())
        .then(Response => {
          // console.log(id)
          // console.log(status)
          // console.log(response)
          // window.location.reload()
          // console.log(this.RecommendationResponse)
          // console.log(id)

          // document.getElementById(`like-count`).textContent = data.data.likes
          // document.getElementById(`like-isLiked`).className = data.isLiked ? 'liked' : ''
          service.post('special-topic/api/selectSpecialTopic')
            .then(Response => {
              const data = Response.data
              // console.log(data)
              for (var i = 0; i < data.length; i++) {
                // console.log(data[i])
                if (data[i].id === id) {
                  console.log(data[i].id)
                  // console.log(id)
                  document.getElementById(`like-count` + id).textContent = data[i].likeCount
                  if (data[i].isLiked === 0) {
                    // console.log(data[i].isLiked)
                    document.getElementById(`like-count` + id).style.color = '#f56c6c'
                  } else {
                    document.getElementById(`like-count` + id).style.color = '#c0c4cc'
                  }
                }
              }

              // const isLikd = data.isLiked
              // document.getElementById(`like-count`).textContent = data.likes
              // const i = document.getElementById(`like-count`)
              // // '#f56c6c' : '#c0c4cc'
              // if (isLikd) {
              //   i.style.color = '#f56c6c'
              // } else {
              //   i.style.color = '#c0c4cc'
              // }
              // console.log(Response)
            })

          // console.log(data)
        })
        .catch(error => {
          console.log(error)
          console.log('error')
        })
    },
    formatDateTime(isoString) {
      const date = new Date(isoString)
      const month = (date.getMonth() + 1).toString().padStart(2, 0)
      const day = date.getDate().toString().padStart(2, 0)
      const hours = date.getHours().toString().padStart
      const minutes = date.getMinutes().toString().padStart(2, '0')
      return `${month}-${day} ${hours}:${minutes}`
    }
  }
}

</script>
