import { defineComponent } from 'vue'
import { ElButton, 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'

export default defineComponent({
  name: 'LiveBroadcastHeader',
  methods: {
    async startLive() {
      try {
        await ElMessageBox.confirm('是否确认开始直播？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
        await RuntimeUtils.startLive()
      } 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()
      } catch (error) {}
    }
  },
  render() {
    return (
      <div class={styles.header}>
        <h3 class={styles.title}>直播内容：{ state.user?.liveRemark }</h3>
        {runtime.videoStatus === 'liveing' ? (
          <ElButton type="danger" color="#EA4132" onClick={this.closeLive}>关闭直播</ElButton>
        ) : (
          <ElButton type="primary" color="#01A79E" onClick={this.startLive}>开始直播</ElButton>
        )}
      </div>
    )
  }
})
