<!-- 专项问题列表 specialProblemList-->
<template>
  <view class="container">
    <infiniteScroll ref="infiniteScroll"
                    :fetchItems="fetchItems"
                    :hasMore="hasMore">
      <tui-card :image="{url:'/static/images/dian.png'}"
                :title="{text:levelArr[item.find_problem_level]}"
                :tag="{text:item.find_problem_time}"
                v-for="(item,index) in list"
                :key="index">
        <template v-slot:body>
          <view class="tui-default">
            {{item.find_problem_person_name}}于{{changeDateToStyle(item.find_problem_time)}}在{{item.find_problem_address}}，风险描述为:{{item.find_problem_description}}
          </view>
        </template>
        <template v-slot:footer>
          <view>
            <CardMainValue :videoUrl="item.find_problem_video.url"
                           :taskId="item.id"
                           :titleType="titleType" />
          </view>
        </template>
      </tui-card>
    </infiniteScroll>
  </view>
</template>

<script>
import infiniteScroll from "@/components/infiniteScroll/infiniteScroll.vue";
import CardMainValue from "@/pages/template/bomb/common/cardMainValue.vue";
import { changeDateToStyle } from "@/utils/util.js";
export default {
  components: { infiniteScroll, CardMainValue },
  props: {
    titleType: {
      type: Number,
      default: 0,
    },
    type_source_id: {
      type: Number,
      default: -1,
    },
  },
  data() {
    return {
      levelArr: ["", "轻度", "中度", "重度"],
      title: null,
      pageSize: 20,
      hasMore: true,
      fetchUrl: "patrol/problem/getPatrolProblem",
      list: [],
      search: {
        find_problem_type: 2,
        find_problem_type_source_id: null,
        the_problem_is_deal: null,
      },
    };
  },
  created() {},
  onLoad(options) {
    // this.search.find_problem_type_source_id = options?.type_source_id;
    // this.title = options?.title;
    // if (!!this.title) {
    //   uni.setNavigationBarTitle = this.title;
    // }
  },
  mounted() {
    this.$nextTick(() => {
      if (this.type_source_id != -1)
        this.search.find_problem_type_source_id = this.type_source_id;
      if (this.titleType == 1) this.search.the_problem_is_deal = [2, 3];
      this.fetchItems();
    });
  },
  methods: {
    changeDateToStyle(time) {
      return changeDateToStyle(time);
    },
    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;
      }
    },
    navTo(url) {
      uni.navigateTo({
        url,
      });
    },
    onReachBottom: function () {
      // this.$refs.infiniteScroll.reachBottom();
      if (!this.hasMore) return;
      this.fetchItems();
    },
  },
};
</script>

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

  .tui-default {
    padding: 20rpx 30rpx;
  }
}
</style>