import { defineComponent } from "vue";
import styles from './index.module.less'
import { ElButton } from'element-plus'
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 {[key: string]: any}, // 连麦学生列表
      loadingJoin: false, // 连麦列表状态
    }
  },
  computed: {
    count() {
      let count = 0
      for (const key in this.joinList) {
        if (Object.prototype.hasOwnProperty.call(this.joinList, key)) {
          const item = this.joinList[key];
          if (item.type === 3) {
            count += 1
          }
          if (count > 3) {
            break
          }
        }
      }
      return count
    },
  },
  mounted() {
    event.on(LIVE_EVENT_MESSAGE['RC:Chatroom:SeatApply'], this.onSeatApply);
    event.on(LIVE_EVENT_MESSAGE['RM:RTC:SwitchRole'], this.onSwitchRole);
  },
  methods: {
    onSeatApply(evt: any) {
      if (evt.type === 3) {
        this.joinList[evt.audienceId] = {
          name: evt.audienceName,
          id: evt.audienceId,
          type: evt.type,
        }
      }
    },
    agree(item: any) {
      if (this.count > 3) {
        return
      }
      const data = {
        ...item,
        audienceName: item.name,
        audienceId: item.id,
        teacherId: state.user?.id,
        teacherName: state.user?.realName,
        type: 1,
      }
      this.joinList[item.id] = data
      RuntimeUtils.sendMessage(data, 'SeatResponse')
    },
    refuse() {

    },
    onSwitchRole(evt: any) {
      if (this.joinList[evt.userId] && evt.role === 2) {
        delete this.joinList[evt.userId]
      }
    }
  },
  render() {
    const list = Object.values(this.joinList)
    return (
      <div style={{ minHeight: '100%', position: 'relative' }}>
        {list.length > 0 ? list.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>
                  <ElButton size="small" disabled={this.count > 3} class={styles.btn} onClick={() => this.agree(item)}>上麦</ElButton>
                </div>
              ) : (
                <div class={styles.joinText}>
                  <div class={styles.join}>
                    正在连麦
                  </div>
                  <ElButton size="small" class={styles.btn} onClick={this.refuse}>下麦</ElButton>
                </div>
              )}
            </div>
          </div>
        )) : this.loadingJoin ? <div class={styles.loadingStyle} v-loading={this.loadingJoin} element-loading-background="rgba(0, 0, 0, 0.8)"></div> : <Empty style={{ paddingTop: '120px' }} text="暂无学员发起连麦！" icon="noData-no-join" />}
      </div>
    )
  }
})