<template>
  <!-- 页面全局配置 -->
  <div class="pageconfig">
    <!--vuetop-->
    <div class="morebox1 response">
      <div class="flex2 response flex justify-end">
        <div class="text3" @click="$router.push('/addcityDangerReport')">
          新增 <van-icon name="add" />
        </div>
      </div>
      <van-list
        v-model="isUpLoading"
        :finished="upFinished"
        :immediate-check="false"
        :offset="10"
        finished-text="加载完成"
        @load="onLoadList"
      >
        <div
          class="morebox4 response"
          v-for="item in reportList"
          @click="toDetail(item.id)"
        >
          <div class="text5">
            {{ item.hiddenTroubleDescription }}
          </div>
          <div class="flex6 response flex justify-between">
            <div class="text7">提交时间：2024-7-21 13:00</div>
            <div class="text8">已提交</div>
          </div>
        </div>
      </van-list>
    </div>

    <!--vuebottom-->
  </div>
</template>
<script>
import { listForAppTrouble } from "@/service/api_company.js";
export default {
  data() {
    return {
      isUpLoading: false,
      isDownLoading: false,
      upFinished: false,
      reportList: [],
      search: {
        pageNum: 1,
        pageSize: "10",
        createdBy: "10008611",
      },
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    toDetail(id) {
      this.$router.push("/addcityDangerReport?id=" + id);
    },
    async getList() {
      listForAppTrouble(this.search).then((res) => {
        if (res.data.rows.length) {
          this.isDownLoading = false;
          this.reportList.push(...res.data.rows);
          this.isUpLoading = false;
          if (this.reportList.length >= res.data.total) {
            this.upFinished = true;
          }
        } else {
          this.reportList = [];
          this.isDownLoading = false;
          this.isUpLoading = false;
          this.upFinished = true;
        }
      });
    },
    onLoadList() {
      this.search.pageNum++;
      this.isDownLoading = false;
      this.getList();
    },
  },
};
</script>
c
<style lang="scss">
.pageconfig {
  width: 100%;
  overflow: hidden;
  overflow-y: scroll;
  height: 100vh;
}

/**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>