<template>
  <section class="table">
    <def-table
      :data="tableData"
      :list="tableColumnList"
      v-bind="tableOptions"
      @cellConfirm="handleCellConfirm"
      @rowAdd="handleRowAdd"
      @rowConfirm="handleRowConfirm"
      @rowDelete="handleRowDelete">
      <template #name="{ row, $index }"> {{ row['name'] }} &#45;&#45; {{ $index }} </template>
    </def-table>
  </section>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { IElTable, ITableColumn } from '@/base-ui/table/types'

export interface ITableData {
  id: string | number
  date: string | Date
  name: string
  address: string
}
// 表格数据
const tableData = ref<ITableData[]>([])
// 表格项配置
const tableColumnList: ITableColumn[] = [
  {
    label: '时间',
    prop: 'date',
    icon: 'timer'
  },
  {
    label: '姓名',
    prop: 'name',
    icon: 'user',
    editable: true
  },
  {
    label: '地址',
    prop: 'address'
  },
  {
    label: '操作项',
    prop: 'action',
    action: true
  }
]
// 表单配置
const tableOptions: IElTable = {
  stripe: true,
  border: true
}
setTimeout(() => {
  tableData.value = [
    {
      id: '001',
      date: '2016-05-03',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles'
    },
    {
      id: '002',
      date: '2016-05-02',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles'
    },
    {
      id: '003',
      date: '2016-05-04',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles'
    },
    {
      id: '004',
      date: '2016-05-01',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles'
    }
  ]
}, 200)
const handleCellConfirm = (row: ITableData) => {
  console.log('父组件触发并接受参数 - handleCellConfirm', row)
}
const handleRowAdd = () => {
  console.log('父组件触发 - handleRowAdd')
}
const handleRowConfirm = (row: ITableData) => {
  console.log('父组件触发并接受参数 - handleRowConfirm', row)
}
const handleRowDelete = (row: ITableData) => {
  console.log('父组件触发并接受参数 - handleRowDelete', row)
}
</script>

<style scoped lang="scss">
.table {
}
</style>
