<script setup lang="ts">
import { px2vh } from '@/utils'

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

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

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 OSS_URL = import.meta.env.VITE_OSS_URL
// const bgUrl = computed(() => {
//     return (isActive: boolean) => {
//         if (isActive) {
//             return ``;
//         } else {
//             return ``;
//         }
//     };
// });
</script>
<template>
  <div class="sidebar-box hidden_scroll">
    <div class="sidebar">
      <!-- viewBox="0 0 4 100%" -->
      <svg xmlns="http://www.w3.org/2000/svg" class="px-svg">
        <path
          class="px-path"
          d="M2 55V1000000"
          stroke="white"
          stroke-opacity="0.45"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-dasharray="16 16"
        />
      </svg>
      <div class="list">
        <div
          v-for="i in config"
          :key="i[prop?.id || 'id']"
          :class="{ 'sidebar-item': true, active: modelValue === i[prop?.id || 'id'] }"
          :style="{
            'font-size': px2vh(32 + (7 - i[prop?.name || 'name'].length) * 3),
          }"
          @click="handleSelectClass(i)"
        >
          {{ i[prop?.name || 'name'] }}
          <Icon v-if="i.warning" name="warning" width="30" height="30" class="warning_icon"></Icon>
          <div v-if="modelValue === i[prop?.id || 'id']" class="active_bg">
            <img :src="`${OSS_URL}/urm/sidebar_item_active.png`" />
          </div>
          <div v-else class="bg">
            <img :src="`${OSS_URL}/urm/sidebar_item.svg`" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.sidebar-box {
  height: 100%;
}
.sidebar {
  position: relative;
  svg {
    position: absolute;
    left: 15.83%;
    z-index: 0;
    height: calc(100% - 3.33vh);
    // viewbox: 0 0 4 100%;
  }
  .px-svg {
    width: 1.67%;
    .px-path {
      stroke-width: 4px;
    }
  }
  .list {
    display: flex;
    flex-direction: column;
  }
  &-item {
    cursor: pointer;
    position: relative;
    z-index: 1;
    box-sizing: border-box;

    height: 9.17vh;
    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;
    line-height: 5vh;
    padding: 2.08vh 0 2.08vh 30%;
    margin-bottom: 6vh;

    &:last-child {
      margin-bottom: 0;
    }

    .active_bg {
      position: absolute;
      width: 100%;

      height: 9.17vh;
      top: 0;
      left: 0;
      z-index: -1;
      img {
        width: 100%;
        height: 100%;
        object-fit: fill;
      }
    }
    .bg {
      position: absolute;
      // width: 40px;
      width: 16.67%;
      height: 3.33vh;
      top: 2.92vh;
      // left: 20px;
      left: 8.33%;
      z-index: -1;
      img {
        width: 100%;
        height: 100%;
        object-fit: fill;
      }
    }
    &.active {
      background-position: top left;
      background-size: 100% 110px;
      padding: 3.17vh 12px 1vh;
      color: $font-color;
      text-shadow: none;
      text-align: center;
      position: relative;
      width: 20vh;
      // min-width: 17.83vh;
      text-align: center;
    }
    .warning_icon {
      position: absolute;
      left: 0;
      top: 1.67vh;
      height: 2.67vh !important;
      width: 2.67vh !important;
    }
  }
}
</style>
