<template>
  <n-space>
    <n-icon size="20" :depth="3">
      <fish-icon></fish-icon>
    </n-icon>
    <n-text @click="handleFocus">
      工作空间 -
      <n-button v-show="!focus" secondary size="tiny">
        <span class="title">
          {{ comTitle }}
        </span>
      </n-button>
    </n-text>
    <!-- THINGS_KIT 修改标题保存 -->
    <n-input v-show="focus" ref="inputInstRef" size="small" type="text" maxlength="16" show-count placeholder="请输入项目名称"
      v-model:value.trim="title" @keyup.enter="focus = false" @blur="handleBlur"></n-input>
  </n-space>
</template>

<script setup lang="ts">
import { ref, nextTick, computed } from 'vue'
import { fetchRouteParamsLocation, setTitle } from '@/utils'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
import { icon } from '@/plugins'
// THINGS_KIT 更新标题
import { useProjectInfoStore } from '@/store/external/modules/projectInfo'
import { contentUpdateApi } from '@/api/external/contentSave/content'
import { BaseUpdateContentParams } from '@/api/external/contentSave/model/contentModel'
import { ProjectInfoEnum } from '@/store/external/modules/projectInfo.d'

const { FishIcon } = icon.ionicons5
const chartEditStore = useChartEditStore()

const focus = ref<boolean>(false)
const inputInstRef = ref(null)

// 根据路由 id 参数获取项目信息
const fetchProhectInfoById = () => {
  const id = fetchRouteParamsLocation()
  if (id.length) {
    return id[0]
  }
  return ''
}

// THINGS_KIT 修改标题
const projectInfoStore = useProjectInfoStore()
const title = ref('')

// THINGS_KIT 修改标题
const comTitle = computed(() => {
  // eslint-disable-next-line vue/no-side-effects-in-computed-properties  
  const newTitle = projectInfoStore.getProjectInfo.dataViewName
  setTitle(`工作空间-${newTitle}`)
  chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.PROJECT_NAME, newTitle)
  projectInfoStore.setProjectInfoByKey(ProjectInfoEnum.DATA_VIEW_NAME, newTitle)
  return newTitle
})

const handleFocus = () => {
  focus.value = true
  nextTick(() => {
    inputInstRef.value && (inputInstRef.value as any).focus()
    title.value = projectInfoStore.getProjectInfo.dataViewName
  })
}

// THINGS_KIT 更新标题
const handleBlur = async () => {
  focus.value = false
  projectInfoStore.setProjectInfoByKey(ProjectInfoEnum.DATA_VIEW_NAME, title.value)
  const { dataViewName, dataViewId, dataViewContent } = projectInfoStore.getProjectInfo
  const saveContent = {
    dataViewName,
    dataViewId,
    dataViewContent: {
      id: dataViewContent.id,
      content: JSON.stringify(chartEditStore.getStorageInfo)
    }
  } as unknown as BaseUpdateContentParams
  await contentUpdateApi(saveContent)
}
</script>
<style lang="scss" scoped>
.title {
  padding-left: 5px;
  padding-right: 5px;
  font-size: 15px;
}
</style>