<template>
  <yhtopbar :applyStatus="typeId" showtype="list"></yhtopbar>
  <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
    <!-- @load滚动条与底部距离小于 offset 时触发 -->
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      class="listDiv"
    >
      <div v-for="(item, index) in list" :key="item">
        <van-swipe-cell v-if="item.applyStatus == '7101'">
          <van-cell @click="toDetail(item)">
            <!-- 使用 title 插槽来自定义标题 -->
            <template #title>
              <span class="custom-title">{{ item.troubleLevelName }}</span>
            </template>
            <template #value>
              <span>{{ item.troubleAddr }}</span>
            </template>
            <template #label>
              <span>{{ item.troubleDesc }}</span>
            </template>
          </van-cell>

          <template #right>
            <van-button
              square
              type="danger"
              text="删除"
              @click="deleteYinhuan(item.id, index)"
            />
          </template>
        </van-swipe-cell>
        <van-cell v-else @click="toDetail(item)">
          <!-- 使用 title 插槽来自定义标题 -->
          <template #title>
            <span class="custom-title">{{ item.troubleLevelName }}</span>
          </template>
          <template #value>
            <span>{{ item.troubleAddr }}</span>
          </template>
          <template #label>
            <span>{{ item.troubleDesc }}</span>
          </template>
        </van-cell>
      </div>
    </van-list>
  </van-pull-refresh>
  <van-back-top bottom="12vh" />
</template>

<script setup>
import yhtopbar from "./top.vue";
import { ref } from "vue";
import { getYinhuanList, delYinhuan } from "@/api/yinhuan.js";
import { useRouter, useRoute } from "vue-router";
import "@/assets/custom.less";
const router = useRouter();
const route = useRoute();

// const props = defineProps(["typeList"]);

const typeId = route.params.id;
console.log("typeId==", typeId);

const list = ref([]);
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);
const pageNo = ref(1);
const pageSize = ref(10);
const list_lock = ref(false);

const onLoad = () => {
  if (refreshing.value) {
    list.value = [];
    pageNo.value = 1;
    refreshing.value = false;
  }
  let data = {};
  if (typeId == "all") {
    data = {
      pageNo: pageNo.value,
      pageSize: pageSize.value,
      systemId: 0,
      queryAll: "all",
    };
  } else {
    data = {
      applyStatusList: typeId,
      pageNo: pageNo.value,
      pageSize: pageSize.value,
      systemId: 0,
      queryAll: "",
    };
  }

  getYinhuanList(data).then((res) => {
    console.log(res);
    if (res && res.list) {
      if (res.count == 0) {
        finished.value = true;
      } else {
        list.value.push(...res.list);
        let cnt = pageNo.value * pageSize.value;
        if (cnt >= res.count) {
          finished.value = true;
        } else {
          finished.value = false;
          pageNo.value++;
        }
      }
    } else {
      showFailToast("列表获取失败，请重新进入");
    }
    loading.value = false;
  });
};
const onRefresh = () => {
  // 清空列表数据
  finished.value = false;

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

const toDetail = (item) => {
  console.log("item===", item, typeId);

  router.push({
    path: "/yinhuan-detail",
    query: {
      id: item.id,
      flowId: item.flowId,
      applyStatus: item.applyStatus,
      typeId: typeId,
    },
  });
  // if (typeId === "all") {
  //   router.push({
  //     path: "/yinhuan-detail",
  //     query: { id: item.id, flowId: item.flowId, applyStatus: "all" },
  //   });
  // } else {
  //   router.push({
  //     path: "/yinhuan-detail",
  //     query: {
  //       id: item.id,
  //       flowId: item.flowId,
  //       applyStatus: item.applyStatus,
  //     },
  //   });
  // }
};

const deleteYinhuan = (id, index) => {
  //删除
  let data = {
    id: id,
    systemId: 0,
  };
  delYinhuan(data).then((res) => {
    if (res && res.code == "200") {
      showSuccessToast(res.msg);
      list.value.splice(index, 1);
    } else {
      showFailToast("接口返回错误，" + JSON.stringify(res));
    }
  });
};
</script>

<style scoped lang="less">
.van-swipe-cell__right {
  .van-button {
    height: 100%;
  }
}
</style>
