<template>
  <div id="e_popup" :class="`warning${typeMap[model.eventType]}`">
    <div class="header">告警详情</div>
    <div class="main">
      <div class="detail_item" v-for="(item,index) of eventDetails" :key="index">
        <div class="label">{{ item.label }}</div>
        <div class="value">{{ item.value }}</div>
      </div>
    </div>
    <div class="arrow"></div>
  </div>
</template>

<script>
export default {
  name: "warningPopup",
  props: ["model"],
  components: {},

  data() {
    return {
      typeMap: {
        疑似事故: "max",
        轻微拥堵: "min",
        中度拥堵: "mid",
      },
    };
  },
  mounted() {
    console.log("event", this.model);
  },
  methods: {},
  computed: {
    eventDetails() {
      return [
        { label: "告警地点：", value: this.model.placeDesc },
        { label: "车牌号码：", value: this.model.plateNo },
        { label: "参与者类别：", value: this.model.objectType },
        { label: "开始时间：", value: this.model.startTime },
        { label: "结束时间：", value: this.model.endTime },
      ];
    },
  },
  beforeDestroy() {},
};
</script>

<style lang="less" scoped>
#e_popup {
  width: 281PX;
  background-size: 100% 100%;
}

.header {
  height: 34PX;
  font-size: 18PX;
  font-weight: 700;
  line-height: 34PX;
  padding-left: 12PX;
  color: white;
  //background:url('../../assets/images/holo/popupTop.png');
  background-size: 100%;
}

.main {
  font-size: 12PX;
  height: calc(100% - 43PX);
  border: none;
  padding: 18PX;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .detail_item {
    height: 30PX;
    display: flex;
    align-items: center;
    background-image: url("../../../assets/images/holo/vehicle_popup_arrow.png");
    background-position-x: left;
    background-position-y: center;
    background-repeat: no-repeat;

    .label {
      padding-left: 30PX;
      // color: #bcdaec;
    }

    .value {
      color: white;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .arrow {
    display: flex;
    width: 100%;
    height: 30PX;
    text-align: center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-image: url("../../../assets/images/holo/vehicelArrow.png");
    background-position-x: center;
  }
}
.warningmax {
  .header {
    background-color: rgba(255, 102, 107);
  }
  .main {
    background-color: #3c1b25;
  }
}
.warningmin {
  .header {
    background-color: rgba(42, 130, 228, 1);
  }
  .main {
    background-color: #061b47;
  }
}
.warningmid {
  .header {
    background-color: rgba(246, 157, 20);
  }
  .main {
    background-color: #533e1c;
  }
}
</style>
