import { defineComponent } from "vue";
import * as RuntimeUtils from '/src/components/live-broadcast/runtime'
import styles from './index.module.less'
import event, { LIVE_EVENT_MESSAGE } from '/src/components/live-broadcast/event';
import { state } from '/src/state'
import dayjs from 'dayjs';
import Empty from "/src/components/empty";

export default defineComponent({
  props: {
    data: {
      type: Array,
      default: () => ([])
    }
  },
  data() {
    return {
      lookList: [] as any[], // 观看学生列表
      loadingLook: false, // 观看列表状态
    }
  },
  mounted() {
    this.loadingLook = true
    event.on(LIVE_EVENT_MESSAGE["RC:Chatroom:Welcome"], this.onWelcome);
    setTimeout(() => {
      this.loadingLook = false;
    }, 2000);
  },
  methods: {
    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
      }
    }
  },
  render() {
    return (
      <div>
        {this.lookList.length > 0 ? this.lookList.map((item : any) => (
          <div class={styles.itemContent}>
            <img src="/src/assets/home/placehorder-icon.png" alt="" />
            <div class={styles.itemInfo} >
              <div class={styles.itemName}>
                <p class={styles.userName}>{item.name}</p>
                <a href="javascript:;" onClick={() => RuntimeUtils.sendMessage(
                  {seatBan:false, ...RuntimeUtils.getSendMessageUser()},
                  'SeatsCtrl'
                )}>上麦</a>
              </div>
            </div>
          </div>
        )) : 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" />}
      </div>
    )
  }
})