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() {
    // userRoomType
    // 1 普通
    // 2 老师邀请
    // 3 学生申请
    // 4 连麦中
    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);
    event.on(LIVE_EVENT_MESSAGE['RC:Chatroom:Leave'], this.onLeave); // 移动端接收的消息
    event.on(LIVE_EVENT_MESSAGE['RC:LookerLoginOut'], this.onLeave); // 后台接收的消息
  },
  methods: {
    onLeave(value: any) {
      if(runtimeModel.joinList[value.userId]) {
        RuntimeModelUtils.removeJoin(value.userId)
      }
      if(runtimeModel.lookList[value.userId]) {
        RuntimeModelUtils.removeLook(value.userId)
      }
    },
    onSeatApply(evt: any) {
      // console.log(evt, 'onSeatApply joinModel')
      if (Array.isArray(evt)) {
        for (const id of evt) {
          console.log('onSeatApply', id)
          RuntimeModelUtils.removeJoin(id)
        }
        return
      }
      const response = evt.$EventMessage.messageType === 'RC:Chatroom:SeatResponse'
      const userRoomType = response ? 4 : 3
      // if(evt.$EventMessage.messageType === 'RC:Chatroom:SeatResponse')
      // 申请连麦
      if (evt.type === 3) {
        const params = {
          name: evt.audienceName,
          id: evt.audienceId,
          userRoomType: userRoomType,
          type: evt.type,
        }
        RuntimeModelUtils.addJoin(evt.audienceId, params)
        RuntimeModelUtils.addLook(evt.audienceId, params)
      }
      // 取消连麦
      if (evt.type === 4) {
        console.log(evt, '取消连麦')
        if (runtimeModel.joinList[evt.audienceId]) {
          RuntimeModelUtils.removeJoin(evt.audienceId)
        }
        if (runtimeModel.lookList[evt.audienceId]) {
          let userLook = runtimeModel.lookList[evt.audienceId]
          userLook.userRoomType = 1
          RuntimeModelUtils.addLook(evt.audienceId, userLook)
        }
      }
    },
    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,
        userRoomType: 4,
        type: 1,
      }
      RuntimeModelUtils.addJoin(item.id, data)
      RuntimeModelUtils.addLook(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,
        userRoomType: 4,
        type: 5,
      }
      RuntimeModelUtils.addJoin(item.id, data)
      RuntimeUtils.sendMessage(data, 'SeatApply')
    },
    onSwitchRole(evt: any) {
      console.log(evt, 'onSwitchRole')
      if (runtimeModel.joinList[evt.userId] && evt.role === 2) {
        RuntimeModelUtils.removeJoin(evt.userId)
      }
      if (runtimeModel.lookList[evt.userId] && evt.role === 2) {
        let userLook = runtimeModel.lookList[evt.userId]
        userLook.userRoomType = 1
        RuntimeModelUtils.addLook(evt.userId, userLook)
      }
    }
  },
  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}>
            <div class={styles.itemInfo}>
              <div class={styles.itemName}>
                <p class={styles.userName}>
                  <span class={styles['name-style']}>{item.name}</span>
                  {item.userRoomType !== 4 ? <span style={{ paddingLeft: '10px' }}>申请连麦</span> : <span style={{ paddingLeft: '10px', color: 'var(--live-text-color)' }}>正在连麦</span>}
                </p>
                {item.userRoomType !== 4 ? (
                    <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}><div class="el-loading-mask" style="background-color: rgba(0, 0, 0, 0.8);"><div class="el-loading-spinner"><svg class="circular" viewBox="25 25 50 50"><circle class="path" cx="50" cy="50" r="20" fill="none"></circle></svg></div></div></div> : <Empty style={{ paddingTop: '120px' }} text="暂无学员发起连麦！" icon="noData-no-join" />}
      </div>
    )
  }
})
