<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 Icon from '/@/components/Icon/src/Icon.vue';
  enum MoreEvent {
    EDIT = 'edit',
    COPY = 'copy',
    DELETE = 'delete',
  }

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

  const handleMenuEvent = (event: DropMenu) => {
    console.log(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>
            <Icon icon="ant-design:edit-outlined" />
          </Tooltip>
          <span class="truncate max-w-25">设备名称{{ 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>