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) {}
    },
    async closeLive() {
      try {
        await ElMessageBox.confirm('是否确认结束直播？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
        await request.post('/api-im/user/statusImUser', {
          data: {
            os: 'IOS',
            status: '2',
            userid: state.user?.id
          }
        })
        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>
    )
  }
})