<script setup lang="ts">
import { h } from 'vue';

import { Button, Popconfirm, Table, Tag } from 'ant-design-vue';

defineProps<{
  tableInfo: any;
}>();

const emit = defineEmits<{
  'add-index': [];
  'delete-index': [indexName: string];
}>();

const columns = [
  { title: '索引名', dataIndex: 'name', key: 'name' },
  {
    title: '字段',
    dataIndex: 'columns',
    key: 'columns',
    customRender: ({ text }: any) => text.join(', '),
  },
  {
    title: '唯一',
    dataIndex: 'unique',
    key: 'unique',
    customRender: ({ text }: any) =>
      h(Tag, { color: text ? 'green' : 'default' }, () => text ? '是' : '否'),
  },
  { title: '类型', dataIndex: 'type', key: 'type' },
  {
    title: '操作',
    key: 'action',
    width: 120,
    customRender: ({ record }: any) =>
      h(Popconfirm, {
        title: '确定删除此索引吗？',
        onConfirm: () => emit('delete-index', record.name),
      }, {
        default: () =>
          h(Button, {
            type: 'link',
            danger: true,
            size: 'small',
          }, () => '删除'),
      }),
  },
];
</script>

<template>
  <div>
    <div class="mb-4">
      <Button type="primary" @click="emit('add-index')">
        <i class="fa-solid fa-plus mr-2"></i>添加索引
      </Button>
    </div>
    <Table
      :columns="columns"
      :data-source="tableInfo?.indexes || []"
      :pagination="false"
      size="small"
    />
  </div>
</template>
