

<script lang="ts" setup>
  import { Delete, View } from '@element-plus/icons-vue'
  import { Table } from '@/components/Table'
  import useConversation from './composables'
  import InfoList from './components/InfoList.vue'
  import { searchSchemas } from './columns'

  const {
    columns,
    register,
    handleSearch,
    methods,
    tableObject,
    pagination,
    handleShowInfo,
    infoRef
  } = useConversation()

  const actionColumn = {
    label: '操作',
    field: 'action',
    width: 80,
    fixed: 'right',
    align: 'center'
  }
</script>

<template>
  <div class="mt-2">
    <Search :schema="searchSchemas" inline @search="handleSearch" />

    <Table :columns="[...columns, actionColumn]" :data="tableObject.tableList" :pagination="pagination" @register="register">
      <template #action="{ row }">
        <el-button :icon="View" text type="primary" @click="handleShowInfo(row)" />
        <el-button :icon="Delete" text type="danger" @click="methods.delList(row.id, false)" />
      </template>
    </Table>

    <InfoList ref="infoRef" />
  </div>
</template>

<style lang="scss" scoped></style>
