<template>
  <div class="scene-label" :class="labelClass">
    <div class="scene-label__content">
      <!-- <img :src="iconSrc" alt="scene" class="scene-label__icon" /> -->
      <span class="scene-label__text">{{ text }}</span>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import sceneIcon from '../assets/images/SketchPng08621fb3b35614299e29352b8d67ad9c2c7dccf7b9c17d042492671e3bbe19f8.png'

const props = defineProps({
  /**
   * 标签文本
   */
  text: {
    type: String,
    required: true
  },
  /**
   * 标签位置：
   * - 'center-left': 对比模式中间分割线的左侧
   * - 'right-left': 右侧面板的左边
   */
  position: {
    type: String,
    default: 'right-left',
    validator: (value) => ['center-left', 'right-left'].includes(value)
  }
})

const labelClass = computed(() => {
  return `scene-label--${props.position}`
})

const iconSrc = sceneIcon
</script>

<style scoped lang="scss">
@use '@/styles/mixins.scss' as *;

.scene-label {
  position: absolute;
  top: calc(var(--sa-header-height));
  z-index: 10;
  pointer-events: none;
  background: url('../assets/images/灾害现场实景.png') no-repeat center center;
  background-size: 100% 100%;

  // 中间分割线左侧（灾前现场实景）
  &--center-left {
    left: 50%;
    transform: translateX(calc(-100% - vw(10)));
  }

  // 右侧面板左边（灾后现场实景）
  &--right-left {
    left: calc(100% - var(--sa-right-width));
    transform: translateX(calc(-100% - vw(10)));
  }

  &__content {
    display: flex;
    align-items: center;
    gap: vw(6);
    padding: vw(8) vw(10);
    // background: rgba(20, 53, 118, 1);
    // border: 1px solid var(--border-color);
    // border-radius: vw(8);
  }

  &__icon {
    width: vw(32);
    height: vw(32);
  }

  &__text {
    color: var(--text-white);
    font-size: fs(15);
    font-family: SourceHanSansCN-Medium, sans-serif;
    font-weight: 500;
    white-space: nowrap;
    margin-left: 16px;
  }
}
</style>
