<template>
  <div class="bg-slate-100 p-4 mt-3">
    <div class="" v-for="(item, index) in tableData" :key="index">
      <el-text tag="b">{{ item?.title }}</el-text>
      <div>
        <div v-if="!item.showType">
          <div v-for="it in item.content" :key="it">
            <div v-if="it == '\n'" class="mt-3 mb-3" />
            <el-text v-else>{{ it }}</el-text>
            <!-- <el-text>{{ it }}</el-text> -->
          </div>
        </div>
        <div v-else-if="item.showType == 1">
          <el-tag class="mr-2 mt-2" v-for="it in item.content" :key="it">
            {{ it }}
          </el-tag>
        </div>
        <div v-else>
          <div v-for="(it, i) in item.tableResults" :key="i">
            <div class="mt-2 mb-2">
              <el-text tag="b">{{ it.classification }}</el-text>
            </div>
            <el-table
              :data="it.formatArray"
              style="width: 100%"
              :span-method="objectSpanMethod"
              border
            >
              <el-table-column
                v-for="(tb, tbIndex) in it.header"
                :key="tb"
                :label="tb.name"
                :prop="`value${tbIndex}`"
                width="width"
              >
                <!-- <template #default="{ row }">{{ row }}</template> -->
              </el-table-column>
            </el-table>
            <div v-if="it?.remark?.length">
              <div
                class="bg-white p-4"
                v-for="remark in it.remark"
                :key="remark"
              >
                <el-text>{{ remark }}</el-text>
              </div>
            </div>
          </div>
        </div>
      </div>
      <el-divider v-if="index != props.list.length - 1" />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, reactive, defineProps, watch, ref } from "vue";
import { cloneDeep } from "@pureadmin/utils";

const props = defineProps({
  list: Array,
  default: () => {}
});
watch(
  () => props.list,
  () => {
    formatArray();
  },
  {
    deep: true
  }
);
const tableData = ref([]);

const formatArray = () => {
  console.log("监听成功", props.list);
  const list = cloneDeep(props.list);

  list.forEach(v => {
    if (v?.showType == 2) {
      v.tableResults.forEach(vv => {
        const arr = [];
        vv.row.map((vRow, rowIndex) => {
          const obj = {};
          vRow.map((vvv, iii) => {
            obj[`value${iii}`] = vvv;
          });
          arr.push(obj);
        });
        vv["formatArray"] = arr;

        const mergeObj = getSpanArr(arr);
        vv["formatArray"].forEach(vvv => {
          vvv["mergeObj"] = mergeObj;
        });
      });
    }
  });
  tableData.value = list;
};

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

// 默认接受四个值 { 当前行的值, 当前列的值, 行的下标, 列的下标 }
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  console.log(row);

  const mergeArr = ["value0"];
  // 判断列的属性
  if (mergeArr.indexOf(column.property) !== -1) {
    // 判断其值是不是为0
    if (row.mergeObj[column.property][rowIndex]) {
      return [row.mergeObj[column.property][rowIndex], 1];
    } else {
      // 如果为0则为需要合并的行
      return [0, 0];
    }
  }
};
onMounted(() => {
  setTimeout(() => {
    formatArray();
  }, 500);
});
</script>
