<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';
  import { computed } from '@vue/reactivity';
  import { usePermission } from '/@/hooks/web/usePermission';

  const emit = defineEmits(['action']);
  const props = defineProps<{
    id: string;
  }>();
  const { hasPermission } = usePermission();
  const dropMenuList = computed<DropMenu[]>(() => {
    const basicMenu: DropMenu[] = [];
    const hasUpdatePermission = hasPermission('api:yt:dataBoardDetail:update');
    const hasDeletePermission = hasPermission('api:yt:dataBoardDetail:delete');
    const hasCopyPermission = hasPermission('api:yt:dataBoardDetail:copy');
    if (hasUpdatePermission)
      basicMenu.push({
        text: '编辑组件',
        event: MoreActionEvent.EDIT,
        icon: 'ant-design:edit-outlined',
      });
    if (hasDeletePermission)
      basicMenu.push({
        text: '删除组件',
        event: MoreActionEvent.DELETE,
        icon: 'ant-design:delete-outlined',
      });
    if (hasCopyPermission)
      basicMenu.push({
        text: '复制组件',
        event: MoreActionEvent.COPY,
        icon: 'ant-design:copy-outlined',
      });
    return basicMenu;
  });

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

<template>
  <div class="flex justify-between">
    <div class="flex flex-auto">
      <div v-for="item in 1" 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
        v-if="dropMenuList.length"
        :drop-menu-list="dropMenuList"
        :trigger="['click']"
        @menu-event="handleMenuEvent"
      >
        <Tooltip title="更多">
          <MoreOutlined class="transform rotate-90 cursor-pointer" />
        </Tooltip>
      </Dropdown>
    </div>
  </div>
</template>