<template>
  <div class="demo-table-group">
    <ui-table
      :data-source="dataSource"
      :columns="columns"
      :span-method="spanMethod"
      theme="striped-bordered"></ui-table>
  </div>
</template>

<script>
import { Table } from "amumu-ui"

const dataSource = [
  {
    name: "John Brown",
    age: 32,
    tel: "0571-22098909",
    phone: 18889898989,
    address: "New York No. 1 Lake Park",
  },
  {
    name: "Jim Green",
    tel: "0571-22098333",
    phone: 18889898888,
    age: 42,
    address: "London No. 1 Lake Park",
  },
  {
    name: "Joe Black",
    age: 32,
    tel: "0575-22098909",
    phone: 18900010002,
    address: "Sidney No. 1 Lake Park",
  },
  {
    name: "Jim Red",
    age: 18,
    tel: "0575-22098909",
    phone: 18900010002,
    address: "London No. 2 Lake Park",
  },
  {
    name: "Jake White",
    age: 18,
    tel: "0575-22098909",
    phone: 18900010002,
    address: "Dublin No. 2 Lake Park",
  },
]

const columns = [
  {
    title: "Name",
    key: "name",
  },
  {
    title: "Age",
    key: "age",
  },
  {
    title: "Home phone",
    colSpan: 2,
    key: "tel",
  },
  {
    title: "Phone",
    colSpan: 0,
    key: "phone",
  },
  {
    title: "Address",
    key: "address",
  },
]

export default {
  components: {
    "ui-table": Table,
  },
  data() {
    return {
      dataSource: dataSource,
      columns: columns,
    }
  },
  methods: {
    spanMethod({ rowIndex, colIndex }) {
      if (rowIndex === 4) {
        return {
          colSpan: colIndex === 0 ? 5 : 0,
        }
      }

      if (rowIndex === 2 && colIndex === 2) {
        return {
          rowSpan: 2,
        }
      }

      if (rowIndex === 3 && colIndex === 2) {
        return {
          rowSpan: 0,
        }
      }

      return {}
    },
  },
}
</script>
