<template>

<div v-if="!carTracked" :class="['ctrls-bar', `type-${viewAct}`]">

  <div class="lf">
    <div
      v-for="(item, x) in viewBtns"
      :key="x"
      :class="['xbtn', { act: viewAct === x }]"
      @click="viewSet(x)"
    >
      {{ item }}
    </div>

    <div @click="scaneReset" class="xbtn fc">
      <Icon class="icon" :size="18" icon="ep:refresh-right" /> 
      重置
    </div>
  </div>

  <div class="rt">

    <div class="text">车辆标签：</div>
    <el-popover
      placement="bottom-start"
      trigger="click"
      popper-class="nameplate-select"
      :teleported="false"
      :show-arrow="false"
      ref="nameplate"
    >
      <template #reference>
        <div class="select">
          {{ carTips[tipAct] }}
          <Icon class="icon" :size="18" icon="ep:caret-bottom" /> 
        </div>
      </template>
      <div class="content">

        <el-radio-group @change="nameplateChange" v-model="tipAct">
          <el-radio v-for="(item, x) in carTips" :key="x" :value="x">{{ item }}</el-radio>
        </el-radio-group>

      </div>
    </el-popover>

    <div class="xbtn tips">
      <div class="use-tips"></div>
      <div class="icon info"></div>
      操作说明
    </div>
  </div>

  

</div>

</template>

<script lang='ts' setup>

import { bus, carTracked } from '@/views/3DModel/_state'

const viewBtns = ['鸟瞰视角', '驾驶视角(杭州)', '驾驶视角(金华)']
const carTips = ['车牌', '车辆类型', '车速', '车辆位置']

const tipAct = ref(0)
const viewAct = defineModel() // 视角

const nameplate = ref<any>(null)

// 铭牌切换
const nameplateChange = (x) => {
  const transkeys = ['plate', 'type', 'speed', 'locate']
  nameplate.value && nameplate.value.hide()
  bus.emit('plate-change', transkeys[x])
}

// 视角切换
const viewSet = (x) => {
  bus.emit('view-reset', x)
  viewAct.value = x
}

// 视角重置
const scaneReset = () => {
  bus.emit('view-reset', viewAct.value)
}


</script>

<style lang='scss' scoped>

$Common_Url: '@/assets/images/3d/';

.ctrls-bar {
  position: relative;
  color: white;
  display: flex;
  align-items: center;
  margin-top: 20px;
  font-size: 14px;
  z-index: 2;
  justify-content: space-between;
  margin-left: 420px;
  margin-right: 410px;
  
  &.type-0 {
    margin-left: 0px;
    margin-right: 0;
  }

  .lf, .rt{
    display: flex;
    align-items: center;
  }

  .xbtn {
    // width: 150px;
    padding: 0 20px;
    height: 30px;
    text-align: center;
    line-height: 28px;
    background: rgba(0, 125, 250, 0.15);
    border: 1px solid rgba(0, 125, 250, 0.15);
    box-sizing: border-box;
    margin-left: 10px;
    border-radius: 20px;
    cursor: pointer;
    &.act {
      color: #7CD5FF;
      background: rgba(124, 213, 255, 0.15);
      border: 1px solid #7CD5FF;
    }
    &.fc {
      background: rgba(36, 50, 71, 0.5);
      width: auto;
      padding: 0 20px;
      display: flex;
      align-items: center;
      position: relative;
      .icon {
        margin-right: 5px;
      }
    }
  }
}

.rt {
  .select {
    width: 100px;
    height: 30px;
    background: rgba(0, 125, 250, 0.15);
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 0 10px;
    justify-content: space-between;
    cursor: pointer;
  }

  .xbtn {
    display: flex;
    align-items: center;
    &.info {
      width: 16px;
      height: 16px;
      margin-right: 6px;
      background: url($Common_Url + 'info.png') no-repeat;
      background-size: cover;
    }
    .use-tips {
      width: 174.6px;
      height: 106.8px;
      background: url($Common_Url + 'tips.png') no-repeat;
      background-size: 100% auto;
      background-position: center bottom;
      position: absolute;
      right: 0px;
      top: 30px;
      display: none;
    }
    &.tips:hover {
      .use-tips {
        display: block;
      }
    }
  }
  
}

: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>