<template>
  <div id="e_popup">
    <div class="popup_content">
      <div class="header">{{ translateDict(model.eventType,'EventType') }}</div>
      <div class="main">
        <div class="detail_item" v-for="(item,index) of eventDetails" :key="index">
          <div class="detail_item_label">{{ item.label }}</div>
          <div class="detail_item_value">{{ item.value }}</div>
        </div>
      </div>
    </div>

    <div class="arrow"></div>
  </div>
</template>

<script>
import {occupancyValue} from "@/utils";
import store from '@/store/index'
export default {
  name: "eventPopup",
  props: ["model"],
  components: {},
  data() {
    return {};
  },
  mounted() {
    console.log("event", this.model);
  },
  methods: {
    translateDict(value, type) {
      let result = value
      let target = store.state.dicts[type].find((dict) => {
        return dict.code == value;
      })
      if (target) {
        result = target.name
      }
      return result
    },
  },
  computed: {
    eventDetails() {
      return [
        { label: "时间：", value: this.model.startTime },
        { label: "事件编号：", value: occupancyValue(this.model.eventId) },
        { label: "停车状态：", value: '触发' },
        { label: "车辆类型：", value: '机动车' },
        { label: "车辆号码：", value: occupancyValue(this.model.plateNo) },
      ];
    },
  },
  beforeDestroy() {},
};
</script>

<style lang='less' scoped>
#e_popup {
  //font-family: SiYuanHT;
  width: 281PX;
  height: 233PX;


}
.popup_content{
  background-color: #0f2645;
  background-image: url("../../../assets/images/holo/eventbackground.png");
  background-size: 100% 100%;
  height: calc(100% - 20px);
  width: 100%;
  .header {
    height: 43PX;
    font-size: 18PX;
    font-weight: 700;
    line-height: 55PX;
    padding-left: 12PX;
    color: white;
    //background:url('../../assets/images/holo/popupTop.png');
    background-size: 100%;
  }
  .main {
    font-size: 12PX;
    height: calc(100% - 43PX);
    border: 1PX solid #037bb2;
    padding: 10PX 20px;
    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;

      .detail_item_label {
        padding-left: 30PX;
        //line-height: 24PX;
        color: #bcdaec;
      }

      .detail_item_value {
        //line-height: 24PX;
        color: white;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}

.arrow{
  height: 20PX;
  width: 100%;
  background-image: url("../../../assets/images/holo/vehicelArrow.png");
  background-position-x: center;
  background-size: auto 100%;
  background-repeat: no-repeat;
}


</style>
