<!-- =============================================================================
// 企微IT智能服务台 — 转人工接管面板
// =============================================================================
// 说明：坐席对自动化会话执行「转人工接管」操作。
// ============================================================================= -->
<template>
  <el-card class="takeover-panel" shadow="never" :body-style="{ padding: '14px' }">
    <div class="panel-title">转人工接管</div>
    <el-alert
      type="info"
      :closable="false"
      title="接管后该会话将由人工坐席继续处理，自动化处置终止。"
      style="margin-bottom: 12px;"
    />
    <el-form label-width="80px">
      <el-form-item label="坐席ID">
        <el-input v-model="agentId" placeholder="当前坐席ID（默认本机）" />
      </el-form-item>
      <el-form-item label="接管说明">
        <el-input
          v-model="note"
          type="textarea"
          :rows="2"
          placeholder="可选，说明接管原因"
        />
      </el-form-item>
    </el-form>
    <div class="actions">
      <el-button type="primary" :loading="submitting" @click="onTakeover">
        确认接管
      </el-button>
    </div>
  </el-card>
</template>

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

const props = defineProps<{
  sessionId: string
  defaultAgentId?: string
}>()

const emit = defineEmits<{
  (e: 'takeover', payload: { agentId: string; note?: string }): void
}>()

const agentId = ref(props.defaultAgentId || '')
const note = ref('')
const submitting = ref(false)

async function onTakeover(): Promise<void> {
  if (!agentId.value) {
    return
  }
  submitting.value = true
  try {
    emit('takeover', { agentId: agentId.value, note: note.value || undefined })
  } finally {
    submitting.value = false
  }
}
</script>

<style scoped>
.takeover-panel {
  margin-top: 12px;
}
.panel-title {
  font-weight: 600;
  margin-bottom: 10px;
}
.actions {
  display: flex;
  justify-content: flex-end;
}
</style>
