<!-- 济南路口优化 -->
<template>
  <div class="crossOpDialog" v-if="timeShow">
    <div class="left">
      <p class="push-title">
        优化类型：{{ propsData.optTypeName }} <i class="line line-bottom"></i>
      </p>

      <span class="title">优化前：</span>
      <p>周期：{{ oldPlanActiveCycle }}s</p>
      <timeConfigProgress
        type="mainCross"
        source="opCrossDialog"
        class="time-box"
        :allData="oldPlanActive.ringList"
        @allCycleChange="oldAllCycleChange"
      ></timeConfigProgress>
      <span class="title">优化后：</span>
      <p>
        周期：{{ planActiveCycle }}s
        <span v-if="planActiveCycle - oldPlanActiveCycle"
          >+{{ planActiveCycle - oldPlanActiveCycle }}s</span
        >
      </p>
      <timeConfigProgress
        type="mainCross"
        source="opCrossDialog"
        class="time-box"
        :allData="planActive.ringList"
        @allCycleChange="allCycleChange"
      ></timeConfigProgress>
    </div>
    <crossHint
      isSmall="isSmall"
      class="crossContent"
      ref="crossHint"
      :crossData="propsData"
      type="planSend"
    ></crossHint>
  </div>
</template>

<script>
import crossHint from "../../views/planManage/crossHint.vue";
import { api_planList } from "@/common/api/planManage.js";
import { api_querySchemeOpt } from "@/common/api/homepageSignal";
import _orderBy from "lodash/orderBy";
export default {
  props: ["propsData"],
  data() {
    return {
      planList: [],
      planActiveRefresh: false,
      planActive: {},
      oldPlanActive: {},
      timeShow: false,
      oldPlanActiveCycle: 0,
      planActiveCycle: 0,
    };
  },
  components: {
    crossHint,
    timeConfigProgress: (reslove) =>
      require(["../../views/planManage/timeConfigProgress.vue"], reslove), //相位配时
  },
  mounted() {
    console.log(this.propsData);
    this.getTimeData();
  },
  methods: {
    oldAllCycleChange(val) {
      this.oldPlanActiveCycle = val;
      // this.planActiveCycle = this.planActive.ringList[0].allCyclelen;
    },
    allCycleChange(val) {
      this.planActiveCycle = val;
      // this.planActiveCycle = this.planActive.ringList[0].allCyclelen;
    },
    async getTimeData() {
      const res = await api_planList({ crossId: this.propsData.id });
      if (res && res.data) {
        let timeRes = await api_querySchemeOpt({
          crossId: this.propsData.id,
          schemeId: res.data.content.currentSchemeId,
        });
        const phaseOptTimeList = timeRes.data.content.phaseOptTimeList;
        this.schemeOption = res.data.content.phaseSchemeList;
        const schemeObj = this.schemeOption.filter(
          (item) => item.status === 1
        )[0];
        if (schemeObj) {
          this.schemeModel = schemeObj.schemeId;
        } else {
          this.schemeModel = this.schemeOption[0].schemeId;
        }
        this.planList = res.data.content.phaseSchemeList.filter(
          (item) => item.schemeId === res.data.content.currentSchemeId
        );
        this.planActive = this.planList[0];
        this.planActive.ringList.forEach((ring) => {
          ring.groupList.forEach((group) => {
            group.phaseList.forEach((phase) => {
              if (phase.dirList) {
                const list = phase.dirList.flatMap((item) => {
                  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,
                    };
                  });
                });
                this.$set(phase, "list", list);
              }
            });
          });
        });
        this.planActiveRefresh = !this.planActiveRefresh;
        if (!this.planActive) {
          this.planActive = {
            ringList: [],
          };
          this.controlTableData = [];
          return;
        }
        const controlTableData = this.planActive.ringList[0].groupList[0]
          .phaseList;
        this.oldPlanActive = JSON.parse(JSON.stringify(this.planActive));

        const controlTableDataOld = this.oldPlanActive.ringList[0].groupList[0]
          .phaseList;
        controlTableDataOld.map((phase) => {
          phaseOptTimeList.forEach((time) => {
            if (time.phaseNo === phase.phaseNo) {
              phase.greenTime = time.oriGreenTime; //优化前时长
              // phase.addTime = 10;
            }
          });
          return phase;
        });
        this.controlTableData = controlTableData.map((phase) => {
          phaseOptTimeList.forEach((time) => {
            if (time.phaseNo === phase.phaseNo) {
              phase.optGreenTime = time.optGreenTime || phase.greenTime; //优化后时长
              phase.oriGreenTime = time.oriGreenTime || phase.greenTime; //优化前时长
            }
          });
          phase.greenTimeOld = phase.oriGreenTime || phase.greenTime;
          phase.greenTime = phase.optGreenTime || phase.greenTime;
          return phase;
        });

        this.timeShow = true;
      }
    },
  },
};
</script>
<style lang="less">
.cross-img-dialog-op .el-dialog .el-dialog__body {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

<style lang="less" scoped>
.crossOpDialog {
  padding: 20px;
  width: 100%;
  height: 400px;
  display: flex;
  .left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: calc((100% - 400px));
    .time-box {
      width: 100%;
    }
    .title {
      font-size: 18px;
      margin-bottom: 8px;
    }
    .push-title {
      padding-left: 30px;
      position: absolute;
      left: 0;
      top: 90px;
      width: 100%;
      font-size: 18px;
      .line {
        display: inline-block;
        border-bottom: 1px solid #ccc;
        position: absolute;
        left: 0;
        width: 100%;
        &.line-bottom {
          bottom: -25px;
        }
      }
    }
  }
  .crossContent {
    width: 400px;
  }
}
</style>
