<template>
  <van-nav-bar title="待入库" left-text="" left-arrow @click-left="onClickLeft">
    <!-- <template #right> 添加 </template> -->
  </van-nav-bar>
  <van-search
    v-model="req.keyword"
    placeholder="请输入关键词"
    @search="onRefresh"
  />
  <van-pull-refresh v-model="loading" @refresh="onRefresh">
    <div class="list">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        style="margin-bottom: 60px"
      >
        <commonList
          :data="listData"
          @onClick="toDtl"
          :config="listConfig"
        ></commonList>
        <div></div>
      </van-list>
    </div>
  </van-pull-refresh>
</template>
<script setup>
import { ref, getCurrentInstance, onMounted } from "vue";
import commonList from "@/components/common-list.vue";
import { useRoute } from "vue-router";
const loading = ref(false);
const router = useRoute();
const req = ref({
  pageNum: 1,
  type: "1",
  keyword: null,
});
const finished = ref(false);
const proxy = getCurrentInstance().proxy;
const listData = ref([]);

const listConfig = ref([
  {
    label: "数据来源",
    prop: "businessTypeName",
  },
  {
    label: "物品名称",
    prop: "productName",
  },
  {
    label: "待办数量",
    prop: "quantity",
  },
]);
const onRefresh = () => {
  req.value.pageNum = 1;
  finished.value = false;
  getList("refresh");
};
const onLoad = () => {
  getList();
};

const onClickLeft = () => proxy.$router.push("/main/working");

const onClickRight = () => {
  proxy.$router.push("/main/manualInboundAdd");
};

const toDtl = (row) => {
  proxy.$router.push({
    path: "waitInboundAdd",
    query: {
      ...row,
    },
  });
};
const businessType = ref([
  {
    label: "线边回仓",
    value: 1,
  },
  {
    label: "完工入库",
    value: 2,
  },
  {
    label: "采购到货",
    value: 3,
  },
  {
    label: "退货出库",
    value: 4,
  },
  {
    label: "京东订单",
    value: 5,
  },
  {
    label: "销售订单出库",
    value: 6,
  },
]);

const getList = (type) => {
  loading.value = true;
  proxy
    .post("/stockWaitDetails/page", req.value)
    .then((res) => {
      console.log(req.value);
      listData.value =
        type === "refresh"
          ? res.data.rows
          : listData.value.concat(res.data.rows);
      listData.value.forEach((x) => {
        const current = businessType.value.find(
          (v) => v.value == x.businessType
        );
        if (current) {
          x.businessTypeName = current.label;
        }
      });
      if (req.value.pageNum * 10 >= res.data.total) {
        finished.value = true;
      }
      req.value.pageNum++;
      loading.value = false;
    })
    .catch((err) => {
      loading.value = false;
    });
};
getList();
</script>

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