<template>
  <view class="DistrictGarden">
    <custom-navbar title="我的地区园所" id="custom-navbar" />
    <!-- search -->
    <view class="search">
      <view class="search-btn" @click="jumpSearchPage">
        搜索园所名称/园长姓名
      </view>
    </view>
    <!-- 园所列表 -->
    <!-- refresher-enabled -->
    <scroll-view
      :scroll-y="true"
      class="scroll-view"
      :style="{ height: scrollViewHeight }"
      enable-back-to-top
      @scrolltolower="scrolltolower"
    >
      <view class="garden-list">
        <garden-card :districtGardenData="districtGardenData" />
      </view>
    </scroll-view>
  </view>
</template>

<script>
import CustomNavbar from "@/components/CustomNavbar";
import { getNodeInfo } from "@/utils/wxTool.js";
import { getDistrictGarden } from "@/api/districtGarden.js";
import Tip from "@/utils/tip.js";
export default {
  name: "DistrictGarden",
  components: {
    CustomNavbar,
  },
  computed: {
    scrollViewHeight() {
      return (
        this.$store.state.systemInfo.windowHeight - this.height - 44 + "px"
      );
    },
  },
  data() {
    return {
      districtGardenData: [],
      height: "",
      pegation: {
        page: 1,
        name: "",
      },
      ifOnShow: false,
    };
  },
  onHide() {
    this.ifOnShow = true;
  },
  onShow() {
    if (this.ifOnShow) {
      this.pegation.page = 1;
      this.districtGardenData = [];
      this.getDistrictGarden();
    }
  },
  onLoad(options) {
    this.getNodeInfo();

    const { name } = options;
    if (name) {
      this.pegation.name = name;
    }
    this.getDistrictGarden();
  },
  methods: {
    scrolltolower(item) {
      this.pegation.page++;
      this.getDistrictGarden();
    },
    //   getDistrictGarden数据
    async getDistrictGarden() {
      Tip.loading("加载中");
      const { data, status } = await getDistrictGarden({ ...this.pegation });
      Tip.loaded();
      // console.log('?????', data);
      if (status === 200) {
        const { entityList } = data;
        if (entityList.length === 0) {
          this.pegation.page--;
          Tip.error("没有更多了");
          return;
        }
        this.districtGardenData.push(...Object.freeze(entityList));
      }
    },
    // 跳转到search页面
    jumpSearchPage() {
      uni.navigateTo({
        url: "/pages/search/index",
      });
    },
    //  获取节点高度
    async getNodeInfo() {
      const res = await getNodeInfo("#custom-navbar", "single");

      this.height = res.height;
    },
  },
};
</script>
<style scoped lang="less">
.DistrictGarden {
  height: 100vh;
  background: #f5f6fa;
  .search {
    width: 100%;
    height: 102rpx;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    &-btn {
      width: 670rpx;
      height: 70rpx;
      background: #f7f7f7;
      border-radius: 35rpx;
      margin: 0 auto;
      padding-left: 36rpx;
      box-sizing: border-box;
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 70rpx;
    }
  }
  // 园所列表
  .garden-list {
    width: 686rpx;
    margin: 0 auto;
    padding-bottom: 200rpx;
  }
}

.scroll-view {
  // -webkit-overflow-scrolling: touch;
}
</style>