<script lang="ts" setup name="VideoDescH">
import { reactive } from 'vue'
const props = defineProps({
  detail: {
    type: Object,
    required: true,
    default: () => {
      return {
        // monitorName: '',
        // stationName: '',
        // deviceStatusName: '',
        // horizontalAngle: '',
        // verticalAngle: '',
        // concentration: '',
        // presetInterval: '',
      }
    },
  },
  className: {
    type: String,
    require: true,
  },
})

// let detail = reactive({})
// detail = props.detail

const colorMap = {
  在线: 'color:#00FF00',
  离线: 'color:#ffffff',
  报警: 'color:#FF0000',
}
</script>

<template>
  <div class="video-desc" :class="className">
    <div>
      设备:<strong>{{ detail.monitorName ? detail.monitorName : '暂无' }}</strong>
    </div>
    <div v-show="detail.deviceType !== '2'">
      预置点:<strong>{{ detail.presetInterval }}</strong>
    </div>
    <div>
      状态:<strong :style="colorMap[detail.deviceStatusName]">&nbsp;{{ detail.deviceStatusName }}</strong>
    </div>
    <div>
      位置:<strong>
        {{ detail.horizontalAngle ? `${detail.horizontalAngle}°` : `*` }},
        {{ detail.verticalAngle ? `${detail.verticalAngle}°` : `*` }}</strong>
    </div>
    <div>
      浓度:<strong>{{ detail.concentration >= 0 ? detail.concentration : `*` }}</strong>
      192
    </div>
  </div>
</template>

<style lang="scss">
.video-desc {
  position: absolute;
  z-index: 1000;
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  padding: 0;
  font-size: 14px;
  letter-spacing: 1px;

  div {
    user-select: none;
    color: #fff;
  }
}

.video-1 {
  position: absolute;
  width: calc(50% - 15px);
  top: calc(50% - 40px);
  left: 10px;
}

.video-2 {
  position: absolute;
  width: calc(50% - 15px);
  top: calc(50% - 40px);
  left: calc(50% + 5px);
}

.video-3 {
  position: absolute;
  width: calc(50% - 15px);
  bottom: 45px;
  left: 10px;
}

.video-4 {
  position: absolute;
  width: calc(50% - 15px);
  bottom: 45px;
  left: calc(50% + 5px);
}
</style>