<template>
  <div class="vehicleDetail">
    <!-- <div class="closeButton" @click="closeVehicleDetail">x</div> -->
    <div class="vehicleDetailInner">
      <div class="head">
        <span class="titleBefore"></span
        ><span>{{ model.picLicense || "暂无车牌号信息" }}</span>
      </div>
      <div class="content">
        <div class="detailItem">
          <span class="left">车辆号牌：</span>{{ model.picLicense || "无数据" }}
        </div>
        <div class="detailItem">
          <span class="left">号牌颜色：</span
          >{{ convertDict("PlateColor", model.licenseColor) }}
        </div>
        <div class="detailItem">
          <span class="left">行驶速度：</span>{{ model.speed || 0 }} km/h
        </div>
        <div class="detailItem">
          <span class="left">车身颜色：</span
          >{{ convertDict("CarColor", model.originalColor) }}
        </div>
        <div class="detailItem">
          <span class="left">航向角：</span>{{ model.courseAngle || 0 }}
        </div>
        <div class="detailItem">
          <span class="left">车辆类型：</span
          >{{ convertDict("CarType", model.originalType) }}
        </div>
        <div class="detailItem">
          <span class="left">ID ：</span>{{ model.id }}
        </div>
        <div
          class="detailItem"
          :title="`经度：${Number(model.longitude).toFixed(6)}`"
        >
          <span class="left">经度：</span
          >{{ Number(model.longitude).toFixed(6) }}
        </div>
        <div
          class="detailItem"
          :title="`纬度：${Number(
            model.latitude
          ).toFixed(6)}`"
        >
          <span class="left">纬度：</span
          >{{
            Number(model.latitude).toFixed(6)
          }}
        </div>
      </div>
    </div>

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

<script>
import store from "../../../store";
export default {
  name: "vehicleDetail",
  data() {
    return {};
  },
  props: ["model"],
  watch: {
  },
  mounted() {
    console.log("model", this.model);
  },
  methods: {
    convertDict(type, value) {
      for (let item of store.state.dicts[type]) {
        if (item.code == value) {
          return item.name;
        }
      }
      return "未定义";
    },
    closeDetail() {
      this.$emit("actionFinished", this.dialogId, false);
    },
  },
  computed: {},
  beforeDestroy() {},
};
</script>

<style lang="less" scoped>
.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>
