import { defineComponent } from 'vue'
import { ElButton, ElDropdown, ElDropdownMenu, ElDropdownItem, ElSlider, ElDialog, ElIcon } from 'element-plus'
import runtime, * as RuntimeUtils from './runtime'
import styles from './action-bar.module.less'
import Share from './share'
export default defineComponent({
  name: 'LiveBroadcast-ActionBar',
  data() {
    return {
      volume: 30,
      barStatus: {
        camera: false, // 摄像头
        volume: false, // 声音调节
        microphone: false, // 麦克风
        screen: false, // 共享屏幕
        share: false, // 分享
      },
      shareVisiable: false
    }
  },
  computed: {
    isCameraDisabled() {
      // @ts-ignore
      return this.barStatus.camera && runtime.deviceStatus.camera !== 'denied'
    },
    isMicrophoneDisabled() {
      // @ts-ignore
      const isDisabled = this.barStatus.microphone && runtime.deviceStatus.microphone !== 'denied'
      return isDisabled
    },
    isVolumeDisabled() {
      // @ts-ignore
      return this.barStatus.volume && this.volume === 0
    }
  },
  methods: {
    startShare() {
      console.log('调用')
      this.shareVisiable = true
    },
    volumeChange(value: number) {
      this.volume = value
      RuntimeUtils.setVolume(value)
    }
  },
  render() {
    return (
      <div class={styles['action-bar']} id="action-bar">
        <div style={{ display: 'flex' }}>
          <div class={styles['bar-btn']}>
            <div class={styles.btnInner}>
              <SvgIcon
                onClick={() => {
                  this.barStatus.camera = !this.barStatus.camera
                  RuntimeUtils.toggleDevice('camera')
                }}
                name={this.isCameraDisabled ? 'bar-camera-disabled' : 'bar-camera'}
                style={{
                  width: '22px',
                  cursor: 'pointer'
                }}
              />
              <ElDropdown
                placement="top"
                onCommand={RuntimeUtils.setSelectCamera}
                // @ts-ignore
                vSlots={{
                  dropdown: () => (
                    <ElDropdownMenu>
                      {runtime.cameras.map(item => (<ElDropdownItem command={item}>{item.label}</ElDropdownItem>))}
                    </ElDropdownMenu>
                  )
                }}
              >
                <div class={styles['bar-btn']} style={{ height: '32px' }}>
                  <SvgIcon
                    name="bar-arrow-down"
                    style={{
                      width: '18px'
                    }}
                  />
                </div>
              </ElDropdown>
            </div>
            <span class={styles['bar-btn-text']}>摄像头</span>
          </div>
          <div class={styles['bar-btn']}>
            <div class={styles.btnInner}>
              <SvgIcon
                onClick={() => {
                  this.barStatus.volume = !this.barStatus.volume;
                  this.volume = 0;
                }}
                name={this.isVolumeDisabled ? 'bar-volume-disabled' : 'bar-volume'}
                style={{
                  width: '22px',
                  cursor: 'pointer'
                }}
              />
              <ElDropdown
                placement="top-start"
                popper-options={{ boundariesElement: '#action-bar', gpuAcceleration: false }}
                // @ts-ignore
                vSlots={{
                  dropdown: () => (
                    <div class={styles.volumeSlider}>
                      <SvgIcon class={styles.volumeIcon} name="message-voice" color="#fff" />
                      <ElSlider modelValue={this.volume} onInput={this.volumeChange} size="small" />
                    </div>
                  )
                }}
              >
                <div class={styles['bar-btn']} style={{ height: '32px' }}>
                  <SvgIcon
                    name="bar-arrow-down"
                    style={{
                      width: '18px'
                    }}
                  />
                </div>
              </ElDropdown>
            </div>
            <span class={styles['bar-btn-text']}>音量调节</span>
          </div>

          <div class={styles['bar-btn']} onClick={RuntimeUtils.shareScreenVideo}>
            <div class={styles.btnInner}>
              <SvgIcon
                name="bar-screen-share"
                style={{
                  width: '22px',
                  cursor: 'pointer'
                }}
              />
            </div>
            <span class={styles['bar-btn-text']}>屏幕共享</span>
          </div>

          {/* <div class={styles['bar-btn']} >
            <div class={styles.btnInner}>
              <SvgIcon
                name="bar-beauty"
                style={{
                  width: '22px',
                  cursor: 'pointer'
                }}
              />
            </div>
            <span class={styles['bar-btn-text']}>美颜</span>
          </div> */}
          <div class={styles['bar-btn']}>
            <div class={styles.btnInner}>
              <SvgIcon
                onClick={() => {
                  const needPublish = runtime.videoStatus === 'liveing'
                  this.barStatus.microphone = !this.barStatus.microphone
                  if (!this.barStatus.microphone) {
                    RuntimeUtils.openDevice('microphone', needPublish)
                  } else {
                    RuntimeUtils.closeDevice('microphone', needPublish)
                  }
                }}
                name={this.isMicrophoneDisabled ? 'bar-mike-disabled' : 'bar-mike'}
                style={{
                  width: '22px',
                  cursor: 'pointer'
                }}
              />
              <ElDropdown
                placement="top-start"
                popper-options={{ boundariesElement: '#action-bar', gpuAcceleration: false }}
                onCommand={RuntimeUtils.setSelectMicrophone}
                // @ts-ignore
                vSlots={{
                  dropdown: () => (
                    <ElDropdownMenu>
                      {runtime.microphones.map(item => (<ElDropdownItem command={item}>{item.label}</ElDropdownItem>))}
                    </ElDropdownMenu>
                  )
                }}
              >
                <div class={styles['bar-btn']} style={{ height: '32px' }}>
                  <SvgIcon
                    name="bar-arrow-down"
                    style={{
                      width: '18px'
                    }}
                  />
                </div>
              </ElDropdown>
            </div>
            <span class={styles['bar-btn-text']}>麦克风</span>
          </div>

        </div>
        <div style={{ display: 'flex' }} onClick={this.startShare}>
          <div class={styles['bar-btn']} >
            <div class={styles.btnInner}>
              <SvgIcon
                name="bar-share"
                style={{
                  width: '22px',
                  cursor: 'pointer'
                }}
              />
            </div>
            <span class={styles['bar-btn-text']} >分享</span>
          </div>
        </div>
        {/* <ElButton onClick={RuntimeUtils.shareScreenVideo}>屏幕共享</ElButton> */}
        <ElDialog width="510px"
          append-to-body modelValue={this.shareVisiable} title="分享" before-close={() => { this.shareVisiable = false }}>
            <Share />
        </ElDialog>
      </div>
    )
  }
})
