<template>
  <a-space>
    <calendar-outlined />
    <span @click="handleFocus">
      工作空间 -
      <a-button v-show="!focus" shape="round" size="small" style="line-height: 6px; background-color: #2e333817">
        <span class="title">
          {{ comTitle }}
        </span>
      </a-button>
    </span>

    <a-input
      v-show="focus"
      ref="inputInstRef"
      size="small"
      type="text"
      :maxlength="16"
      show-count
      style="border-radius: 20px"
      placeholder="请输入项目名称"
      v-model:value.trim="title"
      @keyup.enter="handleBlur"
      @blur="handleBlur"
    ></a-input>
  </a-space>
</template>

<script setup name="CustomHeaderTitle">
import { ref, nextTick, computed } from 'vue';
import { Space as ASpace } from 'ant-design-vue';

const props = defineProps({
  reportName: String
});

const focus = ref(false);
const inputInstRef = ref(null);

const title = ref(props.reportName);

const comTitle = computed(() => {
  title.value = title.value.replace(/\s/g, '');
  return title.value.length ? title.value : '新项目';
});

const handleFocus = () => {
  return;
  focus.value = true;
  nextTick(() => {
    inputInstRef.value && inputInstRef.value.focus();
  });
};

const handleBlur = () => {
  focus.value = false;
};
</script>
<style lang="less" scoped>
.title {
  font-size: 15px;
}
</style>
