<template>
  <div class="custom-chart">
    <a-layout>
      <chart-header :reportId="currentReportId" :reportName="reportName"></chart-header>
      <a-layout-content style="overflow: hidden; display: flex">
        <div style="overflow: hidden; display: flex">
          <content-chart></content-chart>
          <chart-layers></chart-layers>
        </div>
        <content-configurations />
      </a-layout-content>
    </a-layout>
    <!-- 右键菜单 -->
    <a-dropdown
      overlayClassName="echart-drop"
      placement="bottomLeft"
      :trigger="['contextmenu']"
      v-model:visible="showRight"
      @visibleChange="onClickOutSide"
    >
      <template #overlay>
        <a-menu>
          <template v-for="item in menuOptions" :key="item.key">
            <a-menu-item v-if="!item.type" @click="handleMenuSelect(item.key)">
              <component :is="item.icon" style="margin-right: 10px" />
              <span>{{ item.label }}</span>
            </a-menu-item>
            <a-menu-divider v-else />
          </template>
        </a-menu>
      </template>
    </a-dropdown>
  </div>
</template>

<script setup name="CustomEchartDrag">
import { useRoute, useRouter } from 'vue-router';
import { ReportDesignApi } from './api/ReportDesignApi';
import { defineAsyncComponent, ref, watch, computed, nextTick, onMounted } from 'vue';
import ChartHeader from './components/chart-header/index.vue';
import { useContextMenu } from './hook/useContextMenu.hook';
import { useChartEditStore } from '@/store/modules/chart/chartEditStore';
import { useChartHistoryStore } from '@/store/modules/chart/chartHistoryStore';
import { useSync } from './hook/useAsyn.hook';
import { Dropdown as ADropdown, Layout as ALayout, LayoutContent as ALayoutContent } from 'ant-design-vue';

defineOptions({
  name: 'CustomEchartDrag'
})

const ContentChart = defineAsyncComponent(() => import('./components/content-chart/index.vue'));
const ChartLayers = defineAsyncComponent(() => import('./components/chart-layers/index.vue'));
const ContentConfigurations = defineAsyncComponent(() => import('./components/content-configurations/index.vue'));

const route = useRoute();
const router = useRouter();

const { updateComponent } = useSync();

const chartHistoryStoreStore = useChartHistoryStore();
const chartEditStore = useChartEditStore();

// 记录初始化
chartHistoryStoreStore.canvasInit(chartEditStore.getEditCanvas);

const { menuOptions, onClickOutSide, mousePosition, handleMenuSelect } = useContextMenu();

const showRight = ref(false);

const currentReportId = ref('');

const reportName = ref('');

const getRightMenuShow = computed(() => {
  return chartEditStore.getRightMenuShow;
});

onMounted(() => {
  const { reportId } = route.query;

  if (reportId) {
    currentReportId.value = reportId;
    getConfigDetail();
  } else {
    router.push('/mid/app/report');
    return;
  }
});

// 获取配置详情
const getConfigDetail = () => {
  ReportDesignApi.getConfig({ id: currentReportId.value }).then(async res => {
    reportName.value = res.data.reportName;
    if (res.code == '00000' && res.data.reportConfig) {
      await updateComponent(res.data.reportConfig, true);
    }
  });
};

watch(
  () => getRightMenuShow.value,
  val => {
    showRight.value = val;
  },
  { deep: true }
);

// 操作栏定位
watch(
  () => showRight.value,
  val => {
    if (val) {
      nextTick(() => {
        let dom = document.querySelector('.echart-drop .ant-dropdown-content');
        if (dom) {
          dom.style.position = 'absolute';
          dom.style.top = mousePosition.y + 'px';
          dom.style.left = mousePosition.x + 'px';
        }
      });
    }
  },
  { deep: true }
);
</script>

<style scoped lang="less">
.custom-chart {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background-image: #fff;
}
</style>
<style lang="less">
.echart-drop {
  min-width: 100px !important;
  top: 0 !important;
  left: 0 !important;
}
</style>
