<template>
  <div class="alarmmsg">
    <el-row>
      <el-col :span="12">
        <p>
          <dict-tag
            :options="dict.type.algorithm_level"
            :value="message.alarmLevel"
            class="alarmmsg-dict"
          />
          <span>{{ message.algorithmName }}</span>
        </p>
        <p>{{ message.cameraName }}</p>
        <p>{{ message.alarmTime }}</p>
      </el-col>
      <el-col :span="12">
        <img
          :src="'data:image/path;base64,' + message.alarmImageUrl"
          class="alarmmsg-img"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  dicts: ["algorithm_level"],
  name: "messageBox",
  props: {
    message: {
      type: Object,
      default: {
        alarmImageUrl: "",
        alarmLevel: "",
        alarmMessage: "",
        alarmTime: "",
        cameraPosition: "",
      },
    },
  },
  components: {},
  data() {
    return {};
  },
  computed: {},
  watch: {
    message: {
      handler(newVal, oldVal) {},
      deep: true,
    },
  },
  created() {},
  mounted() {},
  methods: {},
};
</script>

<style scoped lang="scss">
.alarmmsg {
  width: 300px;
  height: 100px;
  p {
    margin-bottom: 10px;
  }
  .alarmmsg-dict {
    display: inline-block;
  }
  .alarmmsg-img {
    width: 100px;
    height: 80px;
  }
}
</style>
