<!-- 相位配时 -->
<template>
  <div class="timeConfigProgress">
    <div class="pm_pop_phase_charts">
      <div
        class="phase_ring_box"
        v-for="(ring, ringIndex) in phaseAllData"
        :key="ringIndex"
      >
        <div
          class="phase_group_box"
          v-for="(item, index) in ring.groupList"
          :key="index"
          :style="'flex:' + item.phaseLen / allCyclelen"
        >
          <!--<div class="charts_title" v-if="index ==0">
                                                        {{'环'+index}}
          </div>-->
          <div
            class="phase_charts_item"
            v-for="(pd, pi) in item.phaseList"
            :key="pi"
            :style="
              'flex:' +
              pd.phaseLen /
                (allCyclelen / (ring.groupList.length * item.phaseList.length))
            "
          >
            <div class="phase_box" style="width: 100%">
              <template v-for="(ld, li) in lampList">
                <div
                  :key="li"
                  :style="getLampStyle(ld, pd)"
                  class="lampbox"
                  :class="{ 'lampbox-active': activePhaseId === pd.phaseNo }"
                  v-if="pd[ld.key] > 0 && !ld.exclude"
                >
                  {{ pd[ld.key] }}
                </div>
              </template>
              <div
                :class="pd.dir == '3' || pd.dir == '7' ? 'column' : 'row'"
                class="charts_imgs_box"
              >
                <div
                  class="charts_imgs small_charts_imgs"
                  style="justify-content: center"
                  v-for="(img, imgIndex) in pd.list"
                  :key="'img' + imgIndex"
                >
                  <img
                    v-if="img.type !== 'person'"
                    :style="setDirPhase(img.dir)"
                    :src="
                      require('@/assets/images/planMange/opArrow/black-' +
                        img.direction +
                        '.svg')
                    "
                  />
                  <img
                    v-else
                    :style="{
                      transform:
                        img.dir == 3 || img.dir == 7
                          ? 'rotate(0deg)'
                          : 'rotate(90deg)',
                    }"
                    style="height: 40px"
                    src="../../assets/images/planMange/person-arrow.svg"
                    alt=""
                  />
                </div>
              </div>
              <div class="charts_phaseName">{{ pd.phaseNo }}</div>
              <div class="charts_lines"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="phase_charts_btns">
        <!-- <div class="pm_btns">
          <div class="btns btns_reset" @click="resetPlanINfo"></div>
          <div class="btns btns_ok" @click="savePlanInfo"></div>
        </div>-->
      </div>
    </div>
  </div>
</template>

<script>
import { api_planList } from "../../dao/situation";
import wsMixins from "./wsMixins.js";
export default {
  data() {
    return {
      radioData: [
        { label: "黄闪", value: "yellowFlash" },
        { label: "红灯", value: "isRed" },
        { label: "绿灯", value: "isGreen" },
        { label: "绿闪", value: "greenFlash" },
      ],
      radioObj: {
        yellowFlash: "#FFEB3B",
        isRed: "#D43030",
        isGreen: "#00B9AC",
        greenFlash: "#00B9AC",
      },

      radio: "",
      allCyclelen: 0,
      lampList: [
        {
          label: "最大绿灯",
          key: "maxGreenTime",
          type: "input",
          prop: "num",
          exclude: true,
        },
        {
          label: "最小绿灯",
          key: "minGreenTime",
          type: "input",
          prop: "num",
          exclude: true,
        },
        {
          label: "绿灯",
          key: "greenTime",
          type: "input",
          prop: "num",
        },
        {
          label: "绿闪",
          key: "greenFlashTime",
          type: "input",
          prop: "num",
        },
        {
          label: "黄灯",
          key: "yellowTime",
          type: "input",
          prop: "num",
        },
        {
          label: "黄闪",
          key: "yellowFlash",
          type: "input",
          prop: "num",
        },
        {
          label: "红灯",
          key: "redTime",
          type: "input",
          prop: "num",
        },
        {
          label: "红闪",
          key: "redFlashTime",
          type: "input",
          prop: "num",
        },
        // {
        //   label: "关灯",
        //   key: "guandeng",
        //   type: "input",
        //   prop: "num"
        // }
      ],
      phaseChartData: [],
      inputItemInit: {
        maxGreenTime: 99,
        minGreenTime: 8,
        greenTime: 20,
        greenFlashTime: 0,
        yellowFlash: 3,
        yellowTime: 3,
        redTime: 3,
        redFlashTime: 0,
      },
      inputItem: {},
      phaseAllData: [],
      timeConfigDialogShow: false,
    };
  },
  mixins: [wsMixins],
  props: ["crossId", "source", "type", "specialList", "allData"],
  // props: ["phaseChartData", "allCyclelen", "phaseImgMaps", "lampList"],
  mounted() {
    this.initData();
  },
  watch: {
    allCyclelen(val) {
      this.$emit("allCycleChange", val);
    },
    // allData: {
    //   handler(val) {
    //     this.phaseAllData = this.timeAutoCalc(val, "init");
    //   },
    //   deep: true,
    //   immediate: true,
    // },
  },
  methods: {
    initData() {
      api_planList({ crossId: this.crossId }).then((res) => {
        if (res) {
          const planList = res.content.phaseSchemeList;
          const planActive = planList[0];
          if (!planActive) {
            return;
          }
          planActive.ringList.forEach((ring) => {
            ring.groupList.forEach((group) => {
              group.phaseList.forEach((phase) => {
                let personDir = null;
                const list = phase.dirList.flatMap((item) => {
                  if (item.hasPersonPhase) {
                    personDir = item.dir;
                  }
                  if (item.dir === 1 || item.dir === 3) {
                    // item.laneList = _orderBy(
                    //   item.laneList,
                    //   ["direction"],
                    //   ["desc"]
                    // );
                    item.laneList = item.laneList.reverse();
                  }
                  return item.laneList.map((lane) => {
                    return {
                      direction: lane.direction,
                      laneType: lane.laneType,
                      dir: item.dir,
                    };
                  });
                });
                if (personDir && (personDir === 1 || personDir === 7)) {
                  list.unshift({ type: "person", dir: personDir });
                } else if (personDir) {
                  list.push({ type: "person", dir: personDir });
                }
                this.$set(phase, "list", list);
              });
            });
          });
          this.allData = planActive.ringList;
          this.phaseAllData = this.timeAutoCalc(this.allData, "init");
        }
      });
    },
    specialClick(item) {
      this.specialList.forEach((item) => {
        this.$set(item, "active", false);
      });
      this.$set(item, "active", true);
    },
    setDirPhase(dir) {
      const degObj = {
        1: 180,
        3: 270,
        5: 0,
        7: 90,
      };
      return `transform: rotate(${degObj[dir]}deg);`;
    },
    timeAutoCalc(val, type) {
      this.allCyclelen = 0;
      const result = val.map((ring, index) => {
        let allCyclelen = 0;
        ring.groupList.map((group) => {
          let groupCount = 0;
          group.phaseList.map((phase) => {
            if (phase.dirList && phase.dirList.length) {
              phase.dir = phase.dirList[0].laneList.length
                ? phase.dirList[0].dir
                : phase.dirList[1].dir;
            }
            let temp = phase;
            if (type === "init") {
              if (phase.greenTime || phase.greenTime == 0) {
                // temp = phase;
              } else {
                for (const key in this.inputItemInit) {
                  phase[key] = this.inputItemInit[key];
                }
              }
            }
            let count = 0;
            this.lampList.forEach((input) => {
              if (!input.exclude) {
                count += Number(temp[input.key] || 0);
              }
            });
            temp.phaseLen = count;
            groupCount += count;
            return temp;
          });
          allCyclelen += Number(groupCount);
          group.phaseLen = groupCount;
          return group;
        });
        ring.allCyclelen = allCyclelen;
        if (index === 0) {
          this.allCyclelen = ring.allCyclelen;
        }
        return ring;
      });
      return result;
    },
    sure() {
      this.inputBlur("greenTime", this.inputItem);
      this.phaseAllData = this.timeAutoCalc(this.phaseAllData, "update");
      this.timeConfigDialogShow = false;
    },
    inputBlur(key, row) {
      if (key === "greenTime") {
        const value = Number(row.greenTime);
        if (value > Number(row.maxGreenTime)) {
          this.$message.closeAll();
          this.$message.warning("绿灯时长不能超过最大绿灯时长");
          // row.greenTime = row.maxGreenTime;
          this.$set(this.inputItem, "greenTime", row.maxGreenTime);
        }
        if (value < Number(row.minGreenTime)) {
          this.$message.closeAll();
          this.$message.warning("绿灯时长不能小于最小绿灯时长");
          this.$set(this.inputItem, "greenTime", row.minGreenTime);
          // row.greenTime = row.minGreenTime;
        }
      }
    },
    elRefresh(key) {
      // if (!this.inputItem[key]) {
      //   console.log(this.inputItem[key]);
      //   this.inputItem[key] = 0;
      // }
      this.$forceUpdate();
    },
    timeColorClick(item) {
      if (this.source === "opCrossDialog") {
        return;
      }
      this.inputItem = item;
      this.timeConfigDialogShow = true;
    },
    //设置每步的样式
    getLampStyle(ld, pd) {
      var length = pd[ld.key];
      var count = pd.phaseLen;
      var color = this.getNameToColor(ld.key);
      var flex = 0;
      if (length > 0) {
        flex = length / count;
      }
      return {
        flex: flex,
        "background-color": color,
      };
    },
    getNameToColor(str) {
      var colorMaps = {
        red: "#D43030",
        yellow: "#FFF382",
        green: "#00B9AC",
        // xideng: "grey",
        // guan: "#000"
      };
      str = str.indexOf("red") > -1 ? "red" : str;
      str = str.indexOf("yellow") > -1 ? "yellow" : str;
      str = str.indexOf("green") > -1 ? "green" : str;
      // str = str.indexOf("xideng") > -1 ? "lv" : str;
      // str = str.indexOf("guan") > -1 ? "guan" : str;

      var color = colorMaps[str];
      return color;
    },
  },
};
</script>

<style lang="less">
.time-dialog {
  margin-top: 25vh !important;
  .input-box {
    display: flex;
    flex-wrap: wrap;
    .input-item {
      margin-bottom: 20px;
      width: 280px;
      display: flex;
      align-items: center;
      label {
        text-align: right;
        display: inline-block;
        width: 180px;
      }
      .el-input {
        margin: 0 10px;
        /deep/.el-input__inner {
          height: 40px;
          padding: 0;
          text-align: center;
        }
      }
    }
  }
}
.timeConfigProgress {
  margin-top: 30px;
  .radio-box {
    text-align: center;
    margin: 15px 0;
    .el-radio__label {
      font-size: 16px;
    }
  }
  .special-box {
    .special-txt {
      margin-top: -5px;
      font-size: 16px;
      float: left;
    }
    .special-item {
      margin-top: 20px;

      .special-lampbox {
        margin-left: 88px;
        width: calc(100% - 100px);
        height: 12px;
        background: #e5e5e5;
      }
      &:nth-child(2) {
        .special-lampbox {
          margin-left: 8px;
          width: calc(100% - 20px);
        }
      }
    }
  }

  .phase_group_box {
    position: relative;
    margin-right: 5px;
    display: flex;
    flex: 1;
    border-right: 1px solid #a6a6a6;
    &::before {
      border-right: 1px solid #a6a6a6;
      width: 1px;
      height: 100%;
      content: "";
      position: absolute;
      z-index: 1000;
      right: -6px;
      top: 0;
    }
    &:nth-last-child(1) {
      border-right: none;
      &::before {
        display: none;
      }
    }
  }
  .charts_imgs_box {
    position: absolute;
    bottom: 60px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    &.column {
      bottom: 50px;
      flex-direction: column;
    }
    &.row {
      flex-direction: row;
      .charts_imgs {
        margin-left: 8px;
      }
    }
  }
  .charts_imgs {
    margin-bottom: -20px;
    // margin-left: -25px;
  }

  .pmPop_timingBox .pmPop_time_phase .pmPop_time_plan .pm_pop_phase_charts {
    height: 2rem;
    margin-top: 0.15rem;
    display: flex;
  }

  .pm_pop_phase_charts .phase_ring_box {
    padding: 0.2rem 0;
    height: calc(100% - 0.6rem);
    display: flex;
    align-items: center;
    // flex-direction: column;
    flex: 1;
    color: #666;
    .txt-span {
      width: 76px;
      display: inline-block;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }

  .pm_pop_phase_charts .phase_charts_btns {
    width: 1rem;
    height: calc(100% - 0.2rem);
  }

  .pm_pop_phase_charts .phase_charts_btns .pm_btns {
    padding-left: 0.1rem;
    margin-top: 1.2rem;
  }

  .pm_pop_phase_charts .phase_ring_box .phase_charts_item {
    display: flex;
    flex: 1;
    position: relative;
    .lampbox-active {
      border: 2.68px solid #00ffee;
      transform: scaleY(1.5);
    }
  }

  .pm_pop_phase_charts .phase_ring_box .phase_charts_item .charts_title {
    width: 0.4rem;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .pm_pop_phase_charts .phase_ring_box .phase_charts_item .phase_box {
    padding: 18px 0 5px 0;
    position: relative;
    display: flex;
  }

  .pm_pop_phase_charts .phase_ring_box .phase_charts_item .phase_box .lampbox {
    height: 1.5rem;
    color: #666;
    text-align: center;
    line-height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
  }

  .pm_pop_phase_charts
    .phase_ring_box
    .phase_charts_item
    .phase_box
    .charts_imgs {
    width: 10px;
    height: 0.4rem;
    left: 0;
    display: flex;
  }
  .small_charts_imgs {
    width: 10px !important;
    height: 33px !important;
  }

  .pm_pop_phase_charts
    .phase_ring_box
    .phase_charts_item
    .phase_box
    .charts_phaseName {
    position: absolute;
    bottom: -15px;
    width: 100%;
    height: 0.4rem;
    left: 0;
    line-height: 0.4rem;
    color: #fff;
    text-align: center;
  }
  .pm_pop_phase_charts
    .phase_ring_box
    .phase_charts_item
    .phase_box
    .charts_lines {
    position: absolute;
    width: 0.01rem;
    height: 50px;
    border-right: 0.01rem dashed #0084ff;
    right: 0;
    top: 0;
  }
  .phase_charts_item {
    &:nth-last-child(1) {
      .charts_lines {
        display: none;
      }
    }
  }

  .pm_pop_phase_charts
    .phase_ring_box
    .phase_charts_item
    .phase_box
    .charts_imgs
    .phase_car_box {
    margin-left: -0.03rem;
    /*flex: 1;*/
  }

  .pm_pop_phase_charts
    .phase_ring_box
    .phase_charts_item
    .phase_box
    .charts_imgs
    .phase_car_box.phase_case_78,
  .pm_pop_phase_charts
    .phase_ring_box
    .phase_charts_item
    .phase_box
    .charts_imgs
    .phase_car_box.phase_case_34 {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .pm_pop_phase_charts
    .phase_ring_box
    .phase_charts_item
    .phase_box
    .charts_imgs
    .phase_car_box.phase_case_78
    img,
  .pm_pop_phase_charts
    .phase_ring_box
    .phase_charts_item
    .phase_box
    .charts_imgs
    .phase_car_box.phase_case_34
    img {
    height: 0.15rem;
    width: auto;
    display: block;
  }

  .pm_pop_phase_charts
    .phase_ring_box
    .phase_charts_item
    .phase_box
    .charts_imgs
    .phase_car_box.phase_case_12
    img,
  .pm_pop_phase_charts
    .phase_ring_box
    .phase_charts_item
    .phase_box
    .charts_imgs
    .phase_car_box.phase_case_56
    img {
    max-width: 0.15rem;
    height: auto;
    flex: 1;
    height: 100%;
  }

  /*.pm_pop_phase_charts .phase_ring_box .phase_charts_item .phase_box .charts_imgs img {}
    
    .pm_pop_phase_charts .phase_ring_box .phase_charts_item .phase_box .charts_imgs img.phase_img_78,
    .pm_pop_phase_charts .phase_ring_box .phase_charts_item .phase_box .charts_imgs img.phase_img_34 {
        width: 0.35rem;
        height: auto;
        vertical-align: bottom;
    }
    
    .pm_pop_phase_charts .phase_ring_box .phase_charts_item .phase_box .charts_imgs img.phase_img_12,
    .pm_pop_phase_charts .phase_ring_box .phase_charts_item .phase_box .charts_imgs img.phase_img_56 {
        height: 0.3rem;
        vertical-align: bottom;
    }*/
}
</style>
