<script setup lang="ts">
const props = defineProps<{
  modelValue: string | number
  config: anyObj[]
  prop?: { id?: any; name?: string }
}>()

// UserCenterSidebar component

const emit = defineEmits(['update:modelValue', 'handleChange'])

const OSS_URL = import.meta.env.VITE_OSS_URL

function handleSelectClass(i: Record<string, string>) {
  if (props.modelValue !== i[props.prop?.id || 'id']) {
    emit('update:modelValue', i[props.prop?.id || 'id'])
    emit('handleChange', i)
  }
}
const bgUrl = computed(() => {
  return (isActive: boolean) => {
    if (isActive) {
      return `${OSS_URL}/urm/sidebar_item_xl_active.svg`
    } else {
      return ``
    }
  }
})
</script>
<template>
  <div class="bg-box">
    <div class="sidebar-box hidden_scroll">
      <div class="sidebar">
        <div
          v-for="i in config"
          :key="i[prop?.id || 'id']"
          :class="{
            'sidebar-item': true,
            pointer: true,
            active: modelValue === i[prop?.id || 'id'],
          }"
          :style="{
            'background-image': `url(${bgUrl(modelValue === i[prop?.id || 'id'])})`,
          }"
          @click="handleSelectClass(i)"
        >
          {{ i[prop?.name || 'name'] }}
          <svg xmlns="http://www.w3.org/2000/svg" height="2" viewBox="0 0 154 2" fill="none">
            <path
              d="M1 1H153"
              stroke="#666666"
              stroke-width="2"
              stroke-linecap="round"
              stroke-dasharray="8 8"
            />
          </svg>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.bg-box {
  width: 100%;
  height: 100%;
  position: relative;
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%);
    height: 100%;
    width: 200px;
    border-radius: 2.5vh;
    background: #373737;
  }
}
.sidebar-box {
  width: 100%;
  height: 100%;
}
.sidebar {
  position: relative;

  &-item {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    font-size: 3.33vh;
    // height: 110px;
    color: #fff;
    text-shadow: 0 0.33vh 0.17vh rgba(0, 0, 0, 0.25);
    font-family: $font-special;

    font-style: normal;
    font-weight: 400;

    background-repeat: no-repeat;
    background-position: 20px 37px;
    background-size: 40px 40px;
    padding: 3.33vh 0;
    // margin-bottom: 72px;

    text-align: center;
    line-height: 4.5vh;

    &:last-child {
      margin-bottom: 0;
    }
    &.active {
      background-position: top center;
      background-size: 100%;
      // padding: 38px 0 12px;
      color: $font-color;
      text-shadow: none;
      text-align: center;
    }
    svg {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translate(-50%);
      width: 154px;
    }
  }
}
</style>
