<template>
  <!-- 基于 Element UI 新增和修改弹窗 -->
  <el-dialog
      :title="!dataForm.deptId ? '添加' : '修改'"
      :close-on-click-modal="false"
      :visible.sync="visible"
      width="600px">
    <!-- 新增和修改表单 -->
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataSubmit()" label-width="100px">
      <!-- 父部门选择 -->
      <el-form-item label="父部门" prop="parentId">
        <treeselect
          v-model="dataForm.parentId"
          :options="deptTreeOptions"
          :normalizer="normalizer"
          :show-count="true"
          placeholder="选择上级部门"
        ></treeselect>
      </el-form-item>


      <!-- 部门名称 -->
      <el-form-item label="部门名称" prop="deptName">
        <el-input v-model="dataForm.deptName" placeholder="请输入部门名称"></el-input>
      </el-form-item>

      <!-- 显示顺序 -->
      <el-form-item label="显示顺序" prop="orderNum">
        <el-input-number
          v-model="dataForm.orderNum"
          :min="0"
          :step="1"
          placeholder="请输入显示顺序"
          style="width: 100%;"
        ></el-input-number>
      </el-form-item>




      <!-- 部门状态 -->
      <el-form-item label="部门状态" prop="status">
        <el-radio-group v-model="dataForm.status">
          <el-radio :label="'0'">正常</el-radio>
          <el-radio :label="'1'">停用</el-radio>
        </el-radio-group>
      </el-form-item>

      <!-- 备注 -->
      <el-form-item label="备注" prop="remark">
        <el-input
          v-model="dataForm.remark"
          type="textarea"
          placeholder="请输入备注信息"
          :rows="3"
        ></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import * as api from '@/api/sysdept.js'
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  export default {
    components: { Treeselect },
    data () {
      return {
        visible: false,
        // 部门树数据
        deptTreeOptions: [],
        // 部门树原始数据
        originalDeptTree: [],
        // 部门状态映射
        statusMap: {
          '0': '正常',
          '1': '停用'
        },
        dataForm: {
          deptName: '' ,
          orderNum: 0 , // 默认显示顺序为0
          status: '0' , // 默认正常
          remark: '' ,
          parentId: null // 父部门ID
        },
        dataRule: {
          deptName: [
            { required: true, message: '部门名称为必填项', trigger: 'blur' },
          ],
          status: [
            { required: true, message: '部门状态为必填项', trigger: 'change' }
          ]
        }
      }
    },
    created() {
      // 加载部门树数据
      this.loadDeptTree()
    },
    methods: {
      // 加载部门树
      async loadDeptTree() {
        try {
          const res = await api.deptTreeSelect()
          this.originalDeptTree = res
          this.deptTreeOptions = res
        } catch (error) {
          this.$message.error('加载部门树失败')
          console.error('加载部门树失败:', error)
        }
      },

      // 转换部门数据结构，用于 treeselect
      normalizer(node) {
        if (node.children && !node.children.length) {
          delete node.children;
        }
        return {
          id: node.deptId ? node.deptId : '0',
          label: node.deptName ? node.deptName : '顶级部门',
          children: node.children
        };
      },

      // 初始化表单
      async init(id, parentId = null) {
        this.visible = true
        
        // 重置表单
        await this.$nextTick()
        this.$refs['dataForm'].resetFields()
        
        this.dataForm.deptId = id || 0

        // 如果是修改，加载部门详情
        if (this.dataForm.deptId) {
          try {
            const res = await api.sysdeptDetailApi(id)
            this.dataForm = res
            // 初始化父部门选择
            this.initParentSelection(res)
          } catch (error) {
            this.$message.error('加载部门详情失败')
            console.error('加载部门详情失败:', error)
          }
        } else {
          // 新增时设置父部门
          if (parentId) {
            this.$set(this.dataForm, 'parentId', parentId)
          }
        }
      },

      // 初始化父部门选择
      initParentSelection(deptData) {
        // 父部门ID已经直接设置在dataForm中
        this.updateAncestorsByParentId()
      },

      // 根据父部门ID更新祖级列表
      updateAncestorsByParentId() {
        if (this.dataForm.parentId === '0') {
          // 顶级部门
          this.dataForm.ancestors = '0'
          return
        }

        // 从原始部门树中查找父部门的祖级列表
        const parentNode = this.findNodeById(this.originalDeptTree, this.dataForm.parentId)
        if (parentNode) {
          // 如果能找到父节点，使用父节点的祖级列表 + 父节点ID
          if (parentNode.parentId === '0') {
            this.dataForm.ancestors = '0,' + this.dataForm.parentId
          } else {
            this.dataForm.ancestors = parentNode.ancestors + ',' + this.dataForm.parentId
          }
        } else {
          // 如果找不到父节点，使用默认值
          this.dataForm.ancestors = '0'
        }
      },

      // 从部门树中查找指定ID的节点
      findNodeById(tree, id) {
        for (const node of tree) {
          if (node.deptId === id) {
            return node
          }
          if (node.children && node.children.length > 0) {
            const found = this.findNodeById(node.children, id)
            if (found) {
              return found
            }
          }
        }
        return null
      },

      // 表单数据提交
      async dataSubmit() {
        try {
          // 表单验证
          await this.$refs['dataForm'].validate()

          // 确保祖级列表正确
          this.updateAncestorsByParentId()

          if (this.dataForm.deptId) {
            // 更新部门
            await api.sysdeptUpdateApi(this.dataForm)
            this.$message.success('保存成功')
          } else {
            // 新增部门
            await api.sysdeptCreateApi(this.dataForm)
            this.$message.success('新增成功')
          }

          this.visible = false
          this.$emit('refreshDataList')
        } catch (error) {
          if (error !== false) { // 如果不是表单验证失败
            this.$message.error('操作失败，请重试')
            console.error('部门操作失败:', error)
          }
        }
      }
    },
    // 监听父部门ID变化
    watch: {
      'dataForm.parentId': {
        handler(newVal) {
          this.updateAncestorsByParentId()
        },
        immediate: true
      }
    }
  }
</script>
