<template>
  <!-- 页面全局配置 -->
  <div class="pageconfig">
    <!--vuetop-->
    <van-tabs v-model="active" color="rgba(78, 135, 255, 1)" @change="getTabs">
      <van-tab title="全部" :name="`全部`"></van-tab>
      <van-tab title="待阅" :name="0"></van-tab>
      <van-tab title="已阅" :name="1"></van-tab>
    </van-tabs>
    <div class="morebox1 response">
      <van-list
        v-model="isUpLoading"
        :finished="upFinished"
        :immediate-check="false"
        :offset="10"
        finished-text="加载完成"
        @load="onLoadList"
      >
        <div
          class="morebox4 response"
          v-for="item in noticList"
          @click="toDetail(item.id)"
        >
          <div class="text5">
            {{ item.title }}
          </div>
          <div class="flex6 response flex justify-between">
            <div class="text7">提交时间：{{ item.noticeTime }}</div>
            <div class="text8" v-if="item.isRead == 1">已阅</div>
            <div class="text8" v-else style="color: rgba(226, 81, 0, 1)">
              待阅
            </div>
          </div>
        </div>
      </van-list>
    </div>

    <!--vuebottom-->
  </div>
</template>
<script>
import { listForApp } from "@/service/api_company.js";
export default {
  data() {
    return {
      active: "",
      isUpLoading: false,
      isDownLoading: false,
      upFinished: false,
      noticList: [],
      search: {
        pageNum: 1,
        pageSize: "10",
        createdBy: "smx_h5_userId",
      },
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    getTabs(e) {
      console.log(e);
      this.search.isRead = e == "全部" ? "" : e;
      this.search.pageNum = 1;
      this.isUpLoading = false;
      this.isDownLoading = false;
      this.upFinished = false;
      this.noticList = [];
      this.getList();
    },
    toDetail(id) {
      this.$router.push("/citySafeNoticDetail?id=" + id);
    },
    async getList() {
      listForApp(this.search).then((res) => {
        if (res.data.rows.length) {
          if (this.noticList.length >= res.data.total) {
            this.upFinished = true;
          } else {
            this.isDownLoading = false;
            this.noticList.push(...res.data.rows);
            this.isUpLoading = false;
          }
        } else {
          this.noticList = [];
          this.isDownLoading = false;
          this.isUpLoading = false;
          this.upFinished = true;
        }
      });
    },
    onLoadList() {
      this.search.pageNum++;
      this.isDownLoading = false;
      this.getList();
    },
  },
};
</script>

<style lang="scss">
.pageconfig {
  width: 100%;
}

/**pagedomcss**/
.justify-end {
  justify-content: end;
}
.morebox1 {
  width: 100%;
  background-color: rgba(255, 255, 255, 1);
  margin-top: 24px;
  padding: 20px 0 20px 0;
}

.flex2 {
  width: 100%;
  align-items: flex-start;
}

.text3 {
  color: rgba(13, 47, 118, 1);
  padding-right: 40px;
  font-size: 36px;
}

.morebox4 {
  width: 100%;
  width: calc(100% - 64px);
  font-size: 34px;
  background-color: rgba(245, 247, 250, 1);
  margin: 24px 32px;
  padding: 24px;
  border-radius: 24px;
  box-sizing: border-box;
}

.text5 {
  color: rgba(51, 51, 51, 1);
  padding-bottom: 16px;
  border-bottom: 2px solid rgba(230, 230, 230, 1);
}

.flex6 {
  width: 100%;
  margin-top: 20px;
  align-items: center;
  justify-content: space-between;
}

.text7 {
  color: rgba(136, 136, 136, 1);
}

.text8 {
  color: rgba(45, 140, 240, 1);
}
</style>