<template>
  <!-- <div> -->
  <van-sticky>
    <van-nav-bar title="安全检查项目" />
  </van-sticky>

  <!-- <div class="listViewContain"> -->

  <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      class="listDiv"
    >
      <van-cell v-for="item in list" :key="item.id" @click="goDetail(item.id)">
        <template #title>
          {{ item.itemName }}
        </template>
        <template #label>
          <div>检查模板:{{ item.templateName }}</div>
          <div>项目内容:{{ item.itemBody }}</div>
        </template>
        <template #value>
          <div>{{ item.updateDate }}</div>
          <div>{{ formatStatus(item.itemStatus) }}</div>
        </template>
      </van-cell>
    </van-list>
  </van-pull-refresh>
  <!-- </div> -->
  <van-back-top bottom="12vh" />
  <!-- </div> -->
</template>

<script setup>
import { onMounted, ref, reactive } from "vue";
import { useRouter, useRoute } from "vue-router";
import { CheckItemList, getDictionary } from "@/api/check";
import "@/assets/custom.less";
const route = useRoute();
const router = useRouter();
const band = route.query.band;
const templateName = route.query.templateName;
const taskId = route.query.id;
const pageNo = ref(1);
const pageSize = ref(20);
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);

const list = reactive([]);
const status = reactive([]);
const statusDict = () => {
  try {
    getDictionary("check_task_item_status").then((res) => {
      // console.log("res", res);
      if (res) {
        status.push(...res);
        // console.log("dictionary:", status)
      }
    });
  } catch (error) {
    console.error("获取字典失败:", error);
  }
};
const onLoad = async () => {
  if (refreshing.value) {
    list.length = 0;
    pageNo.value = 1;
    refreshing.value = false;
  }
  const params = {
    taskId: taskId,
    itemName: "",
    checkPerson: "",
    pageNo: pageNo.value,
    pageSize: pageSize.value,
  };
  try {
    const res = await CheckItemList(params);
    console.log("检查任务列表调用一次", res);
    // console.log("页码：", pageNo.value);
    const data = res.list;
    if (pageSize.value * pageNo.value < res.count) {
      list.push(...data);
      pageNo.value++;
    } else {
      list.push(...data);
      finished.value = true;
    }
    loading.value = false;
  } catch (error) {
    showFailToast("加载失败，请重试");
    console.log(error);
    finished.value = true;
  } finally {
    loading.value = false;
  }
};

async function goDetail(id) {
  let taskid = id;
  router.push({
    path: "/jcrw-jcx-detail",
    query: { itemid: taskid,band:band },
  });
}

const formatStatus = (id) => {
  let findObj = status.find((item) => item.dictValue === id);
  if (findObj) {
    return status.find((item) => item.dictValue === id).dictLabel;
  } else {
    return "未知";
  }
};

const onRefresh = async () => {
  finished.value = false;

  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  loading.value = true;
  onLoad();
};
onMounted(() => {
  statusDict();
});
</script>

<style scoped>
::v-deep .van-cell__value {
  flex: none;
}
</style>
