<script lang="ts" setup name="VideoDescH">
import { reactive } from 'vue'
const props = defineProps({
  detail: {
    type: Object,
    required: true,
    default: () =>{
      return {
        deviceName:'',
        lineName:'',
        point:'',
        concentration:'',
        statusName:'',
      }
    }
  },
  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.stationName }}</strong>
    </div>
    <div>
      状态:<strong :style="colorMap[detail.deviceStatusName]">&nbsp;{{ detail.deviceStatusName }}</strong>
    </div>
    <div>
      浓度:<strong>{{ detail.concentration >= 0 ? detail.concentration : `*` }}</strong>
    </div>
  </div>
</template>

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

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

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

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

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

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