<template>
  <div class="demo-table-group-column">
    <ui-table
      :data-source="dataSource"
      :columns="columns"
      :height="500"
      theme="striped-bordered"></ui-table>

    <ui-button
      @click="addColumn">
      添加一列
    </ui-button>
    &nbsp;
    <ui-button
      :disabled="columns.length === 3"
      @click="removeColumn">
      移除一列
    </ui-button>
  </div>
</template>

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

const dataSource = []

const columns = [
  {
    title: "Name",
    dataIndex: "name",
    key: "name",
    width: 100,
    fixed: "left",
    filters: [
      {
        label: "Joe",
        value: "Joe",
      },
      {
        label: "John",
        value: "John",
      },
    ],
    onFilter: (value, record) => record.name.indexOf(value) === 0,
  },
  {
    title: "Other",
    children: [
      {
        title: "Age",
        dataIndex: "age",
        key: "age",
        width: 80,
        sorter: (a, b) => a.age - b.age,
        defaultSort: "asc",
      },
      {
        title: "Address",
        children: [
          {
            title: "Street",
            dataIndex: "street",
            key: "street",
            width: 200,
          },
          {
            title: "Block",
            children: [
              {
                title: "Building",
                dataIndex: "building",
                key: "building",
                width: 100,
              },
              {
                title: "Door No.",
                dataIndex: "number",
                key: "number",
                width: 100,
              },
            ],
          },
        ],
      },
    ],
  },
  {
    title: "Company",
    children: [
      {
        title: "Company Address",
        dataIndex: "companyAddress",
        key: "companyAddress",
        width: 200,
      },
      {
        title: "Company Name",
        dataIndex: "companyName",
        key: "companyName",
        width: 200,
      },
    ],
  },
]

const dictionary = "abcde"

export default {
  components: {
    "ui-table": Table,
    "ui-button": Button,
  },
  data() {
    return {
      dataSource: dataSource,
      columns: columns,
    }
  },
  mounted() {
    setTimeout(() => {
      this.loadData()
    }, 200)
  },
  methods: {
    loadData() {
      let arr = []
      for (let i = 0; i < 100; i++) {
        arr.push({
          key: i,
          name: i % 2 === 0 ? "Joe Lewis" : "John Brown",
          age: parseInt(Math.random() * 100 + 10),
          street: "Lake Park",
          building: dictionary[i % 5].toUpperCase(),
          number: 2035 + i,
          companyAddress: `Lake Street ${i}`,
          companyName: "SoftLake Co",
          gender: i % 2 === 0 ? "Male" : "Famale",
        })
      }
      this.dataSource = arr
    },
    addColumn() {
      this.columns.push({
        title: "Gender",
        dataIndex: "gender",
        key: "gender",
        fixed: "right",
      })
    },
    removeColumn() {
      this.columns.pop()
    },
  },
}
</script>

<style lang="scss">
.demo-table-group-column {
  table {
    display: table;
  }
}
</style>
