<!-- 干线 -->
<template>
  <div class="area-line">
    <div class="head-timeSelector">
      <div class="custom-form-label">时段选择：</div>
      <el-date-picker
        @change="init"
        v-model="dateModel"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
    </div>
    <div class="content">
      <div
        class="content-item"
        v-loading="schemeAnalysisLoading"
        element-loading-text="数据加载中..."
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0,0,0, 0.4)"
      >
        <div class="item-txt">干线运行分析</div>
        <div class="chart">
          <v-chart style="z-index: 5" autoresize :option="leftPieOption" />
          <div class="liner-border">
            <div class="border-inner"></div>
          </div>
          <div class="liner-border1">
            <div class="border-inner1"></div>
          </div>
        </div>

        <div class="leftPieChartLegend">
          <div class="legendItem" v-for="item of pieData">
            <div style="display: flex; align-items: center; height: 100%">
              <div
                class="legendItemColor"
                :style="`background-color:${pieColorMap[item.nameVal]}`"
              ></div>
              {{ item.name }}:
            </div>
            {{ ((item.value / (60 * 24 * 60)) * 100).toFixed(0) }}%
          </div>
        </div>
      </div>
      <div
        v-loading="schemeEvaluationLoading"
        element-loading-text="数据加载中..."
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0,0,0, 0.4)"
        class="content-item"
        style="position: relative"
      >
        <div class="item-txt">干线方案评价</div>
        <div class="content-container">
          <div class="select-box1">
            <div class="row_item">
              <div class="row_col">
                <div class="custom-form-label">当前时段：</div>
                <el-select
                  class="custom-form-input"
                  v-model="schemeModel"
                  placeholder=""
                  filterable
                  @change="getDirOption"
                  value-key="name"
                >
                  <el-option
                    v-for="item in schemeOption"
                    :key="item.name"
                    :value="item"
                    :label="item.timeSpan"
                  >
                  </el-option>
                </el-select>
              </div>
              <div class="row_col">
                <div class="custom-form-label button_left">
                  场景：{{ sceneName || "--" }}
                </div>
                <div>
                  <el-button
                    type="primary"
                    :disabled="!detailShow"
                    @click="detailClick"
                    >详情
                  </el-button>
                </div>
              </div>
            </div>
            <div class="row_item">
              <div class="row_col">
                <div class="custom-form-label">对比时段：</div>
                <el-select
                  class="custom-form-input"
                  v-model="compareTimeType"
                  @change="compareTimeTypeChange"
                >
                  <el-option
                    v-for="item in compareTimeTypeOptions"
                    :key="item.value"
                    :value="item.value"
                    :label="item.label"
                  >
                  </el-option>
                </el-select>
              </div>
              <div class="row_col">
                <div class="custom-form-label">指标：</div>
                <el-select
                  class="custom-form-input"
                  v-model="indexModelMiddle"
                  placeholder=""
                  filterable
                  @change="compareTimeTypeChange"
                >
                  <el-option
                    v-for="item in indexOption"
                    :key="item.label"
                    :value="item.metricName"
                    :label="item.label"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
            <div class="row_item" v-if="compareTimeType === 3">
              <div class="custom-form-label">自定义对比时段：</div>
              <el-date-picker
                :clearable="false"
                @change="getMiddleData"
                class="form3"
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="compareTimes"
                type="datetimerange"
              >
              </el-date-picker>
            </div>
          </div>
          <oneLineChart
            class="chart"
            ref="lineChart"
            :indexModelMiddle="indexModelMiddle"
            :data1="middleRes1.curveElementList"
            :data2="middleRes2.curveElementList"
            :compareTimeType="compareTimeType"
            :key="`oneLineChart${oneLineChartKey}`"
          ></oneLineChart>
        </div>
      </div>
      <div
        v-loading="crossEvaluationLoading"
        element-loading-text="数据加载中..."
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0,0,0, 0.4)"
        class="content-item"
      >
        <div class="item-txt">干线路口评价</div>
        <div class="content-container">
          <div
            class="full-w-h noDataMsg"
            v-if="!middleRes.greenwaveCrossList.length"
          >
            暂无数据...
          </div>
          <crossDistance
            :canClick="true"
            class="cross-distance"
            :key="`crossDistance${crossDistanceKey}`"
            :contentData="middleRes"
            type="areaLine"
            @crossClick="crossClick"
          ></crossDistance>
          <v-chart class="chart" autoresize :option="rightLineOption" />
        </div>
      </div>
    </div>
    <mutLineChart
      ref="mutLineChart"
      class="content-bottom"
      :date="dateModel"
      :detailApiData="detailApiData"
      :areaObj="areaObj"
      :indexOption="indexOption2"
    ></mutLineChart>
    <signal-op-green-detail
      @close="showDialog = false"
      v-if="showDialog"
      :props-data="propsData"
    />
  </div>
</template>

<script>
import {
  formatDateTime,
  getFontSizeHeight,
  formatDate,
} from "@/common/js/utils.js";
import {
  mainlineSchemeAnalysis,
  mainlineSchemeEvaluate,
  mainlineCrossEvaluate,
  mainlineRunAnalyse,
} from "@/common/api/signalEvaluation.js";
import SignalOpGreenDetail from "@/views/signalEvaluation/rightIndex/lineComponents/signalOpGreenDetail.vue";
import { getFontSize } from "@/config/holo/fontSize";
// import signalOpGreenDetail from "../../../components/dialog/signalOpGreenDetail.vue";

export default {
  name: "lineEvaluation",
  data() {
    return {
      rightClickCrossName: "",
      pieColorMap: {
        1: "#00933a",
        2: "#ff8200",
        3: "#ffd145",
      },
      pieData: [],
      showDialog: false,
      rightCheckList: [],
      compareTimeTypeOptions: [
        { label: "同比", value: 1 },
        { label: "环比", value: 2 },
        { label: "自定义", value: 3 },
      ],
      compareTimes: ["", ""],
      compareTimeType: 1,
      charts: {},
      schemeAnalysisLoading: true,
      schemeEvaluationLoading: true,
      crossEvaluationLoading: false,
      detailShow: false,
      barChartKey: 0,
      oneLineChartKey: 0,
      crossDistanceKey: 0,
      reverseBarKey: 0,
      middleRes: {
        greenwaveCrossList: [],
      },
      middleRes1: {},
      middleRes2: {},
      detailApiData: {
        status: 2,
        startTime: "2023-07-17 22:50",
        level: 0,
        duration: 5,
        dirs: [1, 2],
        patternNames: ["方案15"],
        serviceLevel: "A",
        flow: 42,
        overallMetricsList: [
          {
            metricCode: "2",
            metricName: "停车通过率",
            metricValue: 0,
            metricUnit: "%",
          },
          {
            metricCode: "6",
            metricName: "平均速度",
            metricValue: 58,
            metricUnit: "km/h",
          },
          {
            metricCode: "3",
            metricName: "平均延误",
            metricValue: 0,
            metricUnit: "s",
          },
          {
            metricCode: "5",
            metricName: "停车次数",
            metricValue: 0,
            metricUnit: "次",
          },
          {
            metricCode: "4",
            metricName: "最大排队长度",
            metricValue: 15,
            metricUnit: "m",
          },
          {
            metricCode: "10",
            metricName: "溢流率",
            metricValue: 1000,
            metricUnit: "%",
          },
        ],
        timeline: ["22:50", "22:55"],
        dirsName: ["北进口", "东北进口"],
      },
      dirModel: "",
      dirOption: [],
      schemeOption: [{ name: "方案1", code: "1" }],
      schemeModel: null,
      tableData: {
        name: "关键路口",
        key: "keyCross",
        clickable: true,
        header: [
          { label: "关键路口", key: "name", align: "center" },
          { label: "关键路口次数", key: "times", align: "center" },
        ],
        body: [],
      },
      dateAll: [],
      // dateModel: [
      //   new Date(new Date().setTime(new Date().getTime() - 3600 * 1000 * 24)),
      //   new Date(),
      // ],
      dateModel: "",
      tableHeight1: null,
      tableHeight2: null,
      indexModelMiddle: "干线行程时间",
      indexModelRight: "",
      indexOption: [
        { label: "行程时间", metricName: "干线行程时间" },
        { label: "平均速度", metricName: "平均速度" },
        { label: "平均延误", metricName: "平均延误" },
        { label: "不停车通过率", metricName: "协调不停车通过率" },
      ],
      indexOption2: [],
      leftRes: {},
      rightRes: [],
      rightTableModel: {},
      legendMap: {
        1: "畅通",
        2: "溢出",
        3: "拥堵",
      },
    };
  },
  components: {
    SignalOpGreenDetail,
    oneLineChart: (resolve) => require(["./oneLineChart.vue"], resolve), //路口流量
    tableData: () =>
      import(/*webpackChunkName:"tableData" */ "./tableData.vue"),
    reverseBar: (resolve) => require(["./reverseBar.vue"], resolve), //路口流量
    barChart: (resolve) => require(["./barChart.vue"], resolve), //路口流量
    mutLineChart: () =>
      import(/*webpackChunkName:"checkExpendTable" */ "./mutLineChart.vue"),
    crossDistance: (resolve) =>
      require(["../../../signal/dialogs/greenWave/crossDistance.vue"], resolve),
  },
  props: ["areaObj"],
  computed: {
    rightLineOption() {
      let targetCrossData = (this.rightRes || []).find((item) => {
        return item.crossName === this.rightClickCrossName;
      });
      let indexes = {
        queueList: "非协调排队长度",
        stopTimesList: "非协调停车次数",
        twoStopRateList: "非协调二次停车率(%)",
      };
      let colors = {
        queueList: "#00933a",
        stopTimesList: "#ff8200",
        twoStopRateList: "#ffd145",
      };
      let seriesData = [];
      let xData = [];
      if (targetCrossData) {
        console.log("t", targetCrossData);
        for (let key in indexes) {
          if (targetCrossData[key]) {
            xData = targetCrossData[key].map((item) => {
              return item.time;
            });
            let yAxisIndex, yItemData;
            if (indexes[key].includes("率")) {
              yAxisIndex = 1;
              yItemData = targetCrossData[key].map((item) => {
                return item.value * 100;
              });
            } else {
              yAxisIndex = 0;
              yItemData = targetCrossData[key].map((item) => {
                return item.value;
              });
            }
            seriesData.push({
              smooth: true,
              symbol: "none",
              name: indexes[key],
              type: "line",
              data: yItemData,
              itemStyle: {
                color: colors[key],
              },
              yAxisIndex: yAxisIndex,
              areaStyle: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  1,
                  0,
                  0,
                  [
                    {
                      offset: 0,
                      color: "rgba(62, 170, 247, 0)", // 100% 处的颜色
                    },
                    {
                      offset: 1,
                      color: colors[key], // 0% 处的颜色
                    },
                  ],
                  false
                ),
              },
            });
          }
        }
      }
      return {
        // dataZoom: {
        //   type: "inside",
        //   startValue: xData.length - 6,
        //   endValue: xData.length - 1,
        // },
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(0,0,0,0.8)",
          borderWidth: 0,
          textStyle: {
            fontSize: getFontSize(12),
            color: "white",
          },
          confine: true,
        },
        legend: {
          inactiveColor: "rgba(255,255,255,0.7)",
          type: "scroll",
          itemWidth: 10,
          show: true,
          left: "center",
          textStyle: {
            color: "rgba(255,255,255,0.9)",
          },
        },
        grid: {
          top: 30,
          left: 0,
          right: 0,
          bottom: 0,
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: xData,
        },
        yAxis: [
          {
            type: "value",
            splitLine: {
              lineStyle: {
                color: "rgba(153, 153, 153, 0.6)",
                type: "dashed",
              },
            },
          },
          {
            type: "value",
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,0)",
              },
            },
          },
        ],
        series: seriesData,
      };
    },
    leftPieOption() {
      let currentTotal = 0;
      for (let item of this.pieData) {
        currentTotal += item.value;
      }
      let except = 24 * 60 * 60 - currentTotal;
      let colors = this.pieData.map((item) => {
        return item.color;
      });
      colors.push("#00933a");
      this.pieData.push({
        nameVal: 1,
        value: except,
        includes: [],
        name: this.legendMap[1],
      });
      return {
        color: colors,
        tooltip: {
          confine: true,
          trigger: "item",
          enterable: true,
          backgroundColor: "rgba(0,0,0,0.8)",
          borderWidth: 0,
          textStyle: {
            fontSize: getFontSize(12),
            color: "white",
          },
          formatter: (params) => {
            let back = "";
            back = `${params.data.name}时段${
              params.data.includes.length ? "：" : ""
            }</br>`;
            for (let item of params.data.includes) {
              back += `${item}</br>`;
            }
            // '<div style="max-height:180px;overflow-y:auto">' +
            return (
              '<div style="max-height:250px;overflow-y:auto;padding: 2px 8px 2px 2px;">' +
              back +
              "</div>"
            );
          },
        },
        legend: {
          show: false,
          bottom: "5%",
          left: "center",
          textStyle: {
            color: "rgba(255,255,255,0.8)",
          },
        },
        series: [
          {
            itemStyle: {
              // borderRadius: 4,
              // borderColor: 'transparent',
              // borderWidth: 2
            },
            name: "",
            type: "pie",
            center: ["50%", "50%"],
            radius: ["45%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: false,
                fontSize: 40,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: this.pieData,
          },
        ],
      };
    },
    // 当前场景 计算逻辑为： 若当前时段包含前面饼图中的溢出时段 则当前场景为溢出
    // 若不包含溢出 则检测是否包含拥堵 若包含拥堵 则当前场景为拥堵
    // 都不是 则当前场景为畅通
    sceneName() {
      // 溢出 拥堵 畅通
      if (this.schemeModel?.name) {
        let strArr = this.schemeModel.name.split(" ");
        let timeRange = strArr[strArr.length - 1];
        if (this.pieData.length) {
          // 先判断是否为溢出 优先级为 溢出-拥堵-畅通
          let overflow = this.pieData.find((item) => {
            return item.nameVal === 2;
          });
          if (overflow) {
            let overflowTimeArr = overflow.includes;
            for (let timeItem of overflowTimeArr) {
              let rangeHaveItem = this.checkTimeRange(timeRange, timeItem);
              if (rangeHaveItem) {
                return "溢出";
              }
            }
          }

          let crowd = this.pieData.find((item) => {
            return item.nameVal === 3;
          });
          if (crowd) {
            let crowdTimeArr = crowd.includes;
            for (let timeItem of crowdTimeArr) {
              let rangeHaveItem = this.checkTimeRange(timeRange, timeItem);
              if (rangeHaveItem) {
                return "拥堵";
              }
            }
          }

          // 溢出拥堵都没return 则 返回畅通
          return "畅通";
        }
      }
    },
    propsData() {
      return {
        name: this.schemeModel?.name,
        timeSection: this.middleRes.timeSection,
        schemeName: this.schemeModel?.name,
        endTime: formatDate(this.dateModel[1]),
        startTime: formatDate(this.dateModel[0]),
      };
    },
    currentTimeStart() {
      if (this.schemeModel) {
        let month = this.dateModel[0].getMonth() + 1;
        let year = this.dateModel[0].getFullYear();
        // 判断timeSpan是在当天时间区间还是前一天 并赋值对应的date
        let inToday = this.checkTimeRange(
          `00:00-${this.dateModel[1].getHours()}:${this.dateModel[1].getMinutes()}`,
          this.schemeModel.timeSpan
        );
        let date;
        if (inToday) {
          date = this.dateModel[1].getDate();
        } else {
          date = this.dateModel[0].getDate();
        }
        return `${year}-${month}-${date} ${
          this.schemeModel.timeSpan.split("-")[0]
        }:00`;
      }
    },
    currentTimeEnd() {
      if (this.schemeModel) {
        let month = this.dateModel[1].getMonth() + 1;
        let year = this.dateModel[1].getFullYear();
        // 判断timeSpan是在当天时间区间还是前一天 并赋值对应的date
        let inToday = this.checkTimeRange(
          `00:00-${this.dateModel[1].getHours()}:${this.dateModel[1].getMinutes()}`,
          this.schemeModel.timeSpan
        );
        let date;
        if (inToday) {
          date = this.dateModel[1].getDate();
        } else {
          date = this.dateModel[0].getDate();
        }
        return `${year}-${month}-${date} ${
          this.schemeModel.timeSpan.split("-")[1]
        }:00`;
      }
    },
    compareTimeStart() {
      if (this.compareTimeType === 3) {
        return this.compareTimes[0];
      }
      if (this.schemeModel?.name && this.dateModel?.length) {
        let currentInterval = this.schemeModel?.name.slice(-11);
        let [currentS, currentE] = currentInterval.split("-");
        let month = this.dateModel[0].getMonth() + 1;
        let year = this.dateModel[0].getFullYear();
        // 判断timeSpan是在当天时间区间还是前一天 并赋值对应的date
        let inToday = this.checkTimeRange(
          `00:00-${this.dateModel[1].getHours()}:${this.dateModel[1].getMinutes()}`,
          this.schemeModel.timeSpan
        );
        let date;
        if (inToday) {
          date = this.dateModel[1].getDate();
        } else {
          date = this.dateModel[0].getDate();
        }
        let currentDate = `${year}-${month}-${date}`;
        let fullS = `${currentDate} ${currentS}:00`;
        let fullE = `${currentDate} ${currentE}:00`;
        // 同比
        if (this.compareTimeType === 1) {
          return new Date(new Date(fullS).getTime() - 7 * 24 * 60 * 60 * 1000)
            .toLocaleString()
            .replaceAll("/", "-");
        }
        // 环比
        if (this.compareTimeType === 2) {
          let range = new Date(fullE).getTime() - new Date(fullS).getTime();
          return new Date(new Date(fullS).getTime() - range)
            .toLocaleString()
            .replaceAll("/", "-");
        }
      }
      return "";
    },
    compareTimeEnd() {
      if (this.compareTimeType === 3) {
        return this.compareTimes[1];
      }
      if (this.schemeModel?.name && this.dateModel?.length) {
        let currentInterval = this.schemeModel?.name.slice(-11);
        let [currentS, currentE] = currentInterval.split("-");
        let month = this.dateModel[1].getMonth() + 1;
        let year = this.dateModel[1].getFullYear();
        // 判断timeSpan是在当天时间区间还是前一天 并赋值对应的date
        let inToday = this.checkTimeRange(
          `00:00-${this.dateModel[1].getHours()}:${this.dateModel[1].getMinutes()}`,
          this.schemeModel.timeSpan
        );
        let date;
        if (inToday) {
          date = this.dateModel[1].getDate();
        } else {
          date = this.dateModel[0].getDate();
        }
        let currentDate = `${year}-${month}-${date}`;
        let fullS = `${currentDate} ${currentS}:00`;
        let fullE = `${currentDate} ${currentE}:00`;
        // 同比
        if (this.compareTimeType === 1) {
          return new Date(new Date(fullE).getTime() - 7 * 24 * 60 * 60 * 1000)
            .toLocaleString()
            .replaceAll("/", "-");
        }
        // 环比
        if (this.compareTimeType === 2) {
          return fullS;
        }
      }
      return "";
    },
  },
  mounted() {
    if (time_config.signalEvaluation_lineTime) {
      this.dateModel = [
        new Date(time_config.signalEvaluation_lineTime[0]),
        new Date(time_config.signalEvaluation_lineTime[1]),
      ];
    } else {
      this.dateModel = [
        new Date(new Date().setTime(new Date().getTime() - 3600 * 1000 * 24)),
        new Date(),
      ];
    }
    this.init();
    this.getTableHeight();
    window.onresize = () => {
      return (() => {
        this.getTableHeight();
      })();
    };
  },
  beforeDestroy() {},
  methods: {
    // 判断inner时间区间是否在range时间区间内
    checkTimeRange(range, inner) {
      let [rangeStart, rangeEnd] = range.split("-");
      let [innerStart, innerEnd] = inner.split("-");
      let rangeS = new Date(`2020-01-01 ${rangeStart}`).getTime();
      let rangeE = new Date(`2020-01-01 ${rangeEnd}`).getTime();
      let innerS = new Date(`2020-01-01 ${innerStart}`).getTime();
      let innerE = new Date(`2020-01-01 ${innerEnd}`).getTime();
      if (rangeS <= innerS && rangeE >= innerE) {
        return true;
      }
      return false;
    },
    compareTimeTypeChange() {
      if (this.compareTimeType === 3) return;
      this.getMiddleData();
    },
    detailClick() {
      this.showDialog = true;
    },
    getTableHeight() {
      this.tableHeight1 = String(Math.floor(getFontSizeHeight(150)));
      this.tableHeight2 = String(Math.floor(getFontSizeHeight(160)));
    },

    init(e) {
      if (
        new Date(this.dateModel[1]).getTime() -
          new Date(this.dateModel[0]).getTime() !==
        1000 * 60 * 60 * 24
      ) {
        this.$message.warning("选择时段需要等于24小时");
        return;
      }
      console.log("dateModel", this.dateModel, e);
      this.schemeAnalysisLoading = true;
      // status 1畅通；2溢出；3拥堵
      Promise.all([
        mainlineSchemeAnalysis({
          name: this.areaObj.mainlineName,
          endTime: formatDateTime(this.dateModel[1]),
          startTime: formatDateTime(this.dateModel[0]),
        }),
        mainlineRunAnalyse({
          id: this.areaObj.greenId,
          endDate: formatDateTime(this.dateModel[1]),
          startDate: formatDateTime(this.dateModel[0]),
        }),
      ]).then(async ([res, res1]) => {
        if (res && res.data) {
          const data = res.data.content;
          this.leftRes = data;
          this.schemeAnalysisLoading = false;
          if (data.greenwaveData.length) {
            this.schemeOption = data.greenwaveData
              .map((item) => {
                return { ...item, timeSpan: item.name.slice(-11) };
              })
              .sort((a, b) => {
                let aDate = a.timeSpan.split("-")[0];
                let bDate = b.timeSpan.split("-")[0];
                let aComplate = `2000-01-01 ${aDate}:00`;
                let bComplate = `2000-01-01 ${bDate}:00`;
                return (
                  new Date(aComplate).getTime() - new Date(bComplate).getTime()
                );
              });
            this.schemeModel = this.schemeOption[0];
            this.getDirOption();
            this.tableData.body = this.leftRes.crossData;
            this.reverseBarKey += 1;
            setTimeout(() => {
              this.$refs.mutLineChart.init();
            }, 0);
            let allDuration = res1.data.content;
            // 1畅通；2溢出；3拥堵
            let pieData = allDuration.reduce((a, b) => {
              let aIncludeB = false;
              for (let i = 0; i < a.length; i++) {
                if (a[i].nameVal === b.status) {
                  a[i].value += b.duration;
                  a[i].includes.push(b.timeSpan);
                  aIncludeB = true;
                }
              }
              let color = this.pieColorMap[b.status];
              if (!aIncludeB) {
                a.push({
                  color: color,
                  nameVal: b.status,
                  value: b.duration,
                  includes: [b.timeSpan],
                  name: this.legendMap[b.status],
                });
              }
              return a;
            }, []);
            this.pieData = pieData;
          } else {
            this.schemeOption = [
              {
                timeSpan: "00:00-05:00",
                name: null,
                dirList: [],
              },
            ];
            this.schemeModel = this.schemeOption[0];
            this.getDirOption();
            this.tableData.body = this.leftRes.crossData;
            this.reverseBarKey += 1;
            setTimeout(() => {
              this.$refs.mutLineChart.init();
            }, 0);
            let allDuration = res1.data.content;
            // 1畅通；2溢出；3拥堵
            let pieData = allDuration.reduce((a, b) => {
              let aIncludeB = false;
              for (let i = 0; i < a.length; i++) {
                if (a[i].nameVal === b.status) {
                  a[i].value += b.duration;
                  a[i].includes.push(b.timeSpan);
                  aIncludeB = true;
                }
              }
              let color = this.pieColorMap[b.status];
              if (!aIncludeB) {
                a.push({
                  color: color,
                  nameVal: b.status,
                  value: b.duration,
                  includes: [b.timeSpan],
                  name: this.legendMap[b.status],
                });
              }
              return a;
            }, []);
            this.pieData = pieData;
          }
        }
      });
    },
    async getMiddleData() {
      this.schemeEvaluationLoading = true;
      let [res, resCompare] = await Promise.all([
        mainlineSchemeEvaluate({
          isCityBrain: 1,
          dirName: this.dirModel?.name,
          endTime: this.currentTimeEnd,
          startTime: this.currentTimeStart,
          // endTime: formatDateTime(this.dateModel[1]),
          // startTime: formatDateTime(this.dateModel[0]),
          greenwaveName: this.schemeModel?.name,
          metricName: this.indexModelMiddle,
        }),
        mainlineSchemeEvaluate({
          isCityBrain: 1,
          dirName: this.dirModel?.name,
          endTime: this.compareTimeEnd,
          startTime: this.compareTimeStart,
          greenwaveName: this.schemeModel?.name,
          metricName: this.indexModelMiddle,
        }),
      ]);
      console.log("resCompare", resCompare);
      this.schemeEvaluationLoading = false;
      if (res && res.data) {
        this.middleRes = res.data.content;
      }
      this.middleRes1 = res.data.content;
      this.middleRes2 = resCompare.data.content;
      this.crossDistanceKey += 1;
      this.oneLineChartKey += 1;
      this.detailShow = true;
    },
    // 根据选择路口 绘制对应路口三个指标的折线图 id line1
    async crossClick(crossName) {
      this.rightClickCrossName = crossName;
      await this.getRightData();
    },
    async getRightData() {
      this.crossEvaluationLoading = true;
      const res = await mainlineCrossEvaluate({
        crossIdList: this.areaObj.crossList.map((item) => item.crossId),
        endHourMinute: this.middleRes.timeSection.split("-")[1],
        endTime: formatDateTime(this.dateModel[1]),
        startTime: formatDateTime(this.dateModel[0]),
        greenwaveName: this.schemeModel?.name,
        metricName: this.indexModelRight,
        startHourMinute: this.middleRes.timeSection.split("-")[0],
      });
      this.crossEvaluationLoading = false;
      this.rightRes = res.data.content;
      // this.rightRes 为三个指标数据 处理数据
      console.log("rightRes", this.rightRes);
    },
    getDirOption() {
      this.detailShow = false;
      this.dirOption = this.schemeModel?.dirList.filter(
        (item) => !item.name.includes("非协调方向")
      );
      this.dirModel = this.dirOption[0];
      this.getIndexOption();
      // this.getRightData()
    },
    getIndexOption() {
      // this.indexOption = this.dirModel?.metricList.filter(item => {
      //   return item.isShownLeft
      // })
      this.indexOption2 = this.dirModel?.metricList;
      // this.indexModelMiddle = this.indexOption?.[0].metricName;
      this.indexModelRight =
        this.indexOption2?.[this.indexOption2.length - 1].metricName;
      this.getMiddleData();
    },
  },
};
</script>
<style>
.custom-form-label {
  font-size: 14px;
  text-align: right;
  white-space: nowrap;
}
label {
  margin-bottom: 0;
}
.custom-form-input {
  width: 150px;
}
</style>
<style lang="less" scoped>
::v-deep .el-range-separator {
  color: white;
}
.area-line {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  //padding: 15px;
  //border: 1px solid #009ad8;
  .form3 {
    width: 350px;
  }
  ::v-deep .el-range-input {
    background-color: transparent;
    color: rgba(255, 255, 255, 0.8);
  }

  ::v-deep .el-input__inner {
    color: rgba(255, 255, 255, 0.8);
    background-color: #012b53;
    border: 1px solid #043a6f;
  }

  .checkBoxGroup {
    display: flex;
    margin-top: 20px;
    justify-content: space-around;
    align-items: center;
  }

  .select-box {
    margin-top: 20px;
  }

  .content {
    display: flex;
    height: 50%;
    margin-bottom: 10px;
    justify-content: space-between;

    label {
      color: #666;
    }

    /deep/ .el-table {
      width: 480px !important;
      margin: 0 auto;
      // table-layout: auto;
    }

    .content-item {
      // width: 488px;
      width: 33%;
      flex: 1;
      display: flex;
      flex-direction: column;
      background-color: #0e2b4c;
      .leftPieChartLegend {
        height: 100px;
        display: flex;
        flex-direction: column;
        align-items: center;
        .legendItem {
          height: 30px;
          width: 115px;
          font-size: 16px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          letter-spacing: 1px;
          .legendItemColor {
            width: 12px;
            height: 12px;
            margin-top: 4px;
            margin-right: 10px;
          }
        }
      }
      .content-container {
        padding: 10px;
        flex: 1;
        width: 100%;
        display: flex;
        flex-direction: column;
        background-color: #0e2b4c;
      }

      .select-box1 {
        background-color: #0e2b4c;
        .row_item {
          margin-bottom: 20px;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .row_col {
            display: flex;
            align-items: center;

            .button_left {
              margin-right: 30px;
            }
          }
        }
      }

      .chart {
        flex: 1;
        background-color: #0e2b4c;
        position: relative;
        .liner-border {
          position: absolute;
          left: 50%;
          top: 50%;
          z-index: 4;
          transform: translateX(-50%) translateY(-50%);
          aspect-ratio: 1;
          height: 30%;
          padding: 1px;
          //background-color: #2e4353;
          border-radius: 50%;
          background-image: linear-gradient(
            180deg,
            rgba(94, 187, 206, 0.2),
            rgba(151, 223, 233, 1),
            rgba(94, 187, 206, 0.2)
          );
          .border-inner {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: #0e2b4c;
          }
        }
        .liner-border1 {
          position: absolute;
          left: 50%;
          top: 50%;
          z-index: 3;
          transform: translateX(-50%) translateY(-50%);
          aspect-ratio: 1;
          height: 85%;
          padding: 2px;
          background-color: #2e4353;
          border-radius: 50%;
          //background-image: linear-gradient(180deg, rgba(94, 187, 206, 0.20), rgba(151, 223, 233, 1), rgba(94, 187, 206, 0.20));
          .border-inner1 {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: #0e2b4c;
          }
        }
      }

      &:nth-child(2) {
        margin: 0 20px;
        flex: 1;
      }

      .item-d {
        margin: 15px 0;
      }

      .item-txt {
        height: 35px;
        line-height: 35px;
        padding-left: 10px;
        font-weight: bold;
        background: linear-gradient(to right, #0e3e70, transparent);
        color: rgba(255, 255, 255, 0.8);
        font-size: 18px;
        letter-spacing: 0.2px;
      }

      .cross-distance {
        //height: 50px;
        background-color: #0e2b4c;
        //margin-top: 20px;
        height: auto;
        margin-bottom: 20px;

        /deep/ .name {
          // margin-bottom: 25px !important;
          text-align: center;
          font-size: 14px;
          width: 85px;
          min-width: 85px;
          top: -6px;
        }
      }

      .right-table {
        margin: 10px 0;
      }
    }
  }

  .content-bottom {
    flex: 1;
  }
  .head-timeSelector {
    width: 100%;
    height: 25px;
    display: flex;
    margin-bottom: 10px;
    align-items: center;
    justify-content: flex-end;
  }
}
</style>
