<!-- 抗旱物资储备价值表 -->
<template>
  <basic-container>
    1
    <el-form class="whole_form">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="省份">
            <el-input />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="物资分类">
            <el-input />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-button type="primary">搜索</el-button>
          <el-button>清空</el-button>
        </el-col>
      </el-row>
    </el-form>

    <el-table :data="tableData" stripe border :span-method="arraySpanMethod">
      <el-table-column type="index" label="序号" header-align="center" align="center" />
      <el-table-column prop="upidName" label="省份" header-align="center" align="center" />
      <el-table-column prop="username" label="储备仓库" header-align="center" align="center" />
      <template v-for="item in headerName" :key="item">
        <el-table-column :label="item.dmUpname" header-align="center" align="center">
          <template v-for="iten in item.children" :key="iten">
            <el-table-column :label="iten.dmUpname" header-align="center" align="center">
              <el-table-column :prop="iten.dmUpcode" :label="iten.units" header-align="center" align="center" />
            </el-table-column>
          </template>
        </el-table-column>
      </template>
      <el-table-column prop="" label="汇总" header-align="center" align="center" />
      <el-table-column prop="" label="实际库存汇总" header-align="center" align="center" />
    </el-table>
  </basic-container>
</template>

<script setup lang="ts">
import { ref } from "vue";

import { handleTree } from "@/utils/util";
import { getDroughtResistantList, getDroughtResistantHeader } from "@/api/dataStatistics/index";

const headerName: any = ref([]);
const headerProps: any = ref([]);
const tableData: any = ref([]);
const mergeObj: any = ref({});

// getSpanArr方法
const getSpanArr = (data: any) => {
  headerProps.value.forEach((key: any) => {
    let count = 0; // 用来记录需要合并行的起始位置
    mergeObj.value[key] = []; // 记录每一列的合并信息
    data.forEach((item: any, index: number) => {
      // index == 0表示数据为第一行，直接 push 一个 1
      if (index === 0) {
        mergeObj.value[key].push(1);
      } else {
        // 判断当前行是否与上一行其值相等 如果相等 在 count 记录的位置其值 +1 表示当前行需要合并 并push 一个 0 作为占位
        if (item[key] === data[index - 1][key]) {
          mergeObj.value[key][count] += 1;
          mergeObj.value[key].push(0);
        } else {
          // 如果当前行和上一行其值不相等
          count = index; // 记录当前位置
          mergeObj.value[key].push(1); // 重新push 一个 1
        }
      }
    });
  });
};

// 获取表格数据
const getList = () => {
  getDroughtResistantList({}).then((res: any) => {
    if (res.code === 0) {
      tableData.value = res.data
        .map((item: any) => {
          item.map.upidName = item.upidName;
          item.map.username = item.username;
          return item.map;
        })
        .filter((item: any) => {
          headerProps.value.filter((ite: any) => {
            if (!item[ite]) {
              item[ite] = 0;
            }
          });
          return item;
        });
      setTimeout(() => {
        getSpanArr(tableData.value);
      }, 300);
    }
  });
};

// 获取表头数据
getDroughtResistantHeader({
  dmUpcode0: "200"
}).then((res: any) => {
  if (res.code === 0) {
    res.data
      .map((item: any) => {
        const parent = {
          dmUpcode: item.dmUpcode1,
          dmUpname: item.dmUpname1
        };
        const own = {
          dmUpcode: item.dmUpcode2,
          dmUpname: item.dmUpname2,
          units: item.dmUpname3
        };
        return [parent, own];
      })
      .forEach((item: any) => {
        headerName.value.push(...item);
      });
    headerName.value = handleTree(headerName.value, "dmUpcode");
    headerProps.value = res.data.map((item: any) => item.dmUpcode2);
    headerProps.value.unshift("upidName", "username");
  }
  getList();
});

const arraySpanMethod = ({ row, column, rowIndex, columnIndex }: any) => {
  // 判断列的属性
  if (headerProps.value.indexOf(column.property) !== -1) {
    // 判断其值是不是为0
    if (mergeObj.value[column.property][rowIndex]) {
      return [mergeObj.value[column.property][rowIndex], 1];
    } else {
      // 如果为0则为需要合并的行
      return [0, 0];
    }
  }
};
</script>
