<!-- 相位配时 -->
<template>
  <div class="timeConfigProgress">
    <el-dialog
      custom-class="time-dialog"
      title="相位配时"
      v-if="timeConfigDialogShow"
      :visible.sync="timeConfigDialogShow"
      width="30%"
      append-to-body
    >
      <div class="input-box">
        <div class="input-item" :key="index" v-for="(item, index) in lampList">
          <label>{{ item.label }}</label>
          <el-input
            @blur="inputBlur(item.key, inputItem, $event)"
            @input="elRefresh(item.key, $event)"
            v-model="inputItem[item.key]"
          ></el-input
          >s
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="sure">取 消</el-button>
        <el-button type="primary" @click="sure">确 定</el-button>
      </span>
    </el-dialog>

    <div class="pm_pop_phase_charts full-w-h">
      <div
        :style="ringBoxStyle"
        class="phase_ring_box"
        v-for="(ring, ringIndex) in phaseAllData"
        :key="ringIndex"
      >
        <span class="txt-span" :title="'RING' + ring.ringNo"
          >RING{{ ring.ringNo }}</span
        >
        <div class="groupBoxes full-w-h" >
          <div
              class="phase_group_box top"
              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%;"
                  @click="timeColorClick(pd)"
              >
                <div
                    :class="isColumn(pd.dir)?'column':'t_row'"
                    class="charts_imgs_box"
                >
                  <div
                      class="charts_imgs"
                      style="justify-content: center;"
                      v-for="(img, imgIndex) in pd.list"
                      :style="getWidthOrHeight(pd.list)"
                      :key="'img' + imgIndex"
                  >
                    <img
                        v-if="img.type !== 'person'"
                        :style="setDirPhase(img.dir)"
                        alt=""
                        :src="require(`../../../../../assets/images/planMange/mange/black-${isColumn(img.dir)?'noVertical-':'vertical-'}${img.direction}.svg`)"
                    />
                    <img
                        v-else
                        :style="{
                          transform:isColumn(img.dir)? 'rotate(0deg)' : 'rotate(90deg)'
                        }"
                        src="../../../../../assets/images/planMange/person-arrow.svg"
                        alt=""
                    />
                  </div>
                </div>
                <div class="charts_lines"></div>
              </div>
            </div>
          </div>
          <div
              class="phase_group_box bottom"
              v-for="(item, index) in ring.groupList"
              :key="index" :style="'flex:' + item.phaseLen / allCyclelen"
          >
            <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%;"
                  @click="timeColorClick(pd)"
              >
                <template v-for="(ld, li) in lampList">
                  <div
                      :key="li"
                      :style="getLampStyle(ld, pd)"
                      class="lampbox"
                      v-if="pd[ld.key] > 0 && !ld.exclude"
                  >
                    {{ pd[ld.key] }}
                  </div>
                </template>
                <div class="charts_phaseName">{{ pd.phaseNo }}</div>
                <div class="charts_lines"></div>
              </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 v-if="specialList && specialList.length" class="special-box">
      <span class="special-txt">特殊控制：</span>
      <div
        class="special-item"
        style="display:flex;"
        v-for="(item, index) in specialList"
        :key="index"
        @click="specialClick(item)"
      >
        <div
          :style="{
            backgroundColor: item.active ? radioObj[radio] : '#e5e5e5',
            border: item.active ? '2px solid #409EFF' : 'none',
          }"
          class="special-lampbox"
        ></div>
      </div>
      <div class="radio-box">
        <el-radio-group v-model="radio">
          <el-radio
            :label="item.value"
            v-for="item in radioData"
            :key="item.value"
            >{{ item.label }}</el-radio
          >
        </el-radio-group>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      customStyle: {},
      radioData: [
        { label: "黄闪", value: "yellowFlash" },
        { label: "红灯", value: "isRed" },
        { label: "绿灯", value: "isGreen" },
        { label: "绿闪", value: "greenFlash" },
      ],
      radioObj: {
        yellowFlash: "#FFEB3B",
        isRed: "#D43030",
        isGreen: "#5DD48D",
        greenFlash: "#5DD48D",
      },

      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,
      ringBoxStyle: {},
    };
  },
  props: ["allData", "source", "type", "specialList"],
  // props: ["phaseChartData", "allCyclelen", "phaseImgMaps", "lampList"],
  mounted() {
    this.timer = setInterval(()=>{
      if(this.allData){
        clearInterval(this.timer)
        this.initData();
        for (let key in this.radioObj) {
          if (this.specialList && this.specialList[0][key]) {
            this.radio = key;
            this.specialList[0].active = true;
          }
        }
      }
    },100)
  },
  beforeDestroy() {
    this.timer && clearInterval(this.timer)
  },
  watch: {
    allCyclelen(val) {
      this.$emit("allCycleChange", val);
    },
    // allData: {
    //   handler(val) {
    //     this.phaseAllData = this.timeAutoCalc(val, "init");
    //   },
    //   deep: true,
    //   immediate: true,
    // },
  },
  computed: {},
  methods: {
    getWidthOrHeight(list){
      if(list.length){
        if(this.isColumn(list[0].dir)){
          return `height: ${1/list.length*100}%;width:100%;`
        }else{
          return `width: ${1/list.length*100}%;height:100%;`
        }
      }else{
        return ''
      }
    },
    isColumn(dir){
      return  dir == '3' ||
      dir == '2' ||
      dir == '7' ||
      dir == '6'
    },
    ringStyleFun() {
      //获取class是charts_imgs_box的最大高度
      const maxHeight = this.getMaxHeight();
      return {
        height: maxHeight + 90 + "px",
      };
    },
    getMaxHeight() {
      // 获取所有 class 为 charts_imgs_box 的元素
      const elements = document.querySelectorAll(".charts_imgs_box");
      // 初始化最大高度为 0
      let maxHeight = 0;
      // 遍历所有元素，获取最大高度
      elements.forEach((element) => {
        const height = element.offsetHeight;
        if (height > maxHeight) {
          maxHeight = height;
        }
      });
      return maxHeight;
    },
    initData() {
      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,
        "2": 180,
        "3": 180,
        "4": 0,
        "5": 0,
        "6": 0,
        "7": 0,
        "8": 180,
      };
      return `transform: rotate(${degObj[dir]}deg);`;
      return ''
      // const degObj = {
      //   "2": 270,
      //   "1": 180,
      //   "8": 180,
      //   "3": 270,
      //   "4": 0,
      //   "5": 0,
      //   "6": 90,
      //   "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) {
      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: "#5DD48D",
        // 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;
        .el-input__inner {
          height: 40px;
          padding: 0;
          text-align: center;
        }
      }
    }
  }
}
.timeConfigProgress {
  .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;
      }
    }
  }
  .top{
    height: 55%;
  }
  .bottom{
    height: 45%;
  }
  .charts_imgs_box {
    position: absolute;
    //bottom: 55px;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    &.column {
      //bottom: 45px;
      flex-direction: column;
      .charts_imgs {
        //margin-top: 2px;
      }
      img{
        max-width: 30px;
      }
    }
    &.t_row {
      .charts_imgs {
        //margin-left: 2px;
      }
      img{
        height: 100%;
        width: 100%;
      }
      flex-direction: row;
    }
  }
  .charts_imgs {
    //margin-bottom: -25px;
    // 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: 100%;
    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;
    height: 100%;
    position: relative;
  }

  .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;
    position: relative;
    display: flex;
    cursor: pointer;
  }

  .pm_pop_phase_charts .phase_ring_box .phase_charts_item .phase_box .lampbox {
    color: #666;
    text-align: center;
    line-height: 100%;
    height: 12px;
    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: 30px;
    left: 0;
    display: flex;
  }

  .pm_pop_phase_charts
    .phase_ring_box
    .phase_charts_item
    .phase_box
    .charts_phaseName {
    position: absolute;
    //bottom: -15px;
    bottom: 0;
    width: 100%;
    //height: 0.4rem;
    left: 0;
    //line-height: 0.4rem;
    color: #666;
    text-align: center;
  }
  .pm_pop_phase_charts
    .phase_ring_box
    .phase_charts_item
    .phase_box
    .charts_lines {
    position: absolute;
    width: 0;
    height: 100%;
    border-right: 1px 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>
