import { defineComponent } from "vue";
import { ElButton } from "element-plus";
import runtime, * as RuntimeUtils from '/src/components/live-broadcast/runtime'
import styles from './message.module.less';


type optionsType = 'ALL' | 'JOIN'
export default defineComponent({
  name: 'message',
  data() {
    return {
      options: 'ALL' as optionsType
    }
  },
  methods: {
    async SeatsCtrl() {
      await RuntimeUtils.sendMessage({seatBan: runtime.allowSeatsCtrl, ...RuntimeUtils.getSendMessageUser()}, 'SeatsCtrl')
      runtime.allowSeatsCtrl = !runtime.allowSeatsCtrl
    },
    async ChatBan() {
      await RuntimeUtils.sendMessage({chatBan: runtime.allowChatCtrl, ...RuntimeUtils.getSendMessageUser()}, 'ChatBan')
      runtime.allowChatCtrl = !runtime.allowChatCtrl
    },
  },
  render() {
    return (
      <div class={styles.message}>
        <div class={styles.buttonGroup}>
        {/* class={[!runtime.allowChatCtrl ? styles.active : null, styles.btn]} */}
          <ElButton type={!runtime.allowChatCtrl ? 'primary' : 'info'} onClick={this.ChatBan} >{runtime.allowChatCtrl ? '全体禁言' : '关闭全体禁言'}</ElButton>
          {/* class={[!runtime.allowSeatsCtrl ? styles.active : null, styles.btn]} */}
          <ElButton type={!runtime.allowSeatsCtrl ? 'primary' : 'info'} onClick={this.SeatsCtrl}>{runtime.allowSeatsCtrl ? '禁止连麦' : '关闭禁止连麦'}</ElButton>
        </div>
      </div>
    )
  }
})
