import { defineComponent } from 'vue'
import { ElButton, ElMessage, ElMessageBox } from 'element-plus'
import runtime, * as RuntimeUtils from './runtime'
import { state } from '/src/state'
import request from '/src/helpers/request'
import styles from './header.module.less'
import { removeToken } from '/src/utils/auth'

export default defineComponent({
  name: 'LiveBroadcastHeader',
  methods: {
    async startLive() {
      try {
        await ElMessageBox.confirm('开启后学生将看到视频画面', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
        await RuntimeUtils.startLive()
        ElMessage.success('开启成功')
      } catch (error) {
        console.log(error)
      }
    },
    async closeLive() {
      try {
        await ElMessageBox.confirm('关闭后将切断视频，学生不可观看', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
        // await request.post('/api-im/user/statusImUser', {
        //   data: {
        //     os: 'PC',
        //     status: '3',
        //     userId: state.user?.speakerId
        //   }
        // })
        await RuntimeUtils.closeLive()
        await RuntimeUtils.sendMessage({}, 'PauseLive')
        ElMessage.success('关闭成功')
      } catch (error) {
      }
    },
    async closeRoom() {
      try {
        await ElMessageBox.confirm('结束后将无法进入直播间', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
        // 异步获取用户信息
        const id = state.user?.id
        await request.get('/api-web/imLiveBroadcastRoom/roomDestroy/' + id, {})
        RuntimeUtils.closeDevice('camera')
        RuntimeUtils.closeDevice('microphone')
        state.user = null
        removeToken();
        ElMessage.success('结束');
        (this as any).$router.push({
          path: '/login',
          query: {
            ...this.$route.query
          }
        });
      } catch (error) {}
    }
  },
  render() {
    return (
      <div class={styles.header} >
        <h3 class={styles.title}>直播内容：{ state.user?.liveRemark }</h3>
        <div>
          {runtime.videoStatus === 'liveing' ? (
            <ElButton type="danger" color="#01A79E" onClick={this.closeLive}>暂停直播</ElButton>
          ) : (
            <ElButton type="primary" color="#01A79E" onClick={this.startLive}>开启直播</ElButton>
          )}

          <ElButton type="primary" color="#EA4132" onClick={this.closeRoom}>结束直播</ElButton>
        </div>
      </div>
    )
  }
})
