<template>
  <a-space>
    <a-button class="border-radius" @click="preview"><code-outlined />预览</a-button>
    <a-button class="border-radius" @click="save"><save-outlined />保存</a-button>
  </a-space>
</template>

<script setup name="ChartHeaderRight">
import { useChartEditStore } from '@/store/modules/chart/chartEditStore';
import { getLocalStorage, setSessionStorage } from '../../utils/storage';
import { useRouter } from 'vue-router';
import { ReportDesignApi } from '../../api/ReportDesignApi';
import { message } from 'ant-design-vue';

const props = defineProps({
  reportId: String,
})

const chartEditStore = useChartEditStore();

const router = useRouter();

// 预览
const preview = () => {
  // id 标识
  // const previewId = getUUID();
  const storageInfo = chartEditStore.getStorageInfo;
  const sessionStorageInfo = getLocalStorage('CHART_STORAGE_LIST') || [];

  if (sessionStorageInfo?.length) {
    const repeateIndex = sessionStorageInfo.findIndex(e => e.id === props.reportId);
    // 重复替换
    if (repeateIndex !== -1) {
      sessionStorageInfo.splice(repeateIndex, 1, { id: props.reportId, ...storageInfo });
      setSessionStorage('CHART_STORAGE_LIST', sessionStorageInfo);
    } else {
      sessionStorageInfo.push({
        id: props.reportId,
        ...storageInfo
      });
      setSessionStorage('CHART_STORAGE_LIST', sessionStorageInfo);
    }
  } else {
    setSessionStorage('CHART_STORAGE_LIST', [{ id: props.reportId, ...storageInfo }]);
  }
  const { href } = router.resolve({
      path: '/report/preview',
      query: { previewId: props.reportId }
    });
    window.open(href, '_blank');
};
// 保存
const save = () => {
  let params = {
    id: props.reportId,
    reportConfig: chartEditStore.getStorageInfo
  }

  ReportDesignApi.saveConfig(params).then(res => {
    if (res.code == '00000') {
      message.success(res.message);
    }
  })
};
</script>

<style></style>
