<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">{{ type }}</div>
    <el-dialog
      :visible.sync="show"
      custom-class="c-dialog"
      :title="settings"
      :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 class="c-grid-form mini">
              <span class="c-grid-form__label required">{{ tip }}</span>
              <div class="l-flex--row">
                <el-input-number
                  v-model="taskValue"
                  :min="0"
                  :max="100"
                  step-strictly
                />&nbsp;%
              </div>
            </div>
            <div class="has-padding">
              <button
                class="o-button"
                @click="onInvoke"
              >
                执行
              </button>
            </div>
          </div>
        </template>
        <schema-table
          v-else
          ref="table"
          :schema="schema"
          :proxy.sync="options"
        />
      </template>
    </el-dialog>
    <task-dialog
      ref="editDialog"
      :title="dialogTitle"
      @confirm="onSave"
    >
      <span class="c-grid-form__label required">{{ tip }}</span>
      <div class="l-flex--row">
        <el-input-number
          v-model="task"
          :min="0"
          :max="100"
          step-strictly
        />&nbsp;%
      </div>
    </task-dialog>
  </div>
</template>

<script>
import simpleTaskMixin from './mixins/simple-task'

export default {
  name: 'ScreenLight',
  mixins: [simpleTaskMixin],
  data () {
    return {
      type: '亮度',
      functionKey: 'brightnessControl',
      valueKey: 'brigthness',
      schema: this.createSchema([
        { label: '亮度值（%）', render ({ inputs }) { return inputs[0]?.value } }
      ])
    }
  }
}
</script>

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