<template>
  <div class="monitor-border" :style="{height: `calc(100vh * ${height} / 1080)`, marginBottom: `calc(100vh * ${mb} / 1080)`}">
    <div class="header">
      <div><i>[ </i><span>{{ idx }}</span><i> ]</i><strong>{{ title }}</strong></div>
      <div class="header-time" v-if="is_time">{{ nowTime }}</div>
    </div>
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<script setup>
import { parseTime } from '@U/cfhi.js'
const props = defineProps({
  height: {
    type: Number,
    default: 500
  },
  idx: {
    type: Number,
    default: 1
  },
  title: {
    type: String,
    default: '钢包到站'
  },
  mb: {
    type: Number,
    default: 0
  },
  is_time: {
    type: Boolean,
    default: false
  },
});
const nowTime = ref('')
const currentTime = () => {
  const getTimeStr = () => {
    nowTime.value = parseTime(new Date())
  }
  getTimeStr()
  setInterval(() => {
    getTimeStr()
  }, 1000)
}
nextTick(() => {
  currentTime()
})
</script>

<style lang="scss" scoped>
.monitor-border{
  width: 100%;
  background-color: rgba(0, 138, 255, 0.08);
  backdrop-filter: blur(8px);
  .header{
    width: 100%;
    height: h(44);
    line-height: h(44);
    display: flex;
    justify-content: space-between;
    padding: 0 w(16);
    >div{
      width: auto;
      font-size: w(18);
      >i{
        font-style: normal;
        color: rgba(24, 254, 254, 1);
      }
      >span{
        color: rgba(255, 24, 24, 1);
        font-family: din;
      }
      >strong{
        font-family: pmzd;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        text-shadow: 2px 2px 8px rgba(0, 133, 255, 0.8);
        margin-left: w(10);
      }
    }
    .header-time{
      text-align: right;
      font-weight: 400;
      font-size: w(14);
      color: rgba(255, 255, 255, 0.9);
    }
  }
  .content{
    width: 100%;
    height: calc(100% - h(44));
    padding:  0 w(16) h(16) w(16);
  }
}
</style>