
<!-- 健康资讯 -->
<template>
  <div class="healthInquiry">
    <!-- 搜索页面 -->
    <van-sticky>
      <van-search
        v-model="keyword"
        placeholder="请输入搜索内容"
        shape="round"
        readonly
        class="search"
        @click="bottomShow=true;"
      ></van-search>
    </van-sticky>

    <van-list
      class="list"
      v-model="loading"
      :finished="finished"
      finished-text="没有更多内容啦"
      @load="GetDrugGuideArticlesList"
    >
      <div class="infoWrapper">
        <div class="wrapper-item">
          <div v-for="(item,index) in list" :key="item.Id" class="article" v-if="index%2==0">
            <img
              v-lazy="item.Image"
              lazy-load
              class="img"
              @click="intoDetail(item)"
              :class="index==0?'height2':''"
            />

            <div class="title ellips2" @click="intoDetail(item)">{{item.Title}}</div>
            <div class="info">
              <!-- ❤ -->
              <div class="default" :class="item.IsPoints?'like':''" @click.once="AddFabulous(item)">
                <img :src="iconLove" alt="爱心图标" class="iconLove" />
                {{item.PointsNumber}}
              </div>
              <div class="readingQuantity">阅读量：{{item.PV}}</div>
            </div>
          </div>
        </div>
        <div class="wrapper-item">
          <div v-for="(item,index) in list" :key="item.Id" class="article" v-if="index%2==1">
            <img v-lazy="item.Image" alt lazy-load class="img" @click="intoDetail(item)" />

            <div class="title ellips2" @click="intoDetail(item)">{{item.Title}}</div>
            <div class="info">
              <div class="default" :class="item.IsPoints?'like':''" @click="AddFabulous(item)">
                <img :src="iconLove" alt="爱心图标" class="iconLove" />
                {{item.PointsNumber}}
              </div>
              <div class="readingQuantity">阅读量：{{item.PV}}</div>
            </div>
          </div>
        </div>
      </div>
    </van-list>

    <!-- 搜索组件 -->
    <van-popup v-model="bottomShow" position="bottom" :style="{ height: '100vh'}">
      <Search @search="search" @clear="_=>{}" @close="bottomShow=false;"></Search>
    </van-popup>
  </div>
</template>
<script>
import Search from "../components/HealthArticlesSearch"; //搜索组件
import { iconLove } from "@/assets/js/icon.js";
export default {
  name: "healthInquiry",
  components: {
    Search
  },
  data() {
    return {
      isLike: false, //是否喜欢
      loading: false,
      finished: false,
      list: [],
      pageIndex: 1,
      pageSize: 20,
      iconLove: iconLove, //爱心图标
      keyword: "", // 关键字
      bottomShow: false //搜索组件显示
    };
  },
  methods: {
    // 获取文章详情
    GetDrugGuideArticlesList() {
      if (process.env.VUE_APP_Name == "开发环境") {
        // 测试数据
        this.list = [
          {
            Image: "http://lorempixel.com/640/480/food",
            PointsNumber: "125"
          },
          {
            Image: "http://lorempixel.com/640/480/cats",
            PointsNumber: "125"
          },
          {
            Image: "http://lorempixel.com/640/480/abstract",
            PointsNumber: "125"
          },
          {
            Image: "http://lorempixel.com/640/480/nature",
            PointsNumber: "125"
          }
        ];
        this.loading = false;
        this.finished = true;
      } else {
        this.$http
          .GetDrugGuideArticlesList({
            pageIndex: this.pageIndex++,
            pageSize: this.pageSize,
            name: this.keyword // 关键字
          })
          .then(res => {
            if (res.data.IsSuccess) {
              res.data.ResultObject.map(item => {
                item.PointsNumber =
                  Number(item.PointsNumber) +
                  Number(Math.floor(Math.random() * (1000 - 500)) + 500);
                item.PV =
                  Number(item.PV) +
                  Number(Math.floor(Math.random() * (1000 - 500)) + 500);
              });
              this.list = [...this.list, ...res.data.ResultObject];
              // 加载状态结束
              this.loading = false;
              // 数据全部加载完成
              if (res.data.ResultObject.length < this.pageSize) {
                this.finished = true;
              }
            } else {
              this.$toast(res.data.ResultMsg);
            }
          });
      }
    },
    // 进去到详情页面 article=>文章详情
    intoDetail(article) {
      // 设置文章详情本地存储
      sessionStorage.setItem("lj_Article", JSON.stringify(article));
      setTimeout(_ => {
        this.$router.push("/articlesDetail");
      }, 100);
    },
    // 点赞功能
    AddFabulous(item) {
      // 已点赞
      if (item.IsPoints) return this.$toast("你已经点赞过了，无法重复点赞！");
      // 未点赞
      this.$http.AddFabulous(item.Id).then(({ data }) => {
        if (data.IsSuccess) {
          item.IsPoints = true;
          item.PointsNumber++;
        } else {
          this.$toast(data.ResultMsg);
        }
      });
    },
    //搜索事件
    search(value) {
      this.bottomShow = false;
      this.keyword = value;
      this.pageIndex = 1;
      this.list = [];
      this.finished = false;
      this.GetDrugGuideArticlesList();
    }
  }
};
</script>
<style lang='less' scoped>
// 居中
.center() {
  display: flex;
  align-items: center;
}

.list {
  padding: 0 0.2rem;
}
.healthInquiry {
  padding: 0 0 0.2rem;

  .infoWrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    font-size: 0.26rem;
    line-height: 1.5;
    // /deep/ .van-list__finished-text,
    // .van-list__placeholder,
    // .van-list__loading {
    //     width: 100% !important;
    // }

    .wrapper-item {
      width: 3.45rem;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }
  }
}

// 文章详情
.article {
  width: 3.45rem;
  background-color: #ffffff;
  box-shadow: 0.05rem 0.05rem 0.27rem 0rem rgba(178, 178, 178, 0.29);
  border-radius: 0.1rem;
  margin-bottom: 0.2rem;
  overflow: hidden;
  .img {
    display: block;
    width: 100%;
    min-height: 2rem;
    object-fit: cover;
  }
  // 默认图片自动撑开
  .height2 {
    // height: 2rem;
  }

  .iconLove {
    width: 0.24rem;
    margin-right: 0.1rem;
  }

  .title {
    padding: 0 0.1rem;
  }

  .info {
    color: #666;
    font-size: 0.22rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.1rem;
    .default {
      .center();
      filter: grayscale(1);
      color: red;
      // 点赞
      &.like {
        filter: grayscale(0);
      }
    }
    .readingQuantity {
    }
  }
}
</style>