<template>
  <div class="home">
    <nav-bar :title="title"/>
    <div class="search">
      <div class="container">
        <div class="searchBox">
          <input
              type="text"
              v-model="paramsData.title"
              placeholder="输入搜索关键词"
              @blur="handleSearch()"
          />
          <img src="../assets/search1.png"/>
        </div>
      </div>
    </div>
    <div class="in_box2">
      <div class="container">
        <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="loadMore"
        >
          <ul>
            <li v-for="item in list" :key="item.id">
              <router-link :to="'Jkzd_detail?id=' + item.id">
                <img :src="item.img"/>
                <h2>{{ item.title }}</h2>
                <span>{{ item.ctime }}</span>
              </router-link>
            </li>
          </ul>
        </van-list>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import {
  apiGetjklist,
  apiGetdtlist,
  apiGetHospitalJylist,
} from "@/request/api.js";
import {Toast} from "vant";

export default {
  components: {},
  data() {
    return {
      active: 0,
      title: "",
      flag: false,
      loading: false,
      finished: false,
      paramsData: {
        title: "",
        page: 1,
        pagesize: 10,
      },
      list: [],
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    // 获取列表
    getData() {
      apiGetHospitalJylist(this.paramsData).then((res) => {
        this.loading = false;
        if (res.data.length < this.paramsData.pagesize) {
          this.finished = true;
          console.log(this.finished);
        }
        this.list = [...this.list, ...res.data];
        console.log(this.list);
      });

      //   if (this.$route.query.type == "dt") {
      //     this.title = "动态";
      //     apiGetdtlist(this.paramsData).then((res) => {
      //       this.loading = false;
      //       if (res.data.length < this.paramsData.pagesize) {
      //         this.finished = true;
      //         console.log(this.finished);
      //       }
      //       this.list = [...this.list, ...res.data];
      //       console.log(this.list);
      //     });
      //   } else {
      //     apiGetjklist(this.paramsData).then((res) => {
      //       this.loading = false;
      //       if (res.data.length < this.paramsData.pagesize) {
      //         this.finished = true;
      //         console.log(this.finished);
      //       }
      //       this.list = [...this.list, ...res.data];
      //       console.log(this.list);
      //     });
      //   }
    },
    loadMore() {
      if (!this.finished) {
        this.paramsData.page += 1;
        this.getData();
      }
    },
    handleSearch() {
      this.paramsData.page = 1;
      this.finished = false;
      this.list = [];
      this.getData();
    },
  },
};
</script>

<style scoped lang="scss">
.search a {
  background: #f1f1f1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 64px;
  border-radius: 32px;
  font-size: 28px;
  color: #999;
  margin: 30px 0px;
}

.searchBox {
  position: relative;
  width: 100%;
  height: 64px;
  border-radius: 32px;
  font-size: 28px;
  color: #999;
  margin: 30px 0px;
}

.searchBox input {
  width: 100%;
  height: 100%;
  border-radius: 32px;
  background: #f1f1f1;
  border: none;
  text-align: center;
  padding-left: 33px;
  box-sizing: border-box;
}

.searchBox img {
  position: absolute;
  top: 18px;
  left: 230px;
  width: 28px;
  height: 28px;
  margin-right: 10px;
}

.search a img {
  width: 28px;
  height: 28px;
  margin-right: 10px;
}

.in_box2 {
  padding: 40px 0px;

  .bt {
    font-size: 36px;
    color: #000;
  }

  ul {
    margin-top: 20px;

    li {
      margin-bottom: 60px;

      a {
        justify-content: space-between;

        img {
          width: 2rem;
          height: 1rem;
          float: left;
          margin-right: 20px;
        }

        h2 {
          font-size: 28px;
          color: #000;
          line-height: 40px;
          margin-bottom: 20px;
        }

        span {
          font-size: 22px;
          color: #999;
        }
      }
    }
  }
}
</style>
