<template>
    <van-nav-bar title="供应商信息" left-text="" left-arrow @click-left="onClickLeft" @click-right="onClickRight">
      <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>
        </van-list>
      </div>
    </van-pull-refresh>
  </template>
  <script setup>
  import { ref, getCurrentInstance } 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,
    keyword: null,
    definition: "2",
  });
  const finished = ref(false);
  const proxy = getCurrentInstance().proxy;
  const listData = ref([]);
  const classification = ref([]);
  const listConfig = ref([
    {
      label: "供应商类型",
      prop: "typeName",
    },
    {
      label: "供应商名称",
      prop: "name",
    },
    {
      label: "联系人信息",
      prop: "contactPerson",
    },
  ]);
  const onRefresh = () => {
    req.value.pageNum = 1;
    finished.value = false;
    getList("refresh");
  };
  const onLoad = () => {
    getClassification();
  };
  const onClickLeft = () => proxy.$router.push("/main/working");
  const onClickRight = () => {
    proxy.$router.push({
      path: "supplierConfigAdd",
      query: {
          type: 'add'
      },
    });
  };
  proxy.uploadDdRightBtn(onClickRight,'添加')
  const toDtl = (row) => {
    proxy.$router.push({
      path: "supplierConfigAdd",
      query: {
        id: row.id,
        type: 'edit'
      },
    });
  };
  const treeToList = (arr) => {
    let res = []; // 用于存储递归结果（扁平数据）
    // 递归函数
    let fn = (source) => {
      source.forEach((el) => {
        res.push(el);
        el.children && el.children.length > 0 ? fn(el.children) : ""; // 子级递归
      });
    };
    fn(arr);
    return res;
  };
  const getClassification = () => {
    if (classification.value && classification.value.length > 0) {
      getList();
    } else {
      proxy.post("/productClassify/tree", { parentId: "", name: "", definition: "2" }).then((res) => {
        classification.value = treeToList(res.data);
        getList();
      });
    }
  };
  const getList = (type) => {
    loading.value = true;
    proxy
      .post("/supplierInfo/page", req.value)
      .then((res) => {
        res.data.rows = res.data.rows.map((item) => {
          
          return {
            ...item,
            contactPersonInfo: item.contactPerson + ' ' + item.contactPhone,
            typeName: item.type === 1 ? '贸易商' : '工厂',
          };
        });
        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((err) => {
        loading.value = false;
      });
  };
  </script>
  
  <style lang="scss" scoped>
  .list {
    min-height: 70vh;
  }
  </style>
  