<template>
  <div class="container">
    <div class="headnav">
      <span class="version">ver 2.0.1</span>
      <div class="xinhao" :style="{ backgroundImage: `url(${imgURL})` }"></div>
      <div class="angle"></div>
      <span style="color: #7f8591" class="angledata">{{ heading }}</span>
      <div class="vehicleStatus" v-show="avpStatus1 != '—— ——'"></div>
      <span style="color: #637abe" class="vehicleStatusdata">{{
        avpStatus1
      }}</span>
      <div class="yuan">
        <div class="ttime">{{ twentyTime }}</div>
        <div class="speed">
          <div class="sd">{{ Math.floor(speed) }}</div>
        </div>
        <div class="km">km/h</div>
      </div>
      <div class="driveMode"></div>
      <span style="color: #606873" class="driveModedata">{{ driveMode }}</span>
    </div>
    <div class="orderlist" v-show="(avpStatus1 == '场内行驶' ||
      avpStatus1 == '自动泊车中' ||
      avpStatus1 == '自动召车中' ||
      avpStatus1 == '车辆停靠') &&
      No != null &&
      orderStatus != 25
      ">
      <div class="order">{{ No }}</div>
      <div class="durationtime">
        {{ durationString }}
      </div>
      <div class="entertime">
        {{ enterTime }}
      </div>
      <div class="price">
        <span>{{ actualCost }}</span>
        元
      </div>
    </div>
    <div class="eventBox">
      <!-- <div class="v2x" v-if="endTime == true" :style="{ backgroundImage: `url(${v2xImg})` }"></div>
      <div class="v2x" v-if="rsiEndTime == true" :style="{ backgroundImage: `url(${rsiImg})` }"></div> -->
      <!-- <div v-for="(item, index) in showEvent" v-if="!item.hide" :key="index" class="v2x"
        :style="{ backgroundImage: `url(${item.backgroundImage})` }"></div> -->
      <!-- </div> -->
      <div v-for="(item, index) in showEvent" v-if="!item.hide" :key="index" class="v2x">
        <img class="v2x-img" :src="item.backgroundImage">
        <span class="v2x-span">{{ item.text }}</span>
      </div>
    </div>
    <div class="showStatus" v-show="showStatus">
      <span>已经转为{{ avpStatus1 }}状态</span>
    </div>
  </div>
</template>
<script>
import request from "@/utils/http/request";
let imgurl = {
  imgArr: [
    "xinhao1.png",
    "xinhao2.png",
    "xinhao3.png",
    "xinhao4.png",
    "xinhao5.png",
    "xinhao6.png",
  ],
  v2xImg: [
    "abnormal.png",
    "admission.png",
    "advance.png",
    "ChangeLanes.png",
    "intersection.png",
    "weak.png",
  ]
};

// rsi事件类型和显示名称映射表
let rsiTextMap = {
  "38": "注意道路施工",
  "100": "注意多车驶停",
  "707": "注意前方路段拥堵",
  "901": "注意车辆超速",
  "902": "注意车辆慢速",
  "903": "注意异常停车",
  "904": "注意逆行"
}
// v2x预警和显示名称映射表
let v2xUIType = '';
let v2xTextMap = {
  "abnormal": "异常车辆预警",
  "admission": "车辆入场预警",
  "advance": "前向碰撞预警",
  "ChangeLanes": "盲区/变道预警",
  "intersection": "交叉口碰撞预警",
  "weak": "弱势交通预警",
}

export default {
  props: {
    speed: Number,
    heading: String,
    v2xname: String,
    driveMode: String,
    endTime: Boolean,
    rsiChange: Object,
    infowindowChange: Object
  },
  data() {
    return {
      avpStatus1: "—— ——", //用于二维界面的显示
      avpStatus2: 0, //用于来判断是否出现了场景切换
      showStatus: false, //用于avpStatus转场动画的显示隐藏，false为隐藏
      twentyTime: 0, //12小时制时间
      No: 0, //订单编号
      durationString: "", //订单总时长
      enterTime: "", //入场时间
      actualCost: 0, //订单金额
      orderStatus: 0, //订单状态
      imgURL: require("@/assets/img/other/xinhao5.png"), //信号质量默认
      v2xImg: require("@/assets/img/other/v2xicon/billbord/abnormal.png"), //v2x预警事件默认展示
      rsiImg: require("@/assets/img/other/v2xicon/billbord/abnormal.png"), //v2x预警事件默认展示

      showEvent: [],
    };
  },

  mounted() {
    this.isShowInfowindow = false;  // 是否可以弹提示窗

    this.allmethods();
  },
  beforeUnmounted() {
    if (this.getCurrentTime) {
      clearInterval(this.getCurrentTime);
    }
    if (this.getTimeOut) {
      clearInterval(this.getTimeOut);
    }
    if (this.getOrderData) {
      clearInterval(this.getOrderData);
    }
  },
  watch: {
    endTime(value) {
      this.$nextTick(() => {
        this.eventFunc('endTime', value)
      })
    },
    rsiChange(value) {
      // rsi事件改变，包括新增和删除
      this.$nextTick(() => {
        this.eventFunc('rsi', value)
      })
    },

    infowindowChange(value) {
      // 显示弹窗提醒
      this.$nextTick(() => {
        this.eventFunc('infowindow', value)
      })
    },

    //监听v2x事件的改变，并根据事件的名称渲染对应的图片
    v2xname(v2xname) {
      switch (v2xname) {
        case "异常车辆预警":
          this.v2xImg = require("@/assets/img/other/v2xicon/billbord/" +
            imgurl.v2xImg[0]);
          v2xUIType = 'abnormal';
          break;
        case "车辆入场预警":
          this.v2xImg = require("@/assets/img/other/v2xicon/billbord/" +
            imgurl.v2xImg[1]);
          v2xUIType = 'admission';
          break;
        case "前向碰撞预警":
          this.v2xImg = require("@/assets/img/other/v2xicon/billbord/" +
            imgurl.v2xImg[2]);
          v2xUIType = 'advance';
          break;
        case "盲区/变道预警":
          this.v2xImg = require("@/assets/img/other/v2xicon/billbord/" +
            imgurl.v2xImg[3]);
          v2xUIType = 'ChangeLanes';
          break;
        case "交叉路口碰撞预警":
          this.v2xImg = require("@/assets/img/other/v2xicon/billbord/" +
            imgurl.v2xImg[4]);
          v2xUIType = 'intersection';
          break;
        case "弱势交通参与者碰撞预警":
          this.v2xImg = require("@/assets/img/other/v2xicon/billbord/" +
            imgurl.v2xImg[5]);
          v2xUIType = 'weak';
          break;
        default:
          break;
      }

      // 触发ui
      this.eventFunc('endTime', this.endTime)
    },


  },
  methods: {
    eventFunc(name, value) {
      if (name === 'endTime') {
        let index = this.showEvent.findIndex(e => { return e.type == 'v2x' })

        if (value) {
          if (index > -1) {
            // 如果原本存在v2x，则需要更新图片
            this.showEvent[index].backgroundImage = this.v2xImg
            this.showEvent[index].text = v2xTextMap[v2xUIType]
          } else {
            // 如果原本没有v2x，则新展示v2x
            this.showEvent.push({
              backgroundImage: this.v2xImg,
              text: v2xTextMap[v2xUIType],
              type: 'v2x'
            })
          }
        } else {
          if (index > -1) {
            // 删除原有的v2x
            this.showEvent.splice(index, 1)
          }
        }
        this.showEvent = [...this.showEvent]
      } else if (name === 'rsi') {
        // rsi事件，可以显示多个弹窗
        let { type, eventId, eventType } = value;
        // 新增
        if (type == 'add') {
          let img = this.getImgByPathAndType({
            path: 'rsiicon',
            type: eventType
          })
          if (!img) {
            return
          }

          // 判断如果当前存在这种类型的提示，则不重复弹窗
          let hasLabel = this.showEvent.find(e => {
            return e.eventType == eventType
          })

          this.showEvent.push({
            type: 'rsi',
            eventId,
            eventType,
            text: rsiTextMap[eventType],
            backgroundImage: img,
            hide: !!hasLabel
          })
        } else {
          // 删除
          for (let i = this.showEvent.length - 1; i >= 0; i--) {
            let event = this.showEvent[i]
            if (event.type == 'rsi' && event.eventId == eventId) {
              this.showEvent.splice(i, 1);
              break;
            }
          }


          for (let i = this.showEvent.length - 1; i >= 0; i--) {
            // 如果存在相同eventType的事件，那么需要显示这个事件
            let hasLabelIndex = this.showEvent.findIndex(e => {
              return e.eventType == eventType
            })
            if (hasLabelIndex > -1) {
              this.showEvent[hasLabelIndex].hide = false;
              break;
            }
          }
        }

        this.showEvent = [...this.showEvent]
      } else if (name === 'infowindow') {
        // 已经有提示窗，不重复弹窗
        if (this.isShowInfowindow) {
          return;
        }

        this.isShowInfowindow = true;
        let { type, text } = value;
        let img = this.getImgByPathAndType({
          path: 'infowindow',
          type: type
        });

        this.showEvent.push({
          type: 'infowindow',
          backgroundImage: img,
          text
        })

        // 3秒之后清除这个弹窗
        setTimeout(() => {
          // 3秒之内不重复弹窗
          this.isShowInfowindow = false;
          let index = this.showEvent.findIndex(e => { return e.type == 'infowindow' })
          if (index > -1) {
            this.showEvent.splice(index, 1)
          }
        }, 3000)
      }
    },

    // 根据rsi的类型，渲染对应的图片
    getImgByPathAndType(options) {
      let { path, type } = options;
      return require("@/assets/img/other/" + path + "/billbord/" + type + '.png');

      switch (type) {
        case "38":
        case "100":
        case "707":
        case "901":
        case "902":
        case "903":
        case "904":
        case "914":
          return require("@/assets/img/other/" + path + "/" + type + '.png');
        default:
          return ''
      }
    },

    allmethods() {
      this.getOrderData();
      this.getTimeOut();
      this.getCurrentTime();
      setInterval(() => {
        this.getTimeOut();
      }, 5000);
      setInterval(() => {
        this.getOrderData();
      }, 1000);
      setInterval(() => {
        this.getCurrentTime();
      }, 1000);
    },
    //获取12小时制时间
    getCurrentTime() {
      const date = new Date();
      const hours = date.getHours();
      const minutes = date.getMinutes();
      const period = hours >= 12 ? "PM" : "AM";
      const hours12 = hours % 12 || 12;
      this.twentyTime = `${hours12}:${this.addZero(minutes)} ${period}`;
    },
    addZero(value) {
      return value < 10 ? `0${value}` : value;
    },
    //获取订单信息
    async getOrderData() {
      let data = JSON.stringify({
        vehiclePlate: "吉AC242",
      });
      await request
        .post(
          "/avp/avpMonitor/getOrderParkingInfoForPlate",
          data /* , {
          headers: {
            "Content-Type": "application/json",
            "Tenant-Id": "1484465260508323841",
          },
        } */
        )
        .then((response) => {
          const OrderData = response;
          this.No = OrderData.orderNo;
          this.durationString = OrderData.durationString;
          this.enterTime = OrderData.enterTime;
          this.actualCost = OrderData.actualCost;
          this.orderStatus = OrderData.orderStatus;
          const avpStatus = OrderData.avpStatus;

          if (this.avpStatus2 != avpStatus) {
            if (avpStatus != 3 && this.avpStatus2 == 3) {
              this.$parent.endParkingVehicle(); // 结束泊车
            } else if (avpStatus == 3) {
              this.$parent.startParkingVehicle(); // 开始泊车
            }

            if (avpStatus != 5 && this.avpStatus2 == 5) {
              // 由招车转为其他状态
              this.$parent.endRecruitmentVehicle();
            } else if (avpStatus == 5) {
              // 招车需要显示路径
              this.$parent.startRecruitmentVehicle();
            }

            if (avpStatus == 1) {
              this.avpStatus1 = "场外行驶";
              this.avpStatus2 = avpStatus;
              this.showStatus = true;
              setTimeout(() => {
                this.showStatus = false;
              }, 3000);
            } else if (avpStatus == 2 || avpStatus == 6) {
              this.avpStatus1 = "场内行驶";
              this.avpStatus2 = avpStatus;
              this.showStatus = true;
              setTimeout(() => {
                this.showStatus = false;
              }, 3000);
            } else if (avpStatus == 3) {
              this.avpStatus1 = "自动泊车中";
              this.avpStatus2 = avpStatus;
              this.showStatus = true;
              setTimeout(() => {
                this.showStatus = false;
              }, 3000);
            } else if (avpStatus == 4) {
              this.avpStatus1 = "车辆停靠";
              this.avpStatus2 = avpStatus;
              this.showStatus = true;
              setTimeout(() => {
                this.showStatus = false;
              }, 3000);
            } else if (avpStatus == 5) {
              this.avpStatus1 = "自动召车中";
              this.avpStatus2 = avpStatus;
              this.showStatus = true;
              setTimeout(() => {
                this.showStatus = false;
              }, 3000);
            }
          }

          if (needRecord) {
            window.recordData.getOrderParkingInfoForPlate.push(response)
          }

        });
    },
    //获取网络质量
    async getTimeOut() {
      const startTime = new Date().getTime();
      await request.post("/avp/siteLine/getNetworkQuality", null).then(() => {
        const endTime = new Date().getTime();
        const duration = endTime - startTime;
        if (duration >= 0 && duration <= 100) {
          this.imgURL = require("@/assets/img/other/" + imgurl.imgArr[4]);
        } else if (duration >= 101 && duration <= 200) {
          this.imgURL = require("@/assets/img/other/" + imgurl.imgArr[3]);
        } else if (duration >= 201 && duration <= 300) {
          this.imgURL = require("@/assets/img/other/" + imgurl.imgArr[2]);
        } else if (duration >= 301 && duration <= 400) {
          this.imgURL = require("@/assets/img/other/" + imgurl.imgArr[1]);
        } else {
          this.imgURL = require("@/assets/img/other/" + imgurl.imgArr[0]);
        }
      });
    },
  },
};
</script>


<style scoped>
.container {
  font-size: 1.4vw;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
}

.headnav {
  position: relative;
  display: flex;
  justify-content: center;
  background-color: rgba(197, 203, 215, 0.8);
  margin-top: 0;
  height: 10.56vh;
  width: 100vw;
  backdrop-filter: blur(10px);
}

.headnav div {
  display: inline-block;
}

.version {
  position: absolute;
  top: 46%;
  left: 1%;
  font-size: 0.5rem;
  color: gray;
}

.xinhao {
  position: absolute;
  left: 96%;
  top: 55%;
  width: 2.3%;
  height: 31%;
  background-size: 100% 100%;
  /* z-index: 999; */
}

.angle {
  position: absolute;
  left: 12.414%;
  top: 46%;
  width: 2.5%;
  height: 42%;
  background-image: url("@/assets/img/other/angle.png");
  background-size: 100% 100%;
}

.angledata {
  position: absolute;
  margin-top: 3%;
  margin-right: 62%;
}

.vehicleStatus {
  position: absolute;
  background-image: url("@/assets/img/other/stop.png");
  background-size: 100% 100%;
  left: 23.477%;
  top: 46%;
  width: 2.45%;
  height: 42%;
}

.vehicleStatusdata {
  position: absolute;
  margin-top: 3%;
  margin-right: 39.2%;
  width: 8%;
}

.yuan {
  position: absolute;
  background-image: url("@/assets/img/other/speed.png");
  background-size: 100% 100%;
  text-align: center;
  /* left: 28%; */
  height: 320%;
  width: 50%;
  margin-top: -4.17%;
}

.ttime {
  position: absolute;
  left: 44%;
  margin-top: 8%;
}

/* .speed {
  position: absolute;
  left: 40.8%;
  top: 38%;
} */
.sd {
  font-size: 4vw;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 38%;
  right: 51%;
}

.km {
  position: absolute;
  top: 53%;
  left: 50%;
}

.driveMode {
  position: absolute;
  left: 72.46875%;
  top: 46%;
  width: 2.5%;
  height: 42%;
  background-image: url("@/assets/img/other/driveMode.png");
  background-size: 100% 100%;
}

.driveModedata {
  position: absolute;
  margin-top: 3%;
  margin-left: 58%;
}

.orderlist {
  position: absolute;
  left: 1.71875%;
  background-image: url("@/assets/img/other/list.png");
  background-size: 100% 100%;
  height: 29%;
  width: 24.5%;
  top: 13.194%;
  opacity: 0.8;
  backdrop-filter: blur(10px) saturate(200%);
}

.orderlist div {
  position: relative;
  height: 10%;
  width: 20vw;
  padding-left: 18%;
  padding-top: 7.8%;
}

.eventBox {
  position: absolute;
  top: 21.236%;
  width: 14%;
}

.v2x {
  /* position: absolute; */
  /* top: 21.236%; */
  display: flex;
  align-items: center;
  background-size: cover;
  height: 4.5vh;
  width: 100%;
  display: flex;
  margin-bottom: 0.8vh;
  background: rgba(124, 50, 50, 0.6);
  /* border-radius: 10px 10px 10px 10px; */
  border-radius: 0.4vw;
  border: 2px solid #FA5151;
  /* padding-left: 20px; */
  padding-left: 0.5vw;
}

.v2x .v2x-img {
  height: 3.5vh;
  width: auto;
  pointer-events: none;
  /* margin-right: 16px; */
  margin-right: 0.8vw;
  vertical-align: middle;
}

.v2x .v2x-span {
  display: inline-flex;
  align-items: center;
  font-weight: 400;
  /* font-size: 24px; */
  font-size: 2vh;
  color: #fff;
}

.orderlist .price {
  padding-top: 5.5%;
}

.price span {
  font-size: 2vw;
  color: #3662ec;
  font-weight: bold;
}

.showStatus {
  position: absolute;
  top: 40%;
  justify-content: center;
  width: 25vw;
  height: 10vh;
  background-color: rgba(197, 203, 215, 0.8);
  backdrop-filter: blur(10px) saturate(200%);
  border-radius: 25px;
  border: #fff 5px solid;
}

.showStatus span {
  position: absolute;
  justify-content: center;
  line-height: 10vh;
  width: 25vw;
  text-align: center;
  color: blueviolet;
  font-size: 1.8vw;
}

@media (min-width: 2560px) and (min-height: 1550px) {
  .container {
    font-size: 1.4vw;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
  }

  .headnav {
    position: relative;
    display: flex;
    justify-content: center;
    background-color: rgba(197, 203, 215, 0.8);
    margin-top: 0;
    height: 10.56vh;
    width: 100vw;
    backdrop-filter: blur(10px);
  }

  .headnav div {
    display: inline-block;
  }

  .xinhao {
    position: absolute;
    left: 96%;
    top: 56%;
    width: 2.8%;
    height: 31%;
    background-size: 100% 100%;
    /* z-index: 999; */
  }

  .angle {
    position: absolute;
    left: 12.414%;
    top: 46%;
    width: 2.8%;
    height: 42%;
    background-image: url("@/assets/img/other/angle.png");
    background-size: 100% 100%;
  }

  .angledata {
    position: absolute;
    margin-top: 3.5%;
    margin-right: 62%;
  }

  .vehicleStatus {
    position: absolute;
    background-image: url("@/assets/img/other/stop.png");
    background-size: 100% 100%;
    left: 23.477%;
    top: 46%;
    width: 2.8%;
    height: 42%;
  }

  .vehicleStatusdata {
    position: absolute;
    margin-top: 3.5%;
    margin-right: 39.2%;
    width: 8%;
  }

  .yuan {
    position: absolute;
    background-image: url("@/assets/img/other/speed.png");
    background-size: 100% 100%;
    text-align: center;
    height: 320%;
    width: 50%;
    margin-top: -5.3%;
  }

  .ttime {
    position: absolute;
    left: 44%;
    margin-top: 11%;
  }

  .sd {
    font-size: 4vw;
    font-weight: bold;
    text-align: center;
    position: absolute;
    top: 41%;
    right: 51%;
  }

  .km {
    position: absolute;
    top: 54%;
    left: 50%;
  }

  .driveMode {
    position: absolute;
    left: 72.46875%;
    top: 46%;
    width: 2.8%;
    height: 42%;
    background-image: url("@/assets/img/other/driveMode.png");
    background-size: 100% 100%;
  }

  .driveModedata {
    position: absolute;
    margin-top: 3.5%;
    margin-left: 58%;
  }

  .orderlist {
    position: absolute;
    left: 1.71875%;
    background-image: url("@/assets/img/other/list.png");
    background-size: 100% 100%;
    height: 29%;
    width: 27%;
    top: 13.194%;
    opacity: 0.8;
    backdrop-filter: blur(10px) saturate(200%);
  }

  .orderlist .order {
    position: absolute;
    top: 1.2%;
    height: 25%;
    width: 20vw;
  }

  .orderlist .durationtime {
    position: absolute;
    top: 23.5%;
    height: 25%;
    width: 20vw;
  }

  .orderlist .entertime {
    position: absolute;
    top: 43.5%;
    height: 25%;
    width: 20vw;
  }

  .orderlist .price {
    top: 66%;
  }

  .price span {
    font-size: 2vw;
    color: blue;
  }

  /* .v2x {
    position: absolute;
    top: 21.236%;
    display: inline-block;
    background-size: cover;
    height: 5.54%;
    width: 17%;
    display: flex;
    justify-content: center;
  } */
}

@media (min-width: 2560px) and (min-height: 1600px) {
  .container {
    font-size: 1.4vw;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
  }

  .headnav {
    position: relative;
    display: flex;
    justify-content: center;
    background-color: rgba(197, 203, 215, 0.8);
    margin-top: 0;
    height: 10.56vh;
    width: 100vw;
    backdrop-filter: blur(10px);
  }

  .headnav div {
    display: inline-block;
  }

  .xinhao {
    position: absolute;
    left: 96%;
    top: 55%;
    width: 2.8%;
    height: 31%;
    background-size: 100% 100%;
    /* z-index: 999; */
  }

  .angle {
    position: absolute;
    left: 12.414%;
    top: 46%;
    width: 2.8%;
    height: 42%;
    background-image: url("@/assets/img/other/angle.png");
    background-size: 100% 100%;
  }

  .angledata {
    position: absolute;
    margin-top: 3.8%;
    margin-right: 62%;
  }

  .vehicleStatus {
    position: absolute;
    background-image: url("@/assets/img/other/stop.png");
    background-size: 100% 100%;
    left: 23.477%;
    top: 46%;
    width: 2.8%;
    height: 42%;
  }

  .vehicleStatusdata {
    position: absolute;
    margin-top: 3.8%;
    margin-right: 39.2%;
    width: 8%;
  }

  .yuan {
    position: absolute;
    background-image: url("@/assets/img/other/speed.png");
    background-size: 100% 100%;
    text-align: center;
    height: 320%;
    width: 50%;
    margin-top: -4.9%;
  }

  .ttime {
    position: absolute;
    left: 44%;
    margin-top: 10.8%;
  }

  .sd {
    font-size: 4vw;
    font-weight: bold;
    text-align: center;
    position: absolute;
    top: 40.8%;
    right: 51%;
  }

  .km {
    position: absolute;
    top: 53%;
    left: 50%;
  }

  .driveMode {
    position: absolute;
    left: 72.46875%;
    top: 46%;
    width: 2.8%;
    height: 42%;
    background-image: url("@/assets/img/other/driveMode.png");
    background-size: 100% 100%;
  }

  .driveModedata {
    position: absolute;
    margin-top: 3.8%;
    margin-left: 58%;
  }

  .orderlist {
    position: absolute;
    left: 1.71875%;
    background-image: url("@/assets/img/other/list.png");
    background-size: 100% 100%;
    height: 29%;
    width: 27%;
    top: 13.194%;
    opacity: 0.8;
    backdrop-filter: blur(10px) saturate(200%);
  }

  .orderlist .order {
    position: absolute;
    top: 1%;
    height: 25%;
    width: 20vw;
  }

  .orderlist .durationtime {
    position: absolute;
    top: 23%;
    height: 25%;
    width: 20vw;
  }

  .orderlist .entertime {
    position: absolute;
    top: 44%;
    height: 25%;
    width: 20vw;
  }

  .orderlist .price {
    top: 66%;
  }

  .price span {
    font-size: 2vw;
    color: blue;
  }

  /* .v2x {
    position: absolute;
    top: 21.236%;
    display: inline-block;
    background-size: cover;
    height: 5.54%;
    width: 17%;
    display: flex;
    justify-content: center;
  } */
}
</style>
