import { getLiveStudentList } from '@/api/online-teaching/live-student'
export default {
  data: () => ({
    msg: '',
    msg_list: [],
    user_list: [],
    currentUser: {},
    room: {}
  }),
  created () {
    this.currentUser = JSON.parse(JSON.stringify(this.$store?.user, ['id', 'name', 'photo']))
    this.roomId = this.$route.query.id
    this.getAllUserList()
  },
  activated () {
    this.getAllUserList()
  },
  // mounted () {
  //   this.initLiveRoom()
  // },
  deactivated () {
    this.ws_leave_live_room()
  },
  beforeDestroy () {
    this.ws_leave_live_room()
  },

  methods: {
    async getAllUserList () {
      const { data } = await getLiveStudentList(this.roomId)
      this.user_list = data
      this.get_room_users()
      console.log(data)
    },
    initLiveRoom (cb) {
      this.$store.ws.on('received_live_msg', (message) => {
        this.msg_list.push(message)
        if (message.type === 'finish') {
          // this.$router.replace('/online-teaching/live-in-class').then(() => {
          this.$router.replace('/online-course/live-in-class').then(() => {
            location.reload()
          })
        }
        this.$nextTick(() => {
          this.$refs.roomList.scrollTop = this.$refs.roomList.scrollHeight
        })
      })
      this.$store.ws.on('room_info', ({ users }) => {
        // this.user_list = users
        this.user_list = this.user_list.map(item => ({ ...item, status: 0 }))
        users.forEach(item => {
          const curUserTemp = this.user_list.find(i => i.id === item.id)
          if (curUserTemp) { curUserTemp.status = 1 }
        })
        this.user_list.sort((a, b) => b.status - a.status)
      })
      this.ws_join_live_room(cb)
    },
    ws_send_live_msg (msgBody, cb) {
      this.$store.ws.emit('send_live_msg', {
        from: this.currentUser,
        roomId: +this.roomId,
        type: 'msg',
        msg: this.msg,
        ...msgBody
      }, (message) => {
        this.msg_list.push(message)
        this.$nextTick(() => {
          this.$refs.roomList.scrollTop = this.$refs.roomList.scrollHeight
        })
        cb?.(message)
      })
      this.msg = ''
    },

    ws_join_live_room (cb) {
      this.$store.ws.emit('join_live_room', {
        from: this.currentUser,
        type: 'join',
        roomId: +this.roomId
      }, (message) => {
        this.msg_list.push(message)
        this.get_room_users()
        cb?.(message)
      })
    },
    get_room_users () {
      this.$store.ws.emit('find_room_info', +this.roomId, (res) => {
        // this.user_list = res.users
        this.user_list = this.user_list.map(item => ({ ...item, status: 0 }))
        res.users.forEach(item => {
          const curUserTemp = this.user_list.find(i => i.id === item.id)
          if (curUserTemp) { curUserTemp.status = 1 }
        })
        this.user_list.sort((a, b) => b.status - a.status)
      })
    },

    ws_leave_live_room (cb) {
      this.isJoinRoom = false
      this.$store.ws.emit('leave_live_room', {
        from: this.currentUser,
        type: 'leave',
        roomId: +this.roomId
      }, cb)
    },

    ws_finish_live (cb) {
      this.ws_send_live_msg({ type: 'finish' }, cb)
    }

  }
}
