dy-admin-live/src/components/live-message/item-list.tsx

import { defineComponent } from "vue";
// import { ElTag, ElIcon, ElButton } from "element-plus";
import styles from './item-list.module.less';
import event, { LIVE_EVENT_MESSAGE } from '/src/components/live-broadcast/event';
import dayjs from 'dayjs';
import Empty from "../empty";
// import VirtualList from 'vue-virtual-scroll-list';
import LookModel from './model/look-model';
import JoinModel from './model/join-model';
import MessageModel from './model/message-model';
import { state } from '/src/state'
type itemType = 'message' | 'join' | 'look'

export default defineComponent({
  props: {
    type: {
      type: String,
      default: 'join' as itemType
    }
  },
  data() {
    return {
      messageList: [] as any[], // 回复学生列表
      joinList: [] as any[], // 连麦学生列表
      lookList: [] as any[], // 观看学生列表
      loadingMessage: false, // 消息列表状态
      loadingJoin: false, // 连麦列表状态
      loadingLook: false, // 观看列表状态
    }
  },
  mounted() {
    this.initStatus()
    event.on(LIVE_EVENT_MESSAGE["RC:Chatroom:Welcome"], this.onWelcome);
    event.on(LIVE_EVENT_MESSAGE["RC:TxtMsg"], this.onMessage);
    //
    setTimeout(() => {
      console.log('messageList', this.messageList)
      if(this.type === 'join') {
        this.loadingJoin = false;
      } else if(this.type === 'look') {
        this.loadingLook = false;
      } else if(this.type === 'message') {
        this.loadingMessage = false;
      }
    }, 2000);
  },
  methods: {
    initStatus() {
      if(this.type === 'join') {
        this.loadingJoin = this.joinList.length > 0 ? false : true;
      } else if(this.type === 'look') {
        this.loadingLook = this.lookList.length > 0 ? false : true;
      } else if(this.type === 'message') {
        this.loadingMessage = this.messageList.length > 0 ? false : true;
      }
    },
    onMessage(value: any) {
      if (value && value.user) {
        console.log(state.user)
        console.log(value)
        const sendTime = dayjs(value.$EventMessage.sentTime || new Date()).format('HH:mm:ss')

        let tempObj = {
          name: value.user?.name,
          id: value.user.id,
          isSelf: false,
          content: value.content,
          sendTime
        }
        // 判断是否是主播
        if (value.user.id === state.user.id) {
          tempObj.isSelf = true
        }
        this.messageList.push(tempObj);
        this.loadingLook = false
      }
      console.log(this.messageList)
    },
    onWelcome(value: any) {
      console.log(value)
      if (value && value.user) {
        const sendTime = dayjs(value.$EventMessage.sentTime || new Date()).format('HH:mm:ss')
        let tempObj = {
          name: value.user.name,
          id: value.user.id,
          sendTime
        }
        // 判断是否有同一个人
        let isExist = false;
        this.lookList.forEach((item: any) => {
          if (item.id === tempObj.id) {
            isExist = true
          }
        })
        if (!isExist) {
          this.lookList.push(tempObj);
        }

        this.loadingLook = false
      }
    }
  },
  beforeUnmount() {
    event.off(LIVE_EVENT_MESSAGE["RC:Chatroom:Welcome"], this.onmessage);
    event.off(LIVE_EVENT_MESSAGE["RC:TxtMsg"], this.onmessage);
  },
  render() {
    return (
      <div style={{ minHeight: '100%', position: 'relative' }}>
        {/* {this.type === 'message' ?
          this.messageList && this.messageList.length > 0 ? this.messageList.map(item => (
            <MessageModel data={this.messageList} />
          )) : this.loadingMessage ? <div class={styles.loadingStyle} v-loading={this.loadingMessage} element-loading-background="rgba(0, 0, 0, 0.8)"></div> : <Empty text="暂无学员互动！" icon="noData-no-message" />
          : null}

        {this.type === 'join' ?
          this.joinList && this.joinList.length > 0 ? this.joinList.map(item => (
            <JoinModel data={this.joinList} />
          )) : this.loadingJoin ? <div class={styles.loadingStyle} v-loading={this.loadingJoin} element-loading-background="rgba(0, 0, 0, 0.8)"></div> : <Empty text="暂无学员发起连麦！" icon="noData-no-join" />
          : null}

        {this.type === 'look' ?
          this.lookList && this.lookList.length > 0 ? this.lookList.map(item => (
            <LookModel data={this.lookList} />
          )) : this.loadingLook ? <div class={styles.loadingStyle} v-loading={this.loadingLook} element-loading-background="rgba(0, 0, 0, 0.8)"></div> : <Empty text="暂无学员观看！" icon="noData-no-user" />
          : null} */}
      </div>
    )
  }
})