<template>
  <div class="home">
    <template>
      <el-table :data="tableData" style="width: 100%" :span-method="arraySpanMethod">
        <el-table-column v-for="(item,index) in columnList" :prop="item.prop" :label="item.label" align="center">
        </el-table-column>
      </el-table>
    </template>
  </div>
</template>
<script>
export default {
  name: 'Home',
  components: {},
  data() {
    return {
      tableData: [
        { city: '苏州', country: '玄武', gender: '男', name: '1' },
        { city: '南京', country: '江宁', gender: '男', name: '2' },
        { city: '南京', country: '江宁', gender: '女', name: '3' },
        { city: '南京', country: '江宁', gender: '男', name: '4' },
        { city: '南京', country: '鼓楼', gender: '男', name: '5' },
        { city: '南京', country: '鼓楼', gender: '男', name: '6' },
        { city: '南京', country: '秦淮', gender: '男', name: '7' },
        { city: '南京', country: '秦淮', gender: '女', name: '8' },
        { city: '南京', country: '建邺', gender: '男', name: '9' },
        { city: '南京', country: '建邺', gender: '男', name: '0' },
        { city: '盐城', country: '建邺', gender: '男', name: '2' },
        { city: '盐城', country: '建邺', gender: '女', name: '2' },
        { city: '徐州', country: '建邺', gender: '女', name: '3' },
        { city: '连云港', country: '新浦', gender: '女', name: 'aaa' },
        { city: '连云港', country: '新浦', gender: '男', name: 'aaa' },
        { city: '连云港', country: '新浦', gender: '女', name: 'bbb' },
        { city: '连云港', country: '新浦', gender: '男', name: 'ccd' },
        { city: '连云港', country: '海州', gender: '男', name: 'eee' },
        { city: '连云港', country: '海州', gender: '男', name: 'ccc' },
        { city: '连云港', country: '连云', gender: '女', name: 'aaa' },
        { city: '连云港', country: '赣榆', gender: '男', name: 'aaa' },
        { city: '连云港', country: '赣榆', gender: '男', name: 'aaa' },
        { city: '连云港', country: '赣榆', gender: '女', name: 'aaa' },
      ],
      columnList: [{
        prop: 'city',
        label: '城市'
      }, {
        prop: 'country',
        label: '区县'
      }, {
        prop: 'gender',
        label: '性别'
      }, {
        prop: 'name',
        label: '姓名'
      }],
      mergeKey: [0, 1, 2],
      mergeObj: [],
      margeStartLine: [],
      n: 0
    }
  },
  created() {
    this.mergeObj = this.getMergeObj(this.tableData, 'city')
  },
  mounted() {
    this.getMergeObj(this.tableData, 'city')
  },
  methods: {
    getMergeObj(data, key, keyIndex) {
      // startIndex, range
      let curIndex = 0
      let arr = []
      let margeStartLine = []
      for (let i = 0; i < data.length; i++) {
        arr.push(0)
        if (i == 0) {
          curIndex = 0
          margeStartLine.push(0)
        } else {
          let canMerge = false
          let count = 0
          for (let k = 0; k <= keyIndex; k++) {
            let curKey = this.columnList[k].prop
            if (data[i][curKey] == data[i - 1][curKey]) {
              count++
            }
          }
          if (count == keyIndex + 1) {
            arr[curIndex] += 1
            if (curIndex != margeStartLine[margeStartLine.length - 1]) {
              margeStartLine.push(curIndex)
            }
          } else {
            margeStartLine.push(i)
            curIndex = i
          }
        }
      }
      return {
        mergeArr: arr,
        margeStartLine: margeStartLine
      }
    },

    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      for (let k = 0; k < this.mergeKey.length; k++) {
        let key = this.columnList[this.mergeKey[k]]
        if (columnIndex === this.mergeKey[k]) {
          let key = this.columnList[columnIndex].prop
          let obj = this.getMergeObj(this.tableData, key, columnIndex)
          
          let mergeArr = obj.mergeArr
          let margeStartLine = obj.margeStartLine

          if (margeStartLine.indexOf(rowIndex) > -1) {
            let index = margeStartLine[margeStartLine.indexOf(rowIndex)]
            return {
              rowspan: mergeArr[index] + 1,
              colspan: 1
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }

        }
      }
      if (this.mergeKey.indexOf(this.columnList[columnIndex].prop) > -1) {
        let key = this.columnList[columnIndex].prop
        // let { mergeObj, margeStartLine } = this.getMergeObj(this.tableData, key)
        if (margeStartLine.indexOf(rowIndex) > -1) {
          let index = margeStartLine[margeStartLine.indexOf(rowIndex)]
          return {
            rowspan: mergeObj[index] + 1,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    }
  }
}

</script>