<template>
  <div
    class="w-full flex items-center justify-between group/item"
    :class="{
      'selected-tree-node': projectStore.activePageId === data.id
    }"
    @dblclick="handleSetMaxScreen"
  >
    <template v-if="!edit">
      <div class="flex-1 flex items-center gap-8px">
        <LuMonitor size="14px" v-if="data.type !== 'page'" />
        <LuPanelsTopLeft size="14px" v-else />
        <span>{{ data.name }}</span>
      </div>
      <div class="flex items-center gap-4px pr-12px invisible group-hover/item:visible">
        <el-tooltip v-if="data.type !== 'page'" content="新增页面">
          <span @click.capture.stop="addPage(data)"><LuPlus size="14px" /></span>
        </el-tooltip>
        <el-tooltip content="重命名">
          <span><LuPencilLine size="14px" @click.capture.stop="edit = true" /></span>
        </el-tooltip>
        <el-tooltip content="删除" v-if="data.type === 'page'">
          <span>
            <el-popconfirm class="box-item" title="删除该页面?" @confirm="deletePage(data)">
              <template #reference>
                <span><LuTrash2 size="14px" /></span>
              </template>
            </el-popconfirm>
          </span>
        </el-tooltip>
        <!-- <el-tooltip content="显示/隐藏" v-if="data.type === 'page'">
          <span @click.capture.stop="data.hidden = !data.hidden">
            <LuEye size="14px" v-if="!data.hidden" />
            <LuEyeOff size="14px" v-else />
          </span>
        </el-tooltip>
        <el-tooltip content="锁定/解锁" v-if="data.type === 'page'">
          <span @click.capture.stop="data.locked = !data.locked">
            <LuLock size="14px" v-if="!data.locked" />
            <LuUnlock size="14px" v-else />
          </span>
        </el-tooltip> -->
      </div>
    </template>
    <template v-else>
      <el-input
        v-model="data.name"
        size="small"
        style="width: 100%"
        placeholder="Enter name"
        @blur="edit = false"
        @keyup.enter="edit = false"
        @click.stop.capture
      />
    </template>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import {
  LuTrash2,
  LuLock,
  LuUnlock,
  LuEye,
  LuEyeOff,
  LuMonitor,
  LuPanelsTopLeft,
  LuPlus,
  LuPencilLine
} from 'vue-icons-plus/lu'

import { createPage } from '@/model'
import { useActionStore } from '@/store/modules/action'
import { useProjectStore } from '@/store/modules/project'

import type { Screen } from '@/types/screen'
import type { Page } from '@/types/page'
import type { RenderContentContext } from 'element-plus'

const props = defineProps<{
  node: RenderContentContext['node']
  data: Screen | Page
}>()

const edit = ref(false)
const projectStore = useProjectStore()
const actionStore = useActionStore()

const addPage = (screen: Screen) => {
  const newPage = createPage()
  screen.pages.push({
    ...newPage,
    name: `${newPage.name}_${screen.pages.length + 1}`
  })

  projectStore.activePageId = newPage.id
  projectStore.project?.screens.forEach((item, index) => {
    if (item.id === screen.id) {
      projectStore.openPageIds[index] = newPage.id
    }
  })
}

const deletePage = (page: Page) => {
  actionStore.onDeletePage(page.id)
}

const handleSetMaxScreen = () => {
  const { data, node } = props

  if (data.type === 'screen') {
    projectStore.currentMaxScreen = data.id
    return
  }

  projectStore.currentMaxScreen = node?.parent?.data.id
  projectStore.activePageId = data.id

  projectStore.project?.screens.forEach((screen, index) => {
    if (screen.id === node?.parent?.data.id) {
      projectStore.openPageIds[index] = data.id
    }
  })
}
</script>

<style scoped></style>
