<template>
  <div
    class="node-card"
    :class="[nodeClass, node.type === 'cc' ? 'node-cc' : '']"
  >
    <div class="node-card-head">
      <span class="node-card-icon" :style="{ background: iconBg }">
        <el-icon><component :is="icon" /></el-icon>
      </span>
      <span class="node-card-name">{{ node.name }}</span>
      <template v-if="node.status !== 'neutral'">
        <span class="status-dot" :class="node.status" />
        <span class="status-text" :class="node.status">{{ statusText }}</span>
      </template>
      <span v-if="node.isMyTurn" class="my-turn-tag">待我处理</span>
    </div>

    <div v-if="node.type === 'cc'" class="cc-summary">抄送 · 已送达</div>

    <!-- 子节点列表 -->
    <template v-if="hasSubNodes">
      <div v-if="isExpanded" class="sub-node-list">
        <div
          v-for="(sub, si) in node.nodeProgress.subNodes"
          :key="sub.subNodeId"
          class="sub-node-item"
          :class="{ 'current-sub-node': sub.status === 'current' }"
        >
          <div class="sub-node-title">
            <span class="sub-node-index">{{ si + 1 }}</span>
            <span class="sub-node-name">{{ sub.subNodeName }}</span>
            <span class="status-text" :class="sub.status">{{ subStatusText(sub) }}</span>
            <span v-if="sub.isMyTurn" class="my-turn-tag">待我处理</span>
          </div>
          <div v-if="sub.tasks?.length" class="node-card-tasks">
            <div v-for="t in sub.tasks" :key="t.id" class="task-item">
              <span class="task-assignee">{{ t.assigneeName || '用户' + t.assigneeId }}</span>
              <span class="task-status" :class="taskStatusType(t.status)">{{ taskStatusText(t.status) }}</span>
              <span v-if="t.comment" class="task-comment">{{ t.comment }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="node-expand-btn" @click="emit('toggle-node', node.id)">
        {{ isExpanded ? '收起' : '展开' }} 子节点 ({{ node.nodeProgress.subNodes.length }})
      </div>
    </template>

    <!-- 任务分配信息（非子节点节点） -->
    <div v-if="!hasSubNodes && node.nodeProgress?.tasks?.length" class="node-card-tasks">
      <div v-for="t in node.nodeProgress.tasks" :key="t.id" class="task-item">
        <span class="task-assignee">{{ t.assigneeName || '用户' + t.assigneeId }}</span>
        <span class="task-status" :class="taskStatusType(t.status)">{{ taskStatusText(t.status) }}</span>
        <span v-if="t.comment" class="task-comment">{{ t.comment }}</span>
      </div>
    </div>

    <!-- 审批记录 -->
    <div v-if="nodeRecords.length" class="node-card-records">
      <div v-for="r in nodeRecords" :key="r.id" class="record-item">
        <span class="record-operator">{{ r.operatorName || '用户' + r.operatorId }}</span>
        <span class="record-action" :class="recordActionType(r.actionResult)">{{ recordActionText(r.actionResult) }}</span>
        <span v-if="r.comment" class="record-comment">{{ r.comment }}</span>
        <span v-if="r.createTime" class="record-time">{{ r.createTime }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { CircleCheck, Clock, VideoPlay, User, Message } from '@element-plus/icons-vue'
import { taskStatusText, taskStatusType, recordActionText, recordActionType } from '@/utils/flow'
import type { FlowLayoutNode } from '@/utils/flowLayout'

const props = defineProps<{
  node: FlowLayoutNode
  isExpanded: boolean
}>()

const emit = defineEmits<{
  (e: 'toggle-node', id: string): void
}>()

const isEndpoint = computed(() => props.node.type === 'start' || props.node.type === 'end')
const isStart = computed(() => props.node.type === 'start')
const isEnd = computed(() => props.node.type === 'end')

const icon = computed(() => {
  if (props.node.type === 'start') return VideoPlay
  if (props.node.type === 'end') return CircleCheck
  if (props.node.type === 'cc') return Message
  return User
})

const iconBg = computed(() => {
  if (isStart.value) return '#67C23A'
  if (isEnd.value) return '#F56C6C'
  if (props.node.type === 'cc') return '#E6A23C'
  return '#409EFF'
})

const statusText = computed(() => {
  switch (props.node.status) {
    case 'completed':
      return '已完成'
    case 'current':
      return '进行中'
    case 'passed':
      return '已走过'
    case 'pending':
      return '待处理'
    default:
      return ''
  }
})

const nodeClass = computed(() => props.node.status)

const hasSubNodes = computed(() => !!props.node.nodeProgress?.subNodes?.length)
const nodeRecords = computed(() => props.node.records || [])

function subStatusText(sub: { status: string }): string {
  if (sub.status === 'completed') return '已完成'
  if (sub.status === 'current') return '进行中'
  return '待处理'
}
</script>

<style scoped>
.node-card {
  background: #fff;
  border: 1px solid #ebeef5;
  border-left: 4px solid #909399;
  border-radius: 6px;
  padding: 8px 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.2s;
}
.node-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.node-card.completed {
  border-left-color: #67c23a;
}
.node-card.current {
  border-left-color: #e6a23c;
  background: #fdf6ec;
}
.node-card.pending {
  border-left-color: #c0c4cc;
}
.node-card.passed {
  border-left-color: #67c23a;
  background: #f0f9eb;
}
.node-card.neutral {
  border-left-color: #909399;
}
.node-card-head {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.node-card-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  flex-shrink: 0;
}
.node-card-name {
  font-size: 13px;
  font-weight: 600;
  color: #303133;
  flex: 1;
  min-width: 0;
}
.node-branch-tag {
  font-size: 11px;
  color: #909399;
  background: #f4f4f5;
  padding: 0 6px;
  border-radius: 3px;
}
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-dot.completed {
  background: #67c23a;
}
.status-dot.current {
  background: #e6a23c;
}
.status-dot.pending {
  background: #c0c4cc;
}
.status-dot.passed {
  background: #67c23a;
}
.status-text {
  font-size: 12px;
}
.status-text.completed {
  color: #67c23a;
}
.status-text.current {
  color: #e6a23c;
}
.status-text.passed {
  color: #67c23a;
}
.status-text.pending {
  color: #909399;
}
.my-turn-tag {
  font-size: 11px;
  color: #fff;
  background: #f56c6c;
  border-radius: 3px;
  padding: 0 6px;
  line-height: 18px;
}
.cc-summary {
  margin-top: 4px;
  font-size: 12px;
  color: #909399;
}
.node-card-tasks {
  margin-top: 6px;
  padding-left: 4px;
}
.task-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #606266;
  padding: 2px 0;
}
.task-assignee {
  font-weight: 600;
}
.task-status {
  font-size: 11px;
}
.task-comment {
  color: #909399;
}
.node-card-records {
  margin-top: 6px;
  padding-left: 4px;
  border-top: 1px dashed #ebeef5;
}
.record-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #606266;
  padding: 3px 0;
  flex-wrap: wrap;
}
.record-operator {
  font-weight: 600;
}
.record-action {
  font-size: 11px;
}
.record-comment {
  color: #909399;
}
.record-time {
  color: #c0c4cc;
  margin-left: auto;
}
.sub-node-list {
  margin-top: 8px;
  padding-left: 6px;
  border-left: 2px solid #e4e7ed;
}
.sub-node-item {
  padding: 6px 8px;
  margin-bottom: 6px;
  background: #fafafa;
  border-radius: 4px;
}
.sub-node-item.current-sub-node {
  background: #fdf6ec;
  border: 1px solid #f5dab1;
}
.sub-node-title {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.sub-node-index {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #409eff;
  color: #fff;
  font-size: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sub-node-name {
  font-size: 12px;
  font-weight: 600;
  color: #303133;
}
.node-expand-btn {
  margin-top: 6px;
  font-size: 12px;
  color: #409eff;
  cursor: pointer;
  user-select: none;
}
.node-expand-btn:hover {
  color: #79bbff;
}
</style>
