<script lang="ts" setup>
import { getStoreData } from '@/utils/composition';
import { computed, onUnmounted, PropType, ref, watch } from 'vue';

const props = defineProps({
  orders: {
    type: Array as PropType<string[]>,
    require: false,
    default: [],
  },
});
const isLocked = computed(() => {
  return getStoreData('glob', 'systemLocked');
});
const emits = defineEmits(['change']);

let baseBootList: any = null;
const bootList: any = ref([]);

const orderWatch = watch(
  props,
  newVal => {
    const temp: any = [];
    newVal.orders.forEach((value: string) => {
      const label = getOrderKey(value);
      temp.push({ label, value });
    });
    bootList.value = temp;
    baseBootList = JSON.stringify(temp);
  },
  { deep: true },
);

function getOrderKey(value: string) {
  let key = '';
  switch (value) {
    case 'HardDiskDrive':
      key = 'BIOS_HARD_DISK_DRIVE';
      break;
    case 'DVDROMDrive':
      key = 'BIOS_DVD_ROM_DRIVE';
      break;
    case 'PXE':
      key = 'BIOS_PXE';
      break;
    case 'Others':
      key = 'COMMON_OTHER';
      break;
    default:
      key = '';
  }
  return key;
}

function moveUp(item: { label: string; value: string }, index: number) {
  if (index <= 0 || isLocked.value) {
    return;
  }
  const prev = bootList.value[index - 1];
  bootList.value[index - 1] = item;
  bootList.value[index] = prev;
  checkOrderChange();
}
function moveDown(item: { label: string; value: string }, index: number) {
  if (index >= bootList.value.length - 1 || isLocked.value) {
    return;
  }
  const next = bootList.value[index + 1];
  bootList.value[index + 1] = item;
  bootList.value[index] = next;
  checkOrderChange();
}

function checkOrderChange() {
  const result = baseBootList !== JSON.stringify(bootList.value);
  // 有变化时，发送数据，无变化时，发送null
  if (result) {
    const param = bootList.value.map((item: any) => item.value);
    emits('change', param);
  } else {
    emits('change', null);
  }
}

onUnmounted(() => {
  orderWatch();
});
</script>

<template>
  <div v-if="bootList.length > 0" id="bootSequenceId" class="boot-order">
    <ul id="bootSequenceId">
      <li v-for="(item, index) in bootList" :key="item.value">
        <span class="label">{{ $t(item.label) }}</span>
        <div v-privil.baseConfig class="op-icons">
          <i
            class="op-icons-item upper"
            :class="{ disabled: index === 0 || isLocked }"
            @click="moveUp(item, index)"
          ></i>
          <i
            class="op-icons-item lower"
            :class="{ disabled: index === bootList.length - 1 || isLocked }"
            @click="moveDown(item, index)"
          ></i>
        </div>
      </li>
    </ul>
  </div>
  <div v-if="bootList.length === 0" id="bootSequenceId" class="no-data">
    {{ $t('BIOS_NO_DATA') }}
  </div>
</template>

<style lang="scss" scoped>
.boot-order {
  width: 240px;
  border-radius: 2px;
  border: 1px solid var(--o-border-color-lighter);
  padding: 18px 16px;
  ul > li {
    display: flex;
    line-height: 16px;
    justify-content: space-between;
    & + li {
      margin-top: 9px;
    }
    .op-icons {
      position: relative;
      height: 16px;
      width: 16px;
      .op-icons-item {
        position: absolute;
        right: 0;
        color: var(--o-text-color-tertiary);
        cursor: pointer;
        width: 0;
        height: 0;
        border: 5px solid transparent;
        &.upper {
          border-bottom: 5px solid var(--o-text-color-tertiary);
          &:hover {
            border-bottom-color: $APP-COLOR-HOVER;
          }
          &.disabled {
            border-bottom-color: var(--o-bg-color-placeholder);
            cursor: not-allowed;
          }
        }
        &.lower {
          border-top: 5px solid var(--o-text-color-tertiary);
          &:hover {
            border-top-color: $APP-COLOR-HOVER;
          }
          &.disabled {
            border-top-color: var(--o-bg-color-placeholder);
            cursor: not-allowed;
          }
        }
      }
    }
    .upper {
      top: -4px;
    }
    .lower {
      bottom: -4px;
    }

    .label {
      font-size: 12px;
      color: var(--o-text-color-secondary);
    }
  }
}
.no-data {
  width: 240px;
  height: 30px;
  line-height: 30px;
  box-shadow: 0 0 0 1px inset var(--o-border-color-lighter);
  border-radius: 2px;
  padding: 0 8px;
  cursor: not-allowed;
}
</style>
