<template>
  <div class="MonitorControl">
    <loading :active.sync="isLoading" :can-cancel="false" :is-full-page="false"></loading>
    <div>
      <div class="swiper-container" ref="swiperRef" v-swiper:mySwiper="swiperOptions" @slideChange="SwiperChange($event)">
        <div class="swiper-wrapper">
          <!-- Luminance -->
          <div class="swiper-slide">
            <div class="menuType" ref="idsMenu1"  @click="menuClick('Luminance')">
                <div
                  class="btnIcon"
                >
                  <icon :iconName="iconImg.img[0]"/>
                </div>
              <div class="BtnDescription">{{'deviceon.device.view.OSDView.luminance' | translate}}</div>
            </div>
          </div>
          <!-- Image Setup -->
          <div class="swiper-slide">
            <div class="menuType" ref="idsMenu2" @click="menuClick('Image setup')">
              <div
                class="btnIcon"
              >
                <icon :iconName="iconImg.img[1]" />
              </div>
              <div class="BtnDescription">{{'deviceon.device.view.OSDView.imageSetup' | translate}}</div>
            </div>
          </div>
          <!-- Color Temperature -->
          <div class="swiper-slide">
            <div class="menuType" ref="idsMenu3" @click="menuClick('Color temp')">
              <div
                class="btnIcon"
              >
                <icon :iconName="iconImg.img[2]" />
              </div>
              <div class="BtnDescription">{{'deviceon.device.view.OSDView.colorTemp' | translate}}</div>
            </div>
          </div>
          <!-- Speaker -->
          <div class="swiper-slide">
            <div class="menuType" ref="idsMenu4" @click="menuClick('Speaker')">
              <div
                class="btnIcon cls-1"
              >
                <icon :iconName="iconImg.img[3]"/>
              </div>
              <div class="BtnDescription">{{'deviceon.device.view.OSDView.speaker' | translate}}</div>
            </div>
          </div>
          <!-- Advanced -->
          <div class="swiper-slide">
            <div class="menuType" ref="idsMenu5" @click="menuClick('Advanced')">
              <div
                class="btnIcon"
              >
                <icon :iconName="iconImg.img[4]" />
              </div>
              <div class="BtnDescription">{{'deviceon.device.view.OSDView.advanced' | translate}}</div>
            </div>
          </div>
        </div>
      <!-- If we need navigation buttons -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
    </div>
    <vuestic-widget
      class="widget-customized__widget info-widget no-v-padding no-header"
      :headerText="' '"
      :IconFilter="true"
    >
      <transition name="fade">
        <div v-show="mode === 'Luminance'" class="vuestic-widget-body-inner">
          <div class="row" @mouseover="changeTip('Contrast')" :class="{disabledMode: monitor['Contrast'].value === null}">
            <!-- Contrast -->
            <div class="col-xl-6 col-lg-6 btn-svg">
              {{'deviceon.device.view.OSDView.contrast' | translate}}
            </div>
            <div class="col-xl-6 col-lg-6 btn-svg ">
              <div class="bar-choose-num normal-slide">
                <!-- minus -->
                <span class="btn-svg" @click="zoomOut('Contrast')">
                  <icon iconName="main-minus"/>
                </span>
                <vue-slider
                  ref="slider1"
                  v-model="monitor['Contrast'].value"
                  :min="0"
                  :max="100"
                  :tooltip="'always'"
                  :use-keyboard="true"
                  :tooltip-dir="'top'">
                </vue-slider>
                <!-- plus -->
                <span class="btn-svg" @click="zoomIn('Contrast')">
                  <icon iconName="main-add-normal"/>
                </span>
              </div>
            </div>
          </div>
          <hr>
          <div class="row" @mouseover="changeTip('Brightness')" :class="{disabledMode: monitor['Brightness'].value === null}">
            <!-- Brightness -->
            <div class="col-xl-6 col-lg-6 btn-svg">
              {{'deviceon.device.view.OSDView.brightness' | translate}}
            </div>
            <div class="col-xl-6 col-lg-6 btn-svg ">
              <div class="bar-choose-num normal-slide">
                <!-- minus -->
                <span class="btn-svg" @click="zoomOut('Brightness')">
                  <icon iconName="main-minus"/>
                </span>
                <vue-slider
                  ref="slider1"
                  v-model="monitor['Brightness'].value"
                  :min="0"
                  :max="100"
                  :tooltip="'always'"
                  :use-keyboard="true"
                  :tooltip-dir="'top'">
                </vue-slider>
                <!-- plus -->
                <span class="btn-svg" @click="zoomIn('Brightness')">
                  <icon iconName="main-add-normal"/>
                </span>
              </div>
            </div>
          </div>
          <hr>
          <div class="row" @mouseover="changeTip('Display Application')" :class="{disabledMode: ecoModeValue === null}">
            <!-- EcoMode -->
            <div class="col-xl-6 col-lg-6 btn-svg">
              {{'deviceon.device.view.OSDView.ecoMode' | translate}}
            </div>
            <div class="col-xl-6 col-lg-6 btn-svg ">
              <div class="item-list">
                <vuestic-simple-select
                  class="simple-select"
                  v-model="ecoModeValue"
                  option-key="name"
                  v-bind:options="ecoModeOptions"
                  :unselect-disabled="true"
                  :notCollapse="true"
                  :showSearchBox="true"
                  :searchText="$t('deviceon.device.view.searchText')"
                />
              </div>
            </div>
          </div>
          <hr>
          <div class="row" @mouseover="changeTip('DCR')" :class="{disabledMode: dCRValue === null}">
            <!-- DCR -->
            <div class="col-xl-6 col-lg-6 btn-svg">
              {{'deviceon.device.view.OSDView.dcr' | translate}}
            </div>
            <div class="col-xl-6 col-lg-6 btn-svg ">
              <toggle-button
                class="mb-0"
                v-model="dCRValue"
                :sync="true"
                :width="100"
                :height="36"
                :speed="480"
                :color="{checked: '#9e3398', unchecked: '#c3c3c3'}"
                :labels="{checked: 'On', unchecked: 'Off'}"
              />
            </div>
          </div>
          <hr>
          <div class="divTip">{{'deviceon.device.view.OSDView.Tip' | translate}} : {{selectedTip}}</div>
        </div>
      </transition>
      <transition name="fade">
        <div v-show="mode === 'Image setup'" class="vuestic-widget-body-inner">
          <div class="row" @mouseover="changeTip('Horizontal Position')" :class="{disabledMode: monitor['Horizontal Position'].value === null}">
            <!-- H.Position -->
            <div class="col-xl-6 col-lg-6 btn-svg">
              {{'deviceon.device.view.OSDView.Hposition' | translate}}
            </div>
            <div class="col-xl-6 col-lg-6 btn-svg ">
              <div class="bar-choose-num normal-slide">
                  <!-- minus -->
                  <span class="btn-svg" @click="zoomOut('Horizontal Position')">
                    <icon iconName="main-minus"/>
                  </span>
                  <vue-slider
                    ref="slider1"
                    v-model="monitor['Horizontal Position'].value"
                    :min="0"
                    :max="100"
                    :tooltip="'always'"
                    :use-keyboard="true"
                    :tooltip-dir="'top'">
                  </vue-slider>
                  <!-- plus -->
                  <span class="btn-svg" @click="zoomIn('Horizontal Position')">
                    <icon iconName="main-add-normal"/>
                  </span>
              </div>
            </div>
          </div>
          <hr>
          <div class="row" @mouseover="changeTip('Vertical Position')" :class="{disabledMode: monitor['Vertical Position'].value === null}">
            <!-- V.Position -->
            <div class="col-xl-6 col-lg-6 btn-svg">
              {{'deviceon.device.view.OSDView.Vposition' | translate}}
            </div>
            <div class="col-xl-6 col-lg-6 btn-svg ">
              <div class="bar-choose-num normal-slide">
                <!-- minus -->
                <span class="btn-svg" @click="zoomOut('Vertical Position')">
                  <icon iconName="main-minus"/>
                </span>
                <vue-slider
                  ref="slider1"
                  v-model="monitor['Vertical Position'].value"
                  :min="0"
                  :max="100"
                  :tooltip="'always'"
                  :use-keyboard="true"
                  :tooltip-dir="'top'">
                </vue-slider>
                <!-- plus -->
                <span class="btn-svg" @click="zoomIn('Vertical Position')">
                  <icon iconName="main-add-normal"/>
                </span>
              </div>
            </div>
          </div>
          <hr>
          <div class="row" @mouseover="changeTip('Image Ratio')" :class="{disabledMode: imageRatioValue === null}">
            <!-- Image Ratio -->
            <div class="col-xl-6 col-lg-6 btn-svg">
              {{'deviceon.device.view.OSDView.imageRatio' | translate}}
            </div>
            <div class="col-xl-6 col-lg-6 btn-svg ">
              <div class="item-list">
                <!-- <div class="item-title">Image Ratio</div> -->
                <vuestic-simple-select
                  class="simple-select"
                  v-model="imageRatioValue"
                  option-key="name"
                  v-bind:options="imageRatioOptions"
                  :unselect-disabled="true"
                  :notCollapse="true"
                  :showSearchBox="true"
                  :searchText="$t('deviceon.device.view.searchText')"
                />
              </div>
            </div>
          </div>
          <hr>
          <div class="divTip">{{'deviceon.device.view.OSDView.Tip' | translate}} : {{selectedTip}}</div>
        </div>
      </transition>
      <transition name="fade">
        <div v-show="mode === 'Color temp'" class="vuestic-widget-body-inner">
          <div class="row" @mouseover="changeTip('Select Color Preset')" :class="{disabledMode: colorTempValue === null}">
            <!-- Color Temp. -->
            <div class="col-xl-6 col-lg-6 btn-svg">
              {{'deviceon.device.view.OSDView.colorTemp' | translate}}
            </div>
            <div class="col-xl-6 col-lg-6 btn-svg ">
              <div class="item-list">
                <vuestic-simple-select
                  class="simple-select"
                  v-model="colorTempValue"
                  option-key="name"
                  v-bind:options="colorTempOptions"
                  :unselect-disabled="true"
                  :notCollapse="true"
                  :showSearchBox="true"
                  :searchText="$t('deviceon.device.view.searchText')"
                />
              </div>
            </div>
          </div>
          <hr>
          <div class="row" @mouseover="changeTip('Red Gain')" :class="{disabledMode: monitor['Red Gain'].value === null || colorTempValue.id !== 11}">
            <!-- Red Gain -->
            <div class="col-xl-6 col-lg-6 btn-svg">
              {{'deviceon.device.view.OSDView.redGain' | translate}}
            </div>
            <div class="col-xl-6 col-lg-6 btn-svg ">
              <div class="bar-choose-num normal-slide">
                <!-- minus -->
                <span class="btn-svg" @click="zoomOut('Red Gain')">
                  <icon iconName="main-minus"/>
                </span>
                <vue-slider
                  ref="slider1"
                  v-model="monitor['Red Gain'].value"
                  :min="0"
                  :max="100"
                  :tooltip="'always'"
                  :use-keyboard="true"
                  :tooltip-dir="'top'">
                </vue-slider>
                <!-- plus -->
                <span class="btn-svg" @click="zoomIn('Red Gain')">
                  <icon iconName="main-add-normal"/>
                </span>
              </div>
            </div>
          </div>
          <hr>
          <div class="row" @mouseover="changeTip('Green Gain')" :class="{disabledMode: monitor['Green Gain'].value === null || colorTempValue.id !== 11}">
            <!-- Green Gain -->
            <div class="col-xl-6 col-lg-6 btn-svg">
              {{'deviceon.device.view.OSDView.greenGain' | translate}}
            </div>
            <div class="col-xl-6 col-lg-6 btn-svg ">
              <div class="bar-choose-num normal-slide">
                <!-- minus -->
                <span class="btn-svg" @click="zoomOut('Green Gain')">
                  <icon iconName="main-minus"/>
                </span>
                <vue-slider
                  ref="slider1"
                  v-model="monitor['Green Gain'].value"
                  :min="0"
                  :max="100"
                  :tooltip="'always'"
                  :use-keyboard="true"
                  :tooltip-dir="'top'">
                </vue-slider>
                <!-- plus -->
                <span class="btn-svg" @click="zoomIn('Green Gain')">
                  <icon iconName="main-add-normal"/>
                </span>
              </div>
            </div>
          </div>
          <hr>
          <div class="row" @mouseover="changeTip('Blue Gain')" :class="{disabledMode: monitor['Blue Gain'].value === null || colorTempValue.id !== 11}">
            <!-- Blue Gain -->
            <div class="col-xl-6 col-lg-6 btn-svg">
              {{'deviceon.device.view.OSDView.bludGain' | translate}}
            </div>
            <div class="col-xl-6 col-lg-6 btn-svg ">
              <div class="bar-choose-num normal-slide">
                <!-- minus -->
                <span class="btn-svg" @click="zoomOut('Blue Gain')">
                  <icon iconName="main-minus"/>
                </span>
                <vue-slider
                  ref="slider1"
                  v-model="monitor['Blue Gain'].value"
                  :min="0"
                  :max="100"
                  :tooltip="'always'"
                  :use-keyboard="true"
                  :tooltip-dir="'top'">
                </vue-slider>
                <!-- plus -->
                <span class="btn-svg" @click="zoomIn('Blue Gain')">
                  <icon iconName="main-add-normal"/>
                </span>
              </div>
            </div>
          </div>
          <hr>
          <div class="divTip">{{'deviceon.device.view.OSDView.Tip' | translate}} : {{selectedTip}}</div>
        </div>
      </transition>
      <transition name="fade">
        <div v-show="mode === 'Speaker'" class="vuestic-widget-body-inner">
          <div class="row" @mouseover="changeTip('Volume')" :class="{disabledMode: SystemVolume === null}">
            <!-- System Speaker -->
            <div class="col-xl-6 col-lg-6 btn-svg">
              {{'deviceon.device.view.OSDView.systemVolume' | translate}}
            </div>
            <div class="col-xl-6 col-lg-6 btn-svg ">
              <div class="bar-choose-num normal-slide">
                <!-- minus -->
                <span class="btn-svg" @click="zoomOut('Volume')">
                  <icon iconName="main-minus"/>
                </span>
                <vue-slider
                  ref="slider1"
                  v-model="SystemVolume"
                  :min="0"
                  :max="100"
                  :tooltip="'always'"
                  :use-keyboard="true"
                  :tooltip-dir="'top'">
                </vue-slider>
                <!-- plus -->
                <span class="btn-svg" @click="zoomIn('Volume')">
                  <icon iconName="main-add-normal"/>
                </span>
              </div>
            </div>
          </div>
          <hr>
          <div class="row" @mouseover="changeTip('Speaker Volume')" :class="{disabledMode: monitor['Speaker Volume'].value === null}">
            <!-- Monitor Speaker -->
            <div class="col-xl-6 col-lg-6 btn-svg">
              {{'deviceon.device.view.OSDView.monitorVolume' | translate}}
            </div>
            <div class="col-xl-6 col-lg-6 btn-svg ">
              <div class="bar-choose-num normal-slide">
                <!-- minus -->
                <span class="btn-svg" @click="zoomOut('Speaker Volume')">
                  <icon iconName="main-minus"/>
                </span>
                <vue-slider
                  ref="slider1"
                  v-model="monitor['Speaker Volume'].value"
                  :min="0"
                  :max="100"
                  :tooltip="'always'"
                  :use-keyboard="true"
                  :tooltip-dir="'top'">
                </vue-slider>
                <!-- plus -->
                <span class="btn-svg" @click="zoomIn('Speaker Volume')">
                  <icon iconName="main-add-normal"/>
                </span>
              </div>
            </div>
          </div>
          <hr>
          <div class="row" @mouseover="changeTip('Mute Switch')" :class="{disabledMode: SystemMute === null}">
            <!-- Mute -->
            <div class="col-xl-6 col-lg-6 btn-svg">
              {{'deviceon.device.view.OSDView.tips.Mute Switch' | translate}}
            </div>
            <div class="col-xl-6 col-lg-6 btn-svg ">
              <toggle-button
                class="mb-0"
                v-model="SystemMute"
                :sync="true"
                :width="100"
                :height="36"
                :speed="480"
                :color="{checked: '#9e3398', unchecked: '#c3c3c3'}"
                :labels="{checked: 'On', unchecked: 'Off'}"
              />
            </div>
          </div>
          <hr>
          <div class="divTip">{{'deviceon.device.view.OSDView.Tip' | translate}} : {{selectedTip}}</div>
        </div>
      </transition>
      <transition name="fade">
        <div v-show="mode === 'Advanced'" class="vuestic-widget-body-inner">
          <div class="row" @mouseover="changeTip('Input Source')" :class="{disabledMode: inputSelectValue === null}">
            <!-- Input Select -->
            <div class="col-xl-6 col-lg-6 btn-svg">
              {{'deviceon.device.view.OSDView.input' | translate}}
            </div>
            <div class="col-xl-6 col-lg-6 btn-svg ">
              <div class="item-list">
                <vuestic-simple-select
                  class="simple-select"
                  v-model="inputSelectValue"
                  option-key="name"
                  v-bind:options="inputSelectOptions"
                  :unselect-disabled="true"
                  :notCollapse="true"
                  :showSearchBox="true"
                  :searchText="$t('deviceon.device.view.searchText')"
                />
              </div>
            </div>
          </div>
          <hr>
          <div class="row" @mouseover="changeTip('Information')">
            <!-- Information -->
            <div class="col-xl-6 col-lg-6 btn-svg">
              {{'deviceon.device.view.OSDView.Information' | translate}}
            </div>
            <div class="col-xl-6 col-lg-6 btn-svg ">
              <div class="item-list">
                {{'deviceon.device.view.OSDView.Resolution' | translate}} : {{ResolutionValue}}<br>
                {{'deviceon.device.view.OSDView.H_Frequency' | translate}} : {{HFrequency}} Hz<br>
                {{'deviceon.device.view.OSDView.V_Frequency' | translate}} : {{VFrequency}} Hz<br>
              </div>
            </div>
          </div>
          <hr>
          <div class="row" @mouseover="changeTip('All Reset')" :class="{disabledMode: monitor['All Reset'].value === null}">
            <!-- Reset -->
            <div class="col-xl-12 col-lg-12 btn-svg">
              <button class="btn btn-primary btn-reset" @click="ResetAll">{{'deviceon.device.view.OSDView.reset' | translate}}</button>
            </div>
          </div>
          <hr>
          <div class="divTip">{{'deviceon.device.view.OSDView.Tip' | translate}} : {{selectedTip}}</div>
        </div>
      </transition>
    </vuestic-widget>
  </div>
</template>

<script>
import DeviceOnApis from '@/util/DeviceOnApis'
import RMMGlobal from '@/util/RMMGlobal'
import vueSlider from 'vue-slider-component'
import 'swiper/swiper-bundle.css'
import { Swiper as SwiperClass, Pagination, Navigation } from 'swiper/swiper.esm.js'
import getAwesomeSwiper from 'vue-awesome-swiper/dist/exporter'

// Swiper modules
SwiperClass.use([Pagination, Navigation])

// local component
const { directive } = getAwesomeSwiper(SwiperClass)
let self
export default {
  name: 'monitor-control',
  directives: {
    swiper: directive
  },
  components: {
    vueSlider
  },
  data () {
    return {
      isLoading: false,
      oRMM: RMMGlobal.get(),
      mode: 'Luminance',
      agentid: '',
      iconImg: {
        img: [
          // 亮度[0] / 螢幕設定[1] / 顏色[2] / 聲音[3] / 進階[4]
          'brightness',
          'image setting',
          'color temp',
          'speaker',
          'advanced'
        ],
      },
      ecoModeOptions: [
        { id: 0, name: 'Standard' },
        { id: 1, name: 'Text' },
        { id: 2, name: 'Mixed(Internet)' },
        { id: 3, name: 'Movie' },
        { id: 4, name: 'User' },
        { id: 5, name: 'Game' },
        { id: 6, name: 'Sport' },
      ],
      ecoModeValue: null,
      dCRValue: null,
      imageRatioOptions: [
        { id: 1, name: 'Full' },
        { id: 2, name: '4 : 3' },
      ],
      imageRatioValue: null,
      colorTempOptions: [
        { id: 1,
          name: this.$t('deviceon.device.view.OSDView.colorOption.sRGB'),
          tip: this.$t('deviceon.device.view.OSDView.tips.colorsRGBTip') },
        { id: 5,
          name: this.$t('deviceon.device.view.OSDView.colorOption.Normal-6500'),
          tip: this.$t('deviceon.device.view.OSDView.tips.colorNormalTip-6500') },
        { id: 6,
          name: this.$t('deviceon.device.view.OSDView.colorOption.Normal-7500'),
          tip: this.$t('deviceon.device.view.OSDView.tips.colorNormalTip-7500') },
        { id: 8,
          name: this.$t('deviceon.device.view.OSDView.colorOption.Cool'),
          tip: this.$t('deviceon.device.view.OSDView.tips.colorCoolTip') },
        { id: 11,
          name: this.$t('deviceon.device.view.OSDView.colorOption.User'),
          tip: this.$t('deviceon.device.view.OSDView.tips.colorUserTip') }
      ],
      colorTempValue: null,
      inputSelectOptions: [
        { id: 1, name: 'VGA' },
        { id: 2, name: 'DVI' },
      ],
      inputSelectValue: null,
      ResolutionValue: '',
      HFrequency: '',
      VFrequency: '',

      monitor: {
        'Brightness': {
          value: null,
          tip: ''
        },
        'Contrast': {
          value: null,
          tip: ''
        },
        'Display Application': {
          value: null,
          tip: ''
        },
        'DCR': {
          value: null,
          tip: ''
        },
        'Select Color Preset': {
          value: null,
          tip: ''
        },
        'Red Gain': {
          value: null,
          tip: ''
        },
        'Green Gain': {
          value: null,
          tip: ''
        },
        'Blue Gain': {
          value: null,
          tip: ''
        },
        'Horizontal Position': {
          value: null,
          tip: ''
        },
        'Vertical Position': {
          value: null,
          tip: ''
        },
        'All Reset': {
          value: null,
          tip: ''
        },
        'Speaker Volume': {
          value: null,
          tip: ''
        },
        'Input Source': {
          value: null,
          tip: ''
        },
        'Resolution': {
          value: null
        },
        'H Frequency': {
          value: null
        },
        'V Frequency': {
          value: null
        },
        /// 未找到符合
        'Image Ratio': {
          value: null,
          tip: ''
        }
      },
      SystemVolume: null,
      SystemMute: null,
      mointor_copy: {},
      monitorTimmer: 0,
      settingData: false,
      selectedTip: '',
      swiperOptions: {
        slidesPerView: 1,
        breakpoints: {
          400: {
            slidesPerView: 1,
            spaceBetween: 0
          },
          500: {
            slidesPerView: 1,
            spaceBetween: 0
          },
          577: {
            slidesPerView: 2,
            spaceBetween: 0
          },
          640: {
            slidesPerView: 3,
            spaceBetween: 0
          },
          900: {
            slidesPerView: 4,
            spaceBetween: 0
          }
        },
        // Navigation arrows
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        }
      },
      setInit: false,
      setVolumeInit: false
    }
  },
  props: {
    did: {
      type: Number,
      default: 0,
    },
    agentId: {
      type: String,
      default: '',
    }
  },
  mounted () {
    self = this
    this.$refs.idsMenu1.classList.add('is-focus')
    if (this.$route.path === '/IDS/Monitor') {
      for (let [index, com] of document.querySelectorAll('.vuestic-widget-body-inner').entries()) {
        if (index !== 1) com.classList.add('phone')
      }
    }
    this.agentid = this.$route.query.agentId ? this.$route.query.agentId : this.agentId
    this.getSensorData(this.did, this.agentid)
    this.getSysVolume(this.did, this.agentid)
  },
  destroyed () {},
  watch: {
    monitor: {
      handler () {
        if (this.setInit) return
        clearTimeout(self.monitorTimmer)
        self.monitorTimmer = setTimeout(() => {
          if (!self.settingData) {
            for (let key in self.monitor) {
              if (self.mointor_copy[key].value !== self.monitor[key].value) {
                self.isLoading = true
                self.settingData = true
                self.setSensor('EmbDDC', self.monitor[key], key)
                break
              }
            }
          }
        }, 500)
      },
      deep: true
    },
    SystemVolume (val) {
      if (this.setVolumeInit) return
      clearTimeout(self.monitorTimmer)
      self.monitorTimmer = setTimeout(() => {
        if (!self.settingData) {
          self.settingData = true
          self.setSensor('EmbIPC', { n: '/data/Volume', value: val }, 'Volume')
        }
      }, 500)
    },
    SystemMute (val) {
      if (this.setVolumeInit) return
      clearTimeout(self.monitorTimmer)
      self.monitorTimmer = setTimeout(() => {
        if (!self.settingData) {
          self.settingData = true
          self.setSensor('EmbIPC', { n: '/data/Mute Switch', value: val }, 'Mute Switch')
        }
      }, 500)
    },
    ecoModeValue (val) {
      if (!val || val.id === -1) return
      self.selectedTip = self.monitor['Display Application'].tip
      if (val.id && self.monitor['Display Application'].value !== val.id) {
        self.monitor['Display Application'].value = val.id
      }
    },
    colorTempValue (val) {
      if (!val || val.id === -1) return
      self.monitor['Select Color Preset'].tip = val.tip
      self.selectedTip = val.tip
      if (val.id && self.monitor['Select Color Preset'].value !== val.id) {
        self.monitor['Select Color Preset'].value = val.id
      }
    },
    inputSelectValue (val) {
      if (val.id === -1) return
      if (val.id && self.monitor['Input Source'].value !== val.id) {
        self.monitor['Input Source'].value = val.id
      }
    },
    dCRValue (val) {
      if (!self.setInit) {
        self.monitor['DCR'].value = val ? 2 : 1
      }
    },
    imageRatioValue (val) {
      if (!self.setInit) {
        self.monitor['Image Ratio'].value = val.id
      }
    }
  },
  computed: {},
  methods: {
    menuClick (data) {
      this.mode = data
      this.$refs.idsMenu1.classList.remove('is-focus')
      this.$refs.idsMenu2.classList.remove('is-focus')
      this.$refs.idsMenu3.classList.remove('is-focus')
      this.$refs.idsMenu4.classList.remove('is-focus')
      this.$refs.idsMenu5.classList.remove('is-focus')
      switch (data) {
        case 'Luminance':
          this.$refs.idsMenu1.classList.add('is-focus')
          this.selectedTip = this.monitor['Contrast'].tip
          break
        case 'Image setup':
          this.$refs.idsMenu2.classList.add('is-focus')
          this.selectedTip = this.monitor['Horizontal Position'].tip
          break
        case 'Color temp':
          this.$refs.idsMenu3.classList.add('is-focus')
          this.selectedTip = this.monitor['Select Color Preset'].tip
          break
        case 'Speaker':
          this.$refs.idsMenu4.classList.add('is-focus')
          this.selectedTip = this.monitor['Speaker Volume'].tip
          break
        case 'Advanced':
          this.$refs.idsMenu5.classList.add('is-focus')
          this.selectedTip = this.monitor['Input Source'].tip
          break
      }
    },
    getSensorData (did, agentid) {
      self.isLoading = true
      DeviceOnApis.data.get
        .pluginLatestData(did, agentid, 'EmbDDC')
        .then(function (xhr) {
          if (xhr && xhr.data && xhr.data.EmbDDC && xhr.data.EmbDDC.data.e && xhr.data.EmbDDC.data.e.length !== 0) {
            self.setInit = true
            for (let e of xhr.data.EmbDDC.data.e) {
              if (self.monitor[e.n]) {
                self.monitor[e.n].value = typeof e.v !== 'undefined' ? e.v : e.sv
                self.monitor[e.n].n = '/data/' + e.n
                if (typeof self.monitor[e.n].tip !== 'undefined') self.monitor[e.n].tip = self.$t(`deviceon.device.view.OSDView.tips.${e.n}`)
              }
            }

            // ECO Mode
            if (self.monitor['Display Application'].value !== null) {
              self.ecoModeValue = self.ecoModeOptions.find(mode => mode.id === self.monitor['Display Application'].value)
            }

            // DCR
            if (self.monitor['DCR'].value !== null) {
              self.dCRValue = self.monitor['DCR'].value === 2
            }

            // Color Temperature
            self.colorTempValue = self.colorTempOptions.find((temp) => {
              return temp.id === self.monitor['Select Color Preset'].value
            })

            if (!self.colorTempValue) {
              self.colorTempOptions.unshift({
                id: -1,
                title: 'RoleTitle',
                name: self.$t('deviceon.device.view.OSDView.colorOption.unknown'),
                tip: self.$t('deviceon.device.view.OSDView.colorOption.unknown')
              })
              self.colorTempValue = self.colorTempOptions[0]
            }

            // Image Ratio
            if (self.monitor['Image Ratio'].value !== null && self.monitor['Resolution'].value !== null && self.monitor['Resolution'].value.indexOf('X') > -1) {
              let width = parseInt(self.monitor['Resolution'].value.split('X')[0])
              let height = parseInt(self.monitor['Resolution'].value.split('X')[1])

              if (width * 4 === height * 5 || width * 3 === height * 4) {
                self.imageRatioValue = self.imageRatioOptions.find(image => image.id === self.monitor['Image Ratio'].value)
              }
            }

            // Input Select
            self.inputSelectValue = self.inputSelectOptions.find((temp) => {
              return temp.id === self.monitor['Input Source'].value
            })
            if (!self.inputSelectValue) {
              self.inputSelectOptions.unshift({
                id: -1,
                title: 'RoleTitle',
                name: self.$t('deviceon.device.view.OSDView.colorOption.unknown')
              })
              self.inputSelectValue = self.inputSelectOptions[0]
            }

            // Information
            if (self.monitor['Resolution'].value !== null) {
              self.ResolutionValue = self.monitor['Resolution'].value
            }
            if (self.monitor['H Frequency'].value !== null) {
              self.HFrequency = self.monitor['H Frequency'].value
            }
            if (self.monitor['V Frequency'].value !== null) {
              self.VFrequency = self.monitor['V Frequency'].value
            }

            self.mointor_copy = JSON.parse(JSON.stringify(self.monitor))
            setTimeout(() => {
              self.setInit = false
            }, 100)
          }
          self.isLoading = false
        })
        .catch(function (err) {
          self.isLoading = false
          console.log(err)
        })
    },
    getSysVolume (did, agentid) {
      DeviceOnApis.data.get
        .pluginLatestData(did, agentid, 'EmbIPC')
        .then(function (xhr) {
          self.setVolumeInit = true
          if (xhr && xhr.data && xhr.data.EmbIPC && xhr.data.EmbIPC.data && xhr.data.EmbIPC.data.e.length !== 0) {
            let embIPC = xhr.data.EmbIPC.data.e
            for (let emb of embIPC) {
              if (emb.n === 'Volume') {
                self.SystemVolume = emb.v
              } else if (emb.n === 'Mute Switch') {
                self.SystemMute = emb.bv
              }
            }
          }
          self.isLoading = false
          setTimeout(() => {
            self.setVolumeInit = false
          }, 100)
        })
        .catch(function (err) {
          self.isLoading = false
          console.log(err)
        })
    },
    setSensor (plugin, sensor, key) {
      if (key === 'Select Color Preset' && sensor.value === -1) return
      let oData = {}
      oData.agentId = self.agentid
      oData.plugin = plugin
      oData.sensorIds = []
      let oSensor = {}
      oSensor.n = sensor.n
      if (key !== 'Mute Switch') {
        oSensor.v = sensor.value
      } else {
        oSensor.bv = sensor.value
      }
      oData.sensorIds.push(oSensor)
      DeviceOnApis.devicectrl.put
        .sensor(oData)
        .then(function (xhr) {
          self.isLoading = false
          let bError = false
          let strError = ''
          if (xhr.data && xhr.data.items) {
            for (let i = 0; i < xhr.data.items.length; i++) {
              if (xhr.data.items[i].statusCode !== 200) {
                strError = xhr.data.items[i].sv
                if (xhr.data.items[i].n) {
                  strError = strError + ' : ' + xhr.data.items[i].n
                }
                if (xhr.data.items[i].sensorId) {
                  strError = strError + ' : ' + xhr.data.items[i].sensorId
                }
                if (xhr.data.items[i].sensorPath) {
                  strError = strError + ' : ' + xhr.data.items[i].sensorPath
                }
                bError = true
                break
              }
            }
          }
          if (bError) {
            DeviceOnApis.MessageBox.Error(self, { message: strError })
            self.monitor = JSON.parse(JSON.stringify(self.mointor_copy))
          } else {
            if (key === 'All Reset' && sensor.value === 0) {
              let temp = JSON.parse(JSON.stringify(sensor))
              temp.value = 1
              self.setSensor('EmbIPC', temp, key)
            } else {
              DeviceOnApis.MessageBox.Normal(
                self,
                self.$t('deviceon.message.success'),
                self.$t('deviceon.action.messages.settingSuccess'),
                'success'
              ).then(() => {
                self.mointor_copy = JSON.parse(JSON.stringify(self.monitor))
                if ((key === 'All Reset' && sensor.value === 1) || key === 'Select Color Preset') {
                  setTimeout(() => {
                    self.getSensorData(self.did, self.agentid)
                  }, 10000)
                } else {
                  self.isLoading = false
                }
              })
            }
          }
          self.settingData = false
        })
        .catch(function (error) {
          self.isLoading = false
          DeviceOnApis.MessageBox.Error(self, error)
          self.monitor = JSON.parse(JSON.stringify(self.mointor_copy))
        })
    },
    ResetAll () {
      self.monitor['All Reset'].value = self.monitor['All Reset'].value === 0 ? 1 : 0
    },
    changeTip (name) {
      if (name === 'Volume' || name === 'Mute Switch' || name === 'Information') {
        this.selectedTip = self.$t(`deviceon.device.view.OSDView.tips.${name}`)
      } else {
        this.selectedTip = this.monitor[name].tip
      }
    },
    zoomIn (name) {
      if (name === 'Volume' && self.SystemVolume.value < 100) {
        self.SystemVolume.value++
      } else if (self.monitor[name].value < 100) {
        self.monitor[name].value++
      }
    },
    zoomOut (name) {
      if (name === 'Volume' && self.SystemVolume.value > 0) {
        self.SystemVolume.value--
      } else if (self.monitor[name].value > 0) {
        self.monitor[name].value--
      }
    },
    SwiperChange (e) {
      if (e.params.slidesPerView === 1) {
        let menus = ['Luminance', 'Image setup', 'Color temp', 'Speaker', 'Advanced']
        self.menuClick(menus[e.activeIndex])
      }
    }
  }
}
</script>

<style lang="scss">
// @import url('../../../../../node_modules/swiper/dist/css/swiper.min.css');
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
.MonitorControl {
  width: 100%;
  height: 100%;
  //background: $dashbordcontent-bg;
  border: 1px solid $border-color;
  transition: all 0.3s;
  overflow: hidden;
  .swiper-container {
    // width: 600px;
    padding-top: 25px;
    height: 235px;
  }
  .controlPanel {
    margin-bottom: 30px;
  }
  .disabledMode {
    pointer-events: none;
    opacity: 0.5;
  }
  .vuestic-widget-header {
    display: none !important;
  }
  .vuestic-widget-body-inner {
    padding: 5% 20%;
    // height: 100%;
    .row {
      padding: 0rem;
    }
    .BtnDescription {
      padding-left : 10%;
    }
    .bar-choose-num {
      width: 100%;
    }
    &.phone {
      height: 620px;
    }
  }
  .vuestic-widget.info-widget {
    margin-bottom: 0px;
  }
  .btnIcon {
    height: 140px;
    text-align: center;
    svg {
      height: 120px;
      width: 120px;
    }
  }
  .btn-reset {
    font-size: 25px;
    border-radius: 36px;
    width: 30%;
    float: right;
    background-color: var(--mainTheme, #9e3398);
    border: 1px solid $main-theme-light;
    color: #ffffff;
    &:hover {
      box-shadow: 4px 4px 7px rgba(0, 0, 0, 0.4);
    }
  }
  // 新增操作按鈕
  .menuType {
    margin: 0 auto;
    cursor: pointer;
    .BtnDescription {
      text-align: center;
    }
    &.is-focus .BtnDescription{
      border-radius: 50px;
      background-color: $main-theme-light;
      box-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
    }
    .btn {
      margin-bottom: 0px;
    }
  }
  .item-list {
    .form-group.select-form-group .dropdown-menu{
      height: 200px;
    }
    .item-title {
      color: $main-theme;
    }
  }
  .BtnDescription {
    font-size: 22px;
    //color: $text-color;
    color: #777777;
    width: 200px;
    margin: 0 auto;
    transition: all 0.3s;
    span {
      display: block;
      margin: 0 auto;
      transition: all 0.3s;
    }
    @include media-breakpoint-down(md) {
      font-size: 14px;
      width: 100px;
    }
  }

  .vuestic-widget-body {
    height: 450px;
    @include media-breakpoint-down(md) {
      height: 550px;
    }
  }
  .divTip {
    //padding-left : 20%;
    //padding-right : 20%;
    font-size: large;
    color: #777777;
    text-align: center;
    margin-top: 3rem;
  }
  .vuestic-widget.info-widget {
    border-radius: 0px;
  }
}
</style>
