<!-- 相位配时 -->
<template lang="html">
  <div class="crossCont_item_warp">
    <div class="cross_sketch">
      <crossContent
        ref="baseMapRef"
        :crossData="crossData"
        :websocketData="websocketData"
      ></crossContent>
    </div>
    <div class="cross_phase">
      <div
        class="phase_item"
        v-for="(item, index) in phaseList"
        :key="index"
        :style="'flex:' + parseInt((item.stepcount / phaseCount) * 100) + ';'"
      >
        <div
          class="phase_car_box"
          :style="{
            'flex-direction':
              item.dir == '3' ||
              item.dir == '7' ||
              item.dir == '2' ||
              item.dir == '6'
                ? 'column'
                : 'row',
          }"
        >
          <img
            :style="setDirPhase(im.dir)"
            v-for="(im, ii) in item.list"
            :src="im.imgSrc"
            :key="ii"
          />
        </div>
      </div>
    </div>
    <div class="cross_lamp">
      <!-- <div
        class="lamp_item"
        v-for="(item, index) in phaseList"
        :key="index"
        :style="'flex:' + parseInt((item.stepcount / phaseCount) * 100) + ';'"
        @click="setCrossPhaseLook(item)"
        @click.stop
      > -->
      <div
        class="lamp_item"
        v-for="(item, index) in phaseList"
        :key="index"
        :style="'flex:' + parseInt((item.stepcount / phaseCount) * 100) + ';'"
        @click.stop
      >
        <div class="activeLamp" v-if="item.phaseNo == activePhaseId"></div>

        <div
          class="lamp_step"
          v-for="(st, si) in item.steps"
          :key="si"
          :style="
            'flex:' + parseInt((st.duration / item.stepcount) * 100) + ';'
          "
          :class="'lamp_step_' + st.color"
        ></div>

        <p>{{ item.stepcount }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import crossContent from "./crossContent.vue";
import { api_phaseByTimeList } from "../../dao/situation";
import wsMixins from "@/common/mixin/wsMixins.js";

export default {
  mixins: [wsMixins],
  components: {
    crossContent,
  },
  props: {
    crossData: {
      type: Object,
      default() {
        return {
          // crossName: "相城大道与青龙港路交叉口",
          // // crossId: "14Q1409IRF0",
          // crossId: "14Q0P09IP90",
        };
      },
    },
  },
  data() {
    return {
      // crossData: {
      //   crossId: "12I8O06UDU0",
      //   crossName: "容奇大道中与乐安南路路口",
      // },
      loadingArr: [],
      phaseCount: 0,
      phaseList: [],
      carDirList: [],
      crossId: "",
      //以下变量在ws中
      websocketUrl: "",
      activePhaseId: "",
      websocketData: {},
      runMode: "", //当前路口的手控状态
      wsType: "stateMonitor",
      phaseDirMap: {
        1: "12",
        2: "12",
        3: "34",
        4: "34",
        5: "56",
        6: "56",
        7: "78",
        8: "78",
      },
    };
  },
  created() {},
  mounted() {
    this.initPop();
  },
  beforeDestroy() {
    this.websocket.close();
  },
  watch: {
    runMode() {
      this.setCrossrunMode();
    },
  },
  methods: {
    initPop() {
      this.crossId = this.crossData.nodeId || this.crossData.crossId;
      // console.log("this.crossId", this.crossData);
      this.getCrossPhase();
      this.getCrossWs();
    },
    getCrossPhase() {
      var params = {
        crossId: this.crossId,
        datetime: this.getCurDataTime(new Date()),
      };
      api_phaseByTimeList(params).then((res) => {
        // console.log("res", res);
        if (res && res.content) {
          const data = res.content;
          this.phaseCount = 0;
          this.phaseList = data.map((item) => {
            item.list = item.dirList.flatMap((dirList) => {
              item.dir = item.dirList[0].laneList.length
                ? item.dirList[0].dir
                : item.dirList[1].dir;
              if (dirList.dir == 1 || dirList.dir == 3) {
                dirList.laneList = dirList.laneList.reverse();
                dirList.laneList = dirList.laneList.sort(
                  (obj1, obj2) => obj2.direction - obj1.direction
                );
              }
              return dirList.laneList.map((list) => {
                list.dir = dirList.dir;
                var imgSrc = require("../../assets/images/planMange/arrow/black-" +
                  list.direction +
                  ".svg");
                list.imgSrc = imgSrc;
                return list;
              });
            });
            item.steps = [
              {
                color: "green",
                duration: item.greenTime + item.greenFlashTime,
              },
              {
                color: "yellow",
                duration: item.yellowTime + item.yellowFlash,
              },
              { color: "red", duration: item.redTime + item.redFlashTime },
            ];
            item.stepcount =
              item.greenTime +
              item.greenFlashTime +
              item.redTime +
              item.redFlashTime +
              item.yellowTime +
              item.yellowFlash;
            this.phaseCount += item.stepcount;
            return item;
          });
          console.log("cross_phase", this.phaseList);
        }
      });
    },
    getCrossCarDirList(list) {
      var newList = [];
      list.forEach((carList) => {
        carList.sort(function (a, b) {
          var a1 = parseInt(a.sortValue);
          var b1 = parseInt(b.sortValue);
          var status = a1 - b1;
          return !status;
        });
        var carMaps = {};
        carList.forEach((item) => {
          var angleDir = item.angleDir;
          var turnType = item.turnType;

          var dir = this.phaseDirMap[angleDir];
          item.dir = dir;
          var imgSrc = require("@/assets/images/phaseCarImg/phase-car-" +
            dir +
            "-" +
            turnType +
            ".png");
          item.imgSrc = imgSrc;

          if (!carMaps[dir]) {
            carMaps[dir] = [];
          }
          carMaps[dir].push(item);
        });
        newList.push(carMaps);
      });

      this.carDirList = newList;
    },
    setDirPhase(dir) {
      const degObj = {
        // "1": 180,
        // "3": 270,
        // "5": 0,
        // "7": 90,
        2: 270,
        1: 180,
        8: 180,
        3: 270,
        4: 0,
        5: 0,
        6: 90,
        7: 90,
      };
      return `transform: rotate(${degObj[dir]}deg);`;
    },
    setCrossrunMode() {
      this.$emit("setCrossrunMode", this.runMode, this.crossData);
    },
    getCurDataTime() {
      let time = new Date();
      let year, month, day, hour, min, sec;
      year = time.getFullYear();
      month =
        time.getMonth() + 1 < 10
          ? "0" + (time.getMonth() + 1)
          : time.getMonth() + 1;
      day = time.getDate() < 10 ? "0" + time.getDate() : time.getDate();
      hour = time.getHours() < 10 ? "0" + time.getHours() : time.getHours();
      min =
        time.getMinutes() < 10 ? "0" + time.getMinutes() : time.getMinutes();
      sec =
        time.getSeconds() < 10 ? "0" + time.getSeconds() : time.getSeconds();
      let dateTime = `${year}-${month}-${day} ${hour}:${min}:${sec}`; //+year + month + day + hour + min + sec;
      return dateTime;
    },
  },
};
</script>

<style lang="less">
.crossCont_item_warp .closeCross {
  position: absolute;
  right: -0.1153rem;
  top: 0.1153rem;
  font-size: 0.1268rem;
  color: white;
  cursor: pointer;
}

.crossCont_item_warp .cross_title {
  color: #000;
  font-size: 0.1844rem;
  text-align: center;
  line-height: 0.4034rem;
  height: 0.4034rem;
}

.crossCont_item_warp .cross_sketch {
  background: #fff;
  height: 3rem;
  width: 100%;
}

.crossCont_item_warp .cross_phase {
  height: 60px;
  margin: 5px 0;
  display: flex;
}
.crossCont_item_warp .cross_phase .phase_item {
  display: flex;

  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.crossCont_item_warp .cross_phase .phase_item .phase_car_box {
  margin-bottom: -10px;
  padding: 15px 0 0 18px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.crossCont_item_warp .cross_phase .phase_item .phase_car_box img {
  max-height: 40px;
  margin-top: -24px;
  margin-left: -24px;
}

.crossCont_item_warp .cross_phase .phase_item .phase_car_box.phase_case_34,
.crossCont_item_warp .cross_phase .phase_item .phase_car_box.phase_case_78 {
  display: block;
}

.crossCont_item_warp .cross_phase .phase_item .phase_car_box.phase_case_34 img,
.crossCont_item_warp .cross_phase .phase_item .phase_car_box.phase_case_78 img {
  display: block;
  height: 0.2rem;
  width: auto;
  margin-top: 0.033rem;
  flex: inherit;
  margin: 0 auto;
}
.crossCont_item_warp .cross_phase .phase_item .phase_car_box.phase_case_12 img,
.crossCont_item_warp .cross_phase .phase_item .phase_car_box.phase_case_56 img {
  max-width: 0.2rem;
}

.crossCont_item_warp .cross_lamp {
  height: 0.3458rem;
  display: flex;
  margin-top: 0.0576rem;
}

.crossCont_item_warp .cross_lamp .lamp_item {
  display: flex;
  color: #000000;
  font-size: 0.1844rem;
  height: 0.2536rem;
  position: relative;
  display: flex;
  cursor: pointer;
}

.crossCont_item_warp .cross_lamp .lamp_item .lamp_step {
  font-size: 0.1844rem;
  height: 0.2536rem;
  position: relative;
  display: flex;
}
.crossCont_item_warp .cross_lamp .lamp_step.lamp_step_green {
  background: #1dce92;
}

.crossCont_item_warp .cross_lamp .lamp_step.lamp_step_yellow {
  background: #fff636;
}

.crossCont_item_warp .cross_lamp .lamp_step.lamp_step_red {
  background: #c66d67;
}

.crossCont_item_warp .cross_lamp .lamp_item p {
  text-align: center;
  line-height: 6px;
  width: 100%;
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 101;
}

.crossCont_item_warp .cross_lamp .lamp_item .activeLamp {
  width: calc(100% + 0.05rem);
  height: calc(100% + 0.05rem);
  position: absolute;
  left: -0.05rem;
  top: -0.05rem;
  background: transparent;
  z-index: 999;
  border: 0.052rem solid #1ef4ab;
}

.crossCont_item_warp .cross_lamp .lamp_item.lamp_on_green .activeLamp {
  border: 0.052rem solid #1ef4ab;
}

.crossCont_item_warp .cross_lamp .lamp_item.lamp_on_yellow .activeLamp {
  border: 0.052rem solid #fff636;
}

.crossCont_item_warp .cross_lamp .lamp_item.lamp_on_red .activeLamp {
  border: 0.052rem solid #c66d67;
}
</style>
