<template>
    <van-nav-bar
      :title="$t('historyMessage.name')"
      left-text=""
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    >
      
    </van-nav-bar>
    <van-search
      v-model="req.keyword"
      :placeholder="$t('common.pleaseEnterKeywords')"
      @search="onRefresh"
    />
    <van-pull-refresh v-model="loading" @refresh="onRefresh">
      <div class="list">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          :finished-text="$t('common.noMore')"
          @load="getList"
          style="margin-bottom: 60px"
        >
          <commonList :data="listData" @onClick="toDtl" :config="listConfig">
            <template #typeName="{ row }">
              <div>消息通知</div>
            </template>
          </commonList>
        </van-list>
      </div>
    </van-pull-refresh>
  </template>
  <script setup>
  import { ref, getCurrentInstance } from "vue";
  import commonList from "@/components/common-list.vue";
  
  const proxy = getCurrentInstance().proxy;
  const onClickLeft = () => proxy.$router.push("/main/working");
  const req = ref({
    pageNum: 1,
    keyword: null,
  });
  const finished = ref(false);
  const onRefresh = () => {
    req.value.pageNum = 1;
    finished.value = false;
    getList("refresh");
  };
  const loading = ref(false);
  const listData = ref([]);
  const statusData = ref([
    {
      label: "草稿",
      value: 0,
    },
    {
      label: "审批中",
      value: 10,
    },
    {
      label: "驳回",
      value: 20,
    },
    {
      label: "审批通过",
      value: 30,
    },
    {
      label: "终止",
      value: 99,
    },
  ]);
  const payStatusData = ref([]);
  const getDict = () => {
    proxy.getDictOne(["pay_status"]).then((res) => {
      payStatusData.value = res["pay_status"].data.map((x) => ({
        label: x.dictValue,
        value: x.dictKey,
      }));
    });
  };
  getDict();
  const getList = (type) => {
    loading.value = true;
    proxy
      .post("/pushInfo/page", req.value)
      .then((res) => {
        listData.value =
          type === "refresh"
            ? res.data.rows
            : listData.value.concat(res.data.rows);
        if (req.value.pageNum * 10 >= res.data.total) {
          finished.value = true;
        }
        req.value.pageNum++;
        loading.value = false;
      })
      .catch(() => {
        loading.value = false;
      });
  };
  const toDtl = (row) => {};
  const onClickRight = () => {
    proxy.$router.push({
      path: "/main/processDtl",
      query: {
        flowKey: "pay_flow",
      },
    });
  };
  const listConfig = ref([
    {
      type: "slot",
      label: proxy.t("historyMessage.messageType"),
      slotName: "typeName",
    },
    {
      label: proxy.t("historyMessage.sendTime"),
      prop: "createTime",
    },
    {
      label: proxy.t("historyMessage.messageContent"),
      prop: "title",
    },
    
   
  ]);
  </script>
  
  <style lang="scss" scoped>
  .list {
    min-height: 70vh;
  }
  </style>
  