<!-- 首页中待办列表 -->
<template>
  <div class="daiban-list">
    <van-list
      v-model:loading="listparam.loading"
      :finished="listparam.finished"
      :finished-text="listparam.finishedText"
      @load="onLoad"
      class="dbList"
    >
      <van-cell-group
        v-for="(item, index) in listparam.list"
        :key="index"
        @click="toDetail(item)"
        :border="false"
      >
        <p class="subject">
          <van-tag :color="item.tagcolor">{{ item.tagtext }}</van-tag
          >&nbsp;
          <span>{{ item.bussinessName }}</span>
        </p>
        <van-cell :border="false" class="vantcell">
          <template #title>
            <span style="color: var(--van-gray-6)">
              {{ item.startUserId }}
            </span>
          </template>
          <template #default>
            <span>{{ item.startTime }}</span>
          </template>
        </van-cell>

        <van-divider />
      </van-cell-group>
    </van-list>
  </div>
</template>

<script>
import { reactive } from "vue";
import { getCommonData } from "@/api/index";
import { useRouter } from "vue-router";
import { showFailToast } from "vant";

export default {
  setup() {
    const router = useRouter();
    const listparam = reactive({
      list: [],
      loading: false,
      finished: false,
      finishedText: "没有更多了",
      page: 1,
      rows: 10,
      total: 0,
    });

    // 加载列表
    const onLoad = () => {
      setTimeout(() => {
        //获取列表数据
        let data = {
          page: listparam.page,
          rows: listparam.rows,
        };
        getData(data, "getReimlist").then((res) => {
          console.log(res);
          if (res.code == "200") {
            let secureRes = res.data;
            if (secureRes.code == "0") {
              listparam.total = secureRes.data.total;
              let att = [];
              secureRes.data.list.forEach((element) => {
                if (element.key.indexOf("purchase") != -1) {
                  element.processType = "purchase";
                  element.tagcolor = "#102181"; //深蓝色
                  element.tagtext = "采购";
                } else if (element.key.indexOf("financial") != -1) {
                  element.processType = "financial";
                  element.tagcolor = "#0098fe"; //浅蓝色
                  element.tagtext = "财务";
                } else if (element.key.indexOf("external") != -1) {
                  element.processType = "external";
                  element.tagcolor = "#068030"; //草绿色
                  element.tagtext = "外部项目";
                } else if (element.key.indexOf("travelExpense") != -1) {
                  element.processType = "cost";
                  element.tagcolor = "#8b2890"; //紫色
                  element.tagtext = "报销";
                } else if (element.key.indexOf("techproj") != -1) {
                  element.processType = "tech";
                  element.tagcolor = "#00a89d"; //翠绿色
                  element.tagtext = "科研";
                } else if (element.key.indexOf("SysProcess") != -1) {
                  element.processType = "sys";
                  element.tagcolor = "#f68221"; //橙色
                  element.tagtext = "信息化";
                } else if (element.key.indexOf("knowledge") != -1) {
                  element.processType = "knowledge";
                  element.tagcolor = "#f36e72"; //皮红
                  element.tagtext = "知识管理";
                } else {
                  element.processType = "unknown";
                  element.tagcolor = "#898a84";
                  element.tagtext = "待建设";
                }
                att.push(element);
              });
              listparam.list.push(...att);
              // listparam.list.push(...secureRes.data.list);

              listparam.loading = false;

              if (listparam.list.length < listparam.total) {
                listparam.page = listparam.page + 1;
                console.log("listparam.page====" + listparam.page);
              } else {
                listparam.finished = true;
              }
            } else {
              listparam.finishedText = sxworkRes.msg;
              listparam.finished = true;
              showFailToast("列表查询失败");
            }
          } else {
            listparam.finishedText = res.msg;
            listparam.finished = true;
            showFailToast(res.msg);
          }
        });
      }, 1000);
    };
    function toDetail(item) {
      if (item.processType == "unknown") {
        router.push({
          path: "/unknow",
        });
      } else {
        router.push({
          path:
            "/" +
            item.processType +
            "detail/" +
            item.bussinessId +
            "/processInstanceId/" +
            item.processInstanceId +
            "/taskId/" +
            item.id +
            "/key/" +
            item.key,
        });
      }
    }
    return {
      listparam,
      onLoad,
      toDetail,
    };
  },
};
</script>

<style scoped>
.daiban-list {
  margin-left: 8px;
  margin-right: 8px;
  /* padding: 0px 10px 10px 10px; */
}

.dbList {
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 10px;
}
.subject {
  font-size: var(--van-font-size-lg0);
  margin: 0px 14px 0px 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--van-gray-8);
}
.van-divider {
  margin-top: -3px;
}
</style>
