<template>
  <div class="message-list p-base flex direction-column">
    <el-input v-model="filterText" placeholder="输入评卷员账号或名称筛选" clearable style="margin-bottom: 10px" />
    <div v-if="!!(messageList || []).length" class="scroll-y-auto flex-1">
      <div
        v-for="message in messageList"
        :key="message.id"
        class="radius-base fill-blank p-base m-b-mini relative message-item"
        :class="{ active: isActiveMessage(currentMessage, message), 'un-read': message.unReadCount > 0 }"
        @click="checkMessage(message)"
      >
        <div class="flex items-center m-b-base message-title">
          <div class="message-send-user">
            {{ mainStore?.myUserInfo?.id == message.sendUserId ? message.receiveUserName : message.sendUserName }}
          </div>
          <div class="m-l-auto message-send-time">{{ dayjs(message.sendTime).format('MM-DD HH:mm') }}</div>
        </div>

        <pre class="message-content">{{ transHtmlContent(message.content) }}</pre>
      </div>
    </div>
    <div v-else class="none-msg-box">
      <div class="center-box">
        <svg-icon name="none_message" style="font-size: 120px"></svg-icon>
        <p class="tip">暂无消息</p>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, watch, computed } from 'vue'
import { ElInput } from 'element-plus'
import useFetch from '@/hooks/useFetch'
import bus from '@/utils/bus'
import { transHtmlContent } from '@/utils/common'
import dayjs from 'dayjs'
import SvgIcon from '@/components/common/SvgIcon.vue'
import useMainStore from '@/store/main'
const mainStore = useMainStore()
const filterText = ref('')
const emits = defineEmits(['leftMsgClick'])
const props = defineProps<{ curMsg: any; mode: string; replyUserId: any }>()

const currentMessage = ref<any>()
// const { fetch: getMessageList, result: messageList } = useFetch('getMessageList')
const { fetch: getMessageList, result: originMessageList } = useFetch('getMessageList')
const messageList = computed(() => {
  return (originMessageList.value || []).filter((message: any) => {
    let name: string = mainStore?.myUserInfo?.id == message.sendUserId ? message.receiveUserName : message.sendUserName
    return name?.includes(filterText.value)
  })
})
const checkMessage = (msg: any) => {
  currentMessage.value = msg
  bus.emit('clickChangeMsg', msg)
  emits('leftMsgClick', msg)
}
const isActiveMessage = (message1: any, message2: any) => {
  let otherUserId1 = mainStore?.myUserInfo?.id == message1?.sendUserId ? message1?.receiveUserId : message1?.sendUserId
  let otherUserId2 = mainStore?.myUserInfo?.id == message2?.sendUserId ? message2?.receiveUserId : message2?.sendUserId
  return otherUserId1 && otherUserId1 === otherUserId2
}
getMessageList().then((result) => {
  if (props.mode !== 'view' && !props.replyUserId) {
    return
  }
  if (result?.length) {
    let target: any = result[0]
    if (props.curMsg) {
      target = result.find((item: any) => {
        return item.id == props.curMsg.id
      })
    }
    currentMessage.value = target
    bus.emit('clickChangeMsg', target)
  }
})
watch(
  () => mainStore.newMsgs,
  () => {
    getMessageList().then((res) => {
      if (res && Array.isArray(res)) {
        let find = res.find((item) => isActiveMessage(item, currentMessage.value))
        if (!!find) {
          currentMessage.value = find
          bus.emit('clickChangeMsg', find)
        }
      }
    })
  }
)
</script>
<style scoped lang="scss">
.message-list {
  width: 260px;
  height: 100%;
  background: #fafafa;
  box-shadow: 0px 6px 6px 0px rgba(0, 0, 0, 0.1);
  .none-msg-box {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .center-box {
      text-align: center;
      .tip {
        color: #999;
        margin-top: 5px;
      }
    }
  }
  .message-item {
    &.un-read:after {
      content: '';
      position: absolute;
      right: 0;
      top: 0;
      border-radius: 50%;
      width: 8px;
      height: 8px;
      background-color: $DangerColor;
    }
    &.active {
      background-color: $color--primary;
      color: $color--white;
    }
    &:not(.active) {
      .message-title {
        color: $NormalColor;
        .message-send-time {
          color: $RegularFontColor;
        }
      }
      .message-content {
        color: $RegularFontColor;
      }
    }
    .message-title {
      font-size: $BaseFont;
      .message-send-time {
        font-size: $SmallFont;
        font-weight: 400;
      }
    }
    .message-content {
      font-weight: 400;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      font-size: $SmallFont;
      white-space: pre-wrap;
    }
  }
}
</style>
