<template>
  <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body>
    <div class="group-chat-selector">
      <!-- 左侧搜索选择区域 -->
      <div class="left-panel">
        <div class="search-box">
          <el-input
            v-model="searchMsg"
            placeholder="请输入群聊名称搜索"
            clearable
            @input="handleSearch"
          >
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </div>
        <div class="group-list">
          <el-checkbox-group v-model="selectedChatIds">
            <div v-for="item in filteredGroupList" :key="item.chatId" class="group-item">
              <el-checkbox :label="item.chatId" @change="handleCheckboxChange">
                <div class="group-info">
                  <span class="group-name">{{ item.name }}</span>
                </div>
              </el-checkbox>
            </div>
          </el-checkbox-group>
        </div>
      </div>
      
      <!-- 分隔线 -->
      <div class="divider"></div>
      
      <!-- 右侧结果展示区域 -->
      <div class="right-panel">
        <div class="selected-header">
          <span>已选择群聊 ({{ selectedChatIds.length }})</span>
          <el-button type="text" @click="clearSelection">清空</el-button>
        </div>
        <div class="selected-list">
          <div v-for="chatId in selectedChatIds" :key="chatId" class="selected-item">
            <span class="selected-name">{{ getGroupNameById(chatId) }}</span>
            <el-button 
              type="text" 
              icon="el-icon-close" 
              @click="removeSelected(chatId)"
              class="remove-btn"
            ></el-button>
          </div>
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="confirmSelection">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
// import { listAll as chatListAll } from '@/api/qw/groupChat'

export default {
  name: "GroupChatSelector",
  props: {
    title: {
      type: String,
      default: "选择群聊"
    },
    qwUserIds: {
      type: Array,
      default: () => []
    },
    corpId: {
      type: String,
      default: ""
    },
    sopId: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      open: false,
      searchMsg: "",
      groupList: [],
      selectedChatIds: [],
      initialSelectedChatIds: [], // 用于存储初始选中的群聊ID
      groupNameCache: {} // 用于缓存群聊名称
    };
  },
  computed: {
    filteredGroupList() {
      if (!this.searchMsg) {
        return this.groupList;
      }
      return this.groupList.filter(item => 
        item.name.toLowerCase().includes(this.searchMsg.toLowerCase())
      );
    }
  },
  methods: {
    // 获取群聊列表
    getGroupChatList() {
      const qwUserIdsStr = this.qwUserIds.join();
      // chatListAll(qwUserIdsStr, this.corpId, this.sopId, this.searchMsg).then(res => {
      //   this.groupList = res.data || [];
      //   // 更新缓存
      //   this.updateGroupNameCache();
      // });
    },
    
    // 更新群聊名称缓存
    updateGroupNameCache() {
      if (!this.groupNameCache) {
        this.groupNameCache = {};
      }
      
      // 将所有群聊信息添加到缓存中
      this.groupList.forEach(group => {
        if (group.chatId && group.name) {
          this.groupNameCache[group.chatId] = group.name;
        }
      });
    },
    
    // 处理搜索
    handleSearch() {
      this.getGroupChatList();
    },
    
    // 根据ID获取群聊名称
    getGroupNameById(chatId) {
      // 先从缓存中查找
      if (this.groupNameCache && this.groupNameCache[chatId]) {
        return this.groupNameCache[chatId];
      }
      
      // 如果缓存中没有，则从当前列表中查找
      const group = this.groupList.find(item => item.chatId === chatId);
      if (group && group.name) {
        // 找到后保存到缓存
        if (!this.groupNameCache) {
          this.groupNameCache = {};
        }
        this.groupNameCache[chatId] = group.name;
        return group.name;
      }
      
      return chatId || '';
    },
    
    // 处理复选框变化
    handleCheckboxChange() {
      // 复选框变化时立即通知父组件更新
      this.$emit('selectGroupChats', this.selectedChatIds);
    },
    
    // 从右侧移除选中项
    removeSelected(chatId) {
      const index = this.selectedChatIds.indexOf(chatId);
      if (index !== -1) {
        this.selectedChatIds.splice(index, 1);
        // 移除选中项时立即通知父组件更新
        this.$emit('selectGroupChats', this.selectedChatIds);
      }
    },
    
    // 清空选择
    clearSelection() {
      this.selectedChatIds = [];
    },
    
    // 确认选择
    confirmSelection() {
      this.$emit('selectGroupChats', this.selectedChatIds);
      this.cancel();
    },
    
    // 取消选择
    cancel() {
      this.open = false;
      this.searchMsg = "";
      // 恢复到初始选中状态
      this.selectedChatIds = [...this.initialSelectedChatIds];
    },
    
    // 打开弹窗并初始化数据
    show(selectedChatIds = []) {
      this.open = true;
      this.selectedChatIds = [...selectedChatIds];
      this.initialSelectedChatIds = [...selectedChatIds];
      this.getGroupChatList();
    }
  }
};
</script>

<style scoped>
.group-chat-selector {
  display: flex;
  height: 500px;
}

.left-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-right: 10px;
}

.search-box {
  margin-bottom: 15px;
}

.group-list {
  flex: 1;
  overflow-y: auto;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
}

.group-item {
  padding: 10px;
  transition: background-color 0.3s;
}

.group-item:hover {
  background-color: #f5f7fa;
}

.group-info {
  display: flex;
  align-items: center;
}

.group-name {
  margin-left: 5px;
  font-size: 14px;
}

.divider {
  width: 1px;
  background-color: #e6e6e6;
  margin: 0 15px;
}

.right-panel {
  width: 300px;
  display: flex;
  flex-direction: column;
}

.selected-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding: 0 10px;
}

.selected-list {
  flex: 1;
  overflow-y: auto;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
}

.selected-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.3s;
}

.selected-item:hover {
  background-color: #f5f7fa;
}

.selected-item {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.selected-name {
  flex: 1;
}

.remove-btn {
  padding: 2px;
}

.remove-btn:hover {
  color: #f56c6c;
  transform: scale(1.2);
  transition: transform 0.2s;
}
</style>