import { defineComponent } from "vue";
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";
import runtime, * as RuntimeUtils from '/src/components/live-broadcast/runtime'

export default defineComponent({
  props: {
    data: {
      type: Array,
      default: () => ([])
    }
  },
  data() {
    return {
      joinList: [] as any[], // 连麦学生列表
      loadingJoin: false, // 连麦列表状态
    }
  },
  mounted() {
    event.on(LIVE_EVENT_MESSAGE['RC:Chatroom:SeatApply'], this.onSeatApply);
  },
  methods: {
    onSeatApply(evt: any) {
      console.log(evt)
      if (evt.type === 3) {
        this.joinList.push({
          name: evt.audienceName,
          id: evt.audienceId,
          type: evt.type,
        })
      }
    },
    agree() {
      RuntimeUtils.sendMessage({
        audienceId: '1094335',
        audienceName: '小伙伴',
        teacherId: state.user?.id,
        teacherName: state.user?.realName,
        type: 1,
      }, 'SeatResponse')
    },
    refuse() {},
  },
  render() {
    console.log(this.joinList.length)
    return (
      <div style={{ minHeight: '100%', position: 'relative' }}>
        {this.joinList.length > 0 ? this.joinList.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>
              </div>
              {item.type === 3 ? (
                <div class={styles.joinText}>
                  <div class={styles.join}>
                    申请连麦
                  </div>
                  <div class={styles.btn} onClick={this.agree}>上麦</div>
                </div>
              ) : (
                <div class={styles.joinText}>
                  <div class={styles.join}>
                    正在连麦
                  </div>
                  <div class={styles.btn} onClick={this.refuse}>下麦</div>
                </div>
              )}
            </div>
          </div>
        )) : 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" />}
      </div>
    )
  }
})