<!-- =============================================================================
// 企微IT智能服务台 — 审批单详情子视图
// =============================================================================
// 说明：TaskDetailView 中 type=approval 的子视图
// 功能：
//   1. 审批内容卡片（申请人/类型/预算/附件）
//   2. 审批意见输入区（textarea）
//   3. 底部操作按钮（审批通过/拒绝审批/转交审批）
// ============================================================================= -->

<template>
  <div class="approval-detail">
    <!-- ================================================================== -->
    <!-- 审批内容卡片 -->
    <!-- ================================================================== -->
    <div class="tic-card">
      <div class="tic-card-title">📝 审批内容</div>
      <div class="tic-row">
        <span class="tic-label">申请人</span>
        <span class="tic-value">{{ todoItem.description?.applicant || '—' }}</span>
      </div>
      <div class="tic-row">
        <span class="tic-label">类型</span>
        <span class="tic-value">{{ todoItem.description?.approval_type || '—' }}</span>
      </div>
      <div class="tic-row">
        <span class="tic-label">预算</span>
        <span class="tic-value">{{ todoItem.description?.budget ? `¥${todoItem.description.budget}` : '—' }}</span>
      </div>
      <div class="tic-row">
        <span class="tic-label">附件</span>
        <span class="tic-value">
          <span v-if="todoItem.description?.attachments?.length">
            <span v-for="(att, idx) in todoItem.description.attachments" :key="idx" class="apv-attachment">
              📎 {{ att }}
            </span>
          </span>
          <span v-else>无</span>
        </span>
      </div>
      <div class="tic-row">
        <span class="tic-label">说明</span>
        <span class="tic-value tic-desc">{{ todoItem.description?.detail || todoItem.description?.description || '—' }}</span>
      </div>
    </div>

    <!-- ================================================================== -->
    <!-- 审批意见输入区 -->
    <!-- ================================================================== -->
    <div class="tic-card">
      <div class="tic-card-title">✏️ 审批意见</div>
      <el-input
        v-model="approvalComment"
        type="textarea"
        :rows="4"
        placeholder="请输入审批意见..."
        resize="none"
        class="apv-textarea"
      />
    </div>

    <!-- ================================================================== -->
    <!-- 底部操作按钮 -->
    <!-- ================================================================== -->
    <div class="tic-actions">
      <button class="tic-action-btn tic-action-success" @click="$emit('action', '审批通过')">
        ✅ 审批通过
      </button>
      <button class="tic-action-btn tic-action-danger" @click="$emit('action', '拒绝审批')">
        ❌ 拒绝审批
      </button>
      <button class="tic-action-btn" @click="$emit('action', '转交审批')">
        🔄 转交审批
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
// ============================================================================
// 导入
// ============================================================================
import { ref } from 'vue'
import type { TodoItemData } from '@/api/todo'

// ============================================================================
// Props
// ============================================================================

interface Props {
  /** 当前选中的待办事项 */
  todoItem: TodoItemData
}

defineProps<Props>()

// ============================================================================
// Emits
// ============================================================================

interface Emits {
  /** 操作按钮事件 */
  (e: 'action', action: string): void
}

defineEmits<Emits>()

// ============================================================================
// 状态
// ============================================================================

/** 审批意见文本 */
const approvalComment = ref<string>('')
</script>

<style scoped>
.approval-detail {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ---- 通用卡片 ---- */
.tic-card {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
}

.tic-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-light);
}

.tic-row {
  display: flex;
  align-items: flex-start;
  padding: 5px 0;
}

.tic-label {
  width: 70px;
  flex-shrink: 0;
  font-size: 13px;
  color: var(--text-tertiary);
}

.tic-value {
  flex: 1;
  font-size: 13px;
  color: var(--text-primary);
  word-break: break-word;
}

.tic-desc {
  line-height: 1.5;
  white-space: pre-wrap;
}

/* ---- 附件标签 ---- */
.apv-attachment {
  display: inline-block;
  margin-right: 8px;
  margin-bottom: 4px;
  font-size: 12px;
  color: var(--accent);
  cursor: pointer;
}

.apv-attachment:hover {
  text-decoration: underline;
}

/* ---- 审批意见输入区 ---- */
.apv-textarea :deep(.el-textarea__inner) {
  background-color: var(--bg-tertiary);
  border-color: var(--border-color);
  border-radius: var(--radius-md);
  font-size: 13px;
  line-height: 1.5;
}

.apv-textarea :deep(.el-textarea__inner:focus) {
  border-color: var(--accent);
}

/* ---- 操作按钮 ---- */
.tic-actions {
  display: flex;
  gap: 8px;
  padding: 8px 0;
  flex-wrap: wrap;
}

.tic-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.tic-action-btn:hover {
  background-color: var(--bg-hover);
  border-color: var(--accent);
  color: var(--accent);
}

.tic-action-success {
  background-color: var(--color-success);
  color: var(--bg-secondary);
  border-color: var(--color-success);
}

.tic-action-success:hover {
  opacity: 0.9;
  color: var(--bg-secondary);
}

.tic-action-danger {
  background-color: var(--color-danger);
  color: var(--bg-secondary);
  border-color: var(--color-danger);
}

.tic-action-danger:hover {
  opacity: 0.9;
  color: var(--bg-secondary);
}
</style>
