<template>
  <div class="l-flex--col center has-border radius has-padding">
    <i
      class="o-icon has-bg u-pointer"
      @click="invoke"
    />
    <div class="has-padding u-color--black u-bold">开关大屏</div>
    <el-dialog
      :visible.sync="show"
      custom-class="c-dialog"
      title="开关大屏"
      :before-close="onCloseDialog"
    >
      <tabs
        :items="tabs"
        :active.sync="active"
      />
      <template v-if="show">
        <template v-if="isImmediate">
          <div class="l-flex__fill l-flex--col jcenter center has-bottom-padding">
            <div>
              <button
                class="o-button c-sibling-item"
                @click="onSwitch(true)"
              >
                即刻开机
              </button>
              <button
                class="o-button c-sibling-item far"
                @click="onSwitch(false)"
              >
                即刻关机
              </button>
            </div>
            <div class="has-padding u-color--info">【实时控制】会立即触发</div>
          </div>
        </template>
        <schema-table
          v-else
          ref="table"
          :schema="schema"
          :proxy.sync="currOptions"
        />
      </template>
    </el-dialog>
    <task-dialog
      ref="editDialog"
      :title="dialogTitle"
      @confirm="onSave"
    />
  </div>
</template>

<script>
import switchTaskMixin from './mixins/switch-task'

export default {
  name: 'ScreenSwitch',
  mixins: [switchTaskMixin],
  data () {
    return {
      openFunctionKey: 'bootScreen',
      closeFunctionKey: 'shutdownScreen'
    }
  }
}
</script>

<style lang="scss" scoped>
.o-icon {
  background-image: url("~@/assets/icon_screen_switch.png");
}
</style>
