<template>
  <div id="ala_popup">
    <div class="leftTopIcon"></div>
    <!--    <div class="top item" :class="`event${iconNameMap[model.eventType]}`">-->
    <div class="top item" :class="`event3`">
      {{ model.placeDesc }}
    </div>
    <!--      <div class="bottom item" :class="`event${iconNameMap[model.eventType]}-t`">-->
    <div class="bottom item" :class="`event3-t`">
      <div>{{ model.eventType }}</div>
      <div class="line"></div>
      <div>{{ `鲁A****${Math.floor(Math.random() * 10)}` }}</div>
    </div>
    <div class="arrow item">
      <!--      <div class="el-icon-caret-bottom" :class="`back${iconNameMap[model.eventType]}-t`"></div>-->

    </div>
  </div>
</template>

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

  data() {
    return {
      iconNameMap: {
        轻微拥堵: 1,
        中度拥堵: 2,
        重度拥堵: 3,
        疑似事故: 4,
      }
    };
  },
  mounted() {
  },
  methods: {},
  computed: {},
  beforeDestroy() {
  },
};
</script>

<style lang='less' scoped>
#ala_popup {
  width: 200PX;
  font-size: 14PX;
  color: white;
  display: flex;

  position: relative;
  flex-direction: column;
  align-items: center;
  .leftTopIcon{
    position: absolute;
    left: 0;
    top: 0;
      border: 4px solid #f24139;
      height: 0;
      width: 0;
      border-right-color: transparent;
      border-bottom-color: transparent;
  }

  .item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .el-icon-caret-bottom {
      font-size: 34PX;
    }
  }

  .top {
    height: 40px;

  }

  .bottom {
    padding: 0 20px;
    font-size: 14PX;
    height: 35PX;
    display: flex;
    justify-content: space-between;
    align-items: center;

    div {
      width: calc(50% - 20PX);
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .line {
      width: 2PX;
      height: 70%;
      background-color: rgba(255, 255, 255, 0.7);
    }
  }

  .arrow {
    margin-top: 10PX;
    width: 26PX;
    height: 30PX;
    background-image: url("../../../assets/images/holo/eventPointRed.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  .event1 {
    background-color: rgba(255, 235, 59, 1);

  }

  .event2 {
    background-color: rgba(255, 141, 26, 1)
  }

  .event3 {
    //background-color: rgba(277, 5, 5, 1);
    //background-color: #f24139;
    background: linear-gradient(135deg, transparent 10px, #f24139 0);
  }

  .event4 {
    background-color: rgba(24, 144, 255, 1)
  }

  .event1-t {
    background-color: #78712c;
  }

  .event2-t {
    background-color: #784b1e
  }

  .event3-t {
    //background-color: #781516;
    background-color: #3e0b08;
  }

  .event4-t {
    background-color: #1c4d7a
  }

  .back1-t {
    color: #78712c;
  }

  .back2-t {
    color: #784b1e
  }

  .back3-t {
    color: #781516
  }

  .back4-t {
    color: #1c4d7a
  }
}
</style>
