<template>
  <van-tabs v-model="active" @change="changeTab">
    <!-- 待处理 -->
    <!-- 可以根据距离排序？ -->
    <van-tab title="待处理" name="wait">
      <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
              v-for="item in dataList"
              :key="item.id"
              :title="item.device_number"
              :value="item.start_time"
              @click="showDetail(item.id)"
              size="large"
              is-link
            />
          </van-list>
        </template>
        <van-empty v-else description="暂无数据" />
      </van-pull-refresh>
    </van-tab>
    <!-- 已处理 -->
    <van-tab title="已处理" name="done">
      <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
              v-for="item in dataList"
              :key="item.id"
              :title="item.device_number"
              :value="item.result"
              :label="item.end_time"
              @click="showDetail(item.id)"
              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, Dialog, Tag } from "vant";

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

export default {
  data() {
    return {
      error: false,
      refreshing: false,
      loading: false,
      finished: false,
      active: "wait",
      openid: null,
      userid: null,
      dataList: [],
      limit: 10,
      page: 1,
    };
  },
  created() {
    this.openid = localStorage.getItem("openid");
    this.userid = localStorage.getItem("userid");
    let cacheActive = localStorage.getItem("sos_active");
    if (cacheActive) {
      this.active = cacheActive;
    }

    this.onLoad();
  },
  methods: {
    // 显示详情
    showDetail(alarm_id) {
      if (!alarm_id) {
        this.$notify('获取告警信息失败');
        return;
      }
      let query = {
        id: alarm_id
      }
      this.$router.push({ path: "/alarm_detail", query: query });
    },
    // 加载
    onLoad() {
      // 根据切换标签获取数据
      //let funcText = 'get' + this.active.slice(0,1).toUpperCase() + this.active.slice(1) + 'Data';
      //this[funcText]()

      this.getData();
    },
    // 下拉刷新
    onRefresh() {
      this.dataList = [];
      this.limit = 10;
      this.page = 1;

      this.finished = false;
      this.loading = true;
      this.onLoad();
    },
    getData() {
      let url = "getUserAlarmRecords&reason=press";
      let params = {
        userid: this.userid,
        openid: this.openid,
        limit: this.limit,
        page: this.page,
      };
      switch (this.active) {
        case "wait":
          url = url + '&state=start';
          break;
        case "done":
          url = url + '&state=end';
          break;
        case "confirm":
          url = url + '&state=end&result=1';
          break;
        case "cancel":
          url = url + '&state=end&result=2';
          break;
        default:
          break;
      }

      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("sos_active", val);
      this.onRefresh();
    },
  },
};
</script>
<style scoped="less">
.van-cell__title {
  text-align: left !important;
}
</style>