<template>
  <view class="container"
        style="margin-top: 20rpx;">
    <infiniteScroll ref="infiniteScroll"
                    :fetchItems="fetchItems"
                    :hasMore="hasMore">
      <tui-card :title="{text:item.title,color:'black',}"
                v-for="(item,index) in list"
                :key="index">
        <template v-slot:body>
          <view class="tui-default">
            {{item.task_value}}
          </view>
        </template>
        <template v-slot:footer>
          <view class="tui-default"
                style="display: flex;align-items: center;
			justify-content: space-between;">
            <tui-button width="180rpx"
                        height="70rpx"
                        @click="clickAddFind(item)">添加发现</tui-button>
            <tui-button width="180rpx"
                        height="70rpx"
                        @click="clickProblemList(item)">问题列表</tui-button>
            <tui-button width="180rpx"
                        height="70rpx"
                        @click="clickViewHandling(item)">查看整改</tui-button>
          </view>
        </template>
      </tui-card>
    </infiniteScroll>

    <tui-fab @click="addInspect"></tui-fab>
  </view>
</template>

<script>
import infiniteScroll from "@/components/infiniteScroll/infiniteScroll.vue";
export default {
  components: { infiniteScroll },
  data() {
    return {
      pageSize: 20,
      hasMore: true,
      fetchUrl: "patrol/problem/getPatrolSpecialInspection",
      list: [],
      search: {},
    };
  },
  onLoad() {
    this.fetchItems();
  },
  methods: {
    async fetchItems() {
      const { data } = await this.$request.get(this.fetchUrl, {
        params: {
          ...this.search,
          page: Math.ceil(this.list.length / this.pageSize) + 1,
          limit: this.pageSize,
        },
      });
      this.list = [...this.list, ...data.data];
      if (data.data.length < this.pageSize) {
        this.hasMore = false;
      }
    },
    clickAddFind(item) {
      //下一个页面项目部需要选择
      uni.navigateTo({
        url: `/pages/template/bomb/specialInspectReport?type_source_id=${item.id}`,
      });
    },
    addInspect() {
      uni.navigateTo({
        url: "/pages/template/bomb/addInspect",
      });
    },
    clickViewHandling(item) {
      uni.navigateTo({
        url: `/pages/template/bomb/specialabarbeitungList?type_source_id=${item.id}`,
      });
    },
    clickProblemList(item) {
      uni.navigateTo({
        url: `/pages/template/bomb/specialProblemList?type_source_id=${item.id}`,
      });
    },
  },
  // uniapp触底钩子函数
  onReachBottom() {
    // this.$refs.infiniteScroll.reachBottom();
    if (!this.hasMore) return;
    this.fetchItems();
  },
};
</script>

<style lang="scss" scoped>
.tui-card {
  margin-top: 20rpx;
}

.tui-default {
  padding: 20rpx 30rpx;
}

/deep/.tui-header-left {
  font-weight: 600 !important;
}
</style>