import { defineComponent } from 'vue'
import runtime from './runtime'
import styles from './video-status.module.less'

export default defineComponent({
  name: 'VideoStatus',
  render() {
    return (
      <div class={styles.container}>
        {runtime.deviceStatus.camera === 'denied' ? (
          <div class={styles.denied}>
            <SvgIcon name="camera-status" class={styles.icon}/>
            <p class={styles.title}>摄像头被禁用</p>
            <p class={styles.tips}>请授权允许访问摄像头</p>
          </div>
        ) : null}
        {runtime.deviceStatus.camera === 'init' ? (
          <div class={styles.init}>
            <SvgIcon name="camera-status" class={styles.icon}/>
            <p class={styles.title}>请完成摄像头授权</p>
            <p class={styles.tips}>请授权允许访问摄像头</p>
          </div>
        ) : null}
        {runtime.deviceStatus.camera === 'closed' ? (
          <div class={styles.closed}>
            <SvgIcon name="camera-status" class={styles.icon}/>
            <p class={styles.title}>摄像头已关闭</p>
            <p class={styles.tips}>您已关闭摄像头</p>
          </div>
        ) : null}
        {runtime.deviceStatus.camera === 'none' ? (
          <div class={styles.none}>
            <SvgIcon name="camera-status" class={styles.icon}/>
            <p class={styles.title}>暂无摄像头</p>
            <p class={styles.tips}>该设备无摄像头</p>
          </div>
        ) : null}
      </div>
    )
  }
})
