
<script lang="ts" setup>
import { ref } from 'vue'
import { Delete } from '@element-plus/icons-vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import { Table } from '@/components/Table'
import useMessage from './composables'
import ConversationList from './conversation/index.vue'
import { searchSchemas } from './columns'
import { format } from 'path'
const activeName = ref('1')
const {
  schema,
  columns,
  register,
  handleSearch,
  methods,
  tableObject,
  pagination,
  handleDel
} = useMessage()

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

<template>
  <el-card>
    <el-tabs v-model="activeName">
      <el-tab-pane label="会话消息列表" name="1">
        <div class="mt-2">
          <Search :schema="searchSchemas" @search="handleSearch"/>
          <Table
            :columns="[...columns, actionColumn]"
            :data="tableObject.tableList"
            :pagination="pagination"
            @register="register"
          >
          <template #action="{row}">
            <el-button :icon="Delete" text type="danger" @click="methods.delList(row.id, false)" />
          </template>
        </Table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="会话窗口列表" name="2">
        <ConversationList />
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>

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