<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,
  },
})

const router = useRouter()

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))',
}

function jump() {
  router.push({
    path: '/home/control',
    query: {
      id: detail.id,
    },
  })
}
</script>

<template>
  <div class="video-desc" :class="className" :style="`${colorMap[detail.deviceStatusName]}`" @dblclick="jump">
    <div class="name">
      名称：
    </div>
    <div class="value">
      {{ detail.monitorName ? detail.monitorName : '暂无' }}
    </div>
    <div class="name">
      状态：
    </div>
    <div class="value">
      {{ detail.deviceStatusName }}
    </div>
    <div class="name">
      浓度：
    </div>
    <div class="value">
      {{ detail.concentration !== undefined ? detail.concentration : '*' }}
    </div>
    <div class="name">
      位置：
    </div>
    <div class="value">
      {{ detail.horizontalAngle !== undefined ? `${detail.horizontalAngle}°` : `*` }},
      {{ detail.verticalAngle !== undefined ? `${detail.verticalAngle}°` : `*` }}
    </div>
  </div>
</template>

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

  .name {
    color: #d5d5d5;
    font-weight: bold;
  }

  .value {
    word-wrap: break-word;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: #fff3 2px solid;
  }

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

.video-1 {
  top: 0;
  left: 35px;
  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: 50px;
  left: 35px;
  border-radius: 15px 0 0 15px;
  padding-right: 7px;
}

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