<template>
  <van-nav-bar :title="'用印申请'" left-text="" left-arrow @click-left="onClickLeft" @click-right="onClickRight">
    <!-- <template #right>
      {{ $t("common.add") }}
    </template> -->
  </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 #useMethod="{row}">
            <div style="width:100%">
              {{dictKeyValue(row.useMethod,useMethodData)}}
            </div>
          </template>

          <template #isContract="{row}">
            <div style="width:100%">
              {{dictKeyValue(row.isContract,sealIsContract)}}
            </div>
          </template>

          <template #status="{row}">
            <div style="width:100%">
              {{dictValueLabel(row.status,statusData)}}
            </div>
          </template>

        </commonList>
      </van-list>
    </div>
  </van-pull-refresh>
  <!-- <van-action-sheet v-model:show="actionType" :actions="actions" @select="onSelect" /> -->
</template>
<script setup>
import { ref, getCurrentInstance } from "vue";
import commonList from "@/components/common-list.vue";
import { getAllDict } from "@/utils/auth";

const proxy = getCurrentInstance().proxy;
const sealIsContract = getAllDict()["seal_is_contract"];
const onClickLeft = () => proxy.$router.push("/main/working");
const onClickRight = () => {
  proxy.$router.push({
    path: "/main/processDtl",
    query: {
      flowKey: "contract_flow",
    },
  });
};
const actionType = ref(false);
const actions = ref([
  {
    name: proxy.t("common.view"),
    type: "1",
  },
  {
    name: proxy.t("common.contractChange"),
    type: "2",
  },
  {
    name: proxy.t("common.cancel"),
  },
]);
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 getList = (type) => {
  loading.value = true;
  proxy
    .post("/sealUse/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;
    });
};
let rowData = ref({});

const toDtl = (row) => {
  proxy.$router.push({
    path: "/main/processDtl",
    query: {
      flowKey: "seal_use_flow",
      id: row.flowId,
      processType: 20,
      businessId: row.id,
    },
  });
};

const useMethodData = ref([
  {
    dictValue: "借章",
    dictKey: "1",
  },
  {
    dictValue: "盖章",
    dictKey: "2",
  },
]);

const statusData = ref([
  {
    label: "草稿",
    value: 0,
  },
  {
    label: "审批中",
    value: 10,
  },
  {
    label: "审批驳回",
    value: 20,
  },
  {
    label: "审批通过",
    value: 30,
  },
  {
    label: "作废",
    value: 88,
  },
]);

const listConfig = ref([
  {
    label: "流水号",
    prop: "code",
  },
  {
    label: "申请人",
    prop: "createUserName",
  },
  {
    label: "申请日期",
    prop: "applyTime",
  },
  {
    type: "slot",
    label: "使用方式",
    slotName: "useMethod",
  },
  {
    type: "slot",
    label: "是否销售合同",
    slotName: "isContract",
  },
  {
    type: "slot",
    label: "审批状态",
    slotName: "status",
  },
]);
</script>

<style lang="scss" scoped>
.list {
  min-height: 70vh;
}
</style>
