<template>
  <div
    class="custom-chart-edit-tools"
    :class="[settingStore.getChartToolsStatus, isMiniComputed ? 'isMini' : 'unMini']"
    @click="isMini && (isMini = false)"
    @mouseenter="toolsMouseoverHandle"
    @mouseleave="toolsMouseoutHandle"
  >
    <a-tooltip>
      <template #title>导出pdf</template>
      <a-button shape="circle" class="export-btn" @click="exportPdf">
        <template #icon><cloud-download-outlined /></template>
      </a-button>
    </a-tooltip>
    <a-tooltip>
      <template #title>打印</template>
      <a-button shape="circle" class="printer-btn" @click="printClick">
        <template #icon><printer-filled /></template>
      </a-button>
    </a-tooltip>
  </div>
</template>

<script setup name="EditTools">
import { ref, computed } from 'vue';
import { printElement } from '@/utils/common/print';
import { downloadPDF } from '../../utils/htmlToPdf';
import { useSettingStore } from '@/store/modules/chart/settingStore';

const settingStore = useSettingStore();

// 最小化
const isMini = ref(true);

// 是否隐藏（悬浮展示）
const isHide = computed(() => settingStore.getChartToolsStatusHide);

// 是否展示最小化（与全局配置相关）
const isMiniComputed = computed(() => isMini.value && isHide.value);

// 导出pdf
const exportPdf = () => {
  let dom = document.getElementById('custom-chart-edit-content');
  downloadPDF(dom);
};

// 打印
const printClick = () => {
    let dom = document.getElementById('custom-chart-edit-content');
    printElement(dom);
};
</script>

<style lang="less" scoped>
.custom-chart-edit-tools {
  backdrop-filter: blur(20px);
  background-color: rgba(240, 240, 240, 0.7);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  position: absolute;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-radius: 25px;
  border: 1px solid;
  border-color: #e5e6eb;

  &.aside {
    display: flex;
    justify-content: center;
    flex-direction: column-reverse;
    height: auto;
    right: 20px;
    padding: 10px 8px;
    bottom: 70px;
    overflow: hidden;
    transition: height ease 0.4s;

    .export-btn,
    .printer-btn {
      background-color: #e5e6eb;
      border-color: #e5e6eb;

      .anticon {
        font-size: 20px;
      }
    }

    .export-btn {
      margin-top: 10px;
    }
  }
}
</style>

<style>
@media print {
  /* .ant-layout-header {
    display: none;
  }
  .ant-layout-sider {
    display: none;
  }
  #mb-ruler {
    display: none;
  } */
}
</style>
