<template>
  <div class="full-w-h"
       style="background-color:#061b33;color: rgba(255,255,255,0.8);display: flex; flex-direction: row">
    <div class="left-container">
      <div class="radio-container">
        <el-radio-group class="groups" @input="dimensionChange" v-model="radio">
          <el-radio :label="0">路口级</el-radio>
          <el-radio :label="1">进口道级</el-radio>
          <el-radio :label="2">转向级</el-radio>
          <el-radio :label="3">车道级</el-radio>
        </el-radio-group>
      </div>
      <div class="options">
        <div class="option"><label class="custom-form-label">时间粒度：</label>
          <el-select @change="timeGranularityChange" class="form1" v-model="timeGranularity" placeholder="请选择">
            <el-option
                v-for="item in timeGranularityOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="option" v-if="radio===1">范围：
          <el-select @change="scopeChange" class="form2" v-model="crossInLevel" placeholder="请选择">
            <el-option
                v-for="item in crossInLevelOptions"
                :key="item"
                :label="item"
                :value="item">
            </el-option>
          </el-select>
        </div>
        <div class="option" v-if="radio===2">范围：
          <el-select @change="scopeChange" class="form2" v-model="turnLevel" placeholder="请选择">
            <el-option
                v-for="item in turnLevelOptions"
                :key="item"
                :label="item"
                :value="item">
            </el-option>
          </el-select>
        </div>
        <div class="option" v-if="radio===3">范围：
          <el-select @change="scopeChange" class="form2" v-model="laneLevel" placeholder="请选择">
            <el-option
                v-for="item in laneLevelOptions"
                :key="item"
                :label="item"
                :value="item">
            </el-option>
          </el-select>
        </div>
        <!--        <div class="option"><label class="custom-form-label">当前时段：</label>-->
        <!--          <el-date-picker class="form3" :clearable="false"-->
        <!--                          v-model="currentTimes" @change="currentChange"-->
        <!--                          value-format="yyyy-MM-dd HH:mm:ss"-->
        <!--                          type="datetimerange">-->
        <!--          </el-date-picker>-->
        <!--        </div>-->
        <div class="option"><label class="custom-form-label">对比时段：</label>
          <el-radio-group @input="compareTimeTypeChange" v-model="compareTimeType">
            <el-radio class="custom-radio" :label="1">同比</el-radio>
            <el-radio class="custom-radio" :label="2">环比</el-radio>
            <el-radio class="custom-radio" :label="3">自定义</el-radio>
          </el-radio-group>
        </div>
        <div class="option" v-if="compareTimeType===3">
          <el-date-picker @change="compareTimeChange" class="form3" :clearable="false"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          v-model="compareTimes"
                          type="datetimerange">
          </el-date-picker>
        </div>
      </div>
      <div class="charts" v-loading="chartsLoading"
           element-loading-text="数据加载中..."
           element-loading-spinner="el-icon-loading"
           element-loading-background="rgba(3, 11, 25, 0.8)">
        <div class="leftPies">
          <div class="pie">
            <div class="pieTitle">溢出时长</div>
            <v-chart class="chart" autoresize :option="overflowPieOption"/>
          </div>
          <div class="pie">
            <div class="pieTitle">空放时长</div>
            <v-chart class="chart" autoresize :option="emptyPieOption"/>
          </div>
        </div>
        <div class="centerLines">
          <div class="line">
            <div>交通流量</div>
            <v-chart class="chart" autoresize :option="trafficFlowOption"/>
          </div>
          <div class="line">
            <div>排队长度</div>
            <v-chart class="chart" autoresize :option="queueLengthOption"/>
          </div>
          <div class="line">
            <div>平均速度</div>
            <v-chart class="chart" autoresize :option="averageSpeedOption"/>
          </div>
          <div class="line">
            <div>停车次数</div>
            <v-chart class="chart" autoresize :option="stopNumberOption"/>
          </div>
        </div>
      </div>
    </div>
    <div class="right-container" style="flex: 1;height: 100%; ">
      <div class="cross-scheme-title">路口方案</div>
      <div class="rightScheme">
        <div class="schemeCross">
          <div style="flex: 1">
            <CrossHint style="border: 1px solid #163158" :crossData="cross" type="crossConfig"/>
          </div>
        </div>
        <div class="schemeLine">
          <div class="currentScheme scheme">
            <div class="schemeTitle">当前时段方案</div>
            <time-config-progress
                ref="timeConfigProgress1"
                class="schemeProgress"
                type="planConfig"
                :allData="planActive.ringList"
            />
          </div>
          <div class="compareScheme scheme">
            <div class="schemeTitle">对比时段方案</div>
            <time-config-progress
                ref="timeConfigProgress2"
                class="schemeProgress"
                type="planConfig"
                :allData="planActive.ringList"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CrossHint from "@/views/signalEvaluation/rightIndex/crossComponents/evaComponents/CrossHint.vue";
import TimeConfigProgress
  from "@/views/signalEvaluation/rightIndex/crossComponents/evaComponents/timeConfigProgress.vue";
import {api_planList} from "@/common/api/planManage";
import {api_querySchemeOpt} from "@/common/api/homepageSignal";
import {bottomCurve, bottomMenu, crossEvaluate} from "@/common/api/signalEvaluation";
import {getFontSize} from "@/config/holo/fontSize";

export default {
  name: 'evaluationIndicators',
  components: {TimeConfigProgress, CrossHint},
  props: ['cross', 'currentTimes'],
  data() {
    return {
      chartsLoading: true,
      overflowData: [],
      emptyData: [],
      trafficFlowCur: [],
      trafficFlowCom: [],
      queueLengthCur: [],
      queueLengthCom: [],
      averageSpeedCur: [],
      averageSpeedCom: [],
      stopNumberCur: [],
      stopNumberCom: [],
      // 路口级 0 进口道级 1 转向级 2 车道级 3
      radio: 0,
      timeGranularityOptions: [
        {label: '5min', value: 5},
        {label: '15min', value: 15},
        {label: '30min', value: 30},
        {label: '1h', value: 60},
      ],
      timeGranularity: 5, //时间粒度
      // 同比 1 环比 2 自定义 3
      compareTimeType: 1,
      compareTimes: ['', ''],//对比时段
      crossInLevel: '',//进口道值
      crossInLevelOptions: [],
      turnLevel: '',//转向值
      turnLevelOptions: [],
      laneLevel: '',//车道值
      laneLevelOptions: [],
      planActive: {},
      charts: {},
      colors: ['#178fff', '#ff8101'],
      pieColors: ['#00bdd0', '#1f93ff'],
    }
  },
  computed: {

    overflowPieOption() {
      return {
        color: this.pieColors,
        tooltip: {
          trigger: 'item',
          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)',
          icon: 'circle',
          bottom: '3%',
          left: 'center',
          textStyle: {
            color: 'rgba(255,255,255,0.9)',
          }
        },
        series: [
          {
            name: '',
            type: 'pie',
            center: ['50%', '45%'],
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: false,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            itemStyle: {
              borderRadius: '5%',
            },
            labelLine: {
              show: false
            },
            data: this.overflowData
          }
        ]
      }
    },
    emptyPieOption() {
      return {
        color: this.pieColors,
        tooltip: {
          trigger: 'item',
          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)',
          icon: 'circle',
          bottom: '3%',
          left: 'center',
          textStyle: {
            color: 'rgba(255,255,255,0.9)',
          }
        },
        series: [
          {
            itemStyle: {
              borderRadius: '5%'
            },
            name: '',
            type: 'pie',
            center: ['50%', '45%'],
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: false,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.emptyData
          }
        ]
      }
    },
    trafficFlowOption() {
      let series = []
      let curS = this.trafficFlowCur.map(item => {
        return item.value
      })
      let comS = this.trafficFlowCom.map(item => {
        return item.value
      })
      let xData = this.trafficFlowCur.map(item => {
        return item.metricTime
      })
      let xData1 = this.trafficFlowCom.map(item => {
        return item.metricTime
      })
      let ifTwoXAxis = [2, 3].includes(this.compareTimeType)
      series.push({
        name: '当前时段',
        type: 'line',
        data: curS,
        symbol: 'none',
        smooth: true,
        xAxisIndex: 0,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(
              0,
              1,
              0,
              0,
              [
                {
                  offset: 0,
                  color: "transparent", // 100% 处的颜色
                },
                {
                  offset: 1,
                  color: this.colors[0], // 0% 处的颜色
                },
              ],
              false
          ),
        },
        lineStyle: {
          color: this.colors[0]
        }
      }, {
        name: '对比时段',
        type: 'line',
        symbol: 'none',
        smooth: true,
        data: comS,
        xAxisIndex: ifTwoXAxis ? 1 : 0,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(
              0,
              1,
              0,
              0,
              [
                {
                  offset: 0,
                  color: "transparent", // 100% 处的颜色
                },
                {
                  offset: 1,
                  color: this.colors[1], // 0% 处的颜色
                },
              ],
              false
          ),
        },
        lineStyle: {
          color: this.colors[1]
        }
      })
      let xAxis = ifTwoXAxis ? [
        {
          type: 'category',
          boundaryGap: false,
          data: xData,
        },
        {
          type: 'category',
          boundaryGap: false,
          data: xData1,
        }
      ] : {
        type: 'category',
        boundaryGap: false,
        data: xData,
      }
      return {
        color: this.colors,
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0,0,0,0.8)',
          borderWidth: 0,
          textStyle: {
            fontSize: getFontSize(12),
            color: 'white',
          },
          confine: true,
          formatter: (params) => {
            if (params && params.length) {
              let res = ''
              for(let item of params){
                let date = ''
                if(item.seriesName === '当前时段'){
                  date = this.currentTimeStart.split(' ')[0]
                }else{
                  date = this.compareTimeStart.split(' ')[0]
                }
                res += `<p>${date} ${item.name}</p><p><span style="display: inline-block;width:10px;height:10px;margin-right: 5px;border-radius: 50%;background-color: ${item.color}"></span>${item.seriesName}&nbsp;&nbsp;:&nbsp;&nbsp;${item.value}</p>`
              }
              return '<div>' + res + "</div>";
            }
          },
        },
        legend: {
          inactiveColor: 'rgba(255,255,255,0.7)',
          icon: 'circle',
          itemWidth: 10,
          show: true,
          right: 0,
          textStyle: {
            color: 'rgba(255,255,255,0.9)',
          }
        },
        grid: {
          top: 25,
          left: 0,
          right: 0,
          bottom: 0,
          containLabel: true
        },
        xAxis: xAxis,
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.2)'
            }
          }
        },
        series: series
      }
    },
    queueLengthOption() {
      let series = []
      let curS = this.queueLengthCur.map(item => {
        return item.value
      })
      let comS = this.queueLengthCom.map(item => {
        return item.value
      })
      let xData = this.queueLengthCur.map(item => {
        return item.metricTime
      })
      let xData1 = this.queueLengthCom.map(item => {
        return item.metricTime
      })
      let ifTwoXAxis = [2, 3].includes(this.compareTimeType)
      series.push({
        name: '当前时段',
        type: 'line',
        symbol: 'none',
        smooth: true,
        data: curS,
        xAxisIndex: 0,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(
              0,
              1,
              0,
              0,
              [
                {
                  offset: 0,
                  color: "transparent", // 100% 处的颜色
                },
                {
                  offset: 1,
                  color: this.colors[0], // 0% 处的颜色
                },
              ],
              false
          ),
        },
        lineStyle: {
          color: this.colors[0]
        }
      }, {
        name: '对比时段',
        type: 'line',
        symbol: 'none',
        smooth: true,
        data: comS,
        xAxisIndex: ifTwoXAxis ? 1 : 0,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(
              0,
              1,
              0,
              0,
              [
                {
                  offset: 0,
                  color: "transparent", // 100% 处的颜色
                },
                {
                  offset: 1,
                  color: this.colors[1], // 0% 处的颜色
                },
              ],
              false
          ),
        },
        lineStyle: {
          color: this.colors[1]
        }
      })
      let xAxis = ifTwoXAxis ? [
        {
          type: 'category',
          boundaryGap: false,
          data: xData,
        },
        {
          type: 'category',
          boundaryGap: false,
          data: xData1,
        }
      ] : {
        type: 'category',
        boundaryGap: false,
        data: xData,
      }
      return {
        color: this.colors,
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0,0,0,0.8)',
          borderWidth: 0,
          textStyle: {
            fontSize: getFontSize(12),
            color: 'white',
          },
          confine: true,
          formatter: (params) => {
            if (params && params.length) {
              let res = ''
              for(let item of params){
                let date = ''
                if(item.seriesName === '当前时段'){
                  date = this.currentTimeStart.split(' ')[0]
                }else{
                  date = this.compareTimeStart.split(' ')[0]
                }
                res += `<p>${date} ${item.name}</p><p><span style="display: inline-block;width:10px;height:10px;margin-right: 5px;border-radius: 50%;background-color: ${item.color}"></span>${item.seriesName}&nbsp;&nbsp;:&nbsp;&nbsp;${item.value}</p>`
              }
              return '<div>' + res + "</div>";
            }
          },
        },
        legend: {
          icon: 'circle',
          inactiveColor: 'rgba(255,255,255,0.7)',
          show: true,
          right: 0,
          textStyle: {
            color: 'rgba(255,255,255,0.9)',
          },
          itemWidth: 10
        },
        grid: {
          top: 25,
          left: 0,
          right: 0,
          bottom: 0,
          containLabel: true
        },
        xAxis: xAxis,
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.2)'
            }
          }
        },
        series: series
      };
    },
    averageSpeedOption() {
      let series = []
      let curS = this.averageSpeedCur.map(item => {
        return item.value
      })
      let comS = this.averageSpeedCom.map(item => {
        return item.value
      })
      let xData = this.averageSpeedCur.map(item => {
        return item.metricTime
      })
      let xData1 = this.averageSpeedCom.map(item => {
        return item.metricTime
      })
      let ifTwoXAxis = [2, 3].includes(this.compareTimeType)
      series.push({
        name: '当前时段',
        type: 'line',
        data: curS,
        symbol: 'none',
        smooth: true,
        xAxisIndex: 0,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(
              0,
              1,
              0,
              0,
              [
                {
                  offset: 0,
                  color: "transparent", // 100% 处的颜色
                },
                {
                  offset: 1,
                  color: this.colors[0], // 0% 处的颜色
                },
              ],
              false
          ),
        },
        lineStyle: {
          color: this.colors[0]
        }
      }, {
        name: '对比时段',
        type: 'line',
        symbol: 'none',
        smooth: true,
        data: comS,
        xAxisIndex: ifTwoXAxis ? 1 : 0,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(
              0,
              1,
              0,
              0,
              [
                {
                  offset: 0,
                  color: "transparent", // 100% 处的颜色
                },
                {
                  offset: 1,
                  color: this.colors[1], // 0% 处的颜色
                },
              ],
              false
          ),
        },
        lineStyle: {
          color: this.colors[1]
        }
      })
      let xAxis = ifTwoXAxis ? [
        {
          type: 'category',
          boundaryGap: false,
          data: xData,
        },
        {
          type: 'category',
          boundaryGap: false,
          data: xData1,
        }
      ] : {
        type: 'category',
        boundaryGap: false,
        data: xData,
      }
      return {
        color: this.colors,
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0,0,0,0.8)',
          borderWidth: 0,
          textStyle: {
            fontSize: getFontSize(12),
            color: 'white',
          },
          confine: true,
          formatter: (params) => {
            if (params && params.length) {
              let res = ''
              for(let item of params){
                let date = ''
                if(item.seriesName === '当前时段'){
                  date = this.currentTimeStart.split(' ')[0]
                }else{
                  date = this.compareTimeStart.split(' ')[0]
                }
                res += `<p>${date} ${item.name}</p><p><span style="display: inline-block;width:10px;height:10px;margin-right: 5px;border-radius: 50%;background-color: ${item.color}"></span>${item.seriesName}&nbsp;&nbsp;:&nbsp;&nbsp;${item.value}</p>`
              }
              return '<div>' + res + "</div>";
            }
          },
        },
        legend: {
          icon: 'circle',
          itemWidth: 10,
          inactiveColor: 'rgba(255,255,255,0.7)',
          show: true,
          right: 0,
          textStyle: {
            color: 'rgba(255,255,255,0.9)',
          }
        },
        grid: {
          top: 25,
          left: 0,
          right: 0,
          bottom: 0,
          containLabel: true
        },
        xAxis: xAxis,
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.2)'
            }
          }
        },
        series: series
      };
    },
    stopNumberOption() {
      let series = []
      let curS = this.stopNumberCur.map(item => {
        return item.value
      })
      let comS = this.stopNumberCom.map(item => {
        return item.value
      })
      let xData = this.stopNumberCur.map(item => {
        return item.metricTime
      })
      let xData1 = this.stopNumberCom.map(item => {
        return item.metricTime
      })
      let ifTwoXAxis = [2, 3].includes(this.compareTimeType)
      series.push({
        name: '当前时段',
        type: 'line',
        data: curS,
        symbol: 'none',
        smooth: true,
        xAxisIndex: 0,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(
              0,
              1,
              0,
              0,
              [
                {
                  offset: 0,
                  color: "transparent", // 100% 处的颜色
                },
                {
                  offset: 1,
                  color: this.colors[0], // 0% 处的颜色
                },
              ],
              false
          ),
        },
        lineStyle: {
          color: this.colors[0]
        }
      }, {
        name: '对比时段',
        type: 'line',
        data: comS,
        symbol: 'none',
        smooth: true,
        xAxisIndex: ifTwoXAxis ? 1 : 0,

        areaStyle: {
          color: new echarts.graphic.LinearGradient(
              0,
              1,
              0,
              0,
              [
                {
                  offset: 0,
                  color: "transparent", // 100% 处的颜色
                },
                {
                  offset: 1,
                  color: this.colors[1], // 0% 处的颜色
                },
              ],
              false
          ),
        },
        lineStyle: {
          color: this.colors[1]
        }
      })
      let xAxis = ifTwoXAxis ? [
        {
          type: 'category',
          boundaryGap: false,
          data: xData,
        },
        {
          type: 'category',
          boundaryGap: false,
          data: xData1,
        }
      ] : {
        type: 'category',
        boundaryGap: false,
        data: xData,
      }
      return {

        color: this.colors,
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0,0,0,0.8)',
          borderWidth: 0,
          textStyle: {
            fontSize: getFontSize(12),
            color: 'white',
          },
          confine: true,
          formatter: (params) => {
            if (params && params.length) {
              let res = ''
              for(let item of params){
                let date = ''
                if(item.seriesName === '当前时段'){
                  date = this.currentTimeStart.split(' ')[0]
                }else{
                  date = this.compareTimeStart.split(' ')[0]
                }
                res += `<p>${date} ${item.name}</p><p><span style="display: inline-block;width:10px;height:10px;margin-right: 5px;border-radius: 50%;background-color: ${item.color}"></span>${item.seriesName}&nbsp;&nbsp;:&nbsp;&nbsp;${item.value}</p>`
              }
              return '<div>' + res + "</div>";
            }
          },
        },
        legend: {
          icon: 'circle',
          inactiveColor: 'rgba(255,255,255,0.7)',
          itemWidth: 10,
          show: true,
          right: 0,
          textStyle: {
            color: 'rgba(255,255,255,0.9)',
          }
        },
        grid: {
          top: 25,
          left: 0,
          right: 0,
          bottom: 0,
          containLabel: true
        },
        xAxis: xAxis,
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.2)'
            }
          }
        },
        series: series
      }
    },

    currentTimeStart() {
      return this.currentTimes[0] || ''
    },
    currentTimeEnd() {
      return this.currentTimes[1] || ''
    },
    compareTimeStart() {
      if (this.currentTimes[0]) {
        if (this.compareTimeType === 3) {
          return this.compareTimes[0]
        }
        // 同比
        if (this.compareTimeType === 1) {
          return new Date(new Date(this.currentTimes[0]).getTime() - 7 * 24 * 60 * 60 * 1000).toLocaleString().replaceAll('/', '-')
        }
        // 环比
        if (this.compareTimeType === 2) {
          let range = new Date(this.currentTimes[1]).getTime() - new Date(this.currentTimes[0]).getTime()
          return new Date(new Date(this.currentTimes[0]).getTime() - range).toLocaleString().replaceAll('/', '-')
        }
      }
      return ''
    },
    compareTimeEnd() {
      if (this.currentTimes[0]) {
        if (this.compareTimeType === 3) {
          return this.compareTimes[1]
        }
        // 同比
        if (this.compareTimeType === 1) {
          return new Date(new Date(this.currentTimes[1]).getTime() - 7 * 24 * 60 * 60 * 1000).toLocaleString().replaceAll('/', '-')
        }
        // 环比
        if (this.compareTimeType === 2) {
          return this.currentTimes[0]
        }
      }
      return ''
    },
  },
  mounted() {
    this.getSchemeData()
    this.getOverflowEmpty()
    this.getLines()
  },
  watch: {
    cross: {
      handler(newVal) {
        this.$nextTick(() => {
          this.getSchemeData()
          this.getOverflowEmpty()
          this.getLines()
        })
      },
      deep: true
    }
  },
  methods: {
    // 选择维度变化
    dimensionChange() {
      if ([1, 2, 3].includes(this.radio)) {
        bottomMenu({
          crossId: this.cross.crossId,
          scope: this.radio
        }).then(res => {
          if (this.radio === 1) {
            this.crossInLevelOptions = res.data.content
            this.crossInLevel = res.data.content[0]
          }
          if (this.radio === 2) {
            this.turnLevelOptions = res.data.content
            this.turnLevel = res.data.content[0]
          }
          if (this.radio === 3) {
            this.laneLevelOptions = res.data.content
            this.laneLevel = res.data.content[0]
          }
          this.$nextTick(() => {
            this.getLines()
          })
        })
      } else {
        this.getLines()
      }
    },
    // 当前时间变化
    currentChange(e) {
      let start = `${new Date(this.currentTimes[0]).getFullYear()}${new Date(this.currentTimes[0]).getMonth() + 1}${new Date(this.currentTimes[0]).getDate()}`
      let end = `${new Date(this.currentTimes[1]).getFullYear()}${new Date(this.currentTimes[1]).getMonth() + 1}${new Date(this.currentTimes[1]).getDate()}`
      if (start !== end) {
        this.$message.warning('不允许跨天查询，请重新选择时间！')
      } else {
        this.getLines()
        this.getOverflowEmpty()
      }
    },
    // 对比时段变化
    compareTimeChange() {
      let start = `${new Date(this.compareTimes[0]).getFullYear()}${new Date(this.compareTimes[0]).getMonth() + 1}${new Date(this.compareTimes[0]).getDate()}`
      let end = `${new Date(this.compareTimes[1]).getFullYear()}${new Date(this.compareTimes[1]).getMonth() + 1}${new Date(this.compareTimes[1]).getDate()}`
      if (start !== end) {
        this.$message.warning('不允许跨天查询，请重新选择时间！')
      } else {
        this.getLines()
        this.getOverflowEmpty()
      }
    },
    // 时间粒度变化
    timeGranularityChange() {
      this.getLines()
    },
    // 车道/进口等变化
    scopeChange() {
      this.getLines()
    },
    // 对比时段类型变化
    compareTimeTypeChange() {
      if ([1, 2].includes(this.compareTimeType)) {
        this.getLines()
        this.getOverflowEmpty()
      }
    },
    // 获取当前&对比时段四个折线图信息
    async getLines() {
      this.chartsLoading = true
      let currentParam = {
        startTime: this.currentTimeStart,
        endTime: this.currentTimeEnd,
        crossId: this.cross.crossId,
        minutes: this.timeGranularity,
        scope: this.radio,
        scopeList: [],
      }
      let compareParam = {
        startTime: this.compareTimeStart,
        endTime: this.compareTimeEnd,
        crossId: this.cross.crossId,
        minutes: this.timeGranularity,
        scope: this.radio,
        scopeList: [],
      }
      // 进口道级/转向级/车道级 参数
      if ([1, 2, 3].includes(this.radio)) {
        let scopeList
        if (this.radio === 1) {
          scopeList = [this.crossInLevel]
        }
        if (this.radio === 2) {
          scopeList = [this.turnLevel]
        }
        if (this.radio === 3) {
          scopeList = [this.laneLevel]
        }
        currentParam = Object.assign({}, currentParam, {scopeList: scopeList})
        compareParam = Object.assign({}, compareParam, {scopeList: scopeList})
      }
      Promise.all([
        bottomCurve(Object.assign({}, currentParam, {metricCode: '交通流量'})),
        bottomCurve(Object.assign({}, compareParam, {metricCode: '交通流量'})),

        bottomCurve(Object.assign({}, currentParam, {metricCode: '最大排队长度'})),
        bottomCurve(Object.assign({}, compareParam, {metricCode: '最大排队长度'})),

        bottomCurve(Object.assign({}, currentParam, {metricCode: '平均速度'})),
        bottomCurve(Object.assign({}, compareParam, {metricCode: '平均速度'})),

        bottomCurve(Object.assign({}, currentParam, {metricCode: '停车次数'})),
        bottomCurve(Object.assign({}, compareParam, {metricCode: '停车次数'})),
      ]).then(([res1, res2, res3, res4, res5, res6, res7, res8]) => {
        this.chartsLoading = false;
        [this.trafficFlowCur, this.trafficFlowCom] = [res1.data.content, res2.data.content];
        [this.queueLengthCur, this.queueLengthCom] = [res3.data.content, res4.data.content];
        [this.averageSpeedCur, this.averageSpeedCom] = [res5.data.content, res6.data.content];
        [this.stopNumberCur, this.stopNumberCom] = [res7.data.content, res8.data.content];
      })
    },
    // 获取当前&对比时段两饼图信息
    getOverflowEmpty() {
      let currentParam = {
        startDate: this.currentTimeStart,
        endDate: this.currentTimeEnd,
        crossId: this.cross.crossId
      }
      let compareParam = {
        startDate: this.compareTimeStart,
        endDate: this.compareTimeEnd,
        crossId: this.cross.crossId
      }
      Promise.all([crossEvaluate(currentParam), crossEvaluate(compareParam)]).then(([res1, res2]) => {
        this.refreshPies(res1.data.content, res2.data.content)
      })
    },
    refreshPies(cur, com) {
      this.overflowData = [
        {value: cur.spilloverSum, name: '当前时段'},
        {value: com.spilloverSum, name: '对比时段'},
      ]
      this.emptyData = [
        {value: cur.emptyPhaseSum, name: '当前时段'},
        {value: com.emptyPhaseSum, name: '对比时段'},
      ]
    },
    // 获取右下角配时方案
    async getSchemeData() {
      const res = await api_planList({crossId: this.cross.crossId});
      console.log('方案...', res)
      if (res && res.data) {
        this.schemeOption = res.data.content.phaseSchemeList;
        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.$nextTick(() => {
          this.$refs.timeConfigProgress1.initData()
          this.$refs.timeConfigProgress2.initData()
        })
      }
    },
  }
}
</script>

<style lang="less" scoped>
::v-deep .el-radio__inner {
  background-color: rgba(255, 255, 255, 0.8);
}

::v-deep .el-radio__label {
  color: rgba(255, 255, 255, 0.8);
}

::v-deep .el-input__inner {
  background-color: transparent;
  border: 1px solid #04376a;
  color: rgba(255, 255, 255, 0.8);
}

::v-deep .el-range-input {
  background-color: transparent;
  color: rgba(255, 255, 255, 0.8);
}

::v-deep .custom-radio {
  margin-right: 15px;
}

.leftPies {
  width: 250px;
  height: 100%;
  margin-right: 10px;

  .pie {
    height: calc(50% - 10px);
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;

    .pieTitle {
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      background-color: #042947;
    }

    .chart {
      background-color: #05203b;
    }
  }
}

.left-container {
  width: 70%;
  height: calc(100% - 10px);
  display: flex;
  flex-direction: column;
  background-color: #061b33;
  margin-right: 10px;
  margin-top: 10px;

}

.centerLines {
  flex: 1;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;

  .line {
    width: 49%;
    height: 49%;
    display: flex;
    flex-direction: column;
  }
}

.right-container {
  padding-top: 10px;

  .cross-scheme-title {
    display: flex;
    align-items: center;
    height: 35px;
    width: 100%;
    padding-left: 15px;
    background-image: linear-gradient(to right, #0a3563, transparent);

  }
}

.rightScheme {
  //width: calc(100% - 1150px);
  height: calc(100% - 35px);
  background-color: #061b33;
  width: 100%;
  padding: 8px;

  .schemeCross {
    height: 60%;
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .schemeLine {
    height: 40%;
    width: 100%;

    .scheme {
      height: 50%;
      display: flex;
      flex-direction: column;

      .schemeTitle {
        height: 32px;
        background-image: linear-gradient(to right, #0a3563, transparent);
        width: 100%;
        display: flex;
        align-items: center;
        padding-left: 8px;
        margin-top: 5px;
      }
    }

    .schemeProgress {
      flex: 1;
    }
  }
}

.groups {
  display: flex;
  align-items: center;
  height: 100%;

  ::v-deep label {
    margin-bottom: 0;
  }
}

.charts {
  flex: 1;
  display: flex;
  padding: 0 10px;
  justify-content: space-between;

  .chart {
    //border: 1px solid white;
    flex-grow: 1;
  }
}

.radio-container {
  margin-bottom: 10px;

  display: flex;
  align-items: center;
  height: 35px;
  width: 100%;
  padding-left: 15px;
  background-image: linear-gradient(to right, #0a3563, transparent);
}

.options {
  height: 40px;
  display: flex;
  padding: 0 10px;
  margin-bottom: 10px;
  align-items: center;

  .option {
    white-space: nowrap;
    overflow: hidden;
    margin-right: 10px;
  }

  .form1 {
    width: 100px;
  }

  .form2 {
    width: 120px
  }

  .form3 {
    width: 350px
  }
}
</style>