## 概述

ConversationActions 组件负责单条会话的操作，默认支持删除、置顶、免打扰和标记未读/已读。

## 基础用法

在 `ConversationList` 中，可以通过 `actionsConfig` 属性快速自定义会话操作。
``` typescript
<template>
  <UIKitProvider>
    <ConversationList :actions-config="actionsConfig" />
  </UIKitProvider>
</template>

<script setup lang="ts">
import { UIKitProvider, ConversationList } from '@tencentcloud/chat-uikit-vue3';
import type { ConversationModel } from '@tencentcloud/chat-uikit-vue3';

const actionsConfig = {
  enablePin: false,
  onConversationDelete: (conversation: ConversationModel) => {
    console.log('Delete conversation success');
  },
  customConversationActions: {
    'custom-actions-1': {
      label: 'custom-actions',
      onClick: (conversation: ConversationModel) => {
        console.log(conversation);
      },
    },
  },
};
</script>
```

## 高阶用法

如果需要更深度的定制，可以直接替换 `ConversationList` 的 `ConversationActions` 属性。
``` typescript
<template>
  <UIKitProvider>
    <ConversationList
      :ConversationActions="CustomConversationActions"
    />
  </UIKitProvider>
</template>

<script setup lang="ts">
import { defineComponent } from 'vue';
import { UIKitProvider, ConversationList, ConversationActions } from '@tencentcloud/chat-uikit-vue3';
import type { ConversationActionsProps } from '@tencentcloud/chat-uikit-vue3';

const CustomConversationActions = defineComponent({
  name: 'CustomConversationActions',
  setup(props: ConversationActionsProps) {
    return () => h(ConversationActions, {
      ...props,
      enableDelete: false
    });
  }
});
</script>
```

## Props

ConversationActions 组件的接口类型 `ConversationActionsProps` 基于 `ConversationActionsConfig` 接口进行扩展。

### ConversationActionsProps
| 参数名 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| conversation(Required) | ConversationModel | - | 必选参数，表示当前渲染会话操作对应的会话 |
| className | string | - | 自定义根元素的类名 |
| style | CSSProperties | - | 自定义根元素的样式 |

### ConversationActionsConfig
| 参数名 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| enablePin | boolean | true | 是否显示置顶功能按钮 |
| enableMute | boolean | true | 是否显示免打扰功能按钮 |
| enableDelete | boolean | true | 是否显示删除功能按钮 |
| enableMarkUnread | boolean | true | 是否显示标记未读功能按钮 |
| onMarkConversationUnread | (conversation: ConversationModel, e?: Event) => void | - | 自定义标记未读/已读会话的行为 |
| onConversationPin | (conversation: ConversationModel, e?: Event) => void | - | 自定义置顶/取消置顶会话的行为 |
| onConversationMute | (conversation: ConversationModel, e?: Event) => void | - | 自定义免打扰/取消免打扰会话的行为 |
| onConversationDelete | (conversation: ConversationModel, e?: Event) => void | - | 自定义删除会话的行为 |
| customConversationActions | Record<string, ConversationActionItem> | - | 自定义会话操作项 |
| PopupIcon | any | - | 自定义动作弹窗的图标 |
| PopupElements | any[] | - | 自定义动作弹窗的内容 |
| onClick | (e: Event, key?: string, conversation?: ConversationModel) => void | - | 点击动作项时的回调函数 |
| onClose | () => void | - | 关闭动作弹窗时的回调函数（H5 专用） |

### ConversationActionItem
| 参数名 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| enable | boolean | true | 是否启用自定义操作项 |
| label | string | - | 自定义操作项的展示内容 |
| onClick | (conversation: ConversationModel, e?: Event) => void | - | 点击自定义操作项时的回调函数 |

## Events
| 事件名 | 参数 | 说明 |
| --- | --- | --- |
| click | (e: Event, key?: string, conversation?: ConversationModel) | 点击操作项时触发 |
| close | () | 关闭操作弹窗时触发 |
| markConversationUnread | (conversation: ConversationModel, e?: Event) | 标记会话未读/已读时触发 |
| conversationPin | (conversation: ConversationModel, e?: Event) | 置顶/取消置顶会话时触发 |
| conversationMute | (conversation: ConversationModel, e?: Event) | 免打扰/取消免打扰会话时触发 |
| conversationDelete | (conversation: ConversationModel, e?: Event) | 删除会话时触发 |

## 自定义组件

### 基础功能开关

通过设置 `enablePin`、`enableDelete`、`enableMute` 和 `enableMarkUnread` 参数，您可以灵活地控制 `ConversationActions` 中的会话置顶、会话免打扰、会话删除和标记未读的显示。
``` typescript
<template>
  <!-- 禁用置顶功能 -->
  <ConversationActions :enablePin="false" :conversation="conversation" />

  <!-- 禁用删除功能 -->
  <ConversationActions :enableDelete="false" :conversation="conversation" />

  <!-- 禁用免打扰功能 -->
  <ConversationActions :enableMute="false" :conversation="conversation" />

  <!-- 禁用标记未读功能 -->
  <ConversationActions :enableMarkUnread="false" :conversation="conversation" />
</template>
```
| `enablePin: false` | `enableDelete: false` | `enableMute: false` | enableMarkUnread="false" |
| --- | --- | --- | --- |
|  |  |  |  |

### 事件响应

ConversationActions 组件默认支持会话删除、会话置顶/取消置顶、会话免打扰/取消免打扰、标记未读/已读功能，如已有功能的事件响应不符合您的需求，您可以自定义事件响应处理函数并进行覆盖；除了支持对于功能事件响应的自定义外，您还可以通过 `@click` 获取基础点击事件响应。
``` typescript
<template>
  <ConversationList :conversation-actions="CustomConversationActions" />
</template>

<script setup lang="ts">
import { defineComponent, h } from 'vue';
import { ConversationActions, Toast } from '@tencentcloud/chat-uikit-vue3';
import type { ConversationActionsProps, ConversationModel } from '@tencentcloud/chat-uikit-vue3';

const CustomConversationActions = defineComponent({
  name: 'CustomConversationActions',
  setup(props: ConversationActionsProps) {
    const handleConversationDelete = (conversation: ConversationModel) => {
      conversation.deleteConversation().then(() => {
        console.log('delete conversation successfully!');
      }).catch(() => {
        console.log('delete conversation failed!');
      });
    };

    return () => h(ConversationActions, {
      ...props,
      onConversationDelete: handleConversationDelete
    });
  }
});
</script>
```

### 自定义操作

customConversationActions 用于在 ConversationActions 上新增自定义操作项列表。

**示例：新增自定义操作项**
``` typescript
<template>
  <ConversationList :ConversationActions="CustomConversationActions" />
</template>

<script setup lang="ts">
import { defineComponent, h } from 'vue';
import { ConversationActions } from '@tencentcloud/chat-uikit-vue3';
import type { ConversationActionsProps, ConversationModel } from '@tencentcloud/chat-uikit-vue3';

const CustomConversationActions = defineComponent({
  name: 'CustomConversationActions',
  setup(props: ConversationActionsProps) {
    return () => h(ConversationActions, {
      ...props,
      customConversationActions: {
        'custom-actions-1': {
          label: 'custom-actions',
          onClick: (conversation: ConversationModel) => {
            console.log(conversation);
          },
        },
      }
    });
  }
});
</script>
```

### UI 界面定制

您可以通过 `PopupIcon` 参数定制唤醒弹出按钮样式，通过 `PopupElements` 定制弹出内容。

**示例：自定义唤起按钮**
``` typescript
<template>
  <ConversationList :ConversationActions="CustomConversationActions" />
</template>

<script setup lang="ts">
import { defineComponent, h } from 'vue';
import { ConversationActions } from '@tencentcloud/chat-uikit-vue3';
import type { ConversationActionsProps } from '@tencentcloud/chat-uikit-vue3';

const CustomConversationActions = defineComponent({
  name: 'CustomConversationActions',
  setup(props: ConversationActionsProps) {
    const customIcon = h('div', '自定义 Icon');

    return () => h(ConversationActions, {
      ...props,
      PopupIcon: customIcon
    });
  }
});
</script>
```