<template>
  <div class="container">
    <ul class="tabList">
      <li @click="tabClick(0)">
        <span :class="curTab === 0 ? 'active' : ''">全部</span>
      </li>
      <li @click="tabClick(1)">
        <span :class="curTab === 1 ? 'active' : ''">审核中</span>
      </li>
      <li @click="tabClick(2)">
        <span :class="curTab === 2 ? 'active' : ''">审核通过</span>
      </li>
      <li @click="tabClick(3)">
        <span :class="curTab === 3 ? 'active' : ''">审核拒绝</span>
      </li>
    </ul>
    
    <div class="list">
      <van-list 
        v-model:loading="loading" 
        :finished="finished" 
        finished-text="没有更多了" 
        @load="onLoad"
      >
        <ActItem 
          v-for="item in actList" 
          :key="item.id" 
          :data="item"
          @goDetails="goDetails"
        />
      </van-list>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import ActItem from "../components/Home/ActItem.vue";

export default {
  components: {
    ActItem,
  },
  data() {
    return {
      curTab: 0,
      actList: [],
      loading: false,
      finished: false,
      currentPage: 1,
    };
  },
  methods: {
    tabClick(value) {
      this.curTab = value;
      this.currentPage = 1;
      this.fetchApplyList(1);
    },
    fetchApplyList(currentPage = 1) {
      const that = this;
      const payload = {
        currentPage,
        pageSize: 10,
        type: this.curTab,
      };

      this.loading = true;
      axios
        .get("/api/myApplyList", { params: payload })
        .then(function (response) {
          const { error, data = {} } = response.data;
          if (error === 0) {
            const currentPage = data.current;
            const list = data.list;

            if (currentPage === 1) {
              that.actList = list;
            } else {
              that.actList.push(...list);
            }

            that.currentPage = currentPage;
            that.finished = data.pageCount === currentPage;
          }
        })
        .finally(function () {
          that.loading = false;
        });
    },
    onLoad() {
      this.fetchApplyList(this.currentPage + 1);
    },
    goDetails(id) {
      this.$router.push("/actDetails?id=" + id);
    },
  },
  mounted() {
    this.fetchApplyList(1);
  },
};
</script>

<style scoped>
.tabList {
  display: flex;
  background: white;
  list-style: none;
  border-bottom: 1px solid #eee;
}

.tabList li {
  flex: 1;
  text-align: center;
  padding: 15px 0;
  cursor: pointer;
}

.tabList span {
  padding: 5px 10px;
}

.tabList span.active {
  color: #ff5d23;
  border-bottom: 2px solid #ff5d23;
}

.list {
  padding: 10px;
}
</style>
