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'
import runtimeModel, * as RuntimeModelUtils from '/src/components/live-message/model/runtime'

export default defineComponent({
  data() {
    return {
      joinList: {} as { [key: string]: any }, // 连麦学生列表
      loadingJoin: false, // 连麦列表状态
    }
  },
  computed: {
    count() {
      let count = 0
      for (const key in runtimeModel.joinList) {
        if (Object.prototype.hasOwnProperty.call(runtimeModel.joinList, key)) {
          const item = runtimeModel.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['RC:Chatroom:SeatResponse'], this.onSeatApply);
    event.on(LIVE_EVENT_MESSAGE['RM:RTC:UserLeave'], this.onSeatApply);
    event.on(LIVE_EVENT_MESSAGE['RM:RTC:SwitchRole'], this.onSwitchRole);
  },
  methods: {
    onSeatApply(evt: any) {
      if (Array.isArray(evt)) {
        for (const id of evt) {
          console.log('onSeatApply', id)
          RuntimeModelUtils.removeJoin(id)
        }
        return
      }
      // 申请连麦
      if (evt.type === 3) {
        RuntimeModelUtils.addJoin(evt.audienceId, {
          name: evt.audienceName,
          id: evt.audienceId,
          type: evt.type,
        })
      }
      // 取消连麦
      if (evt.type === 4) {
        if (runtimeModel.joinList[evt.audienceId]) {
          RuntimeModelUtils.removeJoin(evt.audienceId)
        }
      }
    },
    agree(item: any) {
      if (this.count > 3) {
        return
      }
      const data = {
        ...item,
        audienceName: item.name,
        audienceId: item.id,
        teacherId: state.user?.id,
        teacherName: state.user?.speakerName,
        type: 1,
      }
      RuntimeModelUtils.addJoin(item.id, data)
      RuntimeUtils.sendMessage(data, 'SeatResponse')
    },
    refuse(item: any) {
      const data = {
        ...item,
        audienceName: item.name,
        audienceId: item.id,
        teacherId: state.user?.id,
        teacherName: state.user?.speakerName,
        type: 5,
      }
      RuntimeModelUtils.addJoin(item.id, data)
      RuntimeUtils.sendMessage(data, 'SeatApply')
    },
    onSwitchRole(evt: any) {
      if (runtimeModel.joinList[evt.userId] && evt.role === 2) {
        RuntimeModelUtils.removeJoin(evt.userId)
      }
    }
  },
  render() {
    const list = Object.values(runtimeModel.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}>
                  <span class={styles['name-style']}>{item.name}</span>
                  {item.type === 3 ? <p style={{ paddingLeft: '10px' }}>申请连麦</p> : <p style={{ paddingLeft: '10px', color: 'var(--live-text-color)' }}>正在连麦</p>}
                </p>
                {item.type === 3 ? (
                    <div class={styles.joinText}>
                      <div class={styles.join}>
                        {/* 申请连麦 */}
                      </div>
                      <ElButton size="small" type="primary" 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" plain class={[styles.btn, styles.downBtn]} onClick={() => this.refuse(item)}>下麦</ElButton>
                    </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 style={{ paddingTop: '120px' }} text="暂无学员发起连麦！" icon="noData-no-join" />}
      </div>
    )
  }
})
