<template>
  <div v-if="props.show" class="bc-drop-menu" :style="dropStyle">
    <div class="bc-drop-menu-shadow">
      <ul v-if="options">
        <template v-for="(item, index) in props.options" :key="item.id">
          <li
            v-if="!item.hide && props.needTruduction"
            :id="item.elId || item.navId || item.id"
            :class="{ active: item.id === locale || index === props.activeIndex }"
            @click="selectOptions(item)"
          >
            {{ $t(item.label, { smsName: smsName, softwareName: softwareName }) }}
          </li>
          <li
            v-if="!item.hide && !props.needTruduction"
            :id="item.elId || item.navId || item.id"
            :class="{ active: item.id === locale || index === props.activeIndex }"
            @click="selectOptions(item)"
          >
            {{ item.label }}
          </li>
        </template>
      </ul>
      <div class="slot"><slot /></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onUpdated, PropType, reactive } from 'vue';
import useStore from '@/stores';
import { ISecondMenu } from '@/model/base-interface';

interface IDropMenuOptions {
  id?: string;
  elId?: string;
  label: string;
  navId?: string;
  hide?: boolean;
  children?: ISecondMenu[];
}

const store = useStore();
const locale = store.state.loct.locale;
const props = defineProps({
  softwareName: {
    type: String,
    default: '',
    required: false
  },
  smsName: {
    type: String,
    default: '',
    required: false
  },
  show: {
    type: Boolean,
    default: false
  },
  placement: {
    type: String,
    default: ''
  },
  activeIndex: {
    type: Number,
    default: -1
  },
  options: {
    type: Array as PropType<IDropMenuOptions[]>,
    default: () => []
  },
  offsetX: {
    type: Number,
    requier: false,
    default: 0
  },
  // 是否需要翻译
  needTruduction: {
    type: Boolean,
    default: true
  }
});

const emit = defineEmits(['leave', 'select']);

const dropStyle = reactive({
  left: 'inhert',
  top: 'inert',
  right: 'inhert'
});

function selectOptions(item: any) {
  emit('select', item);
  emit('leave');
}

onUpdated(() => {
  if (props.placement) {
    dropStyle.left = 'inhert';
    dropStyle.right = `${-props.offsetX || 0}px`;
  } else {
    dropStyle.left = `${props.offsetX || 0}px`;
    dropStyle.right = 'inhert';
  }
});
</script>

<style lang="scss">
.bc-drop-menu {
  position: absolute;
  top: 48px;
  background-color: transparent;
  min-width: 160px;
  z-index: 111;
  .bc-drop-menu-shadow {
    padding: 4px 0;
    background: var(--o-bg-color-base);
    border-radius: 4px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.24);
  }
  li {
    padding: 8px 16px;
    font-size: $FONT-14;
    color: $FONT-COLOR-BLACK;
    line-height: 16px;
    text-align: left;
    white-space: nowrap;
    &:hover {
      color: $FONT-COLOR-WHITE;
      background-color: $APP-COLOR-HOVER;
      cursor: pointer;
    }
    &.active {
      color: $FONT-COLOR-WHITE;
      background-color: $APP-COLOR-ACTIVE;
    }
  }

  #navUserName {
    display: inline-block;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
</style>