<template>
    <CommonTable
          :data="tableData"
          :columns="columns"
          :group="{ productType: '' }"
      >
        <template v-slot:middle>
          <TableColumn title="中间插槽" key="test1">
            <template v-slot:template="[data, index]">
              <span v-ellipsis>哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈啊哈哈哈啊</span>
            </template>
          </TableColumn>
        </template>
        <TableColumn fixed="right" title="操作" key="test2">
          <template v-slot:template="[data, index]">
            <div>
              <Button type="link">编辑</Button>
              <Button type="link">删除</Button>
            </div>
          </template>
        </TableColumn>
    </CommonTable>
</template>

<script setup>
import { ref } from 'vue';
import { ellipsis } from '@ksconsole/hooks'

const vEllipsis = ellipsis();

const tableData = ref([
  {
    "productType": 0,
    "instanceName": "dns_65eefc77-930d-4270-a228-3c6d7220c816",
    "instanceType": 1,
    "region": "cn-shanghai-2"
  },
  {
    "productType": 0,
    "instanceName": "dns_65eefc77-930d-4270-a228-3c6d7220c816",
    "instanceType": 1,
    "region": "cn-shanghai-2"
  },
  {
    "productType": 0,
    "instanceName": "dns_65eefc77-930d-4270-a228-3c6d7220c816",
    "instanceType": 1,
    "region": "cn-shanghai-2"
  },
])
const columns = [
  {
    key: "instanceType",
    title: "普通",
  },
  {
    type: 'slot',
    slotName: 'middle'
  },
  {
    type: 'format',
    key: "productType",
    title: "文本格式化",
    format([data, row, i]) {
      return `自定义${row.instanceType + i}`
    },
    group: [
      {label: '全部', value: ''},
      {label: '运行中', value: 'active'},
      {label: '已关闭', value: 'stopped'}
    ]
  },
  {
    key: "instanceName",
    title: "link可点击带回调",
    type: 'link',
    click: ([val, row, i]) => {
      alert(`我被点击了${val}`)
    },
    format([data, row, i]) {
      return `别看了点我`
    },
  },
  {
    key: "region",
    title: "状态",
    type: 'status',
    width: 100,
    props([data, row, i]) {
      const isOdd = i % 2 === 0
      return {
        type: isOdd ? 'success' : 'error',
        text: isOdd ? '正常' : '异常'
      }
    }
  }
];
</script>
