<template>
  <div class="tree-select-wrapper">
    <el-select
      ref="selectRef"
      v-model="selectedLabel"
      :popper-append-to-body="popperAppendToBody"
      :teleported="teleported"
      :placeholder="placeholder"
      :disabled="disabled"
      :clearable="clearable"
      :filterable="filterable"
      :filter-method="filterMethod"
      popper-class="tree-select-popper"
      @clear="handleClear"
      @visible-change="handleVisibleChange"
    >
      <!-- 关键修复：el-option 的 value 不能绑定 selectedLabel，需要绑定一个唯一值 -->
      <el-option
        :value="selectedValue"
        :label="selectedLabel"
        style="height: auto; padding: 0"
        class="tree-select-option"
      >
        <!-- 搜索框 -->
        <div v-if="filterable" class="tree-search">
          <el-input
            v-model="searchText"
            size="small"
            placeholder="输入关键词搜索"
            clearable
            @input="handleSearch"
          />
        </div>

        <!-- 树形结构 -->
        <el-tree
          ref="treeRef"
          :data="treeData"
          :props="treeProps"
          :show-checkbox="multiple"
          :node-key="nodeKey"
          :default-expand-all="defaultExpandAll"
          :default-expanded-keys="defaultExpandedKeys"
          :filter-node-method="filterNode"
          :check-strictly="checkStrictly"
          :expand-on-click-node="false"
          :highlight-current="!multiple"
          :current-node-key="currentNodeKey"
          @node-click="handleNodeClick"
          @check="handleCheck"
        >
          <span slot-scope="{ node, data }" class="custom-tree-node">
            <span>{{ node.label }}</span>
            <span v-if="data.count" class="node-count">({{ data.count }})</span>
          </span>
        </el-tree>
      </el-option>
    </el-select>
  </div>
</template>

<script>
  import { listOrganizations } from '@/api/system/organization';

  export default {
    name: 'TreeSelect',
    props: {
      value: {
        type: [String, Number, Array],
        default: null
      },
      data: {
        type: Array,
        required: true,
        default: () => []
      },
      multiple: {
        type: Boolean,
        default: false
      },
      placeholder: {
        type: String,
        default: '请选择'
      },
      disabled: {
        type: Boolean,
        default: false
      },
      clearable: {
        type: Boolean,
        default: true
      },
      filterable: {
        type: Boolean,
        default: false
      },
      nodeKey: {
        type: String,
        default: 'id'
      },
      treeProps: {
        type: Object,
        default: () => ({
          children: 'children',
          label: 'name'
        })
      },
      defaultExpandAll: {
        type: Boolean,
        default: true
      },
      defaultExpandedKeys: {
        type: Array,
        default: () => []
      },
      checkStrictly: {
        type: Boolean,
        default: false
      },
      popperAppendToBody: {
        type: Boolean,
        default: false
      },
      teleported: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        selectedLabel: '', // 显示的文本
        selectedValue: null, // 选中的值（用于单选）
        selectedValues: [], // 多选时选中的值数组
        currentNodeKey: null, // 当前高亮的节点key
        searchText: '', // 搜索关键词
        treeData: [], // 过滤后的树数据
        dataLoaded: false // 新增：标记数据是否加载完成
      };
    },
    watch: {
      value: {
        handler() {
          // 等待数据加载完成后再初始化
          if (this.dataLoaded) {
            this.initSelectedValue();
          }
        },
        immediate: true
      },
      // 新增：监听 treeData 变化，数据加载完成后初始化选中值
      treeData: {
        handler(val) {
          if (val && val.length && !this.dataLoaded) {
            this.dataLoaded = true;
            this.initSelectedValue();
          }
        },
        immediate: true
      }
    },
    async created() {
      await this.getData(); // 改为 await 等待数据加载完成
    },
    mounted() {
      this.$nextTick(() => {
        if (this.$refs.treeRef) {
          this.$refs.treeRef.$on('node-expand', this.updatePopperPosition);
          this.$refs.treeRef.$on('node-collapse', this.updatePopperPosition);
        }
      });
    },
    beforeDestroy() {
      if (this.$refs.treeRef) {
        this.$refs.treeRef.$off('node-expand', this.updatePopperPosition);
        this.$refs.treeRef.$off('node-collapse', this.updatePopperPosition);
      }
    },
    methods: {
      async getData(params = {}) {
        const data = await listOrganizations(params);
        this.treeData = this.$util.toTreeData({
          data: data || [],
          idField: 'id',
          parentIdField: 'parentId'
        });
        // 数据加载完成后标记
        this.dataLoaded = true;
      },

      // 初始化选中的值（优化：从 this.treeData 查找，而不是 this.data）
      initSelectedValue() {
        // 如果数据还没加载完成，先不处理
        if (!this.dataLoaded && !this.treeData.length) {
          return;
        }

        if (this.multiple) {
          const val = this.value || [];
          this.selectedValues = [...val];
          this.selectedLabel = this.getSelectedLabels(val).join('、');
          this.selectedValue = val.length ? val.join(',') : '';

          this.$nextTick(() => {
            if (this.$refs.treeRef) {
              this.$refs.treeRef.setCheckedKeys(this.selectedValues);
            }
          });
        } else {
          this.selectedValue = this.value;
          if (this.value !== null && this.value !== undefined) {
            // 关键修复：从 this.treeData 查找，而不是 this.data
            const node = this.findNodeByValue(this.value, this.treeData);
            this.selectedLabel = node ? node[this.treeProps.label] : '';
            this.currentNodeKey = this.value;
          } else {
            this.selectedLabel = '';
            this.currentNodeKey = null;
          }

          this.$nextTick(() => {
            if (this.$refs.treeRef && this.value) {
              this.$refs.treeRef.setCurrentKey(this.value);
            }
          });
        }
      },

      // 根据值查找节点（从指定数据源查找）
      findNodeByValue(value, dataSource = this.treeData) {
        if (!dataSource || !dataSource.length) return null;

        for (const item of dataSource) {
          if (item[this.nodeKey] === value) {
            return item;
          }
          const children = item[this.treeProps.children];
          if (children && children.length) {
            const found = this.findNodeByValue(value, children);
            if (found) return found;
          }
        }
        return null;
      },

      // 获取节点标签
      getNodeLabel(value, dataSource = this.treeData) {
        const node = this.findNodeByValue(value, dataSource);
        return node ? node[this.treeProps.label] : '';
      },

      // 批量获取标签文本（多选）
      getSelectedLabels(values, dataSource = this.treeData, result = []) {
        if (!dataSource || !dataSource.length) return result;

        for (const item of dataSource) {
          if (values.includes(item[this.nodeKey])) {
            result.push(item[this.treeProps.label]);
          }
          const children = item[this.treeProps.children];
          if (children && children.length) {
            this.getSelectedLabels(values, children, result);
          }
        }
        return result;
      },

      // 树节点点击（单选模式）
      handleNodeClick(data) {
        if (!this.multiple) {
          const value = data[this.nodeKey];
          const label = data[this.treeProps.label];

          this.selectedValue = value;
          this.selectedLabel = label;
          this.currentNodeKey = value;

          this.$emit('input', value);
          this.$emit('change', value, data);

          this.$nextTick(() => {
            if (this.$refs.selectRef) {
              this.$refs.selectRef.visible = false;
            }
          });
        }
      },

      // 树节点勾选（多选模式）
      handleCheck(data, checkedState) {
        const checkedKeys = checkedState.checkedKeys;
        this.selectedValues = [...checkedKeys];
        this.selectedLabel = this.getSelectedLabels(checkedKeys).join('、');
        this.selectedValue = checkedKeys.length ? checkedKeys.join(',') : '';

        this.$emit('input', checkedKeys);
        this.$emit('change', checkedKeys, data);
      },

      // 清空
      handleClear() {
        if (this.multiple) {
          this.selectedValues = [];
          this.selectedLabel = '';
          this.selectedValue = '';
          this.$emit('input', []);
          if (this.$refs.treeRef) {
            this.$refs.treeRef.setCheckedKeys([]);
          }
        } else {
          this.selectedValue = null;
          this.selectedLabel = '';
          this.currentNodeKey = null;
          this.$emit('input', null);
          if (this.$refs.treeRef) {
            this.$refs.treeRef.setCurrentKey(null);
          }
        }
      },

      // 下拉框显示/隐藏
      handleVisibleChange(visible) {
        if (visible) {
          this.$nextTick(() => {
            if (this.$refs.treeRef) {
              if (this.multiple) {
                this.$refs.treeRef.setCheckedKeys(this.selectedValues);
              } else {
                this.$refs.treeRef.setCurrentKey(this.selectedValue);
              }
            }
            this.updatePopperPosition();
          });
        }
      },

      // 更新下拉框位置
      updatePopperPosition() {
        this.$nextTick(() => {
          if (this.$refs.selectRef && this.$refs.selectRef.visible) {
            const select = this.$refs.selectRef;
            if (select.popper) {
              select.popper.update();
            }
          }
        });
      },

      // 树节点过滤
      filterNode(value, data) {
        if (!value) return true;
        const label = data[this.treeProps.label];
        return label && label.toLowerCase().includes(value.toLowerCase());
      },

      // 搜索方法
      filterMethod(query) {
        this.searchText = query;
      },

      // 处理搜索
      handleSearch(value) {
        if (this.$refs.treeRef) {
          this.$refs.treeRef.filter(value);
        }
      }
    }
  };
</script>

<style scoped>
  .tree-select-wrapper {
    width: 100%;
  }

  .tree-search {
    padding: 8px 12px;
    border-bottom: 1px solid #e4e7ed;
  }

  .tree-search >>> .el-input__inner {
    height: 28px;
    line-height: 28px;
  }

  .custom-tree-node {
    display: inline-block;
    width: 100%;
    font-size: 14px;
  }

  .node-count {
    margin-left: 8px;
    color: #909399;
    font-size: 12px;
  }
</style>

<style>
  /* 下拉框样式 - 全局样式 */
  .tree-select-popper {
    max-height: 400px;
    overflow: auto;
    padding: 0 !important;
  }

  .tree-select-popper .el-tree {
    min-width: 200px;
    max-height: 350px;
    overflow: auto;
  }

  .tree-select-popper .el-tree-node__content {
    height: 32px;
  }

  .tree-select-popper .el-checkbox {
    margin-right: 8px;
  }

  /* 关键修复：让 el-option 内容完全展开 */
  .tree-select-option {
    height: auto !important;
    line-height: normal !important;
    padding: 0 !important;
  }

  .tree-select-option .el-select-dropdown__item {
    height: auto !important;
    padding: 0 !important;
  }
</style>
