<template>

  <div style="padding: 20px 0;">
    <el-table :data="tableData" :span-method="objectSpanMethod" style="width: 100%" stripe height="800px">
      <el-table-column type="index" label="序号" width="50" header-align="center" align="center" fixed="left">
      </el-table-column>

      <el-table-column prop="area" label="所属区域" header-align="center" width="100" fixed="left" align="center">
      </el-table-column>
      <el-table-column prop="target" label="控制工程名称" header-align="center" width="150" fixed="left">
      </el-table-column>
      <el-table-column prop="unit" label="管理单位" header-align="center" width="150" fixed="left">
      </el-table-column>
      <el-table-column prop="gate" label="闸门（孔×米）" header-align="center" width="150" fixed="left">
      </el-table-column>
      <el-table-column prop="gm" label="泵站规模（台×m3/s）" header-align="center" width="150" fixed="left">
      </el-table-column>
      <el-table-column label="11月18日" header-align="center">
        <el-table-column prop="x1" label="星期六" min-width="220" header-align="center">
        </el-table-column>
      </el-table-column>
      <el-table-column label="11月19日" header-align="center">
        <el-table-column prop="x2" label="星期日" min-width="220" header-align="center">
        </el-table-column>
      </el-table-column>
      <el-table-column label="11月20日" header-align="center">
        <el-table-column prop="x3" label="星期一" min-width="220" header-align="center">
        </el-table-column>
      </el-table-column>
      <el-table-column label="11月21日" header-align="center">
        <el-table-column prop="x4" label="星期二" min-width="220" header-align="center">
        </el-table-column>
      </el-table-column>
      <el-table-column label="11月22日" header-align="center">
        <el-table-column prop="x5" label="星期三" min-width="220" header-align="center">
        </el-table-column>
      </el-table-column>
      <el-table-column label="11月23日" header-align="center">
        <el-table-column prop="x6" label="星期四" min-width="220" header-align="center">
        </el-table-column>
      </el-table-column>
      <el-table-column label="11月24日" header-align="center">
        <el-table-column prop="x7" label="星期五" min-width="220" header-align="center">
        </el-table-column>
      </el-table-column>
    </el-table>

  </div>
</template>
<script>
  import {
    mergeTableRow
  } from "@/utils/mergeTableRow"

  export default {
    data() {
      return {
        tableData: [],
        list: [{
          area: '东线',
          unit: '河道处',
          target: '娄江枢纽',
          gate: '14m',
          gm: '3×5m3/s',
          x1: "7:00-9:00两台外排",
          x2: "",
          x3: "7:00-9:00两台外排",
          x4: "7:00-9:00两台外排",
          x5: "7:00-9:00两台外排",
          x6: "7:00-9:00两台外排",
          x7: "7:00-9:00两台外排",
        }, {
          area: '东线',
          unit: '河道处',
          target: '娄江枢纽',
          gate: '14m',
          gm: '3×5m3/s',
          x1: "7:00-9:00两台外排",
          x2: "",
          x3: "7:00-9:00两台外排",
          x4: "7:00-9:00两台外排",
          x5: "7:00-9:00两台外排",
          x6: "7:00-9:00两台外排",
          x7: "7:00-9:00两台外排",
        }, {
          area: '东线',
          unit: '河道处',
          target: '娄江枢纽',
          gate: '14m',
          gm: '3×5m3/s',
          x1: "7:00-9:00两台外排",
          x2: "",
          x3: "7:00-9:00两台外排",
          x4: "7:00-9:00两台外排",
          x5: "7:00-9:00两台外排",
          x6: "7:00-9:00两台外排",
          x7: "7:00-9:00两台外排",
        }, {
          area: '东线',
          unit: '河道处',
          target: '娄江枢纽',
          gate: '14m',
          gm: '3×5m3/s',
          x1: "7:00-9:00两台外排",
          x2: "",
          x3: "7:00-9:00两台外排",
          x4: "7:00-9:00两台外排",
          x5: "7:00-9:00两台外排",
          x6: "7:00-9:00两台外排",
          x7: "7:00-9:00两台外排",
        }, {
          area: '东线',
          unit: '河道处',
          target: '娄江枢纽',
          gate: '14m',
          gm: '3×5m3/s',
          x1: "7:00-9:00两台外排",
          x2: "",
          x3: "7:00-9:00两台外排",
          x4: "7:00-9:00两台外排",
          x5: "7:00-9:00两台外排",
          x6: "7:00-9:00两台外排",
          x7: "7:00-9:00两台外排",
        }, {
          area: '东线',
          unit: '河道处',
          target: '娄江枢纽',
          gate: '14m',
          gm: '3×5m3/s',
          x1: "7:00-9:00两台外排",
          x2: "",
          x3: "7:00-9:00两台外排",
          x4: "7:00-9:00两台外排",
          x5: "7:00-9:00两台外排",
          x6: "7:00-9:00两台外排",
          x7: "7:00-9:00两台外排",
        }, {
          area: '东线',
          unit: '河道处',
          target: '娄江枢纽',
          gate: '14m',
          gm: '3×5m3/s',
          x1: "7:00-9:00两台外排",
          x2: "",
          x3: "7:00-9:00两台外排",
          x4: "7:00-9:00两台外排",
          x5: "7:00-9:00两台外排",
          x6: "7:00-9:00两台外排",
          x7: "7:00-9:00两台外排",
        }, {
          area: '东线',
          unit: '河道处',
          target: '娄江枢纽',
          gate: '14m',
          gm: '3×5m3/s',
          x1: "7:00-9:00两台外排",
          x2: "",
          x3: "7:00-9:00两台外排",
          x4: "7:00-9:00两台外排",
          x5: "7:00-9:00两台外排",
          x6: "7:00-9:00两台外排",
          x7: "7:00-9:00两台外排",
        }, {
          area: '东线',
          unit: '河道处',
          target: '娄江枢纽',
          gate: '14m',
          gm: '3×5m3/s',
          x1: "7:00-9:00两台外排",
          x2: "",
          x3: "7:00-9:00两台外排",
          x4: "7:00-9:00两台外排",
          x5: "7:00-9:00两台外排",
          x6: "7:00-9:00两台外排",
          x7: "7:00-9:00两台外排",
        }, {
          area: '东线',
          unit: '河道处',
          target: '娄江枢纽',
          gate: '14m',
          gm: '3×5m3/s',
          x1: "7:00-9:00两台外排",
          x2: "",
          x3: "7:00-9:00两台外排",
          x4: "7:00-9:00两台外排",
          x5: "7:00-9:00两台外排",
          x6: "7:00-9:00两台外排",
          x7: "7:00-9:00两台外排",
        }, {
          area: '东线',
          unit: '河道处',
          target: '娄江枢纽',
          gate: '14m',
          gm: '3×5m3/s',
          x1: "7:00-9:00两台外排",
          x2: "",
          x3: "7:00-9:00两台外排",
          x4: "7:00-9:00两台外排",
          x5: "7:00-9:00两台外排",
          x6: "7:00-9:00两台外排",
          x7: "7:00-9:00两台外排",
        }, {
          area: '东线',
          unit: '河道处',
          target: '娄江枢纽',
          gate: '14m',
          gm: '3×5m3/s',
          x1: "7:00-9:00两台外排",
          x2: "",
          x3: "7:00-9:00两台外排",
          x4: "7:00-9:00两台外排",
          x5: "7:00-9:00两台外排",
          x6: "7:00-9:00两台外排",
          x7: "7:00-9:00两台外排",
        }, {
          area: '东线',
          unit: '河道处',
          target: '娄江枢纽',
          gate: '14m',
          gm: '3×5m3/s',
          x1: "7:00-9:00两台外排",
          x2: "",
          x3: "7:00-9:00两台外排",
          x4: "7:00-9:00两台外排",
          x5: "7:00-9:00两台外排",
          x6: "7:00-9:00两台外排",
          x7: "7:00-9:00两台外排",
        }, {
          area: '东线',
          unit: '河道处',
          target: '娄江枢纽',
          gate: '14m',
          gm: '3×5m3/s',
          x1: "7:00-9:00两台外排",
          x2: "",
          x3: "7:00-9:00两台外排",
          x4: "7:00-9:00两台外排",
          x5: "7:00-9:00两台外排",
          x6: "7:00-9:00两台外排",
          x7: "7:00-9:00两台外排",
        }, {
          area: '东线',
          unit: '河道处',
          target: '娄江枢纽',
          gate: '14m',
          gm: '3×5m3/s',
          x1: "7:00-9:00两台外排",
          x2: "",
          x3: "7:00-9:00两台外排",
          x4: "7:00-9:00两台外排",
          x5: "7:00-9:00两台外排",
          x6: "7:00-9:00两台外排",
          x7: "7:00-9:00两台外排",
        }, {
          area: '西线',
          unit: '河道处',
          target: '娄江枢纽',
          gate: '14m',
          gm: '3×5m3/s',
          x1: "7:00-9:00两台外排",
          x2: "",
          x3: "7:00-9:00两台外排",
          x4: "7:00-9:00两台外排",
          x5: "7:00-9:00两台外排",
          x6: "7:00-9:00两台外排",
          x7: "7:00-9:00两台外排",
        }, {
          area: '西线',
          unit: '河道处',
          target: '娄江枢纽',
          gate: '14m',
          gm: '3×5m3/s',
          x1: "7:00-9:00两台外排",
          x2: "",
          x3: "7:00-9:00两台外排",
          x4: "7:00-9:00两台外排",
          x5: "7:00-9:00两台外排",
          x6: "7:00-9:00两台外排",
          x7: "7:00-9:00两台外排",
        }]
      }
    },
    methods: {
      objectSpanMethod({
        row,
        column,
        rowIndex,
        columnIndex
      }) {
        const span = column['property'] + '-span'
        if (row[span]) {
          return row[span]
        }
      }
    },
    created() {
      this.tableData = mergeTableRow({
        data: this.list,
        mergeColNames: ["area"], // 需要合并的列，默认合并列相同的数据
        firstMergeColNames: ["area"], // 受影响的列，只合并以firstMerge为首的同类型数据
        firstMerge: 'area' // 以哪列为基础进行合并，一般为第一列
      })
    }
  }
</script>
