<script lang="ts" setup>
  import { MoreOutlined, LineChartOutlined } from '@ant-design/icons-vue';
  import { DropMenu } from '/@/components/Dropdown';
  import Dropdown from '/@/components/Dropdown/src/Dropdown.vue';
  import { Tooltip } from 'ant-design-vue';
  import SvgIcon from '/@/components/Icon/src/SvgIcon.vue';
  import { MoreActionEvent } from '../../config/config';

  const emit = defineEmits(['action']);

  const dropMenuList: DropMenu[] = [
    {
      text: '编辑组件',
      event: MoreActionEvent.EDIT,
      icon: 'ant-design:edit-outlined',
    },
    {
      text: '复制组件',
      event: MoreActionEvent.COPY,
      icon: 'ant-design:copy-outlined',
    },
    {
      text: '删除组件',
      event: MoreActionEvent.DELETE,
      icon: 'ant-design:delete-outlined',
    },
  ];

  const handleMenuEvent = (event: DropMenu) => {
    emit('action', event);
  };
</script>

<template>
  <div class="flex justify-between">
    <div class="flex flex-auto">
      <div v-for="item in 3" class="flex mx-2" :key="item">
        <div class="flex items-center">
          <Tooltip>
            <SvgIcon name="online" prefix="iconfont" class="!fill-emerald-400" />
          </Tooltip>
          <span class="truncate max-w-25 ml-2">设备名称{{ item }}</span>
        </div>
      </div>
    </div>
    <div class="flex items-center wx-9">
      <Tooltip title="趋势">
        <LineChartOutlined class="cursor-pointer mx-2" />
      </Tooltip>
      <Dropdown :drop-menu-list="dropMenuList" :trigger="['click']" @menu-event="handleMenuEvent">
        <Tooltip title="更多">
          <MoreOutlined class="transform rotate-90 cursor-pointer" />
        </Tooltip>
      </Dropdown>
    </div>
  </div>
</template>