<template>
  <el-card class="box-card">
    <byTable
      :source="sourceList.data"
      :pagination="sourceList.pagination"
      :config="config"
      :loading="loading"
      :searchConfig="searchConfig"
      highlight-current-row
      @get-list="getList"
      @clickReset="clickReset"
      :spanMethod="spanMethod"
      :borderStatus="true">
    </byTable>
  </el-card>
</template>

<script setup>
import byTable from "/src/components/byTable/index";

const { proxy } = getCurrentInstance();
const departmentList = ref([{ dictKey: "0", dictValue: "胜德体育" }]);
const sourceList = ref({
  data: [],
  pagination: {
    total: 0,
    pageNum: 1,
    pageSize: 10,
    code: "",
    orderCode: "",
    orderWlnCode: "",
    departmentId: "",
  },
});
const loading = ref(false);
const searchConfig = computed(() => {
  return [
    {
      type: "input",
      prop: "code",
      label: "售后单号",
    },
    {
      type: "input",
      prop: "orderCode",
      label: "订单号",
    },
    {
      type: "input",
      prop: "orderWlnCode",
      label: "万里牛单号",
    },
    {
      type: "select",
      prop: "departmentId",
      data: departmentList.value,
      label: "事业部",
    },
  ];
});
const config = computed(() => {
  return [
    {
      attrs: {
        label: "售后库单号",
        prop: "code",
      },
    },
    {
      attrs: {
        label: "售后订单",
        prop: "orderCode",
      },
    },
    {
      attrs: {
        label: "万里牛单号",
        prop: "orderWlnCode",
      },
    },
    {
      attrs: {
        label: "退货事业部",
        prop: "departmentName",
      },
    },
    {
      attrs: {
        label: "SKU品号",
        prop: "skuSpecCode",
      },
    },
    {
      attrs: {
        label: "数量",
        prop: "quantity",
        width: 100,
      },
    },
    {
      attrs: {
        label: "退货金额",
        prop: "returnAmount",
        width: 120,
      },
    },
    {
      attrs: {
        label: "售后时间",
        prop: "createTime",
        align: "center",
        width: 160,
      },
    },
    {
      attrs: {
        label: "操作人",
        prop: "createUserName",
      },
    },
    {
      attrs: {
        label: "操作",
        width: 100,
        align: "center",
        fixed: "right",
      },
      renderHTML(row) {
        return [
          {
            attrs: {
              label: "查看详情",
              type: "primary",
              text: true,
            },
            el: "button",
            click() {
              clickDetail(row);
            },
          },
        ];
      },
    },
  ];
});
const getDemandData = () => {
  proxy.post("/department/page", { pageNum: 1, pageSize: 999 }).then((res) => {
    if (res.rows && res.rows.length > 0) {
      departmentList.value = departmentList.value.concat(
        res.rows.map((item) => {
          return {
            dictKey: item.id,
            dictValue: item.name,
          };
        })
      );
    }
  });
};
getDemandData();
const mergeRow = (list) => {
  for (let field in list[0]) {
    let k = 0;
    let i = 0;
    while (k < list.length) {
      list[k][field + "Span"] = 1;
      list[k][field + "Dis"] = false;
      for (i = k + 1; i <= list.length - 1; i++) {
        if (list[k][field] === list[i][field] && list[k].id === list[i].id) {
          list[k][field + "Span"]++;
          list[k][field + "Dis"] = false;
          list[i][field + "Span"] = 1;
          list[i][field + "Dis"] = true;
        } else {
          break;
        }
      }
      k = i;
    }
  }
  return list;
};
const getList = async (req, status) => {
  if (status) {
    sourceList.value.pagination = {
      pageNum: sourceList.value.pagination.pageNum,
      pageSize: sourceList.value.pagination.pageSize,
    };
  } else {
    sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
  }
  loading.value = true;
  proxy.post("/orderExchange/page", sourceList.value.pagination).then((res) => {
    let list = [];
    for (let i = 0; i < res.rows.length; i++) {
      if (res.rows[i].orderExchangeDetailList && res.rows[i].orderExchangeDetailList.length > 0) {
        for (let j = 0; j < res.rows[i].orderExchangeDetailList.length; j++) {
          list.push({
            id: res.rows[i].id,
            code: res.rows[i].code,
            orderCode: res.rows[i].orderCode,
            orderWlnCode: res.rows[i].orderWlnCode,
            departmentName: res.rows[i].departmentName,
            skuSpecCode: res.rows[i].orderExchangeDetailList[j].skuSpecCode,
            quantity: res.rows[i].orderExchangeDetailList[j].quantity,
            returnAmount: res.rows[i].orderExchangeDetailList[j].returnAmount,
            createTime: res.rows[i].createTime,
            createUserName: res.rows[i].createUserName,
          });
        }
      }
    }
    sourceList.value.data = Object.freeze(mergeRow(list));
    sourceList.value.pagination.total = res.total;
    setTimeout(() => {
      loading.value = false;
    }, 200);
  });
};
getList();
const clickReset = () => {
  getList("", true);
};
const clickDetail = (row) => {
  proxy.$router.replace({
    path: "/order/after-sale/initiate",
    query: {
      id: row.id,
      random: proxy.random(),
    },
  });
};
const spanMethod = ({ rowIndex, columnIndex }) => {
  if ([0, 1, 2, 3, 7, 8, 9].includes(columnIndex)) {
    let spanName = ["code", "orderCode", "orderWlnCode", "departmentName", "", "", "", "createTime", "createUserName", "id"];
    const row1 = sourceList.value.data[rowIndex][spanName[columnIndex] + "Span"];
    const colspan = sourceList.value.data[rowIndex][spanName[columnIndex] + "Dis"] ? 0 : 1;
    const rowspan = colspan === 1 ? row1 : 0;
    return {
      rowspan: rowspan,
      colspan: colspan,
    };
  }
};
</script>

<style lang="scss" scoped></style>
