<template>
  <div class="quick-actions">
    <div class="actions-row">
      <button
        v-for="action in actions"
        :key="action.label"
        class="action-item"
        @click="handleClick(action.to)"
      >
        <div class="item-icon" :style="{ background: action.bgColor }">
          <component :is="getIconComponent(action.icon)" :style="{ color: action.color }" />
        </div>
        <span class="item-label">{{ action.label }}</span>
      </button>
    </div>
  </div>
</template>

<script>
import { UploadIcon, CloudUploadIcon, EditIcon, BulletpointIcon } from 'tdesign-icons-vue';

const iconMap = {
  upload: UploadIcon,
  'cloud-upload': CloudUploadIcon,
  edit: EditIcon,
  bulletpoint: BulletpointIcon,
};

export default {
  name: 'QuickActions',
  components: {
    UploadIcon,
    CloudUploadIcon,
    EditIcon,
    BulletpointIcon,
  },
  data() {
    return {
      actions: [
        { label: '发布服务', to: '/yhzx/tfwgj', icon: 'upload', bgColor: '#E6F8F0', color: '#344F3D' },
        { label: '发布数据', to: '/yhzx/tfwgj?action=publishData', icon: 'cloud-upload', bgColor: '#E6F8F0', color: '#344F3D' },
        { label: '发布需求', to: '/yhzx/tfwxq', icon: 'edit', bgColor: '#E6F8F0', color: '#344F3D' },
        { label: '资质申请', to: '/yhzx/zzgl', icon: 'bulletpoint', bgColor: '#E6F8F0', color: '#344F3D' },
      ],
    };
  },
  methods: {
    getIconComponent(name) {
      return iconMap[name] || UploadIcon;
    },
    handleClick(to) {
      this.$router.push(to);
    },
  },
};
</script>

<style lang="less" scoped>
@green-primary: #48C666;
@text-dark: #003B1A;
@text-link: #008CFF;
@bg-card: #FFFFFF;
@border-light: #E5E6EB;

.quick-actions {
  .actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px;
  cursor: pointer;
  background: @bg-card;
  border: none;
  border-radius: 4px;
  transition: background 0.2s ease;
  width: calc(33.33% - 6px);
  min-width: 0;

  &:hover {
    background: #F5F7FA;
  }

  .item-icon {
    display: flex;
    width: 36px;
    height: 36px;
    font-size: 16px;
    border-radius: 6px;
    align-items: center;
    justify-content: center;
  }

  .item-label {
    font-size: 12px;
    font-weight: 400;
    color: @text-dark;
    text-align: center;
    line-height: 1.67;
  }
}

@media (max-width: 1200px) {
  .quick-actions .actions-row {
    flex-wrap: wrap;
  }

  .action-item {
    min-width: 33.33%;
  }
}
</style>
