<script lang="ts" setup name="VideoDescV">
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 = {
  '正常':`background: linear-gradient(180deg, #71b5ff, #4384ff)`,
  '离线':'background: linear-gradient(rgb(72 68 68), rgb(161 147 147))',
  '报警':`background: linear-gradient(rgb(174 39 39), rgb(250 0 0))`,
}
</script>

<template>
  <div class="video-desc" :class="className" :style="`${colorMap[detail.deviceStatusName]}`">
    <div>
      设&nbsp;备<strong>{{ detail.monitorName ? detail.monitorName : '暂无'}}</strong>
    </div>
    <div v-show="detail.deviceType != '2'">
      预置点&nbsp;<strong>{{ detail.stationName }}</strong>
    </div>
    <div>
      状&nbsp;态<strong>&nbsp;{{ detail.deviceStatusName }}</strong>
      浓&nbsp;度<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;
  font-size: 14px;
  letter-spacing: 3px;

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

.video-1 {
  top: 0;
  left: 35px;
  display: flex !important;
  flex-direction: column-reverse !important;
  border-radius: 15px 0 0 15px;
  padding-right: 7px;
}

.video-2 {
  top: 0;
  right: 35px;
  border-radius: 0 15px 15px 0;
  padding-left: 7px;
}

.video-3 {
  bottom: 40px;
  left: 35px;
  display: flex !important;
  flex-direction: column-reverse !important;
  border-radius: 15px 0 0 15px;
  padding-right: 7px;
}

.video-4 {
  bottom: 40px;
  right: 35px;
  border-radius: 0 15px 15px 0;
  padding-left: 7px;
}
</style>