<script lang="ts" setup>
  import { MoreOutlined } 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 {
    isBataBoardSharePage,
    MoreActionEvent,
    VisualComponentPermission,
  } from '../../config/config';
  import { computed } from '@vue/reactivity';
  import { usePermission } from '/@/hooks/web/usePermission';
  import { DataSource } from '/@/api/dataBoard/model';
  import { useRoute } from 'vue-router';
  import { useRole } from '/@/hooks/business/useRole';

  const emit = defineEmits(['action']);
  const props = defineProps<{
    id: string;
    record: DataSource[];
    panelName?: string;
  }>();
  const { isCustomerUser } = useRole();
  const { hasPermission } = usePermission();
  const dropMenuList = computed<DropMenu[]>(() => {
    const basicMenu: DropMenu[] = [];
    const hasUpdatePermission = hasPermission(VisualComponentPermission.UPDATE);
    const hasDeletePermission = hasPermission(VisualComponentPermission.DELETE);
    const hasCopyPermission = hasPermission(VisualComponentPermission.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 ROUTE = useRoute();

  const getIsSharePage = computed(() => {
    return isBataBoardSharePage(ROUTE.path);
  });

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

<template>
  <div>
    <div class="text-center pt-5 px-5 pb-3 font-bold text-lg truncate">
      {{ props.panelName || '' }}
    </div>
    <div class="flex justify-between w-full px-5 pb-5">
      <div class="flex" :style="{ width: `calc(100% - 60px)` }">
        <div
          v-for="(item, index) in props.record"
          class="box-border truncate"
          :style="{ width: `${100 / props.record.length}%` }"
          :key="index"
        >
          <Tooltip :title="item.deviceName" placement="topLeft">
            <div class="flex p-1">
              <div v-if="item.componentInfo.showDeviceName" class="truncate font-bold">
                {{ item.deviceRename || item.deviceName }}
              </div>
            </div>
          </Tooltip>
        </div>
      </div>
      <div class="flex items-center gap-5">
        <slot name="moreAction"></slot>
        <Dropdown
          v-if="!isCustomerUser && dropMenuList.length"
          :drop-menu-list="dropMenuList"
          :trigger="['click']"
          @menu-event="handleMenuEvent"
        >
          <Tooltip title="更多">
            <MoreOutlined
              v-if="!getIsSharePage"
              class="transform rotate-90 cursor-pointer w-4.5 h-4.5 text-lg"
            />
          </Tooltip>
        </Dropdown>
      </div>
    </div>
  </div>
</template>