<template>

<div class="scale-icons">

  <div class="mt-ctrl">
    车辆图片：
    <el-switch
      v-model="useMaterial"
      inline-prompt
      active-text="开"
      inactive-text="关"
      style="--el-switch-on-color: #007DFA; --el-switch-off-color: #768197"
    />
  </div>

  <el-popover
    placement="bottom-start"
    trigger="click"
    popper-class="nameplate-select"
    :teleported="false"
    :show-arrow="false"
    ref="nameplate"
  >
    <template #reference>
      <div class="x-btn select"></div>
    </template>
    <div class="content">

      <el-radio-group @change="nameplateChange" v-model="carTip">
        <el-radio :value="1">车牌</el-radio>
        <el-radio :value="2">车辆类型</el-radio>
        <el-radio :value="3">车速</el-radio>
        <el-radio :value="4">车辆位置</el-radio>
      </el-radio-group>

    </div>
  </el-popover>

  <template v-if="isShowSceneMode">
    <div @click="sceneChange('panorama')" :class="['x-btn', 'reduce', { 'disabled': sceneMode === 'panorama' }]">
      <div class="inner"></div>
    </div>
    <div @click="sceneChange('section')" :class="['x-btn', 'enlarge', { 'disabled': sceneMode === 'section' }]">
      <div class="inner"></div>
    </div>
  </template>

  <slot></slot>

</div>

</template>

<script lang='ts' setup>

import { ref, defineModel } from 'vue'

const props = withDefaults(defineProps<{
  isShowSceneMode?: boolean
}>(), {
  isShowSceneMode: true
})

const emits = defineEmits(['plate-change'])

const carTip = ref(1)
const nameplate = ref<any>(null)

const sceneMode = defineModel('sceneMode')
const useMaterial = defineModel('useMaterial')

const nameplateChange = () => {
  nameplate.value && nameplate.value.hide()
  emits('plate-change', carTip.value)
}

// 视图切换
const sceneChange = (mode) => {
  if (sceneMode.value === mode) {
    return
  }
  sceneMode.value = mode
}

</script>

<style lang='scss' scoped>

$base_url: '@/assets/images/home/';

.scale-icons {
  display: flex;
  align-items: center;
  .mt-ctrl {
    display: flex;
    align-items: center;
    color: white;
    font-size: 14px;
    margin-right: 8px;
    :deep(.el-switch) {
      --el-switch-on-color: transparent;
      --el-switch-off-color: transparent;
      border: 1px solid rgba(255, 255, 255, 0.3);
      border-radius: 20px;
      height: auto;
      margin-left: 4px;
    }
  }
  .x-btn {
    width: 24px;
    height: 24px;
    margin: 0 4px;
    border-radius: 5px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition-property: all;
    transition-duration: 0.2s;
    
    &:hover:not(.disabled) {
      cursor: pointer;
      box-shadow: 0 0 10px #aeaeae;
    }

    &.disabled {
      opacity: 0.5;
    }

    .inner {
      width: 16px;
      height: 16px;
    }
  }
  .select {
    background: url($base_url + 'select.png') no-repeat;
    background-size: cover;
  }
  .reduce {
    background: rgba(0, 125, 250, 0.1);
    .inner {
      background: url($base_url + 'reduce.png') no-repeat;
      background-size: cover;
    }
  }
  .enlarge {
    background: rgba(0, 125, 250, 0.1);
    .inner {
      background: url($base_url + 'enlarge.png') no-repeat;
      background-size: cover;
    }
    
  }

}

:deep(.nameplate-select) {
  min-width: auto !important;
  width: 102px !important;
  background: #1B446D;
  border: none;
  margin-right: -55px;

  
  .el-radio {
    color: white;
    height: 26px;
    .el-radio__inner {
      background: transparent;
      border-color: rgba($color: #ffffff, $alpha: 0.3);
      &::after {
        background-color: #007DFA;
      }
    }
  }
}

</style>