<template>
  <div class="vehicleDetail">
    <div class="vehicleDetailInner">
      <div class="head">
     <span class="titleBefore"></span><span>{{ model.picLicense||'无数据' }}</span>
      <!-- <span class="titleBefore"></span><span>北A64N95</span> -->
      <!-- <span @click="closeDetail()">关闭</span> -->
    </div>
    <div class="content">
      <!-- <div class="detailItem" v-for="item of model" :key="item">
        <span class="left">{{ item.label }}</span
        ><span class="right">{{ item.value }}</span>
      </div> -->

      <div class="detailItem">
       <span class="left">车辆号牌：</span>{{ model.picLicense||'无数据' }}
        <!-- <span class="left">车辆号牌：</span>{{ '北A64N95'||'无数据' }} -->
      </div>
      <div class="detailItem">
        <span class="left">ID ：</span
        >{{ model.id }}
      </div>
      <div class="detailItem">
        <span class="left">行驶速度：</span
        >{{ model.speed }}
      </div>
      <div  class="detailItem">
        <span class="left">车身颜色：</span
        >{{ color(model.originalColor) }}
      </div>
      <div class="detailItem">
        <span class="left">航向角：</span
        >{{ model.courseAngle }}
      </div>
      <div class="detailItem">
        <span class="left">车辆类型：</span
        >{{ type(model.originalType) }}
      </div>
      <div class="detailItem">
        <span class="left">停车次数：</span
        >{{ model.stopNum }}
      </div>
      <div class="detailItem" :title="`经纬度：${Number(model.longitude).toFixed(3) },${ Number(model.latitude).toFixed(3)}`">
        <span class="left">经纬度：</span
        >{{ Number(model.longitude).toFixed(3) }},{{ Number(model.latitude).toFixed(3) }}
      </div>
    </div>
    </div>
    <div class="vehicle_arrow"></div>
  </div>
</template>

<script>
import dict from "../../config/holo/dictionary";
export default {
  name: "vehicleDetail",
  data() {
    return {};
  },
  props: ["model"],
  watch:{
    model: {
      handler(val) {
      },
      deep: true, // 深度监听
      immediate: true, // 初次监听即执行
    }
  },
  mounted() {
  },
  methods: {
    color(num) {
      return dict.vehicleColors[num];
    },
    closeDetail() {
      this.$emit("actionFinished", this.dialogId, false);
    },
    type(num) {
      return dict.vehicleTypes[num];
    },
  },
  computed: {},
  beforeDestroy() {},
};
</script>

<style lang="less" scoped>
// .vehicleDetail {
//   font-size: 12PX;
//   position: absolute;
//   //bottom: 16PX;
//   //right: 16PX;
//   width: 216PX;
//   //height: 207PX;
//   padding: 2PX 16PX 6PX 16PX;
//   background: url("../../../assets/images/holo/vehicle_popup_back.png");
//   background-size: 100% 100%;
//   background-repeat: no-repeat;
//   .head {
//     height: 25PX;
//     color: white;
//     display: flex;
//     align-items: center;
//     span {
//       display: inline-block;
//     }
//     .titleBefore {
//       width: 18PX;
//       height: 18PX;
//       margin-right: 5PX;
//       line-height: 25PX;
//       background-image:url('../../../assets/images/holo/vehicle_popup_icon.png');
//       background-position: center;
//       background-repeat: no-repeat;
//     }
//   }
//   .content {
//     height: calc(100% - 25PX);
//     display: flex;
//     padding-top: 12PX;
//     //flex-flow: row wrap;
//     flex-direction: column;
//     .detailItem {
//       height: 30PX;
//       line-height: 30PX;
//       white-space: nowrap;
//       color: white;
//       //width: 50%;
//       max-width: 200PX;
//       overflow: hidden;
//       text-overflow: ellipsis;
//       span {
//         display: inline-block;
//       }
//       span.left {
//         text-align: left;
//         padding-left: 20PX;
//         //width: 50%;
//         background-image: url("../../../assets/images/holo/vehicle_popup_arrow.png");
//         background-size: auto;
//         background-repeat: no-repeat;
//         background-position: left;
//         color: rgba(207, 238, 255, 0.9);
//       }
//       span.right {

//         text-align: left;
//         color: white;

//       }
//     }
//   }
// }
.vehicleDetail {
  font-size: 12PX;
  position: relative;
  width: 216PX;
  .closeButton {
    position: absolute;
    right: 20PX;
    top: 17PX;
    color: white;
    font-size: 22PX;
    cursor: pointer;
  }
  .closeButton:hover {
    color: #019bf5;
  }

  .vehicleDetailInner {
    width: 100%;
    height: calc(100% - 25PX);
    padding: 2PX 16PX 6PX 16PX;
    background-image: url("../../assets/images/holo/vehicle_popup_back.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    .head {
      height: 30PX;
      color: white;
      display: flex;
      align-items: center;

      span {
        display: inline-block;
      }

      .titleBefore {
        width: 18PX;
        height: 22PX;
        margin-right: 5PX;
        line-height: 30PX;
        background-image: url("../../assets/images/holo/vehicle_popup_icon.png");
        background-position: center;
        background-repeat: no-repeat;
      }
    }

    .content {
      height: calc(100% - 25PX);
      display: flex;
      padding-top: 12PX;
      //flex-flow: row wrap;
      flex-direction: column;

      .detailItem {
        height: 30PX;
        line-height: 30PX;
        white-space: nowrap;
        color: white;
        //width: 50%;
        max-width: 200PX;
        overflow: hidden;
        text-overflow: ellipsis;

        span {
          display: inline-block;
        }

        span.left {
          text-align: left;
          padding-left: 20PX;
          //width: 50%;
          background-image: url("../../assets/images/holo/vehicle_popup_arrow.png");
          background-size: auto;
          background-repeat: no-repeat;
          background-position: left;
          color: rgba(207, 238, 255, 0.9);
        }

        span.right {
          text-align: left;
          color: white;
        }
      }
    }
  }

  .vehicle_arrow {
    height: 25PX;
    background-image: url("../../assets/images/holo/vehicelArrow.png");
    background-size: auto 100%;
    background-position-x: center;
    background-repeat: no-repeat;
  }
}
</style>
