<script setup lang="ts">
import type { type_dyaw_xlfw_zxhd } from '~/types';
const props = defineProps<{ d: type_dyaw_xlfw_zxhd }>()

const showMsg = $computed(() => {
  switch (props.d.dxz_last_msg_type) {
    case '1': return decodeURIComponent(props.d.dxz_last_msg);
    case '2': return '[ 图片 ]';
  }
})
</script>

<template>
  <div class="h-full flex w-full items-center space-x-4 cursor-pointer">
    <el-avatar :size="48" :src="d.dxx_user_avatar"></el-avatar>
    <div class="flex flex-col justify-evenly flex-auto">
      <div class="flex justify-between">
        <div class="font-medium">{{ d.dxz_stu_user_realname }}</div>
        <div class="opacity-40 text-sm">{{ d.dxz_last_msg_datetime }}</div>
      </div>
      <div class="flex justify-between h-20px">
        <template v-if="d.dxz_last_msg_datetime">
          <div class="opacity-40 text-sm text_wrapper max-w-50 h-20px overflow-hidden" v-html="showMsg"></div>
          <el-tag type="danger" effect="dark" round size="small" v-show="Number(d.dxz_unread_msg_num) > 0">{{
            Number(d.dxz_unread_msg_num) > 99 ? '99+' : d.dxz_unread_msg_num
          }}</el-tag>
        </template>

      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.text_wrapper :deep(p) {
  margin: 0;
  padding: 0;
  text-overflow: ellipsis;
  height: 100%;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
}
</style>
