<script setup lang="ts">
import DropMemu from '@/components/DropMenu/DropMenu.vue';
import { checkPrivil } from '@/apps/app-bmc/router/routes';
import { UserPrivil } from '@/model/base-enum';
import { setUIDState } from '@/services/header/header.service';
import { loading, setStoreData } from '@/utils/composition';
import { traduction } from '@/utils/language';
import { computed, reactive, ref } from 'vue';
const props = defineProps({
  state: {
    type: String,
    default: '',
  },
  theme: {
    type: String,
    default: 'default',
  },
});
const emits = defineEmits(['reload']);

const show = ref(false);
const uidRef = ref(null);
const hasBaseConfigPrivil = checkPrivil(UserPrivil.baseConfig);
const options = reactive([
  { id: 'uidStateLit', label: 'HEADER_UID_ON', value: 'Lit' },
  { id: 'uidStateOff', label: 'HEADER_UID_OFF', value: 'Off' },
  { id: 'uidStateBlink', label: 'HEADER_UID_BLINK', value: 'Blinking' },
]);

const uidState = computed(() => props.state);
const activeIdx = computed(() => {
  let position = 0;
  options.filter((item, index) => {
    if (item.value === props.state) {
      position = index;
    }
  })[0];
  return position;
});

function leave() {
  show.value = false;
}

function showDrop() {
  show.value = true;
}

function hideDrop(ev: MouseEvent) {
  show.value = false;
}

function select(ev: any) {
  const state = ev.value;
  if (state) {
    setUIDState({ IndicatorLEDState: state })
      .then(() => {
        loading(true);
        setStoreData('event', 'alertMessage', {
          type: 'success',
          message: traduction('COMMON_SUCCESS'),
        });
        emits('reload');
      })
      .finally(() => {
        loading(false);
      });
  }
}
</script>
<template>
  <div class="menu-container" @mouseenter="showDrop()" @mouseleave="hideDrop($event)">
    <div id="uidOperatorContainer" ref="uidRef" class="uid-container">
      <i
        v-if="state !== 'Blinking'"
        id="uiStateIcon"
        class="icon-UID"
        :class="[{ active: uidState === 'Lit', disabled: !hasBaseConfigPrivil }, `${theme}-uid`]"
      ></i>
      <img
        v-if="state === 'Blinking'"
        id="uiStateBlinkIcon"
        src="@/assets/common/image/uid_blink.gif"
      />
    </div>
    <DropMemu
      v-privil.baseConfig
      :active-index="activeIdx"
      :show="show"
      :options="options"
      :offset-x="-15"
      @leave="leave()"
      @select="select($event)"
    />
  </div>
</template>

<style lang="scss" scoped>
.menu-container {
  display: flex;
  height: 100%;
}
.uid-container {
  display: flex;
  height: 100%;
  align-items: center;
  i {
    font-size: 24px;
    &.active::before {
      color: #0077ff; // UID灯不随品牌色变化
    }
    &.disabled {
      cursor: not-allowed;
    }
  }
  img {
    width: 24px;
    height: 24px;
    &.active {
      display: inline-block;
    }
  }
}

.standard-uid {
  &:before{
    color: #FFFFFE !important;
  }
}

.ibma-uid {
  &:before{
    color: #FFFFFE !important;
  }
}

.beautiful-uid {
  &:before{
    color: #FFFFFE !important;
  }
}
</style>
