<template>
  <div
    class="search-item"
    :class="props?.conditionType ? 'search-item-condition' : ''"
    v-if="resultName"
    :style="{
      margin: props.searchResultKey === 'talk_record_infos_receiver' ? '12px 0 0' : '',
      'background-color': props.isClickStay ? brandConfig.secondaryColor : ''
    }"
  >
    <div class="search-item-avatar">
      <avatarModule
        :mode="props.searchItem?.group_type === 0 ? 1 : 2"
        :avatar="avatarImg"
        :userName="resultName"
        :groupType="props.searchItem?.group_type"
        :customStyle="{
          width: props?.conditionType ? '32px' : '42px',
          height: props?.conditionType ? '32px' : '42px',
          margin: props?.conditionType ? '0 9px 0 0' : '0 10px 0 0'
        }"
        :customTextStyle="{
          fontSize: props?.conditionType ? '10px' : '14px',
          fontWeight: 'bold',
          color: '#fff',
          lineHeight: '24px'
        }"
      ></avatarModule>
      <div
        class="info-tag"
        v-if="resultType && !searchRecordDetail"
        :style="'border-color:' + resultTypeColor"
      >
        <span class="text-[10px] font-medium" :style="'color:' + resultTypeColor">
          {{ resultType }}
        </span>
      </div>
    </div>
    <div class="result-info">
      <div class="info-name" :class="searchRecordDetail ? 'info-name-searchRecordDetail' : ''">
        <HighlightText
          :class="
            props?.conditionType
              ? 'text-[14px] font-medium'
              : searchRecordDetail
              ? 'text-[12px] font-medium'
              : 'text-[14px] font-bold'
          "
          :text="resultName"
          :searchText="props.searchText"
        />
        <div class="info_num" v-if="groupNum">
          <span class="text-[14px] font-medium">
            {{ '（' + groupNum + '）' }}
          </span>
        </div>
        <div v-if="searchRecordDetail && chatRecordCreatedAt">
          <span class="text-[12px] font-medium">
            {{ chatRecordCreatedAt }}
          </span>
        </div>
      </div>
      <div
        class="info-detail"
        v-if="resultDetail"
        :class="searchRecordDetail ? 'info-detail-searchRecordDetail' : ''"
      >
        <HighlightText
          class="text-[12px] font-regular"
          :text="resultDetail"
          :searchText="props.searchText"
          v-if="
            props.searchItem?.msg_type !== 3 &&
            props.searchItem?.msg_type !== 5 &&
            props.searchItem?.msg_type !== 6
          "
        />
        <div
          class="message-component-wrapper"
          v-if="props.searchItem?.msg_type === 3 || props.searchItem?.msg_type === 5"
          @click.stop
        >
          <component
            :is="MessageComponents[props.searchItem?.msg_type] || 'unknown-message'"
            :extra="resultDetail"
            :data="props?.searchItem"
          />
        </div>
        <div class="file-message-wrapper" v-if="props.searchItem?.msg_type === 6" @click.stop>
          <div class="condition-each-result-attachments" @click="previewPDF(resultDetail.path)">
            <div class="attachment-avatar">
              <img :src="resultDetail?.file_avatar" />
            </div>
            <div class="attachment-info">
              <div class="attachment-info-title">
                <span class="text-[14px] font-regular">
                  {{ resultDetail?.name }}
                </span>
                <span
                  class="text-[14px] font-regular"
                  style="color: #999999; flex-shrink: 0; margin: 0 0 0 20px;"
                >
                  {{ resultDetail?.dateTime }}
                </span>
              </div>
              <div class="attachment-sub-info">
                <span class="text-[12px] font-regular">
                  {{ resultDetail?.typeText }}
                </span>
                <span class="text-[12px] font-regular" style="flex-shrink: 0; margin: 0 0 0 20px;">
                  {{ resultDetail?.fileSize }}
                </span>
              </div>
            </div>
          </div>
        </div>
        <div class="searchRecordDetail-fastLocal" v-if="searchRecordDetail">
          <span>定位到聊天位置</span>
        </div>
      </div>
    </div>
    <div class="search-item-pointer" v-if="pointerIconSrc">
      <img :src="pointerIconSrc" />
    </div>
  </div>
</template>
<script setup>
import avatarModule from '@/components/avatar-module/index.vue'
import { ref, watch, computed, onMounted, onUnmounted, reactive, defineProps } from 'vue'
import HighlightText from './highLightText.vue'
import { beautifyTime } from '@/utils/datetime'
import { ChatMsgTypeMapping, MessageComponents } from '@/constant/message'
import { checkFileCanPreview } from '@/utils/helper/form'
import { brandConfig } from '@brand-config'
const props = defineProps({
  searchItem: Object | Number,
  searchResultKey: {
    type: String,
    default: ''
  },
  searchText: {
    type: String,
    default: ''
  }, //搜索内容
  searchRecordDetail: {
    type: Boolean,
    default: false
  }, //是否是搜索聊天记录详情
  pointerIconSrc: {
    type: String,
    default: ''
  }, //箭头图标
  conditionType: {
    type: Number,
    default: 0
  }, //搜索类型
  isClickStay: {
    type: Boolean,
    default: false
  } //是否点击停留
})
// 映射表-查找对应结构下的属性名
const keyMapping = {
  user_infos: { avatar: 'avatar', name: 'nickname' },
  group_infos: { avatar: 'avatar', name: 'name', group_num: 'group_num' },
  group_member_infos: {
    avatar: 'group_avatar',
    name: 'group_name',
    detailKey: 'user_name',
    group_num: 'group_num'
  },
  combinedGroup: {
    avatar: props.searchItem?.groupTempType
      ? props.searchItem?.groupTempType === 'group_infos'
        ? 'avatar'
        : props.searchItem?.groupTempType === 'group_member_infos'
        ? 'group_avatar'
        : ''
      : '',
    name: props.searchItem?.groupTempType
      ? props.searchItem?.groupTempType === 'group_infos'
        ? 'name'
        : props.searchItem?.groupTempType === 'group_member_infos'
        ? 'group_name'
        : ''
      : '',
    detailKey: props.searchItem?.groupTempType
      ? props.searchItem?.groupTempType === 'group_member_infos'
        ? 'user_name'
        : ''
      : '',
    group_num: props.searchItem?.groupTempType
      ? props.searchItem?.groupTempType === 'group_infos'
        ? 'group_num'
        : props.searchItem?.groupTempType === 'group_member_infos'
        ? 'group_num'
        : ''
      : ''
  },
  general_infos: {
    avatar: 'receiver_avatar',
    name: 'receiver_name',
    detailKey: 'count',
    group_num: 'group_num'
  },
  talk_record_infos: {
    avatar: 'user_avatar',
    name: 'user_name',
    detailKey: 'extra',
    created_at: 'created_at'
  },
  talk_record_infos_receiver: {
    avatar: 'receiver_avatar',
    name: 'receiver_name',
    group_num: 'group_num'
  },
  search_by_member_condition: {
    avatar: 'avatar',
    name: 'nickname',
    created_at: 'created_at',
    msg_type: 'msg_type',
    detailKey: 'chatMessageType'
  }
}
//获取key对应值
const getKeyValue = (keys) => {
  let keyValue = ''
  if (keys) {
    keyValue = props?.searchItem ? props?.searchItem[keys] : ''
  }
  return keyValue
}
//头像
const avatarImg = computed(() => {
  let avatar = getKeyValue(keyMapping[props.searchResultKey]?.avatar)
  if (props?.conditionType) {
    avatar = props.searchItem.avatar
  }
  return avatar
})
//名称
const resultName = computed(() => {
  let result_name = getKeyValue(keyMapping[props.searchResultKey]?.name)
  if (props?.conditionType) {
    result_name = props.searchItem.nickname
  }
  return result_name
})
//文字头像
const imgText = computed(() => {
  return resultName.value.length >= 2 ? resultName.value.slice(-2) : resultName.value
})
// 映射表-根据groupType设置对应值
const groupTypeMapping = {
  0: {},
  1: {},
  2: {
    result_type: '部门',
    result_type_color: '#377EC6'
  },
  3: {
    result_type: '项目',
    result_type_color: '#C1681C'
  },
  4: {
    result_type: '公司',
    result_type_color: '#7A58DE'
  }
}
//群人数
const groupNum = computed(() => {
  return getKeyValue(keyMapping[props.searchResultKey]?.group_num)
})
//群类型tag
const resultType = computed(() => {
  return groupTypeMapping[props.searchItem?.group_type]?.result_type
})
//群类型tag颜色
const resultTypeColor = computed(() => {
  return groupTypeMapping[props.searchItem?.group_type]?.result_type_color
})
//搜索聊天记录详情-时间
const chatRecordCreatedAt = computed(() => {
  let created_at = getKeyValue(keyMapping[props.searchResultKey]?.created_at)
  return beautifyTime(created_at)
})
//详细内容
const resultDetail = computed(() => {
  let result_detail = props.searchItem[keyMapping[props.searchResultKey]?.detailKey]
  switch (keyMapping[props.searchResultKey]?.detailKey) {
    case 'count':
      result_detail = result_detail + '条聊天记录'
      break
    case 'user_name':
      result_detail = '包含：' + result_detail
      break
    case 'extra':
      result_detail = props.searchItem?.extra
      break
    case 'chatMessageType':
      result_detail =
        props.searchItem?.msg_type === 1
          ? props.searchItem?.extra?.content
          : props.searchItem?.msg_type === 3 ||
            props.searchItem?.msg_type === 5 ||
            props.searchItem?.msg_type === 6
          ? props.searchItem?.extra
          : ChatMsgTypeMapping[props.searchItem?.msg_type]
      break
    default:
      result_detail = ''
  }
  return result_detail
})

const previewPDF = (item) => {
  console.log(item)
  // if (typeof plus !== 'undefined') {
  //   downloadAndOpenFile(item)
  // } else {
  //   document.addEventListener('plusready', () => {
  //     downloadAndOpenFile(item)
  //   })
  // }
  if (checkFileCanPreview(item || '')) {
    window.open(
      `${import.meta.env.VITE_PAGE_URL}/office?url=${item}`,
      '_blank',
      'width=1200,height=900,left=200,top=200,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,location=no,status=no'
    )
  } else {
    //由于聊天记录本身有跳转到指定位置的逻辑，所以这里不需要再做跳转
    window['$message'].warning('暂不支持在线预览该类型文件')
  }
}
</script>
<style lang="scss" scoped>
.search-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: 11px 10px 12px;
  cursor: pointer;
  position: relative;

  .search-item-avatar {
    position: relative;
    .info-tag {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      padding: 0px 6px;
      border: 1px solid #000;
      border-radius: 3px;
      flex-shrink: 0;
      background-color: #fff;
      position: absolute;
      bottom: 0;
      left: 4px;
      span {
        line-height: 14px;
      }
    }
  }

  .result-info {
    width: 100%;
    .info-name {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      span {
        color: #191919;
        line-height: 22px;
      }
    }
    .info-name-searchRecordDetail {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      span {
        color: #999999;
        line-height: 17px;
      }
    }
    .info-detail {
      span {
        color: #999999;
        line-height: 20px;
      }
      .file-message-wrapper {
        .condition-each-result-attachments {
          min-width: 289px;
          max-width: 660px;
          height: 62px;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: flex-start;
          padding: 12px 15px;
          background-color: #f3f3f3;
          border-radius: 4px;
          border-bottom: 1px solid #f8f8f8;
          box-sizing: border-box;

          .attachment-avatar {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            img {
              width: 38px;
              height: 38px;
            }
          }
          .attachment-info {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            margin: 0 0 0 11px;
            width: calc(100% - 38px - 11px);
            .attachment-info-title {
              display: flex;
              flex-direction: row;
              align-items: center;
              justify-content: flex-start;
              width: 100%;
              span {
                line-height: 20px;
                color: #191919;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
            .attachment-sub-info {
              display: flex;
              flex-direction: row;
              align-items: center;
              justify-content: flex-start;
              width: 100%;
              span {
                line-height: 17px;
                color: #999999;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
          }
        }
      }
    }
    .info-detail-searchRecordDetail {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      span {
        color: #191919;
        word-break: break-all;
        max-width: 660px;
      }
      .searchRecordDetail-fastLocal {
        display: none;
        line-height: 20px;
        flex-shrink: 0;
        span {
          color: var(--im-primary-color);
          font-size: 12px;
          font-weight: 400;
          line-height: 17px;
        }
      }
    }
  }
  .search-item-pointer {
    width: 5.5px;
    height: 9px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.search-item::after {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 10px;
  width: calc(100% - 20px);
  background-color: #f8f8f8;
}
.search-item-condition {
  border: 0;
}
.search-item:hover {
  background-color: var(--im-secondary-color);

  .info-detail-searchRecordDetail {
    .searchRecordDetail-fastLocal {
      display: block;
    }
  }
}

.message-component-wrapper {
  width: 154px;
  height: 100px;
  display: inline-block;
  overflow: hidden;
  position: relative;

  .im-message-video,
  .im-message-image,
  .image-container {
    width: 100% !important;
    height: 100% !important;
  }

  :deep(.n-image) {
    width: 100% !important;
    height: 100% !important;
  }

  :deep(img),
  :deep(video) {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}
</style>
