<template>
  <div>
    <van-nav-bar title="关爱服务" @click-left="$router.back()" left-arrow fixed placeholder safe-area-inset-top />
    <div class="box">
      <van-tabs v-model="active" @change="changeonLoad">
        <van-tab title="随访计划"></van-tab>
        <van-tab title="历史随访"></van-tab>
      </van-tabs>
      <van-search v-show="active==1" v-model="historyform.name" shape="round" show-action placeholder="儿童姓名" @search="onSearch">
        <template #action>
          <div @click="onSearch">搜索</div>
        </template>
      </van-search>
    </div>
    <van-list v-model="loading" :immediate-check="false" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <plan v-show="active==0" :planList="planList"></plan>
      <history v-show="active==1" :historyList="historyList"></history>
    </van-list>
  </div>
</template>
<script>
import { followUpPage, historyFollowUp } from '../../api/index.js'
import plan from './plan.vue'
import history from './history.vue'
export default {
  components: { plan, history },
  data() {
    return {
      value: '',
      active: 0,
      loading: false,
      finished: false,
      planList: [],
      historyList: [],
      followUpform: {
        pageNum: 1,
        pageSize: 20,
      },
      historyform: {
        pageNum: 1,
        pageSize: 20,
        isSupervise:
          JSON.parse(sessionStorage.getItem('userInfo')).roleIdStr == 14
            ? 2
            : 1,
        name: '',
      },
    }
  },
  activated() {
    this.loading = true
    this.followUpPage()
    this.historyFollowUp()
    console.log('1')
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      //  这里的vm指的就是vue实例，可以用来当做this使用
      console.log(to, 'to')
      console.log(from, 'from')
      if (from.name == 'Home') {
        vm.active = 0
        vm.followUpform.pageNum = 1
        vm.historyform.pageNum = 1
      }
    })
  },
  methods: {
    async followUpPage() {
      const res = await followUpPage(this.followUpform)
      this.loading = false
      //   this.$toast(this.followUpform.pageNum)
      if (this.followUpform.pageNum == 1) {
        this.planList = res.data.records
      } else {
        this.planList = this.planList.concat(res.data.records)
        console.log(this.planList)
      }
      if (this.planList.length == res.data.total) {
        this.finished = true
      } else {
        this.finished = false
      }
    },
    async historyFollowUp() {
      const res = await historyFollowUp(this.historyform)
      this.loading = false
      if (this.historyform.pageNum == 1) {
        this.historyList = res.data.records
      } else {
        this.historyList = this.historyList.concat(res.data.records)
      }
      if (this.historyList.length == res.data.total) {
        this.finished = true
      } else {
        this.finished = false
      }
    },
    onLoad() {
      if (this.active == 0) {
        this.followUpform.pageNum = this.followUpform.pageNum + 1
        this.followUpPage()
      } else {
        this.historyform.pageNum = this.historyform.pageNum + 1
        this.historyFollowUp()
      }
    },
    changeonLoad() {
      this.loading = true
      if (this.active == 0) {
        this.followUpform.pageNum = 1
        this.followUpPage()
      } else {
        this.historyform.pageNum = 1
        this.historyFollowUp()
      }
    },
    onSearch() {
      this.historyform.pageNum = 1
      this.historyFollowUp()
    },
  },
}
</script>
<style lang="scss" scoped>
.van-list {
  padding: 0 30px;
  padding-top: 26px;
  margin-top: 92px;
}
.box {
  position: fixed;
  top: 92px;
  width: 100%;
  z-index: 9999;
}
</style>