<template>
  <div class="search-list">
    <n-infinite-scroll
      :style="{ maxHeight: props.searchResultMaxHeight }"
      :distance="47"
      @load="doLoadMore"
    >
      <div class="search-result">
        <div class="search-result-list">
          <div
            class="search-result-each-part"
            v-for="(searchResultValue, searchResultKey, searchResultIndex) in state.searchResult"
            :key="searchResultKey"
          >
            <div
              class="search-result-part"
              v-if="
                Array.isArray(state?.searchResult[searchResultKey]) &&
                state?.searchResult[searchResultKey].length > 0 &&
                searchResultKey !== 'group_infos' &&
                searchResultKey !== 'group_member_infos'
              "
              :style="{ margin: props.useCustomTitle ? '0' : '' }"
            >
              <!-- <div class="result-title" v-if="!props.useCustomTitle">
                <span class="text-[14px] font-regular">
                  {{ getResultKeysValue(searchResultKey) }}
                </span>
              </div> -->
              <slot
                name="result-title"
                :getResultKeysValue="getResultKeysValue"
                :searchResultKey="searchResultKey"
                :searchResultIndex="searchResultIndex"
              ></slot>
              <div class="result-list">
                <div
                  class="result-list-each"
                  v-for="(item, index) in state?.searchResult[searchResultKey]"
                  :key="index"
                >
                  <searchItem
                    @click="clickSearchItem(searchResultKey, item)"
                    v-if="
                      (searchResultKey === 'user_infos'
                        ? state.userInfosShowAll || (props.listLimit && index < 3)
                        : searchResultKey === 'combinedGroup'
                        ? state.groupInfosShowAll || (props.listLimit && index < 3)
                        : props.listLimit && index < 3) || !props.listLimit
                    "
                    :searchResultKey="searchResultKey"
                    :searchItem="item"
                    :searchText="state.searchText"
                    :searchRecordDetail="props.searchRecordDetail"
                    :isClickStay="
                      props.useClickStay &&
                      typeof state.clickStayItem === 'string' &&
                      state.clickStayItem === `${item.talk_type}_${item.receiver_id}`
                    "
                  ></searchItem>
                </div>
              </div>
              <div
                class="result-has-more"
                v-if="
                  getHasMoreResult(searchResultKey) &&
                  !(
                    (searchResultKey === 'user_infos' && state.userInfosExpand) ||
                    (searchResultKey === 'combinedGroup' && state.groupInfosExpand)
                  )
                "
                @click="onMoreResultClick(searchResultKey)"
              >
                <span class="text-[14px] font-regular">
                  {{ getHasMoreResult(searchResultKey) }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </n-infinite-scroll>
    <!-- <ZPaging
      ref="zPaging"
      :show-scrollbar="false"
      v-model="state.searchResultList"
      @query="queryAllSearch"
      :default-page-no="state.pageNum"
      :default-page-size="props.searchResultPageSize"
      :loading-more-default-as-loading="true"
      :inside-more="true"
      :empty-view-img="searchNoData"
      :empty-view-text="'检索您要查找的内容吧～'"
      :empty-view-img-style="{ width: '238px', height: '131px' }"
      :empty-view-title-style="{
        color: '#999999',
        margin: '-10px 0 0',
        'line-height': '20px',
        'font-size': '14px',
        'font-weight': 400,
      }"
      :refresher-enabled="false"
    >
      <template #top>
        <div class="searchRoot">
          <customInput
            :searchText="state.searchText"
            :first_talk_record_infos="state.first_talk_record_infos"
            @inputSearchText="inputSearchText"
          ></customInput>
          <span
            class="searchRoot_cancelBtn text-[16px] font-medium"
            @click="cancelSearch"
          >
            取消
          </span>
        </div>
      </template>
      <div
        class="search-record-detail"
        v-if="props.searchRecordDetail && !props?.hideFirstRecord"
      >
        <searchItem
          @click="
            clickSearchItem(
              'talk_record_infos_receiver',
              state?.first_talk_record_infos,
            )
          "
          searchResultKey="talk_record_infos_receiver"
          :searchItem="state?.first_talk_record_infos"
          :pointerIconSrc="pointerIconSrc"
        ></searchItem>
      </div>
      <div
        class="search-result"
        :style="
          !state.searchText ? 'align-items:center;justify-content:center;' : ''
        "
      >
        
      </div>
    </ZPaging> -->
  </div>
</template>
<script setup>
// import searchNoData from '@/static/image/search/search-no-data.png'
// import customInput from '@/components/custom-input/custom-input.vue'
// import pointerIconSrc from '@/static/image/search/search-item-pointer.png'
// import lodash from 'lodash'
// import { useUserStore } from '@/store'
// const userStore = useUserStore()

// import ZPaging from '@/uni_modules/z-paging/components/z-paging/z-paging.vue'
// import useZPaging from '@/uni_modules/z-paging/components/z-paging/js/hooks/useZPaging.js'
// const zPaging = ref()
// useZPaging(zPaging)

import { NInfiniteScroll } from 'naive-ui'
import searchItem from './searchItem.vue'
import { ref, reactive, defineEmits, defineProps, onMounted, watch } from 'vue'
import { ServeQueryUser, ServeQueryGroup } from '@/api/search'

const emits = defineEmits([
  'toMoreResultPage',
  'lastIdChange',
  'clickSearchItem',
  'clickStayItemChange',
  'resultTotalCount'
])

const state = reactive({
  searchText: '', //搜索内容
  searchResultList: [], //搜素结果列表
  searchResult: null, //搜索结果
  pageNum: 1, //当前请求数据页数
  uid: 12303, //当前用户id
  clickStayItem: '', //点击停留的item
  hasMore: true, //是否还有更多数据
  loading: false, //加载锁
  userInfosExpand: false, // 控制通讯录全部加载完
  userInfosLoading: false, // 控制通讯录加载更多状态
  userInfosLastId: undefined, // 记录通讯录分页的 last_id
  userInfosShowAll: false, // 只要点过"更多通讯录"就为 true
  groupInfosExpand: false, // 控制群聊全部加载完
  groupInfosLoading: false, // 控制群聊加载更多状态
  groupInfosLastGroupId: 0, // 记录群聊分页的 last_group_id
  groupInfosLastMemberId: 0, // 记录群聊分页的 last_member_id
  groupInfosShowAll: false // 只要点过"更多群聊"就为 true
})

const props = defineProps({
  searchResultPageSize: {
    type: Number,
    default: 0
  }, //搜索结果每页数据量
  listLimit: {
    type: Boolean,
    default: false
  }, //是否限制列表内数据数量
  apiParams: {
    type: String,
    default: ''
  }, //请求参数
  apiRequest: Function, //请求
  searchText: {
    type: String,
    default: ''
  }, //搜索内容
  isPagination: {
    type: Boolean,
    default: false
  }, //是否分页
  searchRecordDetail: {
    type: Boolean,
    default: false
  }, //是否是搜索聊天记录的详情
  first_talk_record_infos: {
    type: Object,
    default() {
      return {}
    }
  }, //接受者信息
  hideFirstRecord: {
    type: Boolean,
    default: false
  }, //是否隐藏前缀及搜索群/用户主体信息
  useClickStay: {
    type: Boolean,
    default: false
  }, //是否使用点击停留样式
  searchResultMaxHeight: {
    type: String,
    default: '677px'
  }, //搜索结果最大高度
  useCustomTitle: {
    type: Boolean,
    default: false
  }, //是否使用自定义标题
  selectItemInList: {
    type: String,
    default: ''
  } //在列表选中的聊天记录搜索项
})

onMounted(() => {
  if (props.searchText) {
    state.searchText = props.searchText
    queryAllSearch()
  }
})

// 监听每页数量变化
watch(
  () => props.searchResultPageSize,
  (newVal, oldVal) => {
    queryAllSearch()
  }
)

// 监听搜索文本变化
watch(
  () => props.searchText,
  (newVal, oldVal) => {
    // 同步更新 state.searchText
    state.searchText = newVal
    // 清空搜索结果
    state.searchResult = null
    // 重置页码
    state.pageNum = 1
    //重置点击停留列表项
    state.clickStayItem = ''
    emits('clickStayItemChange', state.clickStayItem)
    //重置搜索条件
    emits('lastIdChange', 0, 0, 0, '', '')
    state.userInfosExpand = false
    state.userInfosShowAll = false
    state.userInfosLastId = undefined
    state.groupInfosExpand = false
    state.groupInfosShowAll = false
    state.groupInfosLastGroupId = 0
    state.groupInfosLastMemberId = 0
    queryAllSearch()
  }
)

// ES搜索聊天记录-主页搜索什么都有、指定用户、指定群、群与用户概览
const queryAllSearch = (doClearSearchResult) => {
  if (doClearSearchResult) {
    state.searchResult = null
  }
  let params = {
    key: state.searchText, //关键字
    size: props.searchResultPageSize
  }
  if (props.apiParams) {
    let apiParams = JSON.parse(decodeURIComponent(props.apiParams))
    params = Object.assign({}, params, apiParams)
  }

  const resp = props.apiRequest(params)
  resp.then(({ code, data }) => {
    console.log(data)
    if (code == 200) {
      if ((data.user_infos || []).length > 0) {
        ;(data.user_infos || []).forEach((item) => {
          item.group_type = 0
        })
      }
      if ((data.group_infos || []).length > 0) {
        ;(data.group_infos || []).forEach((item) => {
          item.group_type = item.type
          item.groupTempType = 'group_infos'
        })
      }
      if ((data.group_member_infos || []).length > 0) {
        ;(data.group_member_infos || []).forEach((item) => {
          item.groupTempType = 'group_member_infos'
        })
      }
      if ((data.talk_record_infos || []).length > 0) {
        let receiverInfo = JSON.parse(JSON.stringify(data.talk_record_infos[0]))
        if (receiverInfo.talk_type === 1) {
          //单聊才需此判断
          if (receiverInfo.user_id === state.uid) {
            //发送人是自己，接收人不需要变
          }
          if (receiverInfo.receiver_id === state.uid) {
            //接收人是自己，这里需要变成对方
            let temp_id = receiverInfo.receiver_id
            let temp_name = receiverInfo.receiver_name
            let temp_avatar = receiverInfo.receiver_avatar
            receiverInfo.receiver_id = receiverInfo.user_id
            receiverInfo.receiver_name = receiverInfo.user_name
            receiverInfo.receiver_avatar = receiverInfo.user_avatar
            receiverInfo.user_id = temp_id
            receiverInfo.user_name = temp_name
            receiverInfo.user_avatar = temp_avatar
          }
        }
        state.first_talk_record_infos = Object.assign(
          {},
          state.first_talk_record_infos,
          receiverInfo
        )
        ;(data.talk_record_infos || []).forEach((item) => {
          item.group_type = 0
        })
      }

      let tempGeneral_infos = Array.isArray(data.general_infos)
        ? [...data.general_infos]
        : data.general_infos
      delete data.general_infos
      data.combinedGroup = (data.group_infos || []).concat(data.group_member_infos || [])
      data.general_infos = tempGeneral_infos

      // 检查数据是否为空
      let isEmpty = true
      let dataKeys = Object.keys(data)
      let paginationKey = ''
      dataKeys.forEach((item) => {
        if (Array.isArray(data[item]) && data[item].length > 0) {
          paginationKey = item
          isEmpty = false
        }
      })

      if (isEmpty) {
        if (state.pageNum === 1) {
          // 第一页请求且为空，清空结果
          state.searchResult = null
          // zPaging.value?.complete([])
        } else {
          // 加载更多且为空，保持原列表不变
          // zPaging.value?.complete(state.searchResult ? [state.searchResult] : [])
        }
      } else {
        if (props.isPagination) {
          if (state.pageNum === 1) {
            // 第一页请求，直接设置新数据
            state.searchResult = data
          } else {
            // 加载更多，合并数据
            data[paginationKey] = (state.searchResult?.[paginationKey] || []).concat(
              data[paginationKey]
            )
            state.searchResult = data
          }

          emits(
            'lastIdChange',
            data.last_id,
            data.last_group_id,
            data.last_member_id,
            data.last_receiver_user_name,
            data.last_receiver_group_name
          )
          let total = data.count
          if (props.searchRecordDetail) {
            if (state?.first_talk_record_infos?.talk_type === 1) {
              total = data.user_record_count
            } else if (state?.first_talk_record_infos?.talk_type === 2) {
              total = data.group_record_count
            }
            let noMoreSearchResultRecord = true
            if (
              Object.keys(data).includes('talk_record_infos') &&
              state.searchResult['talk_record_infos']?.length > 0
            ) {
              //搜聊天记录详情
              if (state.searchResult['talk_record_infos']?.length < total) {
                noMoreSearchResultRecord = false
              }
            }
            if (noMoreSearchResultRecord) {
              state.hasMore = false
            } else {
              state.hasMore = true
            }
          } else {
            let noMoreSearchResultUser = true
            let noMoreSearchResultGroup = true
            let noMoreSearchResultGeneral = true
            if (
              Object.keys(data).includes('user_infos') &&
              state.searchResult['user_infos']?.length > 0
            ) {
              //搜人
              if (state.searchResult['user_infos']?.length < total) {
                noMoreSearchResultUser = false
              }
            }
            if (
              Object.keys(data).includes('group_member_infos' || 'group_infos') &&
              state.searchResult['combinedGroup']?.length > 0
            ) {
              //搜群
              if (state.searchResult['combinedGroup']?.length < total) {
                noMoreSearchResultGroup = false
              }
            }
            if (
              Object.keys(data).includes('general_infos') &&
              state.searchResult['general_infos']?.length > 0
            ) {
              //搜聊天记录
              if (state.searchResult['general_infos']?.length < total) {
                noMoreSearchResultGeneral = false
              }
            }
            if (noMoreSearchResultUser && noMoreSearchResultGroup && noMoreSearchResultGeneral) {
              state.hasMore = false
            } else {
              state.hasMore = true
            }
          }
          emits('resultTotalCount', total)
          // zPaging.value?.completeByTotal([data], total)
        } else {
          state.searchResult = data
          // zPaging.value?.complete([data])
        }
      }
      state.pageNum = state.pageNum + 1
      // 同步 userInfosLastId
      if (typeof data.last_id !== 'undefined') {
        state.userInfosLastId = data.last_id
      } else {
        state.userInfosLastId = undefined
      }
    } else {
      if (state.pageNum === 1) {
        // 第一页请求失败，清空结果
        state.searchResult = null
        // zPaging.value?.complete([])
      } else {
        // 加载更多失败，保持原列表不变
        // zPaging.value?.complete(state.searchResult ? [state.searchResult] : [])
      }
    }
  })

  resp.catch(() => {
    if (state.pageNum === 1) {
      // 第一页请求异常，清空结果
      state.searchResult = null
      // zPaging.value?.complete([])
    } else {
      // 加载更多异常，保持原列表不变
      // zPaging.value?.complete(state.searchResult ? [state.searchResult] : [])
    }
  })
  return resp
}

//点击取消搜索
const cancelSearch = () => {
  const pages = getCurrentPages()
  if (pages.length > 1) {
    uni.navigateBack({
      delta: 1
    })
  } else {
    uni.reLaunch({
      url: '/pages/index/index'
    })
  }
}

//获取key对应值
const getResultKeysValue = (keys) => {
  let resultKey = ''
  switch (keys) {
    case 'user_infos':
      resultKey = '通讯录'
      break
    case 'group_infos':
      resultKey = '群聊'
      break
    case 'group_member_infos':
      resultKey = '群聊'
      break
    case 'combinedGroup':
      resultKey = '群聊'
      break
    case 'general_infos':
      resultKey = '聊天记录'
      break
    case 'talk_record_infos':
      resultKey = '相关聊天记录'
      break
    default:
      resultKey = ''
  }
  return resultKey
}

//是否还有更多数据
const getHasMoreResult = (searchResultKey) => {
  let has_more_result = ''
  switch (searchResultKey) {
    case 'user_infos':
      if (state.searchResult['user_count'] && state.searchResult['user_count'] > 3) {
        has_more_result = '更多通讯录'
      }
      break
    case 'group_infos':
      if (state.searchResult['group_count'] && state.searchResult['group_count'] > 3) {
        has_more_result = '更多群聊'
      }
      break
    case 'group_member_infos':
      if (state.searchResult['group_count'] && state.searchResult['group_count'] > 3) {
        has_more_result = '更多群聊'
      }
      break
    case 'combinedGroup':
      if (state.searchResult['group_count'] && state.searchResult['group_count'] > 3) {
        has_more_result = '更多群聊'
      }
      break
    case 'general_infos':
      if (state.searchResult['record_count'] && state.searchResult['record_count'] >= 3) {
        has_more_result = '更多聊天记录'
      }
      break
    default:
  }
  return has_more_result
}

//点击跳转到更多结果页面
const toMoreResultPage = (searchResultKey) => {
  emits('toMoreResultPage', searchResultKey, state.searchText)
}

//点击了搜索结果项
const clickSearchItem = (searchResultKey, searchItem) => {
  console.log(searchResultKey, searchItem)
  if (props.useClickStay) {
    state.clickStayItem = searchItem.talk_type + '_' + searchItem.receiver_id
  } else {
    state.clickStayItem = ''
  }
  emits('clickStayItemChange', state.clickStayItem)
  let talk_type = searchItem.talk_type
  let receiver_id = searchItem.receiver_id
  if (searchResultKey === 'user_infos') {
    talk_type = 1
    receiver_id = searchItem.id
  } else if (searchResultKey === 'combinedGroup') {
    talk_type = searchItem.type || 2
    receiver_id = searchItem.group_id || searchItem.id
  } else if (searchResultKey === 'general_infos') {
    if (searchItem.talk_type === 1) {
      if (searchItem.user_id === state.uid) {
        //发送人是自己，接收人不需要变
      }
      if (searchItem.receiver_id === state.uid) {
        //接收人是自己，这里需要变成对方
        let temp_id = searchItem.receiver_id
        let temp_name = searchItem.receiver_name
        let temp_avatar = searchItem.receiver_avatar
        searchItem.receiver_id = searchItem.user_id
        searchItem.receiver_name = searchItem.user_name
        searchItem.receiver_avatar = searchItem.user_avatar
        searchItem.user_id = temp_id
        searchItem.user_name = temp_name
        searchItem.user_avatar = temp_avatar
      }
    }
  }
  emits(
    'clickSearchItem',
    state.searchText,
    searchResultKey,
    talk_type,
    receiver_id,
    encodeURIComponent(JSON.stringify(searchItem))
  )
}

//加载更多数据
const doLoadMore = (doClearSearchResult) => {
  if (
    state.userInfosLoading ||
    state.userInfosShowAll ||
    state.groupInfosShowAll // 新增判断，群聊展开后不再触发 queryAllSearch
  ) {
    return
  }
  if (!state.hasMore || state.loading) {
    return
  }
  state.loading = true
  queryAllSearch(doClearSearchResult).finally(() => {
    state.loading = false
  })
}

watch(
  () => props.selectItemInList,
  (newVal, oldVal) => {
    if (newVal) {
      const selectedItem = JSON.parse(decodeURIComponent(newVal))
      clickSearchItem('general_infos', selectedItem)
    }
  },
  {
    deep: true,
    immediate: true
  }
)

// 单独维护通讯录加载更多逻辑，基于 last_id 分页
async function loadMoreUserInfos() {
  if (state.userInfosLoading) return
  state.userInfosLoading = true
  try {
    let params = {
      key: state.searchText,
      last_id: state.userInfosLastId,
      size: 10
    }
    const resp = await ServeQueryUser(params)
    if (resp.code === 200 && Array.isArray(resp.data.user_infos)) {
      if (!state.userInfosLastId) {
        // 第一次加载，直接替换
        state.searchResult = {
          ...state.searchResult,
          user_infos: resp.data.user_infos
        }
      } else {
        // 后续加载，追加
        state.searchResult = {
          ...state.searchResult,
          user_infos: (state.searchResult.user_infos || []).concat(resp.data.user_infos)
        }
      }
      state.userInfosLastId = resp.data.last_id
      // 判断是否全部加载完
      if (
        !resp.data.last_id ||
        (Array.isArray(resp.data.user_infos) && resp.data.user_infos.length < 10)
      ) {
        state.userInfosExpand = true
      }
    }
  } finally {
    state.userInfosLoading = false
  }
}

// 处理"更多通讯录"、 "更多群聊"点击，调用新方法
function onMoreResultClick(searchResultKey) {
  if (searchResultKey === 'user_infos') {
    state.userInfosShowAll = true
    loadMoreUserInfos()
  } else if (searchResultKey === 'combinedGroup') {
    state.groupInfosShowAll = true
    loadMoreGroupInfos()
  } else {
    emits('toMoreResultPage', searchResultKey, state.searchText)
  }
}

// 单独维护群聊加载更多逻辑，基于 last_id 分页
async function loadMoreGroupInfos() {
  if (state.groupInfosLoading) return
  state.groupInfosLoading = true
  try {
    let params = {
      key: state.searchText,
      last_group_id: state.groupInfosLastGroupId,
      last_member_id: state.groupInfosLastMemberId,
      size: 10
    }
    const resp = await ServeQueryGroup(params)
    if (resp.code === 200) {
      const groupInfos = Array.isArray(resp.data.group_infos) ? resp.data.group_infos : []
      const groupMemberInfos = Array.isArray(resp.data.group_member_infos)
        ? resp.data.group_member_infos
        : []

      // 给新数据加上 groupTempType
      groupInfos.forEach((item) => {
        item.groupTempType = 'group_infos'
        item.group_type = item.type // 保持一致性
      })
      groupMemberInfos.forEach((item) => {
        item.groupTempType = 'group_member_infos'
      })

      const isFirstLoad =
        (!state.groupInfosLastGroupId && !state.groupInfosLastMemberId) ||
        (state.groupInfosLastGroupId === 0 && state.groupInfosLastMemberId === 0)
      if (isFirstLoad) {
        // 第一次加载，直接替换
        state.searchResult = {
          ...state.searchResult,
          group_infos: groupInfos,
          group_member_infos: groupMemberInfos,
          combinedGroup: groupInfos.concat(groupMemberInfos)
        }
      } else {
        // 后续加载，追加
        const allGroupInfos = (state.searchResult.group_infos || []).concat(groupInfos)
        const allGroupMemberInfos = (state.searchResult.group_member_infos || []).concat(
          groupMemberInfos
        )
        state.searchResult = {
          ...state.searchResult,
          group_infos: allGroupInfos,
          group_member_infos: allGroupMemberInfos,
          combinedGroup: allGroupInfos.concat(allGroupMemberInfos)
        }
      }
      state.groupInfosLastGroupId = resp.data.last_group_id
      state.groupInfosLastMemberId = resp.data.last_member_id
      // 判断是否全部加载完
      const noMoreData =
        (!groupInfos.length && !groupMemberInfos.length) ||
        (resp.data.last_group_id === 0 && resp.data.last_member_id === 0)
      if (noMoreData) {
        state.groupInfosExpand = true
      }
    }
  } finally {
    state.groupInfosLoading = false
  }
}
</script>
<style lang="scss" scoped>
.search-list {
  .searchRoot {
    padding: 10px 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;

    .searchRoot_cancelBtn {
      line-height: 22px;
      color: var(--im-primary-color);
      margin: 0 0 0 10px;
      flex-shrink: 0;
    }
  }
  .search-record-detail {
    padding: 0 25px;
  }
  .search-result {
    width: 100%;
    // padding: 0 10px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    box-sizing: border-box;

    .search-result-list {
      width: 100%;
      // padding: 0 10px;

      .search-result-part {
        // margin: 18px 0 0;

        .result-title {
          padding: 0 10px 5px;
          border-bottom: 1px solid #f8f8f8;
          span {
            line-height: 20px;
            color: #999999;
          }
        }
        .result-has-more {
          padding: 10px;
          border-bottom: 1px solid #f8f8f8;
          cursor: pointer;
          span {
            color: #191919;
            line-height: 20px;
          }
        }
        .result-has-more:hover {
          background-color: var(--im-secondary-color);
        }
      }
    }
  }
}
</style>
