<!-- QuickActions 快捷操作 -->
<script setup lang="ts">
const quickActions = ref([
  {
    id: 'create-approval',
    title: '创建审批',
    icon: 'DocumentChecked',
    color: '#f59e0b',
    handler: () => {
      ElMessage.info('创建审批');
      // TODO: Navigate to approval creation page
    }
  },
  {
    id: 'add-dealer',
    title: '新增经销商',
    icon: 'Shop',
    color: '#22c55e',
    handler: () => {
      ElMessage.info('新增经销商');
      // TODO: Navigate to dealer creation page
    }
  },
  {
    id: 'new-customer',
    title: '新建客户',
    icon: 'User',
    color: '#1d5af3',
    handler: () => {
      ElMessage.info('新建客户');
      // TODO: Navigate to CRM creation page
    }
  },
  {
    id: 'create-order',
    title: '创建订单',
    icon: 'Truck',
    color: '#ef4444',
    handler: () => {
      ElMessage.info('创建订单');
      // TODO: Navigate to supply order creation page
    }
  },
  {
    id: 'agent-center',
    title: 'AI 智能体中心',
    icon: 'Avatar',
    color: '#8b5cf6',
    handler: () => {
      ElMessage.info('AI 智能体中心');
      // TODO: Open AI agent center (moved from sidebar footer)
    }
  },
  {
    id: 'knowledge-base',
    title: '知识库管理',
    icon: 'FolderOpened',
    color: '#06b6d4',
    handler: () => {
      ElMessage.info('知识库管理');
      // TODO: Open knowledge base management (moved from sidebar footer)
    }
  }
]);
</script>

<template>
  <div class="quick-actions-card">
    <div class="card-header">
      <h3 class="card-title">快捷操作</h3>
    </div>

    <div class="card-body">
      <div class="action-grid">
        <div
          v-for="action in quickActions"
          :key="action.id"
          class="action-item"
          @click="action.handler"
        >
          <el-icon class="action-icon" :style="{ color: action.color }">
            <component :is="action.icon" />
          </el-icon>
          <span class="action-title">{{ action.title }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.quick-actions-card {
  background-color: #ffffff;
  border-radius: var(--radius-lg);
  padding: 20px;
  border: 1px solid var(--color-border);

  .card-header {
    margin-bottom: 16px;

    .card-title {
      font-size: 16px;
      font-weight: 600;
      color: var(--color-text-primary);
      margin: 0;
    }
  }

  .card-body {
    .action-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;

      .action-item {
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: center;
        justify-content: center;
        padding: 16px 12px;
        border-radius: var(--radius-md);
        background-color: var(--color-bg-light);
        cursor: pointer;
        transition: all var(--transition);

        &:hover {
          background-color: var(--color-bg);
          transform: translateY(-2px);
          box-shadow: var(--shadow-sm);
        }

        .action-icon {
          width: 32px;
          height: 32px;
          font-size: 32px;
        }

        .action-title {
          font-size: 12px;
          font-weight: 500;
          color: var(--color-text-secondary);
          text-align: center;
        }
      }
    }
  }
}

@media (max-width: 600px) {
  .quick-actions-card .card-body .action-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
</style>