<template>
  <div class="org-page">
    <!-- 顶部统计栏 -->
    <div class="stats-row">
      <div class="stat-card"><el-icon><Collection /></el-icon><div><span class="num">{{ stats.total }}</span><span class="lbl">总节点</span></div></div>
      <div class="stat-card"><el-icon><TrendCharts /></el-icon><div><span class="num">{{ stats.levels }}</span><span class="lbl">层级深度</span></div></div>
      <div class="stat-card" style="color:#67c23a;"><el-icon><CircleCheckFilled /></el-icon><div><span class="num">{{ stats.enabled }}</span><span class="lbl">已启用</span></div></div>
      <div class="stat-card" style="color:#909399;"><el-icon><RemoveFilled /></el-icon><div><span class="num">{{ stats.disabled }}</span><span class="lbl">已禁用</span></div></div>
    </div>

    <div class="org-body">
      <!-- 左侧树 -->
      <div class="tree-panel">
        <div class="panel-head">
          <span>组织架构树</span>
          <el-button size="small" type="primary" @click="addRoot">+ 根节点</el-button>
        </div>
        <el-input v-model="searchText" placeholder="搜索节点..." prefix-icon="Search" size="small" class="search-box" clearable />
        <div class="tree-wrap">
          <el-tree
            ref="treeRef"
            :data="treeData"
            :props="{ label: 'label', children: 'children' }"
            node-key="id"
            default-expand-all
            :highlight-current="true"
            :filter-node-method="filterNode"
            draggable
            @node-click="onNodeClick"
            @node-drag-end="onDragEnd"
          >
            <template #default="{ node, data }">
              <span class="custom-tree-node">
                <el-icon v-if="data.level === 1" :size="16" color="#e6a23c"><HomeFilled /></el-icon>
                <el-icon v-else-if="data.level === 2" :size="16" color="#409eff"><Connection /></el-icon>
                <el-icon v-else :size="16" color="#67c23a"><FolderOpened /></el-icon>
                <span class="node-label">{{ data.label }}</span>
                <el-tag v-if="!data.enabled" size="small" type="info" effect="dark" class="node-tag">停用</el-tag>
                <span class="level-tag">L{{ data.level }}</span>
              </span>
            </template>
          </el-tree>
        </div>
      </div>

      <!-- 右侧详情 -->
      <div class="detail-panel">
        <template v-if="selectedNode">
          <div class="detail-head">
            <h3>
              <el-icon v-if="selectedNode.level === 1" color="#e6a23c"><HomeFilled /></el-icon>
              <el-icon v-else-if="selectedNode.level === 2" color="#409eff"><Connection /></el-icon>
              <el-icon v-else color="#67c23a"><FolderOpened /></el-icon>
              {{ selectedNode.label }}
            </h3>
            <el-tag :type="selectedNode.enabled ? 'success' : 'info'" effect="dark" size="small">
              {{ selectedNode.enabled ? '已启用' : '已禁用' }}
            </el-tag>
          </div>

          <el-descriptions :column="1" border size="small" class="node-info">
            <el-descriptions-item label="层级">
              <el-tag size="small" round>{{ levelLabels[selectedNode.level] || '未知' }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="编码">{{ selectedNode.code || '—' }}</el-descriptions-item>
            <el-descriptions-item label="排序">{{ selectedNode.sort_order || 0 }}</el-descriptions-item>
            <el-descriptions-item label="备注">{{ selectedNode.remark || '—' }}</el-descriptions-item>
            <el-descriptions-item label="子节点数">
              <el-tag size="small" type="primary" round>{{ childCount }}</el-tag>
            </el-descriptions-item>
          </el-descriptions>

          <div class="detail-actions">
            <el-button type="primary" @click="addChild(selectedNode)"><el-icon><Plus /></el-icon>新增子节点</el-button>
            <el-button @click="editNode(selectedNode)"><el-icon><Edit /></el-icon>编辑</el-button>
            <el-button :type="selectedNode.enabled ? 'warning' : 'success'" @click="toggleNode(selectedNode)">
              <el-icon>{{ selectedNode.enabled ? 'VideoPause' : 'VideoPlay' }}</el-icon>
              {{ selectedNode.enabled ? '禁用' : '启用' }}
            </el-button>
            <el-button type="danger" :disabled="hasChildren" @click="deleteNode(selectedNode)">
              <el-icon><Delete /></el-icon>删除
            </el-button>
          </div>
        </template>

        <el-empty v-else description="请选择左侧组织节点" :image-size="120" />
      </div>
    </div>

    <!-- 编辑弹窗 -->
    <el-dialog v-model="showDialog" :title="isEdit ? '编辑节点' : '新增节点'" width="480" destroy-on-close>
      <el-form :model="form" label-width="90px" size="small">
        <el-form-item label="节点名称">
          <el-input v-model="form.name" placeholder="输入节点名称" />
        </el-form-item>
        <el-form-item label="编码">
          <el-input v-model="form.code" placeholder="可选编码，如 HQ-FIN" />
        </el-form-item>
        <el-form-item label="层级" v-if="!isEdit">
          <el-select v-model="form.level" :disabled="!!form.parent_id" style="width:100%">
            <el-option :value="1" label="1-集团" />
            <el-option :value="2" label="2-事业部" />
            <el-option :value="3" label="3-区域" />
            <el-option :value="4" label="4-部门" />
            <el-option :value="5" label="5-班组" />
          </el-select>
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number v-model="form.sort_order" :min="0" style="width:100%" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.remark" type="textarea" :rows="2" placeholder="可选备注" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showDialog=false">取消</el-button>
        <el-button type="primary" @click="saveNode" :loading="saving">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch } from "vue"
import { ElMessage, ElMessageBox } from "element-plus"
import {
  Collection, TrendCharts, CircleCheckFilled, RemoveFilled,
  HomeFilled, Connection, FolderOpened,
  Search, Plus, Edit, Delete,
} from "@element-plus/icons-vue"
import api from "../api/index"

const treeData = ref<any[]>([])
const treeRef = ref<any>(null)
const searchText = ref("")
const selectedNode = ref<any>(null)
const showDialog = ref(false)
const isEdit = ref(false)
const editingId = ref<number | null>(null)
const saving = ref(false)
const form = ref<any>({ name: "", code: "", level: 1, sort_order: 0, parent_id: null, remark: "" })

const levelLabels: Record<number, string> = { 1: "集团", 2: "事业部", 3: "区域", 4: "部门", 5: "班组" }

// 统计
const stats = computed(() => {
  let total = 0, levels = 0, enabled = 0, disabled = 0
  function walk(nodes: any[]) {
    for (const n of nodes) {
      total++
      levels = Math.max(levels, n.level || 1)
      if (n.enabled) enabled++; else disabled++
      if (n.children) walk(n.children)
    }
  }
  walk(treeData.value)
  return { total, levels, enabled, disabled }
})

const childCount = computed(() => {
  if (!selectedNode.value) return 0
  return selectedNode.value.children?.length || 0
})

const hasChildren = computed(() => childCount.value > 0)

// 搜索过滤
watch(searchText, (val) => {
  treeRef.value?.filter(val)
})

function filterNode(value: string, data: any) {
  if (!value) return true
  return data.label.toLowerCase().includes(value.toLowerCase())
}

// API
async function loadTree() {
  try {
    const r: any = await api.get("/org/tree")
    treeData.value = r.data || []
  } catch { ElMessage.error("加载组织树失败") }
}

function onNodeClick(data: any) {
  selectedNode.value = data
}

function addRoot() {
  isEdit.value = false
  editingId.value = null
  form.value = { name: "", code: "", level: 1, sort_order: 0, parent_id: null, remark: "" }
  showDialog.value = true
}

function addChild(data: any) {
  isEdit.value = false
  editingId.value = null
  const newLevel = Math.min(data.level + 1, 5)
  form.value = { name: "", code: "", level: newLevel, sort_order: 0, parent_id: data.id, remark: "" }
  showDialog.value = true
}

function editNode(data: any) {
  isEdit.value = true
  editingId.value = data.id
  form.value = {
    name: data.label,
    code: data.code || "",
    level: data.level,
    sort_order: data.sort_order || 0,
    parent_id: null,
    remark: data.remark || "",
  }
  showDialog.value = true
}

async function saveNode() {
  if (!form.value.name) { ElMessage.warning("请输入名称"); return }
  saving.value = true
  try {
    if (isEdit.value && editingId.value) {
      await api.put(`/org/nodes/${editingId.value}`, form.value)
      ElMessage.success("已更新")
    } else {
      await api.post("/org/nodes", form.value)
      ElMessage.success("已创建")
    }
    showDialog.value = false
    await loadTree()
    // 如果编辑的是当前选中节点，刷新选中
    if (isEdit.value && editingId.value === selectedNode.value?.id) {
      const r: any = await api.get("/org/nodes")
      const found = r.data?.find((n: any) => n.id === editingId.value)
      if (found) selectedNode.value = { ...found, label: found.name, children: selectedNode.value?.children || [] }
    }
  } catch { ElMessage.error("操作失败") }
  finally { saving.value = false }
}

async function toggleNode(data: any) {
  try {
    await api.put(`/org/nodes/${data.id}/toggle`)
    ElMessage.success(data.enabled ? "已禁用" : "已启用")
    await loadTree()
    // 刷新选中（节点启用状态变了）
    if (selectedNode.value?.id === data.id) {
      selectedNode.value.enabled = !data.enabled
    }
  } catch { ElMessage.error("操作失败") }
}

async function deleteNode(data: any) {
  if (hasChildren.value) { ElMessage.warning("请先删除子节点"); return }
  try {
    await ElMessageBox.confirm(`确定删除「${data.label}」？`)
    await api.delete(`/org/nodes/${data.id}`)
    ElMessage.success("已删除")
    selectedNode.value = null
    await loadTree()
  } catch (e: any) {
    if (e !== "cancel") ElMessage.error("删除失败")
  }
}

function onDragEnd() { loadTree() }

onMounted(loadTree)
</script>

<style scoped>
.org-page { padding: 16px; height: calc(100vh - 80px); display: flex; flex-direction: column; gap: 12px; }

/* 统计栏 */
.stats-row { display: flex; gap: 12px; }
.stat-card {
  flex: 1; display: flex; align-items: center; gap: 8px;
  background: #fff; border-radius: 8px; padding: 14px 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.stat-card .el-icon { font-size: 28px; }
.stat-card .num { display: block; font-size: 22px; font-weight: 700; line-height: 1.2; }
.stat-card .lbl { font-size: 12px; color: #909399; }

/* 主体 */
.org-body { display: flex; gap: 12px; flex: 1; min-height: 0; }

.tree-panel {
  width: 320px; background: #fff; border-radius: 8px;
  display: flex; flex-direction: column;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  overflow: hidden;
}
.panel-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px; border-bottom: 1px solid #f0f0f0;
  font-weight: 600; font-size: 14px;
}
.search-box { margin: 8px 10px; }
.tree-wrap { flex: 1; overflow-y: auto; padding: 4px 0; }

.detail-panel {
  flex: 1; background: #fff; border-radius: 8px;
  padding: 20px; box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  display: flex; flex-direction: column;
}

.detail-head { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.detail-head h3 { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 16px; }
.detail-head h3 .el-icon { font-size: 20px; }
.node-info { margin-bottom: 16px; }

.detail-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 16px; }

/* 树节点样式 */
.custom-tree-node { flex: 1; display: flex; align-items: center; gap: 4px; font-size: 13px; overflow: hidden; }
.custom-tree-node .node-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.custom-tree-node .node-tag { transform: scale(0.85); margin-left: 4px; }
.level-tag {
  font-size: 10px; color: #909399; background: #f5f7fa;
  border-radius: 4px; padding: 0 4px; margin-left: 4px;
  line-height: 16px;
}
</style>
