<template>
  <van-tabs v-model="active" @change="changeTab">
    <!-- 进围栏 -->
    <van-tab title="进围栏" name="in">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <template v-if="dataList.length">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            :error.sync="error"
            error-text="请求失败，点击重新加载"
            @load="onLoad"
          >
            <van-cell
              @click="showDetail('sid', item.student_id)"
              v-for="item in dataList"
              :key="item.id"
              :title="item.realname"
              :value="item.active_rfid"
              :label="item.online_time || ''"
              size="large"
              is-link
            />
          </van-list>
        </template>
        <van-empty v-else description="暂无数据" />
      </van-pull-refresh>
    </van-tab>
    <!-- 出围栏 -->
    <van-tab title="出围栏" name="out">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <template v-if="dataList.length">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            :error.sync="error"
            error-text="请求失败，点击重新加载"
            @load="onLoad"
          >
            <van-cell
              @click="showDetail('sid', item.student_id)"
              v-for="item in dataList"
              :key="item.id"
              :title="item.realname"
              :value="item.active_rfid"
              :label="item.online_time || ''"
              size="large"
              is-link
            />
          </van-list>
        </template>
        <van-empty v-else description="暂无数据" />
      </van-pull-refresh>
    </van-tab>

  </van-tabs>
</template>

<script>
import Vue from "vue";
import { Tab, Tabs, List, Cell, PullRefresh, Empty } from "vant";

Vue.use(Tab);
Vue.use(Tabs);
Vue.use(List);
Vue.use(Cell);
Vue.use(PullRefresh);
Vue.use(Empty);

export default {
  data() {
    return {
      error: false,
      refreshing: false,
      loading: false,
      finished: false,
      active: "in",
      openid: null,

      dataList: [],
      limit: 10,
      page: 1,
    };
  },
  created() {
    this.openid = localStorage.getItem("openid");
    let cacheActive = localStorage.getItem("fence_active");
    if (cacheActive) {
      this.active = cacheActive;
    }

    this.onLoad();
  },
  methods: {
    // 显示详情
    showDetail(field, value) {
      this.$router.push({ path: "/fence_alarm_detail", query: { [field]: value } });
    },
    // 加载
    onLoad() {
      this.getData();
    },
    // 下拉刷新
    onRefresh() {
      this.dataList = [];
      this.limit = 10;
      this.page = 1;

      this.finished = false;
      this.loading = true;
      this.onLoad();
    },
    getData() {
      let url = "getFenceAlarmData";
      let params = {
        openid: this.openid,
        limit: this.limit,
        page: this.page,
        type: this.active,
      };

      this.$http
        .post(url, JSON.stringify(params))
        .then((resp) => {
          if (resp.status === 200 && resp.data && resp.data.success) {
            this.dataList = this.dataList.concat(resp.data.data.list);
            if (this.dataList.length >= resp.data.data.total) {
              this.finished = true;
            }
            this.page += 1;
            this.refreshing = false;
          }
        })
        .catch((resp) => {
          this.error = true;
        });
    },
    // 切换标签
    changeTab(val) {
      localStorage.setItem("fence_active", val);
      this.onRefresh();
    },
  },
};
</script>
<style scoped="less">
.van-cell__title {
  text-align: left !important;
}
</style>