<template lang="html">
  <div class="crossHintBox" :id="uuid" :ref="uuid" :class="isSmall">
    <div class="select-box type-box">
      <el-select
        value-key="value"
        style="width: 90px"
        v-model="typeModel"
        placeholder=""
        filterable
        @change="getHeat"
      >
        <el-option
          v-for="item in typeOptions"
          :key="item.value"
          :value="item.value"
          :label="item.label"
        >
        </el-option>
      </el-select>
    </div>
    <div
      ref="crossHintRef"
      style="width: 100%; height: 100%; position: absolute"
      :style="crossHintBoxStyle"
      @wheel="handleWheel"
      v-drag="type !== 'planSend'"
    >
      <!-- <canvas id="canvasRef"></canvas> -->
      <div class="cross_center" :style="centerStyle">
        <p
          class="center-txt"
          style="
            width: 60%;
            height: 60%;
            border: 2px solid #e5e5e5;
            border-radius: 50%;
          "
          v-if="congestionTimes && typeModel === 2"
        >
          <span>拥堵次数</span><span>{{ congestionTimes }}</span>
        </p>
        <p
          class="center-txt"
          style="
            width: 60%;
            height: 60%;
            border: 2px solid #e5e5e5;
            border-radius: 50%;
          "
          v-if="unbalanceTimes && typeModel === 1"
        >
          <span>失衡次数</span><span>{{ unbalanceTimes }}</span>
        </p>
        <p
          class="center-txt"
          style="
            width: 60%;
            height: 60%;
            border: 2px solid #e5e5e5;
            border-radius: 50%;
          "
          v-if="spilloverTimes && typeModel === 3"
        >
          <span>溢出次数</span><span>{{ spilloverTimes }}</span>
        </p>
        <p
          class="center-txt"
          v-if="
            type === 'planSend' &&
            (websocketData.cyclePhaseCountDown || websocketData.cycleLen)
          "
        >
          {{ websocketData.cyclePhaseCountDown }} / {{ websocketData.cycleLen }}
        </p>
        <div class="dirList" :key="refreshDirList">
          <div
            class="dirLane"
            v-for="(d, di) in dirList"
            :style="getLaneStyle(d)"
            :class="getDirClass(d)"
            @click="laneClk(d)"
          >
            <img
              style="position: absolute; width: 90%; left: 5%"
              v-if="d.isPersonCross"
              src="../../../../../assets/images/planMange/person-cross.svg"
              alt=""
            />
            <!--出口-->
            <div
              class="lane_in"
              :id="'laneIn' + d.dir"
              :class="{
                yichuBg: yichuObj[d.dir] && sceneType === 3,
              }"
            ></div>
            <!--进口-->
            <div
              class="lane_out"
              :class="{
                yichuBg: yichuObj[d.dir] && sceneType !== 3,
              }"
              style="width: 100%"
            >
              <div
                class="heat_container"
                :style="getCurrentDirLaneInHeat(d.dir)"
              ></div>
              <div
                v-if="unBalanceObj[d.dir]"
                class="lane_in_unBalance"
                :style="{
                  height:
                    (unBalanceObj[d.dir] / unBalanceMaxCounts) * 100 + '%',
                }"
              >
                <span :class="{ txt: d.dir == 1 }">
                  {{ unBalanceObj[d.dir] }}</span
                >
              </div>
              <div
                class="lane_img"
                v-for="(ld, li) in d.laneList"
                :key="li"
                :class="{ active: setActiveClass(ld.id) }"
              >
                <img
                  style="width: 100%"
                  v-if="ld.laneType === 2 || ld.laneType === 3"
                  :src="
                    require('../../../../../assets/images/planMange/laneType-' +
                      ld.laneType +
                      '.svg')
                  "
                  alt
                />

                <img
                  :src="getLaneActiveImg(ld)"
                  v-else-if="setActiveClass(ld.id)"
                />
                <img :src="getLaneImg(ld)" v-else-if="ld.direction" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { createGuid } from "@/common/js/utils.js";
import {
  api_getCrossData,
  api_getLightByLane,
  api_getLanesByLight,
} from "@/common/api/planManage.js";
import {
  heatMap,
  sceneEvaluateHeatMap,
} from "@/common/api/signalEvaluation.js";
import { px2vw } from "@/utils/tools";

export default {
  components: {},
  props: [
    "crossData",
    "type",
    "crossHintClickPhase",
    "isSmall",
    "websocketDataProp",
    "hasWs",
    "dateAll",
    "isScene",
    "sceneType",
    "timeModel",
    "dayModel",
    "spilloverTimes",
    "unbalanceTimes",
    "congestionTimes",
  ],
  data() {
    return {
      typeOptions: [
        {
          label: "拥堵",
          value: 2,
        },
        {
          label: "失衡",
          value: 1,
        },
        {
          label: "溢出",
          value: 3,
        },
      ],
      typeModel: 2,
      heatmapInstance: null,
      dirRefresh: false,
      customCross: "",
      atlaScaleNum: 1.1,
      refreshDirList: false,
      crossId: "",
      uuid: createGuid(),
      centerStyle: {},
      dirMaxWidth: 0,
      activeDir: [],
      dirList: [
        {
          dir: "1",
          laneList: [],
        },
        {
          dir: "2",
          laneList: [],
        },
        {
          dir: "3",
          laneList: [],
        },
        {
          dir: "4",
          laneList: [],
        },
        {
          dir: "5",
          laneList: [],
        },
        {
          dir: "6",
          laneList: [],
        },
        {
          dir: "7",
          laneList: [],
        },
        {
          dir: "8",
          laneList: [],
        },
      ],
      laneAcive: "",
      planConfigChooseList: [],
      ledChooseList: [],
      unBalanceAllCounts: 0,
      dirClass: {
        1: "north",
        2: "northeast",
        3: "east",
        4: "southeast",
        5: "south",
        6: "southwest",
        7: "west",
        8: "northwest",
      },
      dirLampGroupMap: {},
      unBalanceObj: {},
      yichuObj: {},
      unBalanceMaxCounts: 0,
    };
  },
  created() {},
  mounted() {
    this.initPop();
    // return;
    if (this.crossHintClickPhase) {
      this.ledChooseList = [];

      this.crossHintClickPhase.list.forEach((item) => {
        if (item.lightsId) {
          item.id = item.lightsId;
          this.ledChooseList.push({ ...item, id: item.lightsId });
        }
      });
      this.planConfigChooseList = [];
      this.crossHintClickPhase.list.forEach((item) => {
        if (item.laneId) {
          this.planConfigChooseList.push({ ...item, id: item.laneId });
        }
      });
    }
    if (this.type === "planSend") {
      if (this.hasWs) {
        this.websocketData = this.websocketDataProp;
      } else {
        this.getCrossWs();
      }
    }
  },
  computed: {
    crossHintBoxStyle() {
      return {
        transform: `scale(${this.atlaScaleNum})`,
      };
    },
  },
  watch: {
    websocketDataProp: {
      handler(n) {
        this.websocketData = n;
        this.activePhaseId = this.websocketData.phaseId;
        this.runMode = this.websocketData.runMode;
      },
      deep: true,
    },
    crossData() {
      this.$nextTick(() => {
        this.initPop();
      });
    },
    type() {
      this.$nextTick(() => {
        this.initPop();
      });
    },
  },
  destroyed() {},
  methods: {
    // background 中心渐变颜色 表示热力图
    getCurrentDirLaneInHeat(dir) {
      let colorMap = {
        1: "rgba(254, 200, 2, 1)", //失衡
        2: "rgba(255, 129, 0,1)", //拥堵
        3: "rgba(255, 7, 0,1)", //溢出
      };
      const obj = {
        1: "1",
        2: "3",
        3: "3",
        4: "5",
        5: "5",
        6: "7",
        7: "7",
        8: "1",
      };
      let color = colorMap[this.typeModel];
      if (this.heatData) {
        let maxCount = 0;
        for (let item of this.heatData) {
          maxCount = Math.max(item.counts, maxCount);
        }
        let targetData = this.heatData.find((item) => {
          return obj[item.dir] == dir;
        });
        if (targetData) {
          let colorOpacity = targetData.counts / maxCount;
          let countColor = color.replace("1)", `${colorOpacity})`);
          return `background: radial-gradient(${countColor}, transparent, transparent);`;
        }
      }
    },
    getHeatMapPx(px) {
      const canvas = document.querySelector(".crossHintBox");
      const canvasHeight = canvas.offsetWidth;
      const pxResult = canvasHeight / (405 / px);
      var screenHeight =
        window.innerWidth ||
        document.documentElement.clientWinnerWidth ||
        document.body.clientWinnerWidth;
      return Math.floor(screenHeight / (1920 / pxResult));
    },
    getHeat() {
      //获取canvas宽高
      if (this.heatmapInstance) {
        this.heatmapInstance.setData({ max: 10, data: [] });
      }
      this.unBalanceObj = {};
      this.unBalanceMaxCounts = 0;
      this.yichuObj = {};
      this.unBalanceAllCounts = 0;
      // if (this.timeModel) {
      heatMap({
        crossId: this.crossId,
        endDate: this.dateAll.split("、")[1],
        startDate: this.dateAll.split("、")[0],
        status: this.typeModel,
      }).then((res) => {
        this.heatData = res.data.content;
        this.$nextTick(() => {
          this.$forceUpdate();
        });
      });
      // }
      // if (this.isScene && this.timeModel) {
      //   console.log("hint heat if");
      //   sceneEvaluateHeatMap({
      //     hourMinute: this.timeModel,
      //     crossId: this.crossId,
      //     endDate: null,
      //     startDate: this.dayModel,
      //     status: this.sceneType,
      //   }).then((res) => {
      //     const data = res.data.content;
      //     this.heatData = res.data.content;
      //     this.$nextTick(()=>{
      //       this.$forceUpdate()
      //     })
      //     // if (this.sceneType === 2) {
      //     //   const obj = {
      //     //     1: {
      //     //       x: this.getHeatMapPx(160),
      //     //       y: this.getHeatMapPx(70),
      //     //     },
      //     //     2: {
      //     //       x: this.getHeatMapPx(340),
      //     //       y: this.getHeatMapPx(160),
      //     //     },
      //     //     3: {
      //     //       x: this.getHeatMapPx(340),
      //     //       y: this.getHeatMapPx(160),
      //     //     },
      //     //     4: {
      //     //       x: this.getHeatMapPx(245),
      //     //       y: this.getHeatMapPx(340),
      //     //     },
      //     //     5: { x: this.getHeatMapPx(245), y: this.getHeatMapPx(340) },
      //     //     6: { x: this.getHeatMapPx(70), y: this.getHeatMapPx(235) },
      //     //     7: { x: this.getHeatMapPx(70), y: this.getHeatMapPx(235) },
      //     //     8: { x: this.getHeatMapPx(160), y: this.getHeatMapPx(70) },
      //     //   };
      //     //   let maxCounts = 3; //等级，只有拥堵显示 0畅通 1轻度 2中度 3严重

      //     //   const heatData = [];
      //     //   data.forEach((item) => {
      //     //     if (item.level) {
      //     //       heatData.push({
      //     //         x: obj[item.dir].x,
      //     //         y: obj[item.dir].y,
      //     //         value: item.level,
      //     //       });
      //     //     }
      //     //   });
      //     //   if (maxCounts !== 0) {
      //     //     this.setHeatMap(heatData, maxCounts);
      //     //   }
      //     // } else {
      //     //   //溢出、失衡
      //     //   for (const item of data) {
      //     //     this.yichuObj[item.dir] = item.isUnbalanceOrSpillOver;
      //     //   }
      //     //   const obj = {
      //     //     1: "1",
      //     //     2: "3",
      //     //     3: "3",
      //     //     4: "5",
      //     //     5: "5",
      //     //     6: "7",
      //     //     7: "7",
      //     //     8: "1",
      //     //   };
      //     //   for (const key in obj) {
      //     //     if (!this.yichuObj[obj[key]]) {
      //     //       this.yichuObj[obj[key]] = this.yichuObj[key] || null;
      //     //     }
      //     //   }
      //     //   for (const key in this.yichuObj) {
      //     //     if (
      //     //         this.yichuObj[key] === null ||
      //     //         [2, 4, 6, 8].includes(Number(key))
      //     //     ) {
      //     //       delete this.yichuObj[key];
      //     //     }
      //     //   }
      //     // }
      //   });
      // } else {
      // console.log("hint heat else");
      // heatMap({
      //   crossId: this.crossId,
      //   endDate: this.dateAll.split("、")[1],
      //   startDate: this.dateAll.split("、")[0],
      //   status: this.typeModel,
      // }).then((res) => {
      //   // const data = res.data.content;
      //   this.heatData = res.data.content;
      //   this.$nextTick(()=>{
      //     this.$forceUpdate()
      //   })
      // //拥堵
      // if (this.typeModel === 2) {
      //   const obj = {
      //     1: {
      //       x: this.getHeatMapPx(160),
      //       y: this.getHeatMapPx(70),
      //     },
      //     2: {
      //       x: this.getHeatMapPx(340),
      //       y: this.getHeatMapPx(160),
      //     },
      //     3: {
      //       x: this.getHeatMapPx(340),
      //       y: this.getHeatMapPx(160),
      //     },
      //     4: {
      //       x: this.getHeatMapPx(245),
      //       y: this.getHeatMapPx(340),
      //     },
      //     5: { x: this.getHeatMapPx(245), y: this.getHeatMapPx(340) },
      //     6: { x: this.getHeatMapPx(70), y: this.getHeatMapPx(235) },
      //     7: { x: this.getHeatMapPx(70), y: this.getHeatMapPx(235) },
      //     8: { x: this.getHeatMapPx(160), y: this.getHeatMapPx(70) },
      //   };
      //   let maxCounts = 0;
      //   for (const item of data) {
      //     if (item.counts > maxCounts) {
      //       maxCounts = item.counts;
      //     }
      //   }
      //   const heatData = data.map((item) => {
      //     return {
      //       x: obj[item.dir].x,
      //       y: obj[item.dir].y,
      //       value: item.counts,
      //     };
      //   });
      //   this.setHeatMap(heatData, maxCounts);
      // } else if (this.typeModel === 1) {
      //   //失衡
      //   this.unBalanceMaxCounts = 0;
      //   for (const item of data) {
      //     if (item.counts > this.unBalanceMaxCounts) {
      //       this.unBalanceMaxCounts = item.counts;

      //       // this.unBalanceObj[item.dir] = item.counts;
      //     }
      //     this.unBalanceAllCounts += item.counts;
      //     this.$set(this.unBalanceObj, item.dir, item.counts);
      //   }
      //   const obj = {
      //     1: "1",
      //     2: "3",
      //     3: "3",
      //     4: "5",
      //     5: "5",
      //     6: "7",
      //     7: "7",
      //     8: "1",
      //   };
      //   for (const key in obj) {
      //     if (!this.unBalanceObj[obj[key]]) {
      //       this.unBalanceObj[obj[key]] = this.unBalanceObj[key] || null;
      //     }
      //   }
      //   for (const key in this.unBalanceObj) {
      //     if (
      //         this.unBalanceObj[key] === null ||
      //         [2, 4, 6, 8].includes(Number(key))
      //     ) {
      //       delete this.unBalanceObj[key];
      //     }
      //   }
      // } else if (this.typeModel === 3) {
      //   //溢出
      //   for (const item of data) {
      //     this.yichuObj[item.dir] = item.counts;
      //   }
      //   const obj = {
      //     1: "1",
      //     2: "3",
      //     3: "3",
      //     4: "5",
      //     5: "5",
      //     6: "7",
      //     7: "7",
      //     8: "1",
      //   };
      //   for (const key in obj) {
      //     if (!this.yichuObj[obj[key]]) {
      //       this.yichuObj[obj[key]] = this.yichuObj[key] || null;
      //     }
      //   }
      //   for (const key in this.yichuObj) {
      //     if (
      //         this.yichuObj[key] === null ||
      //         [2, 4, 6, 8].includes(Number(key))
      //     ) {
      //       delete this.yichuObj[key];
      //     }
      //   }
      // }
      // });
      // }
    },
    setHeatMap(data, maxCounts) {
      if (this.type !== "heat") {
        return;
      }
      // 模拟一些数据点
      var dataPoints = {
        max: maxCounts,
        data: data,
      };
      // 创建heatmap实例
      this.heatmapInstance = h337.create({
        container: document.getElementById(this.uuid),
        gradient: {
          ".3": "#fa3636",
          ".7": "#ff2e2e",
          ".95": "#de0000",
        },
      });

      // 添加数据到热力图
      this.heatmapInstance.setData(dataPoints);
    },
    /**
     * 鼠标滚动事件按ctrl加滚轮控制缩放
     */
    handleWheel(e) {
      if (this.type !== "planSend") {
        return;
      }
      // if (e.ctrlKey || e.metaKey) {
      e.preventDefault();
      let atlaScaleNum = parseFloat(
        Math.max(0.2, this.atlaScaleNum - e.deltaY / 1000).toFixed(2)
      );
      if (atlaScaleNum < 1) {
        atlaScaleNum = 1;
      }
      if (atlaScaleNum > 3) {
        atlaScaleNum = 3;
      }
      this.atlaScaleNum = atlaScaleNum;
      // }
    },
    isNull(str) {
      return str != "" || str != undefined || str;
    },
    getLaneImg(item) {
      var direction = item.direction;
      var srcUrl = "white-" + direction;
      srcUrl += ".svg";
      if (direction > 0) {
        var str = require("@/assets/images/planMange/arrow/" + srcUrl);
        return str;
      } else {
        return "";
      }
    },

    setLedActiveClass(val) {
      return (
        this.ledChooseList.length &&
        this.ledChooseList.find((item) => val === item.id)
      );
    },
    setActiveClass(val) {
      return (
        this.planConfigChooseList.length &&
        this.planConfigChooseList.find((item) => val === item.id)
      );
    },
    initPop() {
      var crossData = this.crossData;
      var type = this.type;
      this.crossId = crossData.crossId || crossData.nodeId || crossData.id;
      if (!this.crossId) {
        console.error("路口自定义----路口没有id");
        return false;
      }
      var uuid = this.uuid;
      this.laneAcive = "";
      this.activeDir = [];
      this.$nextTick(() => {
        const w = this.$refs[uuid].clientWidth;
        var width = w * 0.33;
        this.centerStyle.width = this.px2vw(width) + "vw";
        this.centerStyle.height = this.px2vw(width) + "vw";
        this.dirMaxWidth = width;
        this.getCrossDirLane();
        // window.addEventListener("resize", () => {
        //   this.getHeat();
        // });
        this.getHeat();
      });
    },
    // setNumber() {
    //   let flag = false;
    //   const arr = [
    //     ["1", "3", "5", "7"],
    //     ["3", "5", "7"],
    //     ["1", "3", "7"],
    //     ["1", "5", "7"],
    //     ["1", "3", "5"],
    //     ["1"],
    //     ["3"],
    //     ["5"],
    //     ["7"],
    //   ];
    //   arr.forEach((item) => {
    //     if (this.activeDir.toString() === item.sort().toString()) {
    //       flag = true;
    //     }
    //   });
    //   return flag;
    // },
    crossInclude() {
      const arr = ["2", "4", "6", "8"];
      let flag = this.activeDir.some(function (element) {
        return arr.includes(element);
      });
      return flag;
    },
    // Y ["2", "5", "8"][("1", "4", "6")][("3", "6", "8")][("2", "4", "7")];
    getLaneStyle(item) {
      var dirMaxWidth = this.dirMaxWidth;
      var w = dirMaxWidth * (this.crossInclude() ? 0.56 : 1);
      // var w = dirMaxWidth * 0.4;
      var h = dirMaxWidth * 1;
      var left, top, bottom, right, r, ya, yb, yc;
      r = 45;
      // 行内样式不支持px转rem 需要手动转
      var dir = item.dir;
      if (dir == "1") {
        left = (dirMaxWidth - w) / 2;
        return {
          width: this.px2vw(w) + "vw",
          height: this.px2vw(h) + "vw",
          transform: "rotate(180deg)",
          top: -this.px2vw(h) + "vw",
          left: this.px2vw(left) + "vw",
        };
      } else if (dir == "2") {
        h = h + 50;
        left = dirMaxWidth;
        top = h;
        yc = w;
        yb = Math.sin((r * Math.PI) / 180) * yc; //  高度

        ya = Math.cos((r * Math.PI) / 180) * yc; //小三角宽度

        left = left - ya * 0.06525;
        top = top - yb;
        return {
          width: this.px2vw(w) + "vw",
          height: this.px2vw(h) + "vw",
          transform: "rotate(225deg)",
          top: -this.px2vw(top) + "vw",
          left:
            this.customCross === "Y4"
              ? this.px2vw(left) - 0.15 + "vw"
              : this.px2vw(left) + "vw",
        };
      } else if (dir == "3") {
        top = 0;
        //left = dirMaxWidth + w * .75;
        left = h + (dirMaxWidth - w) / 2;
        return {
          width: this.px2vw(w) + "vw",
          height: this.px2vw(h) + "vw",
          transform: "rotate(270deg)",
          top: -this.px2vw(top) + "vw",
          left:
            this.customCross === "Y3"
              ? this.px2vw(left) - 0.1 + "vw"
              : this.px2vw(left) + "vw",
        };
      } else if (dir == "4") {
        h = h + 50;
        left = dirMaxWidth;
        top = h;

        yc = w;

        yb = Math.sin((r * Math.PI) / 180) * yc; //  高度

        ya = Math.cos((r * Math.PI) / 180) * yc; //小三角宽度

        left = left - ya * 0.06525;
        top = top - yb;

        return {
          width: this.px2vw(w) + "vw",
          height: this.px2vw(h) + "vw",
          transform: "rotate(315deg)",
          bottom: -this.px2vw(top) + "vw",
          left:
            this.customCross === "Y4"
              ? this.px2vw(left) - 0.15 + "vw"
              : this.px2vw(left) + "vw",
        };
      } else if (dir == "5") {
        top = h;
        left = (dirMaxWidth - w) / 2;
        return {
          width: this.px2vw(w) + "vw",
          height: this.px2vw(h) + "vw",
          transform: "rotate(0deg)",
          bottom: -this.px2vw(top) + "vw",
          left: this.px2vw(left) + "vw",
        };
      } else if (dir == "6") {
        h = h + 50;
        left = -(dirMaxWidth - w) / 2;
        top = h;

        yc = w;

        yb = Math.sin((r * Math.PI) / 180) * yc; //  高度

        ya = Math.cos((r * Math.PI) / 180) * yc; //小三角宽度

        left = left - ya * (0.06525 * 12);
        top = top - yb;

        return {
          width: this.px2vw(w) + "vw",
          height: this.px2vw(h) + "vw",
          transform: "rotate(45deg)",
          bottom: -this.px2vw(top) + "vw",
          left:
            this.customCross === "Y3"
              ? this.px2vw(left) + 0.15 + "vw"
              : this.px2vw(left) + "vw",
        };
      } else if (dir == "7") {
        top = 0;
        left = -h + (dirMaxWidth - w) / 2;
        return {
          width: this.px2vw(w) + "vw",
          height: this.px2vw(h) + "vw",
          transform: "rotate(90deg)",
          top: -this.px2vw(top) + "vw",
          left:
            this.customCross === "Y4"
              ? this.px2vw(left) + 0.1 + "vw"
              : this.px2vw(left) + "vw",
        };
      } else if (dir == "8") {
        h = h + 50;
        left = -(dirMaxWidth - w) / 2;
        top = h;

        yc = w;

        yb = Math.sin((r * Math.PI) / 180) * yc; //  高度

        ya = Math.cos((r * Math.PI) / 180) * yc; //小三角宽度

        left = left - ya * (0.06525 * 12);
        top = top - yb;

        return {
          width: this.px2vw(w) + "vw",
          height: this.px2vw(h) + "vw",
          transform: "rotate(135deg)",
          top: -this.px2vw(top) + "vw",
          left:
            this.customCross === "Y3"
              ? this.px2vw(left) + 0.15 + "vw"
              : this.px2vw(left) + "vw",
        };
      }
    },
    laneClk(item) {
      if (this.type === "planChoose") {
        return;
      }
      if (item.type === "custom" || (item.laneList && item.laneList.length)) {
        this.laneAcive = item.dir;
        this.$emit("getLaneList", item, this.laneAcive);
      }
    },
    //获取路口方向跟车道
    getCrossDirLane() {
      const activeDir = [];
      var allDir = ["1", "2", "3", "4", "5", "6", "7", "8"];
      var param = {
        crossId: this.crossId,
      };
      api_getCrossData(param).then((res) => {
        const obj = {
          1: "1",
          2: "3",
          3: "3",
          4: "5",
          5: "5",
          6: "7",
          7: "7",
          8: "1",
        };
        const data = res.data.content;
        const result = this.dirList.map((item) => {
          const temp =
            data.dirList.find((subitem) => {
              subitem.dir = String(subitem.dir);
              return subitem.dir === item.dir;
            }) || null;
          if (temp) {
            const dir = this.isSmall ? obj[temp.dir] : item.dir;
            temp.dir = dir;
            activeDir.push(dir);
            allDir = this.replaceArrayTarget(allDir, dir);
            return temp;
          }
          return { dir: item.dir, laneList: [] };
        });
        this.activeDir = activeDir;
        this.dirList = result;
      });
    },
    replaceArrayTarget(arr, t) {
      let index = arr.indexOf(t);
      if (index === -1) {
        return arr;
      } else {
        arr.splice(index, 1);
        return arr;
      }
    },
    getLaneActiveImg(item) {
      var direction = item.direction;
      var srcUrl = "white-active-" + direction;
      srcUrl += ".svg";
      if (direction > 0) {
        var str = require("@/assets/images/planMange/arrow/" + srcUrl);
        return str;
      } else {
        return "";
      }
    },
    //根据车道配置保存需要的数据
    getLaneDatas() {
      var crossId = this.crossId;
      var activeDir = this.activeDir;
      var dirList = this.dirList;
      var datas = [];
      dirList.forEach((item) => {
        var dir = item.dir;
        if (activeDir.indexOf(dir) > -1) {
          var json = {
            dir: dir,
            crossId: crossId,
            ...item,
          };
          datas.push(json);
        }
      });
      return datas;
    },
    getDirClass(d) {
      var activeDir = this.activeDir;
      var type = this.type;
      var laneAcive = this.laneAcive;
      var json = {
        [this.dirClass[d.dir]]: true,
        active: activeDir.indexOf(d.dir) > -1,
        isLane: activeDir.indexOf(d.dir) == -1,
        isDNXB: true,
        laneActive: laneAcive == d.dir,
      };
      return json;
    },
    px2vw(px) {
      var vw = px2vw(px);
      return vw;
    },
  },
};
</script>

<style lang="less" scoped>
.heat_container {
  position: absolute;
  width: 100%;
  aspect-ratio: 1;
}
::v-deep .dirLane.active {
  background: #013c73 !important;
}
::v-deep .el-input__inner {
  background-color: #254a7d;
  border: none;
  color: white;
}
.isSmall.crossHintBox {
  .type-box {
    position: absolute;
    z-index: 999;
    right: 10px;
    top: 10px;
  }
  .lane_in,
  .lane_out {
    //margin-top: 0.2rem !important;
  }
  .lane_img {
    img {
      max-height: 100% !important;
      //height: 0.25rem !important;
    }
    &::before {
      width: 0 !important;
      border-left: 1px solid #fff;
      background-image: none !important;
    }
  }
  .center-txt {
    font-size: 14px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .laneActive {
    cursor: auto;
    border: 0.01rem solid transparent !important;
  }
}
/*
	  样式在layout.css
	 *
	 * */
.crossHintBox {
  background: #dfdfdf;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  .cross_center {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #003d73;
    .center-txt {
      position: absolute;
      /* z-index: 9999999; */
      color: #fff;
      font-size: 25px;
      /* text-align: center; */
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }
  }
  .isLane {
    .lane_out {
      border-top: none !important;
    }
  }
  .lane_out {
    position: relative;
    border-top: 2px solid #fff !important;
    margin-top: 30px !important;
    .lane_img {
      position: relative;
      padding-top: 30%;
      .planSend-arrow {
        height: 0.4458rem;
        max-width: 100%;
        // max-height: 50px !important;
        width: auto !important;
      }
      // border-right: 1px solid #fff;
      &::before {
        /* prettier-ignore */
        width: 2Px;
        height: 100%;
        content: "";
        position: absolute;
        z-index: 1000;
        right: 0;
        top: 0;
        background-image: url("../../../../../assets/images/planMange/laneType-1.svg");
        // background-size: 100% 100%;
        background-repeat: repeat-y;
      }
      &:nth-last-child(1) {
        border-right: none;
        &::before {
          display: none;
        }
      }
    }
  }
  .person-led {
    .active {
      img {
        border: 1px solid #0089ff;
      }
    }
  }
  .yichuBg {
    background: radial-gradient(
      50% 100%,
      #a99c9c 0%,
      rgba(255, 87, 51, 0) 100%
    );
  }
  .lane_in_unBalance {
    // background: linear-gradient(
    //   180deg,
    //   rgba(255, 87, 51, 1) 0%,
    //   rgba(255, 87, 51, 0) 100%
    // );
    background: radial-gradient(
      50% 100%,
      #ff8d1a 0%,
      rgba(255, 87, 51, 0) 100%
    );
  }
  .lane_in_unBalance {
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: center;
    // background: linear-gradient(
    //   180deg,
    //   rgba(255, 87, 51, 1) 0%,
    //   rgba(255, 87, 51, 0) 100%
    // );
    color: #fff;
    padding-top: 60px;
    .txt {
      transform: rotate(180deg);
      position: absolute;
    }
  }
  .lane_in {
    // border-top: 2px solid #fff !important;
    border-right: 2px solid #ffeb3b !important;
    margin-top: 30px;
    padding: 0 6px;
    display: flex;
    justify-content: center;
    .lane_img {
      &.active {
        img {
          border: 1px solid #0089ff;
        }
      }
    }
    img {
      transform: rotate(180deg);
      margin-top: 35px;
      flex: 1;
      width: 100%;
      max-height: 50%;
    }
  }
}
</style>
