<template>
  <div class="cardBox">
    <!-- <van-tabs v-model="tabsName">
      <van-tab title="红色教育"></van-tab>
      <van-tab title="劳动教育"></van-tab>
      <van-tab title="课外实践"></van-tab>
      <van-tab title="研学旅行"></van-tab>
    </van-tabs> -->
    <van-tabs v-model="sort" @click="tabsClick">
      <van-tab title="发布时间">发布时间</van-tab>
      <van-tab title="点赞量">点赞量</van-tab>
      <van-tab title="阅读量">阅读量</van-tab>
    </van-tabs>
    <div class="contextBox" v-if="newsList.length != 0" @load="getData">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getData">
        <div class="art_card_pic" v-for="(v, i) in newsList" :key="i" @click="toDetails(v)">
          <div class="art_context">
            <div class="art_title">{{ v.titleDesc }}</div>
            <div class="art_bot">
              <!-- <div class="redSticky" v-if="v.readNumber">置顶</div> -->
              <!-- <div class="greyTime">发布于 {{ v.createTime ? Moment(v.createTime).format('YYYY-MM-DD HH:mm:ss') : ''}}</div> -->
              <div class="greyTime">点赞量 {{ v.likeNumber }}</div>
              <div class="greyFont">浏览量 {{ v.readNumber }}</div>
            </div>
          </div>
          <div class="art_pic">
            <img :src="v.imgUrl" />
          </div>
        </div>
      </van-list>
      <!-- <div
                class="art_card_pic"
                v-for="(v, i) in newsList"
                :key="i"
                @click="toDetails(v)"
            >
                <div class="art_context">
                    <div class="art_title">{{ v.titleDesc }}</div>
                    <div class="art_bot">
                        <div class="greyTime">点赞量 {{ v.likeNumber }}</div>
                        <div class="greyFont">浏览量 {{ v.readNumber }}</div>
                    </div>
                </div>
                <div class="art_pic">
                    <img :src="v.imgUrl" />
                </div>
            </div> -->
    </div>

    <van-empty description="暂无数据" v-else />

    <div class="imgPic" @click="toChoose">
      <img src="@/assets/changeSchool.png" />
    </div>

    <tabbar4 active="fruit"></tabbar4>
  </div>
</template>

<script>
import Tabbar4 from '@/component/Tabbar4'
export default {
  components: { Tabbar4 },
  data() {
    return {
      tabsName: 1,
      newsList: [],
      pageNum: 1,
      pageSize: 10,
      finished: false,
      loading: false,
      sort: 0,
    }
  },
  methods: {
    //详情新闻
    toDetails(v) {
      this.$router.push({
        name: 'pageDetails',
        query: { schoolId: v.schoolId, dataId: v.id },
      })
    },
    //选择
    toChoose() {
      this.$router.push({ name: 'chooseSchoolOne' })
    },
    tabsClick() {
      this.newsList = []
      this.pageNum = 1
      this.pageSize = 10
      this.getData()
    },
    getData() {
      this.loading = true
      let schoolId = this.$route.query.schoolId ? this.$route.query.schoolId : ''

      this.yxAxios
        .get(
          `${this.kqUrl}/schoolConsult/consultList?pageNum=${this.pageNum}&pageSize=${this.pageSize}&schoolId=` +
            schoolId +
            `&sort=` +
            this.sort
        )
        .then((res) => {
          if (res.data.code == 200) {
            this.newsList = this.newsList.concat(res.data.data.list)
            this.loading = false
            if (this.pageSize * this.pageNum >= res.data.data.total) {
              this.finished = true
            } else {
              this.pageNum++
            }
          } else {
            this.$toast.fail(res.data.message)
          }
        })
      // this.yxAxios
      //   .post(`${this.dataUrl}/sys/yx/consultList`, {
      //     page: 1,
      //     pageSize: 999,
      //     schoolId: this.$route.query.schoolId*1
      //   })
      //   .then((res) => {
      //     if (res.data.success) {
      //       this.newsList = res.data.data.list;
      //     } else {
      //       this.$toast.fail(res.data.message);
      //     }
      //   });
    },
  },
  mounted() {
    this.getData()
    this.$zwlogPvGlobal({ loadTime: new Date() })
    this.$nextTick(() => {
      this.$zwlogPvGlobal({ responseTime: new Date() })
    })
  },
}
</script>

<style lang="scss" scoped>
.cardBox {
  padding: 2vw 0;
  box-sizing: border-box;

  .contextBox {
    margin-top: 20px;
    margin-bottom: 140px;
    .art_card {
      padding: 28px;
      box-sizing: border-box;

      .art_title {
        width: 100%;
        font-size: 34px;
        font-weight: bold;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1; //限制行数
        overflow: hidden; //超出部分隐藏
        text-overflow: ellipsis; //用一个省略号代替超出的内容
      }

      .art_bot {
        padding-top: 22px;
        box-sizing: border-box;
        display: flex;
        align-items: center;

        .redSticky {
          color: #ff4444;
          font-size: 24px;
          padding: 2px;
          box-sizing: border-box;
          border: 1px solid #ff4444;
        }

        .greyTime {
          color: #999;
          font-size: 24px;
          margin: 0 20px;
        }

        .greyFont {
          color: #999;
          font-size: 24px;
        }
      }
    }
    .art_card_pic {
      padding: 28px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;

      .art_context {
        height: 180px;
        display: flex;
        align-content: space-between;
        flex-wrap: wrap;

        .art_title {
          width: 100%;
          font-size: 34px;
          font-weight: bold;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2; //限制行数
          overflow: hidden; //超出部分隐藏
          text-overflow: ellipsis; //用一个省略号代替超出的内容
        }

        .art_bot {
          padding-top: 22px;
          box-sizing: border-box;
          display: flex;
          align-items: center;

          .redSticky {
            color: #ff4444;
            font-size: 24px;
            padding: 2px;
            box-sizing: border-box;
            border: 1px solid #ff4444;
          }

          .greyTime {
            color: #999;
            font-size: 24px;
            margin: 0;
          }

          .greyFont {
            color: #999;
            font-size: 24px;
            margin-left: 20px;
          }
        }
      }
      .art_pic {
        width: 180px;
        height: 180px;
        flex-shrink: 0;
        background-color: #ff4444;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .imgPic {
    position: fixed;
    right: 2vw;
    bottom: 40vw;
    width: 26vw;
    height: 26vw;

    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>