<template>
  <div id="activist" class="app">
    <van-sticky :offset-top="0">
      <van-nav-bar left-arrow @click-left="onClickLeft" title="积极分子" />
    </van-sticky>
    <van-empty v-if="!activistL.length" description="暂无积极分子" />
    <van-pull-refresh v-else v-model="isLoading" @refresh="onRefresh">
      <van-contact-card
        v-for="item in activistL"
        :key="item.userId"
        :name="item.name"
        :tel="item.phone"
        type="edit"
        :editable="false"
      />
    </van-pull-refresh>
    <div class="funcBtn">
      <van-button type="danger" @click="addActivist" round block>
        添加积极分子
      </van-button>
    </div>
  </div>
</template>

<script>
import {
  ContactCard as vanContactCard,
  NavBar as vanNavBar,
  // Search as vanSearch,
  Button as vanButton,
  Sticky as vanSticky,
  Empty as vanEmpty,
  PullRefresh as vanPullRefresh
} from "vant";
import "vant/lib/contact-card/style";
import "vant/lib/nav-bar/style";
import "vant/lib/button/style";
import "vant/lib/sticky/style";
import "vant/lib/search/style";
import "vant/lib/empty/style";

import { activistList } from "@/api/activist/activist.js";
export default {
  name: "app",
  data: function() {
    return {
      value: "",
      isLoading: false,
      activistL: []
    };
  },
  methods: {
    onRefresh() {
      this.isLoading = true;
      this.getApi();
    },
    addActivist() {
      location.href = "./activistAdd.html";
    },
    onClickLeft() {
      history.go(-1);
    },
    getApi() {
      activistList().then(res => {
        console.log(res);
        this.isLoading = false;
        this.activistL = res;
      });
    }
  },
  mounted() {
    this.getApi();
  },
  beforeDestroy: function() {},
  components: {
    vanContactCard,
    vanNavBar,
    vanSticky,
    vanButton,
    vanEmpty,
    vanPullRefresh
  }
};
</script>
<style lang="scss">
#activist {
  .funcBtn {
    position: fixed;
    width: 90%;
    left: 5%;
    bottom: 0.5em;
  }
  .custom-image .van-empty__image {
    width: 90px;
    height: 90px;
  }
}
</style>
