import { defineComponent, toRefs, reactive, computed, resolveComponent, openBlock, createBlock, withCtx, createVNode, createElementBlock, Fragment, renderList, resolveDynamicComponent, createElementVNode, toDisplayString } from "vue";
import { u as useChartEditStore, a as useChartHistoryStore, r as renderIcon, H as HistoryStackEnum, i as icon, _ as _export_sfc } from "./index-67bc0910.js";
import "./useKeyboard.hook-1f5d8d36.js";
import { u as useChartLayoutStore, C as ChartLayoutStoreEnum } from "./chartLayoutStore-de4e7ebb.js";
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "index",
  setup(__props) {
    const { LayersIcon, BarChartIcon, PrismIcon, HomeIcon, ArrowBackIcon, ArrowForwardIcon } = icon.ionicons5;
    const { setItem } = useChartLayoutStore();
    const { getLayers, getCharts, getDetails } = toRefs(useChartLayoutStore());
    useChartEditStore();
    const chartHistoryStore = useChartHistoryStore();
    const btnList = reactive([
      {
        key: ChartLayoutStoreEnum.CHARTS,
        select: getCharts,
        title: "图表组件",
        icon: renderIcon(BarChartIcon)
      },
      {
        key: ChartLayoutStoreEnum.LAYERS,
        select: getLayers,
        title: "图层控制",
        icon: renderIcon(LayersIcon)
      },
      {
        key: ChartLayoutStoreEnum.DETAILS,
        select: getDetails,
        title: "详情设置",
        icon: renderIcon(PrismIcon)
      }
    ]);
    const isBackStack = computed(() => chartHistoryStore.getBackStack.length > 1);
    const isForwardStack = computed(() => chartHistoryStore.getForwardStack.length > 0);
    reactive([
      {
        key: HistoryStackEnum.BACK_STACK,
        // 一定会有初始化画布
        select: isBackStack,
        title: "后退",
        icon: renderIcon(ArrowBackIcon)
      },
      {
        key: HistoryStackEnum.FORWARD_STACK,
        select: isForwardStack,
        title: "前进",
        icon: renderIcon(ArrowForwardIcon)
      }
    ]);
    const styleHandle = (item) => {
      if (item.key === ChartLayoutStoreEnum.DETAILS) {
        return item.select ? "" : "primary";
      }
      return item.select ? "primary" : "";
    };
    const clickHandle = (item) => {
      setItem(item.key, !item.select);
    };
    return (_ctx, _cache) => {
      const _component_n_button = resolveComponent("n-button");
      const _component_n_tooltip = resolveComponent("n-tooltip");
      const _component_n_space = resolveComponent("n-space");
      return openBlock(), createBlock(_component_n_space, {
        class: "header-left-btn",
        size: 25
      }, {
        default: withCtx(() => [
          createVNode(_component_n_space, null, {
            default: withCtx(() => [
              (openBlock(true), createElementBlock(Fragment, null, renderList(btnList, (item) => {
                return openBlock(), createBlock(_component_n_tooltip, {
                  key: item.key,
                  placement: "bottom",
                  trigger: "hover"
                }, {
                  trigger: withCtx(() => [
                    createVNode(_component_n_button, {
                      size: "small",
                      ghost: "",
                      type: styleHandle(item),
                      focusable: false,
                      onClick: ($event) => clickHandle(item)
                    }, {
                      default: withCtx(() => [
                        (openBlock(), createBlock(resolveDynamicComponent(item.icon)))
                      ]),
                      _: 2
                    }, 1032, ["type", "onClick"])
                  ]),
                  default: withCtx(() => [
                    createElementVNode("span", null, toDisplayString(item.title), 1)
                  ]),
                  _: 2
                }, 1024);
              }), 128))
            ]),
            _: 1
          })
        ]),
        _: 1
      });
    };
  }
});
const index_vue_vue_type_style_index_0_scoped_ceff60f4_lang = "";
const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-ceff60f4"]]);
export {
  index as default
};
