<template>
  <div class="head-container">
    <el-input v-model="deptName" class="mb-15px" clearable placeholder="请输入名称">
      <template #prefix>
        <Icon icon="ep:search" />
      </template>
    </el-input>
  </div>
  <div ref="treeContainer" class="tree-container">
    <el-tree
      ref="treeRef"
      :data="treeList"
      :expand-on-click-node="false"
      :filter-node-method="filterNode"
      :props="defaultProps"
      default-expand-all
      highlight-current
      node-key="id"
      @node-click="handleNodeClick"
      @node-contextmenu="handleRightClick"
      style="height: 52em"
    >
      <template #default="{ node }">
        <div
          style="display: flex; justify-content: space-between; align-items: center; width: 100%"
        >
          <div>
            <Icon
              style="vertical-align: middle"
              v-if="node.data.type === 'dept'"
              icon="ep:postcard"
            />
            <Icon
              style="vertical-align: middle"
              v-if="node.data.type === 'device'"
              icon="fa:wrench"
            />
            <el-icon v-if="node.data.type === 'file'" style="vertical-align: middle"
              ><Folder
            /></el-icon>
            <!-- 文件夹图标 -->
            <span style="vertical-align: middle; margin-left: 3px">{{ node.data.name }}</span>
          </div>
          <!--          <div>-->
          <!--            <icon style="vertical-align: middle" @click="handleRightClick" icon="ep:edit" />-->
          <!--          </div>-->
        </div>
      </template>
    </el-tree>
  </div>
  <!--  <div v-show="menuVisible" ref="contextMenuRef" class="custom-menu" :style="{ left: menuX + 'px', top: menuY + 'px' }">-->
  <!--    <ul>-->
  <!--      <li style="border-bottom: 1px solid #ccc;" @click="handleMenuClick('add')">新增子节点</li>-->
  <!--      <li style="border-bottom: 1px solid #ccc;" @click="handleMenuClick('edit')">编辑节点</li>-->
  <!--      <li @click="handleMenuClick('delete')">删除节点</li>-->
  <!--    </ul>-->
  <!--  </div>-->

  <!--  <Dialog v-model="dialogVisible" :title="dialogTitle" style="width: 40em">-->
  <!--    <el-form-->
  <!--      ref="formRef"-->
  <!--      v-loading="formLoading"-->
  <!--      :model="formData"-->
  <!--      :rules="formRules"-->
  <!--      label-width="80px"-->
  <!--    >-->
  <!--      <el-form-item label="资料分类名称" prop="name" label-width="110px">-->
  <!--        <el-input v-model="formData.name" placeholder="请输入资料分类名称" />-->
  <!--      </el-form-item>-->
  <!--      <el-form-item label="显示排序" prop="sort" label-width="110px">-->
  <!--        <el-input-number v-model="formData.sort" :min="0" controls-position="right" />-->
  <!--      </el-form-item>-->
  <!--      <el-form-item label="备注" prop="remark" label-width="110px">-->
  <!--        <el-input-->
  <!--          v-model="formData.remark"-->
  <!--          maxlength="11"-->
  <!--          placeholder="请输入备注"-->
  <!--          type="textarea"-->
  <!--        />-->
  <!--      </el-form-item>-->
  <!--    </el-form>-->
  <!--    <template #footer>-->
  <!--      <el-button type="primary" @click="submitForm">确 定</el-button>-->
  <!--      <el-button @click="dialogVisible = false">取 消</el-button>-->
  <!--    </template>-->
  <!--  </Dialog>-->
</template>

<script lang="ts" setup>
import { ElTree } from 'element-plus'
import { defaultProps, handleTree } from '@/utils/tree'
import { CommonStatusEnum } from '@/utils/constants'
// import {IotInfoClassifyApi} from "@/api/pms/info";
import { IotTreeApi } from '@/api/system/tree'
import { Folder } from '@element-plus/icons-vue'

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formRef = ref() // 搜索的表单
const openForm = (type: string, id?: number) => {
  formRef.value.open(type, id)
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    title: '',
    parentId: undefined,
    name: undefined,
    sort: undefined,
    leaderUserId: undefined,
    phone: undefined,
    email: undefined,
    status: CommonStatusEnum.ENABLE
  }
  formRef.value?.resetFields()
}
defineOptions({ name: 'IotTree' })
const props = defineProps({
  deviceId: { type: Number, required: true }
})
const deptName = ref('')
const nodeInfo = ref({})
const treeList = ref<Tree[]>([]) // 树形结构
const treeRef = ref<InstanceType<typeof ElTree>>()
const menuVisible = ref(false)
const menuX = ref(0)
const menuY = ref(0)
const contextMenuRef = ref(null) // 弹窗DOM引用
let selectedNode = null

// 动态高度计算
const treeContainer = ref(null)
const setHeight = () => {
  if (!treeContainer.value) return
  const windowHeight = window.innerHeight
  const containerTop = treeContainer.value.offsetTop
  treeContainer.value.style.height = `${windowHeight * 0.78}px` // 60px 底部预留
}

onMounted(async () => {
  await getTreeInfo()
  setHeight()
  window.addEventListener('resize', setHeight)
})

onUnmounted(() => {
  window.removeEventListener('resize', setHeight)
})

const handleRightClick = (event, node, data) => {
  nodeInfo.value = node
  console.log(JSON.stringify(nodeInfo.value))
  event.preventDefault()
  menuX.value = event.clientX
  menuY.value = event.clientY
  selectedNode = data
  menuVisible.value = true
}

// const handleMenuClick = async (action) => {
//   switch (action) {
//     case 'add':
//       dialogVisible.value = true
//       dialogTitle.value = '新增资料分类'
//       formType.value = 'create'
//       resetForm()
//       break
//     case 'edit':
//       resetForm()
//       dialogVisible.value = true
//       dialogTitle.value = '编辑资料分类'
//       formType.value = 'update'
//       formData.value = nodeInfo.value
//       console.log(JSON.stringify(formData.value))
//       break
//     case 'delete':
//       // 删除的二次确认
//       await message.delConfirm()
//       // 发起删除
//       await IotInfoClassifyApi.deleteIotInfoClassify(nodeInfo.value.id)
//       message.success(t('common.delSuccess'))
//       // 刷新列表
//       await getTree()
//       break
//   }
//   menuVisible.value = false
// }
/** 获得部门树 */
const getTreeInfo = async () => {
  const res = await IotTreeApi.getSimpleTreeList()
  treeList.value = []
  treeList.value.push(...handleTree(res))
}

/** 基于名字过滤 */
const filterNode = (name: string, data: Tree) => {
  if (!name) return true
  return data.name.includes(name)
}

/** 处理部门被点击 */
const handleNodeClick = async (row: { [key: string]: any }) => {
  console.log(row)
  emits('node-click', row)
}
const emits = defineEmits(['node-click'])

/** 监听deptName */
watch(deptName, (val) => {
  treeRef.value!.filter(val)
})
// const handleClickOutside = (event) => {
//   if (
//     menuVisible.value &&
//     contextMenuRef.value &&
//     !contextMenuRef.value.contains(event.target)
//   ) {
//     menuVisible.value = false
//   }
// }
// watch(menuVisible, (visible) => {
//   if (visible) {
//     document.addEventListener('click', handleClickOutside)
//   } else {
//     document.removeEventListener('click', handleClickOutside)
//   }
// })
// onBeforeUnmount(() => {
//   document.removeEventListener('click', handleClickOutside)
// })
/** 初始化 */
// onMounted(async () => {
//   await getTreeInfo()
// })
</script>
<style lang="scss" scoped>
.custom-menu {
  position: fixed;
  background: white;
  border: 1px solid #ccc;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}
.custom-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.custom-menu li {
  padding: 8px 20px;
  cursor: pointer;
  font-size: 14px;
  margin: 5px;
}
.custom-menu li:hover {
  background: #77a0ec;
}
.tree-container {
  overflow-y: auto;
  min-width: 100%;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
}
/* 自定义滚动条（可选） */
.tree-container::-webkit-scrollbar {
  width: 6px;
}
.tree-container::-webkit-scrollbar-thumb {
  background: #c0c4cc;
  border-radius: 3px;
}
</style>
