<template>
  <el-table
    ref="table"
    :data="tableData"
    border
    :span-method="objectSpanMethod"
  >
    <el-table-column prop="project" label="檢測項目"> </el-table-column>
    <el-table-column prop="standard" label="檢測標準"> </el-table-column>
    <el-table-column prop="method" label="檢測方法"> </el-table-column>
    <el-table-column prop="price" label="檢測價格"> </el-table-column>
  </el-table>
</template>

export default {
  props: ["info"],
  setup(props, content) {

    const data = reactive({
      tableData: [],
      colSpanArr: [],
      rowIndexArr: [],
    });

    const getList = () => {
        // 請求數據
        getColSpanData("project", data.tableData);
    }

    const getColSpanData = (prop, datas) => {
      let colLength = 1;
      datas.forEach((element, index) => {
        if (index == 0) {
          // rowIndex開始合并的位置為0,合并單元格數量默認為1
          data.rowIndexArr.push(0);
          colLength = 1;
        } else {
          if (element[prop] == datas[index - 1][prop]) {
            // 當相鄰兩條數據相等時，rowspan+1,即colLength+1
            colLength += 1;
            // 當最后一條數據與倒數第2條不等式，在colSpanArr中push(1)
            if (index == datas.length - 1) {
              data.colSpanArr.push(colLength);
            }
          } else {
            //  相鄰兩條不等時push index和合并的長度
            data.colSpanArr.push(colLength);
            data.rowIndexArr.push(index);
            if (index == datas.length - 1) {
              data.colSpanArr.push(1);
            }
            colLength = 1;
          }
        }
      });
      data.rowIndexArr.push(datas.length);
      console.log(data.rowIndexArr, data.colSpanArr);
      //  結果分別是：
      //data.rowIndexArr:[0, 2, 5, 7, 9，10]
      //data.colSpanArr:[2, 3, 2, 2, 1]
    };

    const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
      if (columnIndex === 0) {
        for (let i = 0; i < data.colSpanArr.length; i++) {
          //如果rowIndex和data.rowIndexArr[i]相等則開始合并，合并數量對應為data.colSpanArr[i]
          if (rowIndex === data.rowIndexArr[i]) {
            return {
              rowspan: data.colSpanArr[i],
              colspan: 1,
            };
          } else {
            if (
              rowIndex > data.rowIndexArr[i] &&
              rowIndex < data.rowIndexArr[i + 1]
            ) {
              return {
                //被合并行則返回rowspan: 0, colspan: 0，
                //這里被合并行為1,3,4,6,8
                rowspan: 0,
                colspan: 0,
              };
            }
          }
        }
      }
    };
  }
}