<template>
  <van-button type="primary" @click="handleAdd">添加</van-button>
  <van-pull-refresh v-model="pageStatus.refreshing" @refresh="onRefresh">
    <van-list
      v-model:loading="pageStatus.loading"
      :loading-text="pageStatus.loadingText"
      :finished="pageStatus.finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div class="list">
        <div v-for="item in pageStatus.list" :key="item.id" class="list-item">
          <div class="row">
            <div class="title">仓库名称</div>
            <div class="value">{{ item.warehouseName }}</div>
          </div>
          <div class="row">
            <div class="title">出库时间</div>
            <div class="value">{{ item.createTime }}</div>
            <div class="icon"></div>
          </div>
          <div class="row">
            <div class="title">操作人</div>
            <div class="value">{{ item.userName }}</div>
          </div>
        </div>
      </div>
    </van-list>
  </van-pull-refresh>
</template>

<script setup>
import { ref, reactive, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
const pageStatus = reactive({
  refreshing: false,
  loading: false,
  loadingText: "数据加载中，请稍后！",
  finished: false,
  finishedText: "",
  list: [],
});

const queryData = reactive({
  pageNum: 1,
  pageSize: 10,
  keyword: "",
  type: "2", // 2为手动出库
});
// 请求列表事件
const getList = async () => {
  pageStatus.loading = true;
  pageStatus.finished = false;
  const { data } = await proxy.post("/stockJournal/page", queryData);
  pageStatus.list = [...pageStatus.list, ...data.rows];
  pageStatus.loading = false;
  pageStatus.finished = true;
  if (pageStatus.refreshing) {
    pageStatus.refreshing = false;
  }
};
// 监听下拉刷新事件
const onRefresh = () => {
  pageStatus.refreshing = true;
  queryData.pageNum = 1;
  queryData.pageSize = 10;
  queryData.keyword = "";
  pageStatus.list = [];
  getList();
};
// 监听上拉加载事件
const onLoad = () => {
  queryData.pageNum += 1;
  getList();
};

const handleAdd = () => {
  proxy.$router.push({
    path: "/purchase-sales/addDetails",
  });
};

getList();
</script>

<style lang="scss" scoped>
.list {
  padding: 10px 10px 0 10px;
  .list-item {
    .row {
      display: flex;
      align-items: center;
      margin-bottom: 5px;
      .title {
        min-width: 70px;
        color: #999999;
      }
      .value {
        flex: 1;
      }
      .icon {
        width: 40px;
        text-align: center;
      }
    }
  }
}
</style>