/**
 * Copyright (c) 2020 kedacom
 * OpenATC is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 * http://license.coscl.org.cn/MulanPSL2
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
 * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 **/
<template>
    <div class="main-patternstatus">
      <!-- rcp模式 -->
      <div v-if="patternType === 'rcp'">
        <div class="ring-first" v-for="(list, index1) in patternRcp" :key="index1">
          <div style="position: relative" :style="{height: '34px',paddingRight: '1px',float: 'left',width:
              ((item.split + (item.sum ? item.sum : 0)) /(item.cycle > cycles ? item.cycle : cycles)) *100 +'%',}"
              v-for="(item, index2) in list" :key="index2">
            <div class="first-1" :style="{ width:
                  (Number(item.greenWidth.replace('%', '')) /
                    Number((((item.split + (item.sum ? item.sum : 0)) /
                  (item.cycle > cycles ? item.cycle : cycles)) * 100 + '%').replace('%', ''))) * 100 + '%', height: '34px',background: '#7ccc66'}">
            </div>
            <el-tooltip placement="top-start" effect="light">
                <div v-if="item.id" slot="content">P{{ item.id }}:{{ item.split }}</div>
                <div v-if="item.id" style="cursor: pointer">
                <div style="cursor: pointer">
                  <div class="ring-phase" style="float: unset">
                    <xdrdirselector
                      v-if="item.direction && item.direction.length > 0"
                      Width="60px"
                      Height="60px"
                      :showlist="item.direction"
                    ></xdrdirselector>
                      </div>
                    </div>
                  <div
                    class="box"
                    style="position: absolute; width:40px; left: 40px; top: 5px"
                  >
                    <div class="ring-nums">P{{ item.id }}:{{ item.split }}</div>
                  </div>
                </div>
              </el-tooltip>
          </div>
      </div>
      </div>
      <!-- 环模式true -->
      <div v-if="(this.contrloType === 'ring' || !this.contrloType) && patternType !== 'rcp'">
        <div class="ring-first" v-for="(list, index1) in patternInfo" :key="index1">
          <draggable :move="move" @end="endDrag(index1)" :disabled="isMove" :list="list">
            <div class="cell-click-area" @click="cellClick(item.id)" style="position: relative;" :style="{'height': '35px','float':'left','width':((item.split+(item.sum?item.sum:0)) / (max?max:item.cycle) * 100) + '%'}"  v-for="(item,index2) in list" :key="index2" :class="item.mode === 7 ? 'direction' : isBorder ? 'hovercell' : ''">
              <div class="first-1" :class="item.mode === 8 ? 'mask' : item.mode === 9 ? 'yellowClass' : ''" :style="{'width':Number(item.greenWidth.replace('%', ''))/Number((((item.split+(item.sum?item.sum:0)) / (max?max:item.cycle) * 100) + '%').replace('%', ''))*100+'%','height':'34px','background':'#7ccc66'}">
                <el-tooltip placement="top-start" effect="light">
                  <div slot="content">{{$t('openatccomponents.phase.phase')}}{{item.id}}:{{item.split}}</div>
                  <div style="cursor:pointer;">
                    <div class="ring-phase">
                      <!-- <patternwalksvg :showWalk="item.peddirection" :Width="'32'" :Height="'34'"></patternwalksvg> -->
                      <xdrdirselector  Width="60px" Height="60px" Widths="50px" Heights="50px" :showlist="item.direction"></xdrdirselector>
                    </div>
                    <div v-if="isShowTip" class="box" style="position: absolute; left:40px; width:40px; top: -1px;z-index:999">
                      <div @click="focusInput(item.id)" class="ring-nums">{{$t('openatccomponents.phase.phase')}}{{item.id}}</div>
                      <div v-if="isMove" class="ring-nums">{{item.split}}</div>
                      <el-input-number
                        v-if="!isMove && !controlStates[item.id]"
                        class="ring-nums"
                        :ref="'inputNumbers' + item.id"
                        size="small"
                        controls-position="right"
                        :controls="false"
                        :min="0"
                        :step="1"
                        v-model.number="item.split"
                        @change="handleEdit(item)"
                        style="width: 42px"
                      ></el-input-number>
                    </div>
                  </div>
                </el-tooltip>
                 <div
                v-if="isShowTip"
                class="boxs"
                style="position: absolute; width:40px;left: 35px; top: 1px;z-index:99999"
              >
              <el-input-number
                  v-if="controlStates[item.id]"
                  :ref="'inputNumbers' + item.id"
                  size="small"
                  :min="0"
                  :step="1"
                  controls-position="right"
                  v-model.number="item.split"
                  @change="handleEdit(item)"
                  style="width: 80px"
                ></el-input-number>
                </div>
                <div style="width:50px;" v-for="(bus,index3) in busPhaseData" :key="index3">
                  <i class="iconfont icon-lukouzhilu" style="position: absolute;top: 8px;left:70px;font-size:12px;color:#454545;" v-if="bus.controltype === 1 && bus.phaseid===item.id"></i>
                  <i class="iconfont icon-BRT" style="position: absolute;top: 8px;left:70px;font-size:12px;color:#454545;" v-if="bus.controltype === 4 && bus.phaseid===item.id"></i>
                  <i class="iconfont icon-xuxiangwei-xin" style="position: absolute;top: 8px;left:70px;font-size:12px;color:#454545;" v-if="bus.controltype === 99 && bus.phaseid===item.id"></i>
                  <i class="iconfont icon-feijidongche" style="position: absolute;top: 8px;left:70px;font-size:12px;color:#454545;" v-if="bus.controltype === 6 && bus.phaseid===item.id"></i>
                  <i class="iconfont icon-gongjiaoche" style="position: absolute;top: 8px;left:70px;font-size:12px;color:#454545;" v-if="bus.controltype === 3 && bus.phaseid===item.id"></i>
                  <i class="iconfont icon-youguidianche" style="position: absolute;top: 8px;left:70px;font-size:12px;color:#454545;" v-if="bus.controltype === 5 && bus.phaseid===item.id"></i>
                </div>
              </div>
              <div class="first-1" :class="item.mode === 8 ? 'mask' : item.mode === 9 ? 'yellowClass' : ''" :style="{'width':Number(item.flashgreen.replace('%', ''))/Number((((item.split+(item.sum?item.sum:0)) / (max?max:item.cycle) * 100).toFixed(3) + '%').replace('%', ''))*100+'%','height':'34px','float':'left','background': 'linear-gradient(to right, #ffffff 50%, #7ccc66 0)','background-size': '4px 100%'}"></div>
              <div class="first-1" :class="item.mode === 8 ? 'mask' : item.mode === 9 ? 'yellowClass' : ''" :style="{'width':Number(item.yellowWidth.replace('%', ''))/Number((((item.split+(item.sum?item.sum:0)) / (max?max:item.cycle) * 100) + '%').replace('%', ''))*100+'%','height':'34px','background':'#f9dc6a'}"></div>
              <div class="first-1" :class="item.mode === 8 ? 'mask' : item.mode === 9 ? 'yellowClass' : ''" :style="{'width':Number(item.redWidth.replace('%', ''))/Number((((item.split+(item.sum?item.sum:0)) / (max?max:item.cycle) * 100).toFixed(3) + '%').replace('%', ''))*100+'%','height':'34px','background':'#f27979'}"></div>
            </div>
          </draggable>
          </div>
        <div v-if="showBarrier">
          <div v-for="(item, index) in barrierList" :key="index + '1'">
            <div class="divider" :style="{'left':item, 'height':barrierHeight}"></div>
          </div>
        </div>
        <div v-show="(this.controlData && this.controlData.curTime && cycle && cycle>0 && this.isControl) || (this.controlData && newCycle && newCycle>0 && this.isControl)">
          <div class="curTimeDiv" :style="{'left':paddingLeft }">{{ timeNumDevide }}</div>
          <div class="curTimeLine" :style="{'left':paddingLeft, 'height':barrierHeight}"></div>
        </div>
      </div>
      <div v-if="this.contrloType === 'stage'" class="ring-first">
        <div v-for="(list, index1) in stageLists" :key="index1">
          <!-- <div> -->
            <div class="first-1" :style="{'width':list.greenWidth,'height':'34px','position':'relative','background':'#7ccc66'}">
                <el-tooltip v-if="list.stageSplit > 0" placement="top-start" effect="light">
                  <div slot="content">
                    <span class="ring-nums" v-for="(pha,index) in list.phases" :key="index">
                      {{$t('openatccomponents.phase.phase')}}{{pha}}
                      </span>
                  </div>
                  <div style="cursor:pointer;">
                    <div class="ring-phase">
                      <!-- <patternwalksvg :showWalk="list.peddirection" :Width="'32'" :Height="'34'"></patternwalksvg> -->
                      <xdrdirselector v-if="list.direction&&list.direction.length>0"  Width="60px" Height="60px" Widths="50px" Heights="50px" :showlist="list.direction"></xdrdirselector>
                    </div>
                    <div class="box" style="position: absolute; left:41px;  width:40px; top:-1px;">
                      <div class="ring-nums">{{$t('openatccomponents.phase.stage')}}{{list.key !== undefined && list.key !== null ? list.key + 1 : 1}}</div>
                      <div class="ring-nums">{{list.stageSplit}}</div>
                    </div>
                    <!-- <div class="box" style="line-height:28px">
                      <span class="ring-nums" v-for="(pha,index) in list.phases" :key="index">
                    P:{{pha}}
                      </span>
                    </div> -->
                  </div>
                </el-tooltip>
              </div>
              <!-- <div class="first-1" :style="{'width':item.flashgreen,'height':'34px','float':'left','background': 'linear-gradient(to right, #ffffff 50%, #7ccc66 0)','background-size': '4px 100%'}"></div> -->
              <div class="first-1" :style="{'width':list.yellowWidth,'height':'34px','background':'#f9dc6a'}"></div>
              <div class="first-1" :style="{'width':list.redWidth,'height':'34px','background':'#f27979'}"></div>
            </div>
            <div v-if="this.controlData && this.controlData.curTime">
            <div class="curTimeDiv" :style="{ left: paddingLefts }">
              {{ timeNumDevides }}
            </div>
            <div
              class="curTimeLine"
              :style="{ left: paddingLefts, height: '56px' }"
            ></div>
          </div>
          </div>
        <!-- </div> -->
      </div>
</template>
<script>
// import patternwalksvg from '../PatternWalkSvg/PatternWalkSvg'
import xdrdirselector from '../XRDDirSelector/XRDDirSelector'
import draggable from 'vuedraggable'
// import PatternWalkSvg from '../IntersectionMap/crossDirection/baseImg/PatternWalkSvg'
import PhaseDataModel from '../IntersectionMap/crossDirection/utils.js'
import CrossDiagramMgr from '../../../EdgeMgr/controller/crossDiagramMgr.js'
export default {
  name: 'pattern-list',
  components: {
    // patternwalksvg,
    draggable,
    xdrdirselector
  },
  data () {
    return {
      barrierHeight: '',
      stageCycle: '',
      barrierList: [],
      controlStates: {},
      barrierArr: [],
      newCycle: this.cycles,
      patternIds: this.patternId,
      newPatterns: [],
      patternRcp: [],
      newList: [],
      isControl: true,
      contrloCycle: 0,
      sidewalkPhaseData: [],
      // controlDatas: this.controlData,
      max: '',
      fixCycle: '',
      curtime: 0,
      stageLists: [],
      busPhaseData: [], // 公交相位数据
      patternInfo: []
    }
  },
  props: {
    isBorder: {
      type: Boolean,
      default: false
    },
    isShowTip: {
      type: Boolean,
      default: true
    },
    stage: {
      type: Array
    },
    cycleChange: {
      type: Boolean,
      default: true
    },
    maxCycle: {
      type: String
    },
    stagesChange: {
      type: Array
    },
    isMove: {
      type: Boolean,
      default: true
    },
    controlPhase: {
      type: Object
    },
    patternType: {
      type: String
    },
    contrloType: {
      type: String
    },
    phaseList: {
      type: Array
    },
    patternList: {
      type: Array
    },
    showBarrier: {
      type: Boolean,
      default: false
    },
    allPatternList: {
      type: Array
    },
    localPatternList: {
      type: Array
    },
    controlData: {
      type: Object
    },
    showCondition: {
      type: Boolean,
      default: false
    },
    cycle: {
      type: Number
    },
    agentId: {
      type: String
    },
    cycles: {
      type: Number
    },
    patternId: {
      type: Number
    },
    patternStatusList: {
      type: Array
    },
    syncTime: {
      type: Number
    }
  },
  computed: {
    paddingLefts () {
      let res = '0%'
      let curPercent = this.curtime / this.stageCycle
      if (curPercent >= 1) {
        curPercent = 1
      }
      res = curPercent * 100 + '%'
      return res
    },
    timeNumDevides () {
      let res = this.curtime
      return res
    },
    paddingLeft () {
      let res = '0%'
      if (this.contrloCycle > 0) {
        let curPercent = this.curtime / (this.fixCycle ? this.fixCycle : this.max ? this.max : this.contrloCycle)
        if (curPercent >= 1) {
          curPercent = 1
        }
        res = curPercent * 100 + '%'
      }
      if (this.cycles > 0) {
        let curPercent = this.curtime / (this.fixCycle ? this.fixCycle : this.max ? this.max : this.contrloCycle)
        if (curPercent >= 1) {
          curPercent = 1
        }
        res = curPercent * 100 + '%'
      }
      return res
    },
    timeNumDevide () {
      if (this.contrloCycle > 0) {
        // let res = (this.contrloCycle - this.syncTime) + '/' + this.contrloCycle
        // let res = this.curtime + '/' + (this.fixCycle ? this.fixCycle : this.max ? this.max : this.contrloCycle)
        let res = this.curtime
        return res
      }
      if (this.cycles > 0) {
        // let res = (this.cycles - this.syncTime) + '/' + this.cycles
        // let res = this.curtime + '/' + (this.fixCycle ? this.fixCycle : this.max ? this.max : this.contrloCycle)
        let res = this.curtime
        return res
      }
    }
  },
  watch: {
    controlPhase: {
      handler: function (val, oldVal) {
        if ((val && val.curTime) || val.curTime === 0) {
          this.curtime = val.curTime
          // if (val.control === 4 || val.control === 16 || val.control === 22) {
          //   this.isControl = false
          // } else {
          //   this.isControl = true
          // }
          this.isControl = true
        }
      },
      // 深度观察监听
      deep: true
    },
    controlData: {
      handler: function (val, oldVal) {
        if (this.contrloType === 'stage') {
          this.getIndexStage()
        }
        // this.controlDatas = this.controlData
        this.getPedPhasePos()
        if (this.localPatternList) {
          this.max = ''
          let idPattern = this.localPatternList.filter(item => item.id === this.controlData.patternid)
          if (idPattern.length === 0 || (this.controlData && this.showCondition)) {
            this.handleTentivePatternData()
          } else {
            this.handlePatternData()
          }
          this.handleBarrierHeight()
        }
        if ((val && val.curTime) || val.curTime === 0) {
          this.curtime = val.curTime
          // if (val.control === 4 || val.control === 16 || val.control === 22) {
          //   this.isControl = false
          // } else {
          //   this.isControl = true
          // }
          this.isControl = true
        }
      },
      // 深度观察监听
      deep: true
    },
    cycleChange: {
      handler: function (val, oldVal) {
        this.getStage()
        this.handleCurrentChange(this.patternStatusList)
        this.handleBarrierHeight()
      },
      // 深度观察监听
      deep: true
    },
    phaseList: {
      handler: function (val, oldVal) {
        this.getPedPhasePos()
        this.getBusPos()
        this.getStage()
        // this.handlePatternData()
      },
      // 深度观察监听
      deep: true
    },
    agentId: {
      handler: function (val, oldVal) {
        this.getBusPos()
      },
      // 深度观察监听
      deep: true
    },
    patternId: {
      handler: function (val, oldVal) {
        this.patternIds = this.patternId
      },
      // 深度观察监听
      deep: true
    },
    cycles: {
      handler: function (val, oldVal) {
        this.newCycle = this.cycles
        if (this.patternType === 'rcp') {
          this.handleRcp(this.patternStatusList)
        }
      },
      // 深度观察监听
      deep: true
    },
    contrloType: {
      handler: function (val, oldVal) {
        if (this.contrloType === 'stage') {
          this.getStage()
        }
      },
      // 深度观察监听
      deep: true
    },
    stagesChange: {
      handler: function (val, oldVal) {
        if (this.contrloType === 'stage') {
          this.getStage()
        }
      },
      // 深度观察监听
      deep: true
    },
    patternStatusList: {
      handler: function (val, oldVal) {
        if (this.patternType === 'rcp') {
          this.handleRcp(this.patternStatusList)
        }
        this.handleBarrierHeight() // 计算屏障高度
        if (this.patternStatusList && this.newCycle) {
          // setTimeout(() => {
          this.handleCurrentChange(this.patternStatusList)
          this.handleBarrierHeight()
          // }, 10)
          // this.handleBarrierHeight()
        }
      },
      // 深度观察监听
      deep: true
    }
  },
   mounted () {
    document.addEventListener('click', this.handleDocumentClick)
  },
  beforeDestroy () {
    document.removeEventListener('click', this.handleDocumentClick)
  },
  created () {
    this.globalParamModel = this.$store.getters.globalParamModel
    if (this.patternStatusList && this.newCycle && !this.controlData) {
      setTimeout(() => {
        this.handleCurrentChange(this.patternStatusList)
        this.handleBarrierHeight()
      }, 400)
    } else if ((this.controlData && this.controlData.patternid === 109) || (this.controlData && this.showCondition) || (this.controlData && this.localPatternList.length === 0)) {
      this.handleTentivePatternData()
    } else {
      this.handlePatternData()
    }
    this.PhaseDataModel = new PhaseDataModel()
    this.CrossDiagramMgr = new CrossDiagramMgr()
    this.getPedPhasePos()
    this.getBusPos()
    if (this.contrloType === 'stage') {
      this.getStage()
    }
    if (this.patternType === 'rcp') {
      this.handleRcp(this.patternStatusList)
    }
  },
  methods: {
    cellClick (itemId) {
      if (this.controlData || this.controlPhase) return
      for (const key in this.controlStates) {
        if (key !== itemId) {
          this.$set(this.controlStates, key, false)
        }
      }
      this.$set(this.controlStates, itemId, !this.controlStates[itemId])
    },
    handleDocumentClick (event) {
      const path = event.composedPath ? event.composedPath() : []
      const clickedInsideCell = path.some(el => {
        return el.classList && (el.classList.contains('cell-click-area') || el.classList.contains('ring-first'))
      })

      if (clickedInsideCell) {
        return
      }
      for (const key in this.controlStates) {
        if (this.controlStates[key]) {
          this.$set(this.controlStates, key, false)
        }
      }
    },
    move (e) {
      // 这里的e表示即将停靠的元素。
      let result = this.barrierArr.filter(item => item.includes(e.relatedContext.element.id))[0]
      if (!result.includes(e.draggedContext.element.id)) {
        return false
      }
    },
    endDrag (index) {
      // 拖动后对原数据排序
      const idIndexMap = {}
      this.patternInfo.forEach((subArray, subArrayIndex) => {
        subArray.forEach((item, index) => {
          idIndexMap[item.id] = { subArrayIndex, index }
        })
      })
      this.patternStatusList.forEach((subArray, subArrayIndex) => {
        if (subArray.length > 0) {
          subArray.sort((aItem, bItem) => {
            const aIndex = idIndexMap[aItem.id] ? idIndexMap[aItem.id].index : Infinity
            const bIndex = idIndexMap[bItem.id] ? idIndexMap[bItem.id].index : Infinity
            return aIndex - bIndex
          })
        }
      })
    },
    focusInput (id) {
      if (!this.isMove) {
        this.$refs['inputNumbers' + id][0].focus()
      }
    },
    handleEdit (val) {
      this.patternStatusList.map(d => {
        d.map(r => {
          if (r.id === val.id) {
            r.value = val.split
          }
        })
      })
      // this.handleCurrentChange(this.patternStatusList)
      this.$emit('handleSplitMove', this.patternId, this.agentId)
    },
    getPedDirection (data) {
      let ped = []
      for (let stg of data) {
        let peddirections = []
        let currPhase = this.phaseList.filter((item) => {
          return item.Index === stg
        })[0]
        if (!currPhase) continue
        if (!currPhase.peddirection) continue
        for (let walk of this.sidewalkPhaseData) {
          for (let ped of currPhase.peddirection) {
            let objs = {}
            objs.name = walk.name
            objs.id = walk.id
            if (ped === walk.id) {
              peddirections.push(objs)
              peddirections = Array.from(new Set(peddirections))
            }
          }
        }
        ped.push(...peddirections)
      }
      return ped
    },
    handleStageDataDerection (data) {
      if (!data) return
      let peddirections = this.getPedDirection(data)
      let stagesTemp = []
      let tempList = []
      for (let stg of data) {
        let directionList = []
        let currPhase = this.phaseList.filter((item) => {
          return item.Index === stg
        })[0]
        if (currPhase !== undefined && currPhase.direction) {
          directionList.push(...currPhase.direction)
          directionList = Array.from(new Set(directionList))
        }
        if (directionList.length === 0) {
          tempList.push({
            id: '',
            color: '#454545',
            peddirection: peddirections
          })
        } else {
          tempList = directionList.map(dir => ({
            id: dir,
            color: '#454545',
            peddirection: peddirections
          }))
        }
        let newTemp = tempList.filter(item => item.id !== '')
        stagesTemp.push(...newTemp)
      }
      console.log(stagesTemp, 'stagesTemp')
      return stagesTemp
    },
    getMaxCycle (pattern) {
      // let rings = pattern.rings
      let maxCycle = 0
      for (let ring of pattern) {
        if (ring.length === 0) continue
        let cycle = 0
        for (let r of ring) {
          if (r.mode === 7) { // 忽略相位不计周期
            continue
          }
          cycle = cycle + r.value
        }
        if (cycle > maxCycle) {
          maxCycle = cycle
        }
      }
      return maxCycle
    },
    getPed (data) {
      let ped = []
      for (let stg of data) {
        let peddirections = []
        let currPhase = this.phaseList.filter((item) => {
          return item.id === stg
        })[0]
        if (!currPhase) return
        // if (!currPhase.peddirection) return
        for (let walk of this.sidewalkPhaseData) {
          if (currPhase.peddirection) {
            for (let ped of currPhase.peddirection) {
              if (stg === walk.phaseid) {
                let obj = {}
                obj.name = walk.name
                obj.id = walk.id
                if (ped === walk.id) {
                  peddirections.push(obj)
                  peddirections = Array.from(new Set(peddirections))
                }
              }
            }
          } else {
            peddirections = []
          }
        }
        ped.push(...peddirections)
      }
      return ped
    },
    handleRcp (val) {
      this.patternRcp = []
      let valSplit = val.map(item => {
        return item.map(val => {
          return val.splitchain
        })
      })
      let splitCycle = valSplit.length > 0 ? valSplit.map(item => {
        return item.length > 0 ? item.reduce((a, b) => {
          return a + b
        }) : 0
      }) : 0
      let cycle = Math.max(...splitCycle)// 每个环的周期最大值
      for (let rings of val) {
        if (rings.length === 0) continue
        let list = []
        for (let ring of rings) {
          if (ring.splitchain === 0) continue
          let obj = {}
          let split = ring.splitchain
          let currPhase = this.stage.filter((item) => {
            return item.Index === ring.phases
          })[0]
          if (!currPhase) return
          obj.direction = this.handleStageDataDerection(currPhase.IncludedPhase)
          obj.split = split
          obj.cycle = cycle
          obj.id = ring.phases
          // if (ring.sum) {
          //   obj.sum = ring.sum
          //   obj.redWidth = (((currPhase.redclear || 0) + ring.sum) / (this.fixCycle ? this.fixCycle : this.max ? this.max : this.newCycle) * 100) + '%'
          // } else {
          //   obj.redWidth = ((currPhase.redclear || 0) / (this.fixCycle ? this.fixCycle : this.max ? this.max : this.newCycle) * 100) + '%'
          // }
          // obj.mode = ring.mode
          obj.greenWidth = (split / (cycle > this.cycles ? cycle : this.cycles)) * 100 + '%'
          // obj.flashgreen = ((currPhase.flashgreen || 0) / (this.fixCycle ? this.fixCycle : this.max ? this.max : this.newCycle) * 100) + '%'
          // obj.yellowWidth = ((currPhase.yellow || 0) / (this.fixCycle ? this.fixCycle : this.max ? this.max : this.newCycle) * 100) + '%'
          // 忽略相位不显示
          // let mode = ring.mode
          // if (mode !== 7) { // 忽略相位不显示
          list.push(obj)
          // }
        }
        this.patternRcp.push(list)
      }
    },
    handleStageData (data) {
      if (!data) return
      let peddirections = this.getPed(data)
      let stagesTemp = []
      let tempList = []
      for (let stg of data) {
        let directionList = []
        let currPhase = this.phaseList.filter((item) => {
          return item.id === stg
        })[0]
        if (currPhase !== undefined && currPhase.direction) {
          directionList.push(...currPhase.direction)
          directionList = Array.from(new Set(directionList))
        }
        if (directionList.length === 0) {
          tempList.push({
            id: '',
            color: '#454545',
            peddirection: peddirections
          })
        } else {
          tempList = directionList.map(dir => ({
            id: dir,
            color: '#454545',
            peddirection: peddirections
          }))
        }
        let newTemp = tempList.filter(item => item.id !== '')
        stagesTemp.push(...newTemp)
      }
      return stagesTemp
    },
    getIndexStage () {
      if (this.localPatternList.length === 0) return
      for (let i = 0; i < this.localPatternList.length; i++) {
        if (this.controlData.patternid === this.localPatternList[i].id) {
          if (!this.localPatternList[i].stagesList) return
          let stageCycleList = this.localPatternList[i].stagesList.map(item => {
            return item.stageSplit ? item.stageSplit : 0
          })
          let stageMaxCyle = stageCycleList.reduce((a, b) => {
            return a + b
          }, 0)
          this.stageCycle = stageMaxCyle
          this.stageLists = this.localPatternList[i].stagesList.map(item => {
            return {
              ...item,
              // peddirection: this.getPed(item.phases ? item.phases : item.stages),
              direction: this.handleStageData(item.phases ? item.phases : item.stages),
              greenWidth: ((item.stageSplit - item.yellow - item.red) / stageMaxCyle * 100).toFixed(3) + '%',
              yellowWidth: (item.yellow / stageMaxCyle * 100).toFixed(3) + '%',
              redWidth: (item.red / stageMaxCyle * 100).toFixed(3) + '%'
            }
          })
        }
      }
    },
    getStage () {
      if (!this.stagesChange) return
      const globalParamModel = this.$store.getters.globalParamModel
      let pattern = this.allPatternList ? this.allPatternList : globalParamModel.getParamsByType('patternList')
      let mapAdd = pattern.map(item => item.stagesList).map(item => {
        return item.map(val => {
          return val.stageSplit ? val.stageSplit : val.split
        })
      })
      let maxCycle = mapAdd.length > 0 ? mapAdd.map(item => {
        return item.length > 0 ? item.reduce((a, b) => {
          return a + b
        }) : 0
      }) : 0
      let stageMaxCyle = Math.max(...maxCycle)// 每个环的周期最大值
      if (!this.cycleChange) {
        let stageCycleList = this.stagesChange.map(item => {
          return item.stageSplit ? item.stageSplit : 0
        })
        stageMaxCyle = stageCycleList.reduce((a, b) => {
          return a + b
        }, 0)
      }
      if (this.maxCycle) {
        stageMaxCyle = this.maxCycle
      }
      this.stageLists = this.stagesChange.map(item => {
        const isZero = item.stageSplit - item.yellow - item.red
        if (isZero <= 0) {
          return {
            ...item,
            // peddirection: this.getPed(item.phases ? item.phases : item.stages),
            direction: this.handleStageData(item.phases),
            greenWidth: (((item.stageSplit - (item.yellow / item.stageSplit) - (item.red / item.stageSplit)) / stageMaxCyle) * 100).toFixed(3) + '%',
            yellowWidth: (((item.yellow / item.stageSplit) / stageMaxCyle) * 100).toFixed(3) + '%',
            redWidth: (((item.red / item.stageSplit) / stageMaxCyle) * 100).toFixed(3) + '%'
          }
        } else {
          return {
            ...item,
            // peddirection: this.getPed(item.phases ? item.phases : item.stages),
            direction: this.handleStageData(item.phases),
            greenWidth: ((item.stageSplit - item.yellow - item.red) / stageMaxCyle * 100).toFixed(3) + '%',
            yellowWidth: (item.yellow / stageMaxCyle * 100).toFixed(3) + '%',
            redWidth: (item.red / stageMaxCyle * 100).toFixed(3) + '%'
          }
        }
      })
    },
    getBusPos () {
      // 公交相位信息
      this.busPhaseData = []
      this.phaseList.forEach((ele, i) => {
        // if (ele.controltype >= 3 && ele.controltype <= 5) {
        // ele.direction.forEach((dir, index) => {
        // 车道相位
        this.busPhaseData.push({
          phaseid: ele.id, // 相位did，用于对应相位状态
          // id: dir, // 接口返回的dir字段，对应前端定义的相位方向id，唯一标识
          // name: this.PhaseDataModel.getBusPhasePos(dir).name,
          controltype: ele.controltype
        })
        // })
        // }
      })
      let result = []
      let obj = {}
      for (var i = 0; i < this.busPhaseData.length; i++) {
        if (!obj[this.busPhaseData[i].phaseid]) {
          result.push(this.busPhaseData[i])
          obj[this.busPhaseData[i].phaseid] = true
        }
      }
      this.busPhaseData = result
    },
    getPedPhasePos () {
      // 行人相位信息
      this.sidewalkPhaseData = []
      this.phaseList.forEach((ele, i) => {
        if (ele.peddirection) {
          ele.peddirection.forEach((dir, index) => {
          // 行人相位
            if (this.PhaseDataModel.getSidePos(dir)) {
              this.sidewalkPhaseData.push({
                key: this.CrossDiagramMgr.getUniqueKey('pedphase'),
                phaseid: ele.id, // 相位id，用于对应相位状态
                id: dir,
                name: this.PhaseDataModel.getSidePos(dir).name
              })
            }
          })
        }
      })
    },
    handleTentivePatternData () {
      if (!this.controlData) return
      this.newList = []
      if (Object.keys(this.controlData).length === 0 || this.phaseList.length === 0) return
      if (!this.controlData.phase) return
      // let cycle = this.controlData.cycle
      if (!this.controlData.rings) return
      let newValue = []
      for (let rings of this.controlData.rings) {
        let phase = this.controlData.phase
        // let list = []
        let obj = {}
        for (let key in rings.sequence) {
          obj[key] = rings.sequence[key]
        }
        let newObj = Object.keys(obj).map(val => ({
          id: obj[val]
        }))
        newValue.push(newObj)
        for (let sequ of rings.sequence) {
          let obj = {}
          obj.id = sequ
          let split = phase.filter((item) => {
            return item.id === sequ
          })[0].split
          let mode = phase.filter((item) => {
            return item.id === sequ
          })[0].mode
          newValue.map(d => {
            d.map(r => {
              if (r.id === sequ) {
                r.value = split
                if (mode === 1) {
                  r.mode = 8
                } else if (mode === 2) {
                  r.mode = 7
                } else if (mode === 3) {
                  r.mode = 9
                } else {
                  r.mode = 2
                }
              }
            })
          })
        }
      }
      this.handleTentative(newValue)
    },
    handleTentative (val) {
      if (val === null || val.length === 0) return
      // 周期以实际的绿信比来计算
      let valSplit = val.map(item => {
        return item.map(val => {
          return val.value + (val.sum ? val.sum : 0)
        })
      })
      let splitCycle = valSplit.length > 0 ? valSplit.map(item => {
        return item.length > 0 ? item.reduce((a, b) => {
          return a + b
        }) : 0
      }) : 0
      let cycle = Math.max(...splitCycle)// 每个环的周期最大值
      this.contrloCycle = cycle
      // 按环序分组
      let ringlength = []
      let ringsequence = val.map(item => {
        if (item.length === 0) return
        ringlength.push(item.length)
        return item.map(k => {
          return k.id
        })
      })
      let newRings = ringsequence.filter(item => item)
      let minLength = Math.min(...ringlength)
      let resultArrs = [] // 环1分组
      let resultArr = [] // 环2分组
      let resultArrThree = [] // 环3分组
      let resultArrFour = [] // 环4分组
      for (let j = 0; j < ringsequence[0].length; j += minLength) {
        resultArrs.push(ringsequence[0].slice(j, j + minLength))
        if (ringsequence[0].length === minLength) {
          resultArrs.push([])
        }
      }
      if (newRings.length > 1) {
        for (let i = 0; i < ringsequence[1].length; i += minLength) {
          resultArr.push(ringsequence[1].slice(i, i + minLength))
        }
        if (ringsequence[2]) {
          for (let k = 0; k < ringsequence[2].length; k += minLength) {
            resultArrThree.push(ringsequence[2].slice(k, k + minLength))
          }
        }
        if (ringsequence[3]) {
          for (let k = 0; k < ringsequence[3].length; k += minLength) {
            resultArrFour.push(ringsequence[3].slice(k, k + minLength))
          }
        }
      }
      this.patternInfo = []
      let currentArr = []
      let newPattern = []
      val.map(i => {
        newPattern.push(...i)
      })
      if (this.phaseList.length === 0) return
      for (let patternStatus of val[0]) {
        // if (patternStatus.mode !== 7) {
        // let concurrent = this.phaseList.filter((item) => {
          //   return item.id === patternStatus.id // patternStatus.id当前相位id concurrent当前相位的并发相位
          // })[0].concurrent// 当前相位的并发相位
        let phaseItem = this.phaseList.find(item => item.id === patternStatus.id)
        if (!phaseItem) {
          // 找不到对应的phase，跳过或者做其他处理
          continue
        }
        let concurrent = phaseItem.concurrent
        if (concurrent) {
          let obj = {
            id: patternStatus.id,
            current: concurrent.sort()
          }
          currentArr.push(obj)
        }
        // }
      }
      if (currentArr.length !== 0) {
        let newCurrent = this.tranform(currentArr)
        // 取没个环与环关系的并集
        let barrierRing1 = []
        let barrierRing2 = []
        let barrierRing3 = []
        let barrierRing4 = []
        let ring1 = [] // 环1与关系1的并集
        for (let h = 0; h < newCurrent.length; h++) {
          let adds = [...new Set(resultArrs[0])].filter(item => newCurrent[h].includes(item))
          ring1.push(adds)
        }
        let ring1s = [] // 环1与关系2的并集
        for (let h = 0; h < newCurrent.length; h++) {
          let addRing1 = [...new Set(resultArrs[1])].filter(item => newCurrent[h].includes(item))
          ring1s.push(addRing1)
        }
        // 双环相位数不等的时候
        if (newRings.length > 1) {
          if (newRings[0].length !== newRings[1].length) {
            for (let h = 0; h < newCurrent.length; h++) {
              let adds = [...new Set(ringsequence[0])].filter(item => newCurrent[h].includes(item))
              ring1.push(adds)
            }
            let ring1s = [] // 环1与关系2的并集
            for (let h = 0; h < newCurrent.length; h++) {
              let addRing1 = [...new Set(ringsequence[1])].filter(item => newCurrent[h].includes(item))
              ring1s.push(addRing1)
            }
          }
        }
        barrierRing1.push(...ring1, ...ring1s)
        let resultList = []
        if (newRings.length > 1) {
          let ring2s = [] // 环2与关系1的并集
          for (let h = 0; h < newCurrent.length; h++) {
            let addRing2 = [...new Set(resultArr[1])].filter(item => newCurrent[h].includes(item))
            ring2s.push(addRing2)
          }
          let ring2 = [] // 环2与关系1的并集
          for (let h = 0; h < newCurrent.length; h++) {
            let add = [...new Set(resultArr[0])].filter(item => newCurrent[h].includes(item))
            ring2.push(add)
          }
          barrierRing2.push(...ring2, ...ring2s)
           // 环3
           let ring3s = [] // 环3与关系1的并集
          for (let h = 0; h < newCurrent.length; h++) {
            let addRing2 = [...new Set(resultArrThree[1])].filter(item => newCurrent[h].includes(item))
            ring3s.push(addRing2)
          }
          let ring3 = [] // 环3与关系1的并集
          for (let h = 0; h < newCurrent.length; h++) {
            let add = [...new Set(resultArrThree[0])].filter(item => newCurrent[h].includes(item))
            ring3.push(add)
          }
          barrierRing3.push(...ring3, ...ring3s)
           // 环4
          let ring4s = [] // 环4与关系1的并集
          for (let h = 0; h < newCurrent.length; h++) {
            let addRing2 = [...new Set(resultArrFour[1])].filter(item => newCurrent[h].includes(item))
            ring4s.push(addRing2)
          }
          let ring4 = [] // 环4与关系1的并集
          for (let h = 0; h < newCurrent.length; h++) {
            let add = [...new Set(resultArrFour[0])].filter(item => newCurrent[h].includes(item))
            ring4.push(add)
          }
          barrierRing4.push(...ring4, ...ring4s)
          for (let k = 0; k < barrierRing1.length; k++) {
            resultList.push(barrierRing1[k].concat(barrierRing2[k]).concat(barrierRing3[k]).concat(barrierRing4[k]))
          }
        }
        let resultLists = resultList.filter(item => item.length !== 0)
        let ringArr = []
        for (let l = 0; l < resultLists.length; l++) {
          for (let d = 0; d < newCurrent.length; d++) {
            if (newCurrent[d].filter(item => resultLists[l].includes(item)).length > 0) {
              ringArr.push({
                data: resultLists[l],
                id: d + 1,
                index: l
              })
            }
          }
        }
        // let ringObj = {}
        // ringArr.forEach(item => {
        //   ringObj[item.index] = {
        //     id: item.id,
        //     index: item.index
        //   }
        // })
        for (var i = 0; i < ringArr.length; i++) {
          for (var j = i + 1; j < ringArr.length; j++) {
            if (ringArr[i].id === ringArr[j].id && ringArr[i].index + 1 === ringArr[j].index) {
              ringArr[i].data = ringArr[i].data.concat(ringArr[j].data)
              ringArr.splice(ringArr.indexOf(ringArr[j].id), 1)
            }
          }
        }
        let resArr = ringArr.map(item => item.data)
        // this.barrierArr = resArr
        let ringTeam = this.step1(this.phaseList, resArr)
        let ringTeams = ringTeam.filter(item => item.length !== 0)
        this.setBarriers(ringTeams, val)
        this.fillGap(ringTeam, val)
        let newPattern = []
        val.map(i => {
          newPattern.push(...i)
        })
        let barrier = this.step2(ringTeams, newPattern)
        let barrierLeft = barrier.map(item => item)
        this.barrierList = barrierLeft.map(j => {
          return ((j / cycle) * 100) + '%'
        })
      }
      // let cycle = this.controlData.cycle
      for (let rings of val) {
        if (rings.length === 0) continue
        let list = []
        for (let ring of rings) {
          if (ring.value === 0) continue
          let obj = {}
          let split = ring.value
          obj.id = ring.id
          // obj.split = split
          // let currPhase = this.phaseList.filter((item) => {
          //   if (item.id === ring.id && item.controltype === 99) {
          //     obj.controltype = item.controltype
          //   }
          //   return item.id === ring.id
          // })[0]
          let currPhase = this.phaseList.find(item => item.id === ring.id)
          if (!currPhase) {
            // 找不到对应的phase，跳过或者做其他处理
            continue
          }
          if (currPhase.controltype === 99) {
            obj.controltype = currPhase.controltype
          }
          if (!currPhase) return
          let peddirections = []
          for (let walk of this.sidewalkPhaseData) {
            if (currPhase.peddirection) {
              for (let ped of currPhase.peddirection) {
                // if (stg === walk.phaseid) {
                let objs = {}
                objs.name = walk.name
                objs.color = 'rgba(48,49,51,0.6)'
                objs.id = walk.id
                if (ped === walk.id) {
                  peddirections.push(objs)
                  peddirections = Array.from(new Set(peddirections))
                }
                // }
              }
            } else {
              peddirections = []
            }
          }
          if (ring.desc && ring.desc.length > 0) {
            obj.direction = ring.desc.map(item => { // 虚相位desc为空
              return {
                id: item.id,
                color: '#303133'
              }
            })
          } else {
            if (currPhase.direction && currPhase.direction.length > 0) {
              obj.direction = currPhase.direction.map(item => {
                return {
                  id: item,
                  peddirection: peddirections,
                  color: '#303133'
                }
              })
            } else {
              obj.direction = [
                {
                  id: '',
                  color: '#303133',
                  peddirection: peddirections
                }
              ]
            }
          }
          obj.split = split
          obj.cycle = cycle
          if (ring.sum) {
            obj.sum = ring.sum
            obj.redWidth = (((currPhase.redclear || 0) + ring.sum) / (this.max ? this.max : cycle) * 100) + '%'
          } else {
            obj.redWidth = ((currPhase.redclear || 0) / (this.max ? this.max : cycle) * 100) + '%'
          }
          obj.flashgreen = (((currPhase.flashgreen || 0) || 0) / (this.max ? this.max : cycle) * 100) + '%'
          obj.yellowWidth = ((currPhase.yellow || 0) / (this.max ? this.max : cycle) * 100) + '%'
          obj.greenWidth = ((split - (currPhase.redclear || 0) - (currPhase.yellow || 0) - (currPhase.flashgreen || 0)) / (this.max ? this.max : cycle) * 100) + '%'
          // 忽略相位不显示
          // let mode = ring.mode
          // if (mode !== 7) { // 忽略相位不显示
          list.push(obj)
          // }
        }
        this.patternInfo.push(list)
      }
    },
    handlePatternData () {
      if (!this.controlData) return
      // this.newList = []
      if (Object.keys(this.controlData).length === 0 || this.phaseList.length === 0) return
      if (!this.controlData.phase) return
      if (!this.controlData.rings) return
      let nowPattern = this.localPatternList.filter(item => {
        return item.id === this.controlData.patternid
      })[0].rings
      // 信号机忽略相位，更新最新的相位信息
      let filterPattern = []
      for (let i of nowPattern) {
        for (let j of this.controlData.rings) {
          let filterSequence = i.filter(item => j.sequence.includes(item.id))
          if (filterSequence.length > 0) {
            filterPattern.push(filterSequence)
          }
        }
      }
      for (let rings of this.controlData.rings) {
        for (let sequ of rings.sequence) {
          let split = this.controlData.phase.filter((item) => {
            return item.id === sequ
          })[0].split
          filterPattern.map(d => {
            return d.map(r => {
              if (r.id === sequ) {
                r.value = split
              }
            })
          })
        }
      }
      this.handleOverViewChange(filterPattern)
    },
    handleBarrierHeight () { // 屏障高度
      if (!this.patternInfo) return
      let patternLength = this.patternInfo.length
      this.barrierHeight = (patternLength * 35 + 21) + 'px'
    },
    handleOverViewChange (val) {
      if (val === null || val.length === 0) return
      // 周期以实际的绿信比来计算
      let valSplit = val.map(item => {
        return item.map(val => {
          return val.value + (val.sum ? val.sum : 0)
        })
      })
      let splitCycle = valSplit.length > 0 ? valSplit.map(item => {
        return item.length > 0 ? item.reduce((a, b) => {
          return a + b
        }) : 0
      }) : 0
      let cycle = Math.max(...splitCycle)// 每个环的周期最大值
      this.contrloCycle = cycle
      // 按环序分组
      let ringlength = []
      let ringsequence = val.map(item => {
        if (item.length === 0) return
        ringlength.push(item.length)
        return item.map(k => {
          return k.id
        })
      })
      let newRings = ringsequence.filter(item => item)
      let minLength = Math.min(...ringlength)
      let resultArrs = [] // 环1分组
      let resultArr = [] // 环2分组
      let resultArrThree = [] // 环3分组
      let resultArrFour = [] // 环4分组
      for (let j = 0; j < ringsequence[0].length; j += minLength) {
        resultArrs.push(ringsequence[0].slice(j, j + minLength))
        if (ringsequence[0].length === minLength) {
          resultArrs.push([])
        }
      }
      if (newRings.length > 1) {
        for (let i = 0; i < ringsequence[1].length; i += minLength) {
          resultArr.push(ringsequence[1].slice(i, i + minLength))
        }
        if (ringsequence[2]) {
          for (let k = 0; k < ringsequence[2].length; k += minLength) {
            resultArrThree.push(ringsequence[2].slice(k, k + minLength))
          }
        }
        if (ringsequence[3]) {
          for (let k = 0; k < ringsequence[3].length; k += minLength) {
            resultArrFour.push(ringsequence[3].slice(k, k + minLength))
          }
        }
      }
      this.patternInfo = []
      let currentArr = []
      let newPattern = []
      val.map(i => {
        newPattern.push(...i)
      })
      if (this.phaseList.length === 0) return
      for (let patternStatus of val[0]) {
        // if (patternStatus.mode !== 7) {
        let concurrent = this.phaseList.filter((item) => {
          return item.id === patternStatus.id // patternStatus.id当前相位id concurrent当前相位的并发相位
        })[0].concurrent// 当前相位的并发相位
        if (concurrent) {
          let obj = {
            id: patternStatus.id,
            current: concurrent.sort()
          }
          currentArr.push(obj)
        }
        // }
      }
      if (currentArr.length !== 0) {
        let newCurrent = this.tranform(currentArr)
        // 取没个环与环关系的并集
        let barrierRing1 = []
        let barrierRing2 = []
        let barrierRing3 = []
        let barrierRing4 = []
        let ring1 = [] // 环1与关系1的并集
        for (let h = 0; h < newCurrent.length; h++) {
          let adds = [...new Set(resultArrs[0])].filter(item => newCurrent[h].includes(item))
          ring1.push(adds)
        }
        let ring1s = [] // 环1与关系2的并集
        for (let h = 0; h < newCurrent.length; h++) {
          let addRing1 = [...new Set(resultArrs[1])].filter(item => newCurrent[h].includes(item))
          ring1s.push(addRing1)
        }
        // 双环相位数不等的时候
        if (newRings.length > 1) {
          if (newRings[0].length !== newRings[1].length) {
            for (let h = 0; h < newCurrent.length; h++) {
              let adds = [...new Set(ringsequence[0])].filter(item => newCurrent[h].includes(item))
              ring1.push(adds)
            }
            let ring1s = [] // 环1与关系2的并集
            for (let h = 0; h < newCurrent.length; h++) {
              let addRing1 = [...new Set(ringsequence[1])].filter(item => newCurrent[h].includes(item))
              ring1s.push(addRing1)
            }
          }
        }
        barrierRing1.push(...ring1, ...ring1s)
        let resultList = []
        if (newRings.length > 1) {
          let ring2s = [] // 环2与关系1的并集
          for (let h = 0; h < newCurrent.length; h++) {
            let addRing2 = [...new Set(resultArr[1])].filter(item => newCurrent[h].includes(item))
            ring2s.push(addRing2)
          }
          let ring2 = [] // 环2与关系1的并集
          for (let h = 0; h < newCurrent.length; h++) {
            let add = [...new Set(resultArr[0])].filter(item => newCurrent[h].includes(item))
            ring2.push(add)
          }
          barrierRing2.push(...ring2, ...ring2s)
           // 环3
           let ring3s = [] // 环3与关系1的并集
          for (let h = 0; h < newCurrent.length; h++) {
            let addRing2 = [...new Set(resultArrThree[1])].filter(item => newCurrent[h].includes(item))
            ring3s.push(addRing2)
          }
          let ring3 = [] // 环3与关系1的并集
          for (let h = 0; h < newCurrent.length; h++) {
            let add = [...new Set(resultArrThree[0])].filter(item => newCurrent[h].includes(item))
            ring3.push(add)
          }
          barrierRing3.push(...ring3, ...ring3s)
           // 环4
          let ring4s = [] // 环4与关系1的并集
          for (let h = 0; h < newCurrent.length; h++) {
            let addRing2 = [...new Set(resultArrFour[1])].filter(item => newCurrent[h].includes(item))
            ring4s.push(addRing2)
          }
          let ring4 = [] // 环4与关系1的并集
          for (let h = 0; h < newCurrent.length; h++) {
            let add = [...new Set(resultArrFour[0])].filter(item => newCurrent[h].includes(item))
            ring4.push(add)
          }
          barrierRing4.push(...ring4, ...ring4s)
          for (let k = 0; k < barrierRing1.length; k++) {
            resultList.push(barrierRing1[k].concat(barrierRing2[k]).concat(barrierRing3[k]).concat(barrierRing4[k]))
          }
        }
        let resultLists = resultList.filter(item => item.length !== 0)
        let ringArr = []
        for (let l = 0; l < resultLists.length; l++) {
          for (let d = 0; d < newCurrent.length; d++) {
            if (newCurrent[d].filter(item => resultLists[l].includes(item)).length > 0) {
              ringArr.push({
                data: resultLists[l],
                id: d + 1,
                index: l
              })
            }
          }
        }
        for (var i = 0; i < ringArr.length; i++) {
          for (var j = i + 1; j < ringArr.length; j++) {
            if (ringArr[i].id === ringArr[j].id && ringArr[i].index + 1 === ringArr[j].index) {
              ringArr[i].data = ringArr[i].data.concat(ringArr[j].data)
              ringArr.splice(ringArr.indexOf(ringArr[j].id), 1)
            }
          }
        }
        let resArr = ringArr.map(item => item.data)
        let ringTeam = this.step1(this.phaseList, resArr)
        let ringTeams = ringTeam.filter(item => item.length !== 0)
        this.fillGap(ringTeams, val)
        // 总览添加屏障
        let newPattern = []
        val.map(i => {
          newPattern.push(...i)
        })
        let barrier = this.step2(ringTeams, newPattern)
        let barrierLeft = barrier.map(item => item)
        this.barrierList = barrierLeft.map(j => {
          return (j / (this.max ? this.max : this.contrloCycle) * 100) + '%'
        })
      }
      // let cycle = this.controlData.cycle
      for (let rings of val) {
        if (rings.length === 0) continue
        let list = []
        for (let ring of rings) {
          if (ring.value === 0) continue
          let obj = {}
          let split = ring.value
          obj.id = ring.id
          obj.mode = ring.mode
          // obj.split = split
          let currPhase = this.phaseList.filter((item) => {
            if (item.id === ring.id && item.controltype === 99) {
              obj.controltype = item.controltype
            }
            return item.id === ring.id
          })[0]
          if (!currPhase) return
          let peddirections = []
          for (let walk of this.sidewalkPhaseData) {
            if (currPhase.peddirection) {
              for (let ped of currPhase.peddirection) {
                // if (stg === walk.phaseid) {
                let objs = {}
                objs.name = walk.name
                objs.id = walk.id
                objs.color = 'rgba(48,49,51,0.6)'
                if (ped === walk.id) {
                  peddirections.push(objs)
                  peddirections = Array.from(new Set(peddirections))
                }
                // }
              }
            } else {
              peddirections = []
            }
          }
          if (ring.desc && ring.desc.length > 0) {
            obj.direction = ring.desc.map(item => { // 虚相位desc为空
              return {
                id: item.id,
                color: '#303133'
              }
            })
          } else {
            if (currPhase.direction && currPhase.direction.length > 0) {
              obj.direction = currPhase.direction.map(item => {
                return {
                  id: item,
                  peddirection: peddirections,
                  color: '#303133'
                }
              })
            } else {
              obj.direction = [
                {
                  id: '',
                  color: '#303133',
                  peddirection: peddirections
                }
              ]
            }
          }
          obj.split = split
          obj.cycle = cycle
          if (ring.sum) {
            obj.sum = ring.sum
            obj.redWidth = (((currPhase.redclear || 0) + ring.sum) / (this.max ? this.max : cycle) * 100) + '%'
          } else {
            obj.redWidth = ((currPhase.redclear || 0) / (this.max ? this.max : cycle) * 100) + '%'
          }
          obj.flashgreen = ((currPhase.flashgreen || 0) / (this.max ? this.max : cycle) * 100) + '%'
          obj.yellowWidth = ((currPhase.yellow || 0) / (this.max ? this.max : cycle) * 100) + '%'
          obj.greenWidth = ((split - (currPhase.redclear || 0) - (currPhase.yellow || 0) - (currPhase.flashgreen || 0)) / (this.max ? this.max : cycle) * 100) + '%'
          // 忽略相位不显示
          // let mode = ring.mode
          // if (mode !== 7) { // 忽略相位不显示
          list.push(obj)
          // }
        }
        this.patternInfo.push(list)
      }
    },
    handleCurrentChange (val) { // 两个ring的数据
      this.patternInfo = []
      if (val === null || val.length === 0) return
      if (this.controlPhase && this.controlPhase.phase && this.controlPhase.phase[0].split) {
        val.map(i => {
          i.map(j => {
            j.value = this.controlPhase.phase.filter(item => item.id === j.id)[0].split
          })
        })
        let valSplit = val.map(item => {
          return item.map(val => {
            return val.value + (val.sum ? val.sum : 0)
          })
        })
        let splitCycle = valSplit.length > 0 ? valSplit.map(item => {
          return item.length > 0 ? item.reduce((a, b) => {
            return a + b
          }) : 0
        }) : 0
        this.fixCycle = Math.max(...splitCycle)// 每个环的周期最大值
      }
      // 按环序分组
      let ringlength = []
      let ringsequence = val.map(item => {
        if (item.length === 0) return
        ringlength.push(item.length)
        return item.map(k => {
          return k.id
        })
      })
      // let valSplit = val.map(item => {
      //   return item.map(val => {
      //     return val.value + (val.sum ? val.sum : 0)
      //   })
      // })
      // let splitCycle = valSplit.length > 0 ? valSplit.map(item => {
      //   return item.length > 0 ? item.reduce((a, b) => {
      //     return a + b
      //   }) : 0
      // }) : 0
      // let cycle = Math.max(...splitCycle)// 每个环的周期最大值
      let newRings = ringsequence.filter(item => item)
      let minLength = Math.min(...ringlength)
      let resultArrs = [] // 环1分组
      let resultArr = [] // 环2分组
      let resultArrThree = [] // 环3分组
      let resultArrFour = [] // 环4分组
      for (let j = 0; j < ringsequence[0].length; j += minLength) {
        resultArrs.push(ringsequence[0].slice(j, j + minLength))
        if (ringsequence[0].length === minLength) {
          resultArrs.push([])
        }
      }
      if (newRings.length > 1) {
        for (let i = 0; i < ringsequence[1].length; i += minLength) {
          resultArr.push(ringsequence[1].slice(i, i + minLength))
        }
        if (ringsequence[2]) {
          for (let k = 0; k < ringsequence[2].length; k += minLength) {
            resultArrThree.push(ringsequence[2].slice(k, k + minLength))
          }
        }
        if (ringsequence[3]) {
          for (let k = 0; k < ringsequence[3].length; k += minLength) {
            resultArrFour.push(ringsequence[3].slice(k, k + minLength))
          }
        }
      }
      this.patternInfo = []
      this.barrierList = []
      let currentArr = []
      let newPattern = []
      val.map(i => {
        newPattern.push(...i)
      })
      if (this.phaseList.length === 0) return
      for (let patternStatus of val[0]) {
        // if (patternStatus.mode !== 7) {
        let concurrent = this.phaseList.filter((item) => {
          return item.id === patternStatus.id // patternStatus.id当前相位id concurrent当前相位的并发相位
        })[0].concurrent// 当前相位的并发相位
        if (concurrent) {
          let obj = {
            id: patternStatus.id,
            current: concurrent.sort()
          }
          currentArr.push(obj)
        }
        // }
      }
      if (currentArr.length !== 0) {
        let newCurrent = this.tranform(currentArr)
        // 取每个环与环关系的并集
        let barrierRing1 = []
        let barrierRing2 = []
        let barrierRing3 = []
        let barrierRing4 = []
        let ring1 = [] // 环1与关系1的并集
        for (let h = 0; h < newCurrent.length; h++) {
          let adds = [...new Set(resultArrs[0])].filter(item => newCurrent[h].includes(item))
          ring1.push(adds)
        }
        let ring1s = [] // 环1与关系2的并集
        for (let h = 0; h < newCurrent.length; h++) {
          let addRing1 = [...new Set(resultArrs[1])].filter(item => newCurrent[h].includes(item))
          ring1s.push(addRing1)
        }
        // 双环相位数不等的时候
        if (newRings.length > 1) {
          if (newRings[0].length !== newRings[1].length) {
            for (let h = 0; h < newCurrent.length; h++) {
              let adds = [...new Set(ringsequence[0])].filter(item => newCurrent[h].includes(item))
              ring1.push(adds)
            }
            let ring1s = [] // 环1与关系2的并集
            for (let h = 0; h < newCurrent.length; h++) {
              let addRing1 = [...new Set(ringsequence[1])].filter(item => newCurrent[h].includes(item))
              ring1s.push(addRing1)
            }
          }
        }
        barrierRing1.push(...ring1, ...ring1s)
        let resultList = []
        if (newRings.length >= 1) {
          let ring2s = [] // 环2与关系1的并集
          for (let h = 0; h < newCurrent.length; h++) {
            let addRing2 = [...new Set(resultArr[1])].filter(item => newCurrent[h].includes(item))
            ring2s.push(addRing2)
          }
          let ring2 = [] // 环2与关系1的并集
          for (let h = 0; h < newCurrent.length; h++) {
            let add = [...new Set(resultArr[0])].filter(item => newCurrent[h].includes(item))
            ring2.push(add)
          }
          barrierRing2.push(...ring2, ...ring2s)
           // 环3
          let ring3s = [] // 环3与关系1的并集
          for (let h = 0; h < newCurrent.length; h++) {
            let addRing2 = [...new Set(resultArrThree[1])].filter(item => newCurrent[h].includes(item))
            ring3s.push(addRing2)
          }
          let ring3 = [] // 环3与关系1的并集
          for (let h = 0; h < newCurrent.length; h++) {
            let add = [...new Set(resultArrThree[0])].filter(item => newCurrent[h].includes(item))
            ring3.push(add)
          }
          barrierRing3.push(...ring3, ...ring3s)
           // 环4
          let ring4s = [] // 环4与关系1的并集
          for (let h = 0; h < newCurrent.length; h++) {
            let addRing2 = [...new Set(resultArrFour[1])].filter(item => newCurrent[h].includes(item))
            ring4s.push(addRing2)
          }
          let ring4 = [] // 环4与关系1的并集
          for (let h = 0; h < newCurrent.length; h++) {
            let add = [...new Set(resultArrFour[0])].filter(item => newCurrent[h].includes(item))
            ring4.push(add)
          }
          barrierRing4.push(...ring4, ...ring4s)
          for (let k = 0; k < barrierRing1.length; k++) {
            resultList.push(barrierRing1[k].concat(barrierRing2[k]).concat(barrierRing3[k]).concat(barrierRing4[k]))
          }
        }
        let resultLists = resultList.filter(item => item.length !== 0)
        let ringArr = []
        for (let l = 0; l < resultLists.length; l++) {
          for (let d = 0; d < newCurrent.length; d++) {
            if (newCurrent[d].filter(item => resultLists[l].includes(item)).length > 0) {
              ringArr.push({
                data: resultLists[l],
                id: d + 1,
                index: l
              })
            }
          }
        }
        for (var i = 0; i < ringArr.length; i++) {
          for (var j = i + 1; j < ringArr.length; j++) {
            if (ringArr[i].id === ringArr[j].id && ringArr[i].index + 1 === ringArr[j].index) {
              ringArr[i].data = ringArr[i].data.concat(ringArr[j].data)
              ringArr.splice(ringArr.indexOf(ringArr[j].id), 1)
            }
          }
        }
        let resArr = ringArr.map(item => item.data)
        this.barrierArr = resArr
        let ringTeam = this.step1(this.phaseList, resArr)
        let ringTeams = ringTeam.filter(item => item.length !== 0)
        if (this.patternList) {
          this.setBarrier(ringTeams, val)
        }
        if (newRings.length > 1) {
          this.fillGap(ringTeams, val)
        }
        if (this.cycleChange) {
          const globalParamModel = this.$store.getters.globalParamModel
          let pattern = globalParamModel.getParamsByType('patternList')
          const allCycle = pattern.map(item => item.cycle)
          let cycle = Math.max(...allCycle)
          this.max = cycle
        } else {
          this.max = ''
        }
        if (this.maxCycle) {
          this.max = this.maxCycle
        }
        let barrier = this.step2(ringTeams, newPattern)
        let barrierLeft = barrier.map(item => item)// 屏障左移显示出人行横道
        this.barrierList = barrierLeft.map(j => {
          return (j / (this.max ? this.max : this.newCycle) * 100) + '%'
        })
        // this.barrierList.unshift(0)
      }
      for (let rings of val) {
        if (rings.length === 0) continue
        let list = []
        for (let ring of rings) {
          if (ring.value === 0) continue
          let obj = {}
          let split = ring.value
          obj.id = ring.id
          // obj.split = split
          let currPhase = this.phaseList.filter((item) => {
            if (item.id === ring.id && item.controltype === 99) {
              obj.controltype = item.controltype
            }
            return item.id === ring.id
          })[0]
          if (!currPhase) return
          let peddirections = []
          for (let walk of this.sidewalkPhaseData) {
            if (currPhase.peddirection) {
              for (let ped of currPhase.peddirection) {
                // if (stg === walk.phaseid) {
                let objs = {}
                objs.name = walk.name
                objs.id = walk.id
                objs.color = 'rgba(48,49,51,0.6)'
                if (ped === walk.id) {
                  peddirections.push(objs)
                  peddirections = Array.from(new Set(peddirections))
                }
                // }
              }
            } else {
              peddirections = []
            }
          }
          if (ring.desc && ring.desc.length > 0) {
            obj.direction = ring.desc.map(item => { // 虚相位desc为空
              return {
                id: item.id,
                color: '#303133',
                peddirection: peddirections
              }
            })
          } else {
            if (currPhase.direction && currPhase.direction.length > 0) {
              obj.direction = currPhase.direction.map(item => {
                return {
                  id: item,
                  color: '#303133',
                  peddirection: peddirections
                }
              })
            } else {
              obj.direction = [
                {
                  id: '',
                  color: '#303133',
                  peddirection: peddirections
                }
              ]
            }
          }
          obj.split = split
          obj.cycle = this.fixCycle ? this.fixCycle : this.max ? this.max : this.newCycle
          const isZero = split - (currPhase.redclear || 0) - (currPhase.yellow || 0) - (currPhase.flashgreen || 0)
          const allAdd = split + (currPhase.redclear || 0) + (currPhase.yellow || 0) + (currPhase.flashgreen || 0)
          if (isZero <= 0) {
            if (ring.sum) {
              obj.sum = ring.sum
              obj.redWidth = (((((currPhase.redclear || 0) + ring.sum) / allAdd) / (this.fixCycle ? this.fixCycle : this.max ? this.max : this.newCycle)) * 100) + '%'
            } else {
              obj.redWidth = ((((currPhase.redclear || 0) / allAdd) / (this.fixCycle ? this.fixCycle : this.max ? this.max : this.newCycle)) * 100) + '%'
            }
            obj.greenWidth = (((split - ((currPhase.redclear || 0) / allAdd) - ((currPhase.yellow || 0) / allAdd) - ((currPhase.flashgreen || 0) / allAdd)) / (this.fixCycle ? this.fixCycle : this.max ? this.max : this.newCycle)) * 100) + '%'
            obj.yellowWidth = ((((currPhase.yellow || 0) / allAdd) / (this.fixCycle ? this.fixCycle : this.max ? this.max : this.newCycle)) * 100) + '%'
            obj.flashgreen = ((((currPhase.flashgreen || 0) / allAdd) / (this.fixCycle ? this.fixCycle : this.max ? this.max : this.newCycle)) * 100) + '%'
          } else {
            if (ring.sum) {
              obj.sum = ring.sum
              obj.redWidth = (((currPhase.redclear || 0) + ring.sum) / (this.fixCycle ? this.fixCycle : this.max ? this.max : this.newCycle) * 100) + '%'
            } else {
              obj.redWidth = ((currPhase.redclear || 0) / (this.fixCycle ? this.fixCycle : this.max ? this.max : this.newCycle) * 100) + '%'
            }
            obj.mode = ring.mode
            obj.greenWidth = ((split - (currPhase.redclear || 0) - (currPhase.yellow || 0) - (currPhase.flashgreen || 0)) / (this.fixCycle ? this.fixCycle : this.max ? this.max : this.newCycle) * 100) + '%'
            obj.flashgreen = ((currPhase.flashgreen || 0) / (this.fixCycle ? this.fixCycle : this.max ? this.max : this.newCycle) * 100) + '%'
            obj.yellowWidth = ((currPhase.yellow || 0) / (this.fixCycle ? this.fixCycle : this.max ? this.max : this.newCycle) * 100) + '%'
          }
          // 忽略相位不显示
          // let mode = ring.mode
          // if (mode !== 7) { // 忽略相位不显示
          list.push(obj)
          // }
        }
        this.patternInfo.push(list)
      }
    },
    setBarriers (ringTeam, val) { // 临时方案添加特征参数barrier
      this.localPatternList.map(item => {
        // if (item.id === this.patternIds) {
        const patternObjs = {}
        val.forEach(l => {
          l.map(k => {
            patternObjs[k.id] = k.value
          })
        })
        let ret = ringTeam.map((y, index) => {
          if (!y || y.length === 0) return
          y.map(n => {
            n.length = n.data.length > 1 ? n.data.reduce((pre, cur) => pre + patternObjs[cur], 0) : patternObjs[n.data[0]]
          })
          return {
            barrier: index + 1,
            length: y[0].length,
            items: y.map(j => {
              return {
                ring: j.ring,
                data: j.data
              }
            })
          }
        })
        item.barriers = ret
        // }
      })
    },
    setBarrier (ringTeam, val) { // 添加特征参数barrier
      this.patternList.map(item => {
        if (item.id === this.patternIds) {
          const patternObjs = {}
          val.forEach(l => {
            l.map(k => {
              patternObjs[k.id] = k.value
            })
          })
          let ret = ringTeam.map((y, index) => {
            if (!y || y.length === 0) return
            y.map(n => {
              n.length = n.data.length > 1 ? n.data.reduce((pre, cur) => pre + patternObjs[cur], 0) : patternObjs[n.data[0]]
            })
            return {
              barrier: index + 1,
              length: y[0].length,
              items: y.map(j => {
                return {
                  ring: j.ring,
                  data: j.data
                }
              })
            }
          })
          item.barriers = ret
        }
      })
    },
    tranform (arr) { // 分barrier
      let newMap = new Map()
      arr.forEach(({id, current}) => {
        const find = newMap.get(current.join())
        if (find) newMap.get(current.join()).push(id)
        else newMap.set(current.join(), [id])
      })
      let ret = []
      newMap.forEach((value, key) => {
        ret.push(Array.from(new Set(key.split(',').map(Number).concat(value))))
      })
      const result = []
      for (const a of ret) {
        let merged = false
        for (const r of result) {
          if (this.check([...r], a)) {
            a.forEach(item => r.add(item))
            merged = true
          }
        }
        if (!merged) {
          result.push(new Set(a))
        }
        merged = false
      }
      return result.map(s => [...s])
    },
    check (arr1, arr2) {
      return arr1.some(a1 => arr2.some(a2 => a1 === a2))
    },
    step1 (list, arr) { // 各个环包含的相位
      const ret = []
      const listObj = {}
      list.forEach(l => {
        listObj[l.id] = l.ring
      })
      arr.forEach(a => {
        const retItem = []
        a.forEach(b => {
          if (listObj[b]) {
            const find = retItem.find(r => r.ring === listObj[b])
            if (find) find.data.push(b)
            else retItem.push({ring: listObj[b], data: [b]})
          }
        })
        ret.push(retItem)
      })
      return ret
    },
    step2 (newArr, pattern) { // 不同环并发相位做比较
      let ret = []
      let max = 0
      const patternObj = {}
      pattern.forEach(l => {
        // if (l.mode !== 7) {
        patternObj[l.id] = l.value
        // }
      })
      let barrierCycle = newArr.map(item => {
        return Math.max.apply(Math, item.map(k => { return k.length }))
      })
      barrierCycle.forEach((b, index) => {
        if (index === 0) {
          ret.push(barrierCycle[index])
        } else {
          if (max) {
            max = barrierCycle[index] + max
          } else {
            max = barrierCycle[index] + barrierCycle[index - 1]
          }
          ret.push(max)
        }
      })
      return ret
    },
    fillGap (newArr, pattern) {
      this.newPatterns = []
      const patternObj = {}
      pattern.forEach(l => {
        l.map(k => {
          // if (k.mode !== 7) {
          patternObj[k.id] = k.value
          // }
        })
      })
      let newMax = []
      let newMin = []
      newArr.forEach((na, index) => {
        if (!na || na.length === 0) return
        na.map(n => {
          n.length = n.data.length > 1 ? n.data.reduce((pre, cur) => pre + patternObj[cur], 0) : patternObj[n.data[0]]
        })
        let maxNum = Math.max.apply(Math, na.map(item => { return item.length }))
        let minNum = Math.min.apply(Math, na.map(item => { return item.length }))
        newMax.push(maxNum)
        newMin.push(minNum)
        let newmaxNum = Math.max.apply(Math, newMax)// 每组最大值
        let newminNum = Math.min.apply(Math, newMin)
        if (newArr.length > 1) {
          let mapAdd = pattern.map(item => {
            return item.map(val => {
              return val.value + (val.sum ? val.sum : 0)
            })
          })
          let maxCycle = mapAdd.length > 0 ? mapAdd.map(item => {
            return item.length > 0 ? item.reduce((a, b) => {
              return a + b
            }) : 0
          }) : 0
          this.newCycle = Math.max(...maxCycle)
        }
        if (newmaxNum === newminNum) {
          this.max = newmaxNum + newminNum
          pattern.map(d => {
            d.map(r => {
              if (r.sum) {
                delete r.sum
              }
            })
          })
        }
        if (maxNum === minNum) {
          na.map(n => {
            pattern.map(h => {
              h.map(d => {
                if (d.id === n.data[1] && d.sum) {
                  delete d.sum
                }
              })
            })
          })
        } else {
          na.map(n => {
            if (n.length === maxNum) {
              pattern.map(h => {
                h.map(d => {
                  if (n.data.length > 1) {
                    if (d.id === n.data[1]) {
                      delete d.sum
                    }
                  } else {
                    if (d.id === n.data[0]) {
                      delete d.sum
                    }
                  }
                })
              })
            }
          })
        }
        na.forEach((value, index, array) => {
          if (value.length !== maxNum) {
            let newNa = []
            newNa.push(value)
            newNa.forEach(m => {
              let sum = Number(maxNum - m.length)
              pattern.filter((i) => {
                i.map(j => {
                  if (m.data.length > 1) {
                    if (j.id === m.data[1]) {
                      j.sum = sum
                    }
                  } else {
                    if (j.id === m.data[0]) {
                      j.sum = sum
                    }
                  }
                })
              })
            })
          }
          let mapAdd = pattern.map(item => {
            return item.map(val => {
              return val.value + (val.sum ? val.sum : 0)
            })
          })
          let maxCycle = mapAdd.length > 0 ? mapAdd.map(item => {
            return item.length > 0 ? item.reduce((a, b) => {
              return a + b
            }) : 0
          }) : 0
          this.max = Math.max(...maxCycle)// 每个环的周期最大值
        })
      })
    }
  }
}
</script>
<style lang="scss">
    // el-tooltip样式
.el-tooltip__popper.is-light {
  background: #299BCC !important;
  border: 1px solid #299BCC !important;
  color: #FFFFFF !important;
}
.el-tooltip__popper.is-light[x-placement^="top"] .popper__arrow {
  border-top-color: #299BCC !important;
}
.el-tooltip__popper.is-light[x-placement^="top"] .popper__arrow::after {
  border-top-color: #299BCC !important;
}
</style>
<style lang="scss" scoped>
.main-patternstatus {
  position: relative;
  /* margin-bottom: 20px; */
}
.main-patternstatus {
  position: relative;
  .ring-first {
    margin-top: 1px;
    width: 100%;
    height: 35px;
    .hovercell {
      box-sizing: border-box;
      border: 1PX solid transparent;
    }
    .hovercell:hover {
      margin-top: 1PX;
      border: 1PX solid rgb(242, 121, 121);
    }
  }
  .first-1 {
    float: left;
    // text-align: center;
  }
  // .ring-num {
  //   float: left;
  //   margin-top:7px;
  //   margin-left: 5px;
  //   font-size: 14px;
  //   font-weight: normal;
  //   font-stretch: normal;
  //   line-height: 22px;
  //   letter-spacing: 0px;
  //   color: #ffffff;
  // }
  .box {
    text-align: center;
    // float: left;
    // margin-left: 6px;
    // margin-right: 10px;
  }
  .ring-nums {
    // float: left;
    // margin-top:7px;
    // margin-left: 5px;
    font-size: 12px;
    height: 14px;
    font-weight: normal;
    font-stretch: normal;
    // line-height: 22px;
    letter-spacing: 0px;
    color: #333333;
  }
  .ring-phase {
    position: relative;
    float: left;
    // margin-left: 5px;
    height: 34px;
    width: 36px;
    z-index: 999;
    background: rgba(30, 96, 12, 0.2);
    // margin-top:1px;
  }
  .ring-phase::after {
    position: absolute;
    display: block;
    content: '';
    height: 0;
    width: 0;
    top: 11px;
    left: 36px;
    border: 5px solid transparent;
    border-left-color: rgba(30, 96, 12, 0.2);
  }
  // .divider {
  //   position: absolute;
  //   top: -10px;
  //   // left: 370px;
  //   width: 2px;
  //   // height: 99px;
  //   z-index: 999;
  //   background-color:#B9BABF;
  // }
  // .curTimeLine {
  //   position: absolute;
  //   top: -10px;
  //   width: 4px;
  //   background-color: black;
  // }
  // .curTimeDiv {
  //   position: absolute;
  //   z-index:50;
  //   top: -21px;
  //   margin-left: -10px;
  //   text-align:center;
  //   vertical-align: middle;
  //   width: 60px;
  //   height: 19px;
  //   color:black;
  //   // background-color: black;
  // }
}
.ring-first {
  margin-top: 1px;
  width: 100%;
  height: 35px;
  .hovercell {
    box-sizing: border-box;
    border: 1PX solid transparent;
  }
  .hovercell:hover {
    margin-top: 1PX;
    border: 1PX solid rgb(242, 121, 121);
  }
}
.direction {
  filter: brightness(70%);
}
.mask {
  background: rgb(242, 121, 121) !important;
}
.yellowClass {
  background: #f9dc6a !important;
}
.first-1 {
  float: left;
  // text-align: center;
}
</style>
