<script>
import ScreenSwitch from './ScreenSwitch'
import ScreenLight from './ScreenLight'
import ScreenVolume from './ScreenVolume'
import DeviceNetwork from './DeviceNetwork'
import DeviceReboot from './DeviceReboot'
import PLCSwitch from './PLCSwitch'
import MultifunctionCardPowerSwitch from './MultifunctionCardPowerSwitch'

export default {
  name: 'DeviceInvoke',
  components: {
    ScreenSwitch,
    ScreenLight,
    ScreenVolume,
    DeviceNetwork,
    DeviceReboot,
    PLCSwitch,
    MultifunctionCardPowerSwitch
  },
  props: {
    online: {
      type: [Boolean, String],
      default: false
    }
  },
  render (h) {
    if (!this.online) {
      return h(
        'div',
        {
          staticClass: 'u-font-size--lg u-color--info u-text-center'
        },
        '设备当前未上线'
      )
    }
    return h(
      'div',
      {
        staticClass: 'l-grid--info small'
      },
      __STAGING__
        ? [
          h('DeviceNetwork', { props: this.$attrs }),
          h('ScreenSwitch', { props: this.$attrs }),
          h('MultifunctionCardPowerSwitch', { props: this.$attrs }),
          h('PLCSwitch', { props: this.$attrs }),
          h('ScreenLight', { props: this.$attrs }),
          h('ScreenVolume', { props: this.$attrs }),
          h('DeviceReboot', { props: this.$attrs })
        ]
        : [
          h('DeviceNetwork', { props: this.$attrs }),
          h('ScreenVolume', { props: this.$attrs }),
          h('MultifunctionCardPowerSwitch', { props: this.$attrs }),
          h('DeviceReboot', { props: this.$attrs })
        ]
    )
  }
}
</script>
