<template>
  <div>
    <ynet-table-columns :data="data" :columns="columns" />
  </div>
</template>

<script lang="tsx">
import { ElTableColumnCtx } from '@/types/table'
import YnetTableColumns from 'common/components/basic/table-columns/index.vue'
import { formatUpperAmt } from 'common/utils/format'
import { defineComponent } from 'vue-demi'

type DataItem = {
  id: string
  date: string
  time: string
  amount: string
  desc: string
}

const data: Array<DataItem> = [
  {
    id: '010101',
    date: '2022-04-19',
    time: '11:10',
    amount: '1023',
    desc: '哈哈哈哈哈哈哈哈哈哈哈哈这是一段超出范围的描述'
  },
  {
    id: '010101',
    date: '2022-04-19',
    time: '11:10',
    amount: '1023',
    desc: '哈哈哈哈哈哈哈哈哈哈哈哈这是一段超出范围的描述'
  },
  {
    id: '010101',
    date: '2022-04-19',
    time: '11:10',
    amount: '1023',
    desc: '哈哈哈哈哈哈哈哈哈哈哈哈这是一段超出范围的描述'
  }
]

const columns: Array<ElTableColumnCtx<DataItem>> = [
  {
    prop: 'id',
    label: '编号'
  },
  {
    prop: 'date',
    label: '日期'
  },
  {
    prop: 'time',
    label: '时间',
    formatter (row, column, value) {
      return <span style="color: red;">{ value }</span>
    }
  },
  {
    prop: 'amount',
    label: '金额',
    formatter: (row, column, value) => {
      return formatUpperAmt(value)
    }
  },
  {
    prop: 'desc',
    label: '描述',
    width: '100px',
    showOverflowTooltip: true
  }
]

export default defineComponent({
  name: 'TableColumnsExample',
  components: {
    YnetTableColumns
  },
  setup () {
    return {
      data,
      columns
    }
  }
})
</script>

<style>

</style>
