import { defineComponent, ref, computed, resolveComponent, openBlock, createBlock, withCtx, createVNode, unref, createTextVNode, withDirectives, createElementVNode, toDisplayString, vShow, withKeys, nextTick } from "vue";
import { u as useChartEditStore, p as setTitle, q as EditCanvasConfigEnum, i as icon, t as fetchRouteParamsLocation, _ as _export_sfc } from "./index-67bc0910.js";
const _hoisted_1 = { class: "title" };
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "index",
  setup(__props) {
    const { FishIcon } = icon.ionicons5;
    const chartEditStore = useChartEditStore();
    const focus = ref(false);
    const inputInstRef = ref(null);
    const fetchProhectInfoById = () => {
      const id = fetchRouteParamsLocation();
      if (id.length) {
        return id[0];
      }
      return "";
    };
    const title = ref(fetchProhectInfoById() || "");
    const comTitle = computed(() => {
      title.value = title.value.replace(/\s/g, "");
      const newTitle = title.value.length ? title.value : "新项目";
      setTitle(`工作空间-${newTitle}`);
      chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.PROJECT_NAME, newTitle);
      return newTitle;
    });
    const handleFocus = () => {
      focus.value = true;
      nextTick(() => {
        inputInstRef.value && inputInstRef.value.focus();
      });
    };
    const handleBlur = () => {
      focus.value = false;
    };
    return (_ctx, _cache) => {
      const _component_n_icon = resolveComponent("n-icon");
      const _component_n_button = resolveComponent("n-button");
      const _component_n_text = resolveComponent("n-text");
      const _component_n_input = resolveComponent("n-input");
      const _component_n_space = resolveComponent("n-space");
      return openBlock(), createBlock(_component_n_space, null, {
        default: withCtx(() => [
          createVNode(_component_n_icon, {
            size: "20",
            depth: 3
          }, {
            default: withCtx(() => [
              createVNode(unref(FishIcon))
            ]),
            _: 1
          }),
          createVNode(_component_n_text, { onClick: handleFocus }, {
            default: withCtx(() => [
              createTextVNode(" 工作空间 - "),
              withDirectives(createVNode(_component_n_button, {
                secondary: "",
                size: "tiny"
              }, {
                default: withCtx(() => [
                  createElementVNode("span", _hoisted_1, toDisplayString(comTitle.value), 1)
                ]),
                _: 1
              }, 512), [
                [vShow, !focus.value]
              ])
            ]),
            _: 1
          }),
          withDirectives(createVNode(_component_n_input, {
            ref_key: "inputInstRef",
            ref: inputInstRef,
            size: "small",
            type: "text",
            maxlength: "16",
            "show-count": "",
            placeholder: "请输入项目名称",
            value: title.value,
            "onUpdate:value": _cache[0] || (_cache[0] = ($event) => title.value = $event),
            valueModifiers: { trim: true },
            onKeyup: withKeys(handleBlur, ["enter"]),
            onBlur: handleBlur
          }, null, 8, ["value", "onKeyup"]), [
            [vShow, focus.value]
          ])
        ]),
        _: 1
      });
    };
  }
});
const index_vue_vue_type_style_index_0_scoped_c5e3c82b_lang = "";
const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c5e3c82b"]]);
export {
  index as default
};
