<template>
  <div
    v-if="visible"
    class="dialog-overlay"
    @click.self="handleCancel"
  >
    <div
      class="dialog-container"
      :class="{ 'theme-light': theme === 'light', 'theme-dark': theme === 'dark' }"
    >
      <div class="dialog-header">
        <span class="dialog-title">{{ title }}</span>
        <div class="header-actions">
          <button
            class="close-button"
            @click="handleCancel"
          >×</button>
        </div>
      </div>

      <div class="dialog-tabs">
        <div
          class="tab"
          :class="{ active: activeTab === 'account' }"
          @click="activeTab = 'account'"
        >
          账户
        </div>
        <div
          class="tab"
          :class="{ active: activeTab === 'accountGroup' }"
          @click="activeTab = 'accountGroup'"
        >
          账户组
        </div>
      </div>

      <div class="search-container">
        <div class="search-input">
          <i class="search-icon">⚲</i>
          <div class="search-input-text">
            <input
              v-model="searchText"
              type="text"
              placeholder="输入关键词，可快速查找..."
              @input="filterTree"
            >
          </div>
        </div>
      </div>

      <!-- 账户标签内容 -->
      <div
        v-if="activeTab === 'account'"
        class="dialog-content"
      >
        <div class="tree-container">
          <el-tree
            ref="accountTree"
            :data="accountData"
            :props="defaultProps"
            :filter-node-method="filterNode"
            node-key="id"
            :expand-on-click-node="false"
            :default-expanded-keys="defaultExpandedKeys"
            @node-click="handleNodeClick"
          >
            <span
              slot-scope="{ node, data }"
              class="custom-tree-node"
              @dblclick.stop="handleDoubleClick(data)"
            >
              <span class="node-title">{{ node.label.replace(/^.{1}@{2}/, '') }}</span>
              <span
                v-if="data.text"
                class="node-subtitle"
              >{{ data.text }}</span>
            </span>
          </el-tree>
        </div>
      </div>

      <!-- 账户组标签内容 -->
      <div
        v-if="activeTab === 'accountGroup'"
        class="dialog-content"
      >
        <div class="account-group-list">
          <div
            v-for="(item, index) in filteredAccountGroups"
            :key="index"
            class="account-group-item"
            :class="{'selected': item.id == selectedItem?.id}"
            @click="selectItem(item)"
            @dblclick="handleDoubleClick(item)"
          >
            <span class="group-id">{{ item.value.replace(/^.{1}@{2}/, '') }}</span>
            <span class="group-name">{{ item.text }}</span>
          </div>
        </div>
      </div>

      <div class="dialog-footer">
        <button
          class="btn-cancel"
          @click="handleCancel"
        >取消</button>
        <button
          class="btn-confirm"
          @click="handleConfirm"
        >确定</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TreeSearchDialog',
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    // 允许外部传入初始主题
    initialTheme: {
      type: String,
      default: 'dark', // 默认为暗色主题
      validator: (value) => ['dark', 'light'].includes(value),
    },
    accountData: {
      type: Array,
      default: () => [],
    },
    accountGroups: {
      type: Array,
      default: () => [],
    },
    title: {
      type: String,
      default: '',
    },
    // 默认展开的节点
    defaultExpandedKeys: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      theme: this.initialTheme,
      activeTab: 'account',
      searchText: '',
      selectedItem: null,
      filteredAccountGroups: [],
      defaultProps: {
        children: 'children',
        label: 'value',
      },
    };
  },
  watch: {
    visible(val) {
      if (val && this.$refs.accountTree) {
        // 当对话框显示时，重置过滤器
        this.$refs.accountTree.filter('');
        this.searchText = '';
      }
    },
    accountGroups: {
      immediate: true,
      handler() {
        this.initDataGroup();
      },
    },
    accountData: {
      immediate: true,
      handler() {
        this.initData();
      },
    },
  },
  created() {

  },
  methods: {
    initDataGroup() {
      this.filteredAccountGroups = [...this.accountGroups];
    },
    initData() {

    },
    // 切换主题
    toggleTheme() {
      this.theme = this.theme === 'dark' ? 'light' : 'dark';
      this.$emit('theme-change', this.theme);
    },

    // el-tree 的节点过滤方法
    filterNode(value, data) {
      if (!value) return true;
      const searchTerm = value.toLowerCase();

      // 检查节点标题和副标题
      return data.value.toLowerCase().includes(searchTerm) ||
               (data.text && data.text.toLowerCase().includes(searchTerm));
    },

    // 处理搜索输入
    filterTree() {
      if (this.activeTab === 'account' && this.$refs.accountTree) {
        this.$refs.accountTree.filter(this.searchText);
      } else if (this.activeTab === 'accountGroup') {
        this.filterAccountGroups();
      }
    },

    // 过滤账户组
    filterAccountGroups() {
      if (!this.searchText) {
        this.filteredAccountGroups = [...this.accountGroups];
        return;
      }

      const searchTerm = this.searchText.toLowerCase();
      this.filteredAccountGroups = this.accountGroups.filter(group =>
        group.id.toLowerCase().includes(searchTerm) ||
          group.value.toLowerCase().includes(searchTerm) ||
          group.text.toLowerCase().includes(searchTerm),
      );
    },

    // 处理节点点击
    handleNodeClick(data) {
      this.selectedItem = data;
    },

    // 选择项目
    selectItem(data) {
      this.selectedItem = data;
    },

    // 处理双击事件
    handleDoubleClick(data) {
      this.selectedItem = data;
      this.handleConfirm();
    },

    // 取消按钮
    handleCancel() {
      this.$emit('cancel');
    },

    // 确认按钮
    handleConfirm() {
      this.$emit('confirm', this.selectedItem);
    },
  },
};
</script>

  <style lang="scss" scoped>
  /* 全局主题变量 */
  .dialog-overlay {
    /* 暗色主题变量 */
    --dark-bg-primary: #141D28;
    --dark-bg-secondary: #2c3347;
    --dark-bg-tertiary: #3a4257;
    --dark-tab-bg-primary: #212b39;
    --dark-text-primary: #ffffff;
    --dark-text-secondary: #8e8e8e;
    --dark-border: #2c3347;
    --dark-accent: #3a8ee6;
    --dark-hover: rgba(255, 255, 255, 0.05);
    --dark-selected: rgba(255, 255, 255, 0.1);

    /* 亮色主题变量 */
    --light-bg-primary: #ffffff;
    --light-bg-secondary: #f5f7fa;
    --light-bg-tertiary: #e4e7ed;
    --light-tab-bg-primary: #ffffff;
    --light-text-primary: #303133;
    --light-text-secondary: #606266;
    --light-border: #dcdfe6;
    --light-accent: #409eff;
    --light-hover: rgba(0, 0, 0, 0.05);
    --light-selected: rgba(0, 0, 0, 0.1);
  }
  .dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
  }

  /* 主题相关样式 */
  .dialog-container {
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  /* 暗色主题 */
  .theme-dark {
    background-color: var(--dark-bg-primary);
    color: var(--dark-text-primary);
  }

  /* 亮色主题 */
  .theme-light {
    background-color: var(--light-bg-primary);
    color: var(--light-text-primary);
  }

  .dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
  }

  .theme-dark .dialog-header {
    border-bottom: 1px solid var(--dark-border);
  }

  .theme-light .dialog-header {
    border-bottom: 1px solid var(--light-border);
  }

  .dialog-title {
    font-size: 14px;
    font-weight: 500;
  }

  .header-actions {
    display: flex;
    align-items: center;
  }

  .theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 22px;
  }

  .close-button {
    background: none;
    border: none;
    font-size: 30px;
    cursor: pointer;
    padding: 0;
    margin: 0;
  }

  .theme-dark .close-button {
    color: var(--dark-text-secondary);
  }

  .theme-light .close-button {
    color: var(--light-text-secondary);
  }

  .dialog-tabs {
    display: flex;
    padding: 2px;
    margin: 12px 16px;
    border-radius: 2px;
    font-size: 12px;
  }

  .theme-dark .dialog-tabs {
    background-color: var(--dark-tab-bg-primary);
  }

  .theme-light .dialog-tabs {
    background-color: var(--light-tab-bg-primary);
  }

  .tab {
    cursor: pointer;
    flex: 1;
    text-align: center;
    border-radius: 2px;
  }

  .theme-dark .tab {
    background-color: transparent;
    color: var(--dark-text-secondary);
  }

  .theme-light .tab {
    background-color: transparent;
    color: var(--light-text-secondary);
  }

  .theme-dark .tab.active {
    background-color: var(--dark-bg-secondary);
    color: var(--dark-text-primary);
  }

  .theme-light .tab.active {
    background-color: var(--light-bg-secondary);
    color: var(--light-text-primary);
  }

  .search-container {
    padding: 12px 16px;
  }

  .search-input {
    position: relative;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.2);
  }

  .search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
  }

  .search-input-text {
    width: 100%;
    display: flex;
  }

  .theme-dark .search-icon {
    color: var(--dark-text-secondary);
  }

  .theme-light .search-icon {
    color: var(--light-text-secondary);
  }

  .search-input input {
    font-size: 12px;
    width: 100%;
    padding: 8px 8px 8px 36px;
    border-radius: 4px;
    border: none;
  }

  .theme-dark .search-input input {
    background-color: transparent;
    color: var(--dark-text-primary);
  }

  .theme-light .search-input input {
    background-color: transparent;
    color: var(--light-text-primary);
  }

  .theme-dark .search-input input::placeholder {
    color: var(--dark-text-secondary);
  }

  .theme-light .search-input input::placeholder {
    color: var(--light-text-secondary);
  }

  .dialog-content {
    flex: 1;
    overflow-y: auto;
    max-height: calc(90vh - 180px);
  }

  .tree-container {
    padding: 0 16px;
    font-size: 12px;
  }

  /* 自定义 el-tree 样式 */
  .theme-dark :deep(.el-tree) {
    background-color: transparent !important;
    color: var(--dark-text-primary) !important;
  }

  .theme-light :deep(.el-tree) {
    background-color: transparent !important;
    color: var(--light-text-primary) !important;
  }

  .theme-dark :deep(.el-tree-node__content) {
    background-color: transparent !important;
  }

  .theme-light :deep(.el-tree-node__content) {
    background-color: transparent !important;
  }

  .theme-dark :deep(.el-tree-node__content:hover) {
    background-color: var(--dark-hover) !important;
  }

  .theme-light :deep(.el-tree-node__content:hover) {
    background-color: var(--light-hover) !important;
  }

  .theme-dark :deep(.el-tree-node:focus > .el-tree-node__content) {
    background-color: var(--dark-selected) !important;
  }

  .theme-light :deep(.el-tree-node:focus > .el-tree-node__content) {
    background-color: var(--light-selected) !important;
  }

  .theme-dark :deep(.el-tree-node__expand-icon) {
    color: var(--dark-text-secondary);
  }

  .theme-light :deep(.el-tree-node__expand-icon) {
    color: var(--light-text-secondary) !important;
  }

  .theme-dark :deep(.el-tree-node__expand-icon.expanded) {
    color: var(--dark-text-primary) !important;
  }

  .theme-light :deep(.el-tree-node__expand-icon.expanded) {
    color: var(--light-text-primary) !important;
  }

  .custom-tree-node {
    display: flex;
    align-items: center;
    width: 100%;
    padding-right: 8px;
  }

  .node-title {
    font-weight: 500;
    margin-right: 8px;
  }

  .theme-dark .node-subtitle {
    color: var(--dark-text-secondary);
  }

  .theme-light .node-subtitle {
    color: var(--light-text-secondary);
  }

  .account-group-list {
    padding: 0 16px;
    font-size: 12px;
  }

  .account-group-item {
    display: flex;
    padding: 10px 0;
    cursor: pointer;
  }

  .theme-dark .account-group-item {
    border-bottom: 1px solid var(--dark-border);
  }

  .theme-light .account-group-item {
    border-bottom: 1px solid var(--light-border);
  }

  .theme-dark .account-group-item:hover {
    background-color: var(--dark-hover);
  }

  .theme-light .account-group-item:hover {
    background-color: var(--light-hover);
  }

  .theme-dark .account-group-item.selected {
    background-color: var(--dark-selected);
  }

  .theme-light .account-group-item.selected {
    background-color: var(--light-selected);
  }

  .theme-dark .account-group-item.highlighted {
    color: var(--dark-accent);
  }

  .theme-light .account-group-item.highlighted {
    color: var(--light-accent);
  }

  .group-id {
    margin-right: 12px;
    font-weight: 500;
  }

  .theme-dark .group-name, .theme-dark .group-desc {
    color: var(--dark-text-secondary);
    margin-right: 8px;
  }

  .theme-light .group-name, .theme-light .group-desc {
    color: var(--light-text-secondary);
    margin-right: 8px;
  }

  .dialog-footer {
    display: flex;
    justify-content: flex-end;
    padding: 12px 16px;
  }

  .theme-dark .dialog-footer {
    border-top: 1px solid var(--dark-border);
  }

  .theme-light .dialog-footer {
    border-top: 1px solid var(--light-border);
  }

  .btn-cancel, .btn-confirm {
    padding: 6px 16px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    margin-left: 8px;
    font-size: 12px;
  }

  .theme-dark .btn-cancel {
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--dark-text-primary);
  }

  .theme-light .btn-cancel {
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--light-text-primary);
  }

  .theme-dark .btn-confirm {
    background-color: var(--dark-accent);
    color: var(--dark-text-primary);
  }

  .theme-light .btn-confirm {
    background-color: var(--light-accent);
    color: #ffffff;
  }
  </style>
