<template>
  <van-pull-refresh v-model="refreshing" class="list" @refresh="onRefresh">
    <van-list
      v-model="loading"
      :finished="finished"
      @load="onLoad"
      finished-text="没有更多了"
    >
      <div class="cell" v-for="item in list" :key="item.id" @click="jump(item)">
        <img src="@/assets/notice/notice_icon.png" alt="" />
        <div class="des">
          <p class="name">{{ item.title }}</p>
          <p class="time">{{ item.createTime }}</p>
        </div>
      </div>
    </van-list>
  </van-pull-refresh>
</template>

<script>
import Vue from "vue";
import { PullRefresh, List } from "vant";
import { getList } from "@/api/noticeservice";

Vue.use(PullRefresh).use(List);

export default {
  data() {
    return {
      refreshing: false,
      loading: false,
      finished: true,
      pageNum: 1,
      list: [],
      userInfo: {},
    };
  },
  methods: {
    onRefresh() {
      this.init(1, "refresh");
    },
    onLoad() {
      this.init(this.pageNum, "loading");
    },
    init(pageNum, type) {
      let params = {
        pageNum: type === "refresh" ? this.pageNum : parseInt(this.pageNum) + 1,
        category: 8,
        pageSize: 20,
      };
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "加载中...",
      });
      getList(params).then((res) => {
        this.$toast.clear();
        this.loading = false;
        this.refreshing = false;
        const current = res.data.pageNum;
        const totalPage = res.data.pages;
        const records = res.data.list;
        if (current === 1 && !records.length) {
          this.pageNum = 1;
          this.list = records;
          this.finished = true;
        } else {
          this.pageNum = current;
          this.finished = current >= totalPage;
          if (type === "refresh") this.list = records;
          else this.list = this.list.concat(records);
        }
      });
    },
    jump(item) {
      this.$router.push({ name: "NoticeDetail", query: { id: item.id } });
    },
    JSBgetUserInfo() {
      if (window.android !== undefined) {
        const res = window.android.getUserInfo();
        sessionStorage.setItem("ZJCD-UserInfo", res);
        this.userInfo = JSON.parse(res);
        sessionStorage.setItem('token', this.userInfo.token),
        this.init(1, "refresh");
      } else if (window.webkit) {
        window.webkit &&
          window.webkit.messageHandlers.getUserInfo.postMessage("getUserInfo");
      } else {
        this.$toast("请先登录！");
      }
    },
    getUserInfo(res) {
      sessionStorage.setItem("ZJCD-UserInfo", res);
      this.userInfo = JSON.parse(res);
      sessionStorage.setItem('token', this.userInfo.token),
      this.init(1, "refresh");
    },
  },
  mounted() {
    window.getUserInfo = this.getUserInfo;
  },
  created() {
    this.JSBgetUserInfo();
  }
};
</script>

<style lang="stylus" scoped>
.list {
  height 100vh
  overflow-y auto
  background #fff

  .cell {
    padding 40px 0
    margin 0 30px;
    display flex;
    align-items center
    border-bottom 1px solid #EEEEEE

    img {
      width 80px;
      height 80px;
    }
    .des {
      margin-left 30px;

      .name {
        width calc(100vw - 170px)
        font-size: 32px;
        color: #333333;
        overflow: hidden
        white-space: nowrap
        text-overflow: ellipsis
      }

      .time {
        margin-top 24px;
        font-size: 24px;
        color: #999999;
      }
    }
  }
}
</style>
