/**
 * 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 id="intersection-stages" class="intersection-stages" :style="stageStyle">
    <!-- <div class="cross-content"><div style="float: left;" class="cross-name">{{'当前阶段'}}:</div> -->
      <div>
        <div style="width: 100%; height: auto;">
          <div class="control-model" v-for="(item, index) in stagesList" :key="index">
            <div style="position:relative;" :style="{...singleStyle, 'backgroundColor': item[0].bgcolor}" class="single-model" @click="selectStages(index + 1)" :class="currentStage == index + 1 ? 'single-model-select' : ''">
              <!-- <template v-for="(side, index) in item[0].sidewalkPhaseData" >
                <PatternWalkSvg class="patternWalk"
                                v-if="item[0].peddirection.includes(side.id)"
                                :key="side.key + '-' + index"
                                :Data="side"
                                :Width="'55'"
                                :Height="'55'" />
              </template> -->
                <!-- <patternwalksvg class="patternWalk"
                          :showWalk="item[0].peddirection"
                          :Width="'40'"
                          :Height="'40'" /> -->
              <xdr-dir-selector :Width="dirWidth" :Height="dirHeight" :Widths="dirWidths" :Heights="dirHeights" :Data="showStyle" :Datas="showStyles" :showlist="dirListSetTheme(item)"></xdr-dir-selector>
              <div style="display:flex;flex-direction:row;justify-content:center;align-items:end;" :style="{height: StageHeight}">
                <div class="current-stage-num" style="width:25%;" :style="{color: themeColor, fontSize: numSize}">{{index + 1}}</div>
                <div style="width:70%;">
                  <i class="iconfont icon-feijidongche" :style="{color: themeColor, fontSize: iconSize}" style="font-size:11PX;color:#606266;margin-left:10PX" v-if="item[item.length-1].controltype === 6"></i>
                  <i class="iconfont icon-lukouzhilu" :style="{color: themeColor2, fontSize: iconSize2}" style="font-size:16PX;color:#454545;margin-left:10PX" v-if="item[item.length-1].controltype === 1"></i>
                  <i class="iconfont icon-BRT" :style="{color: themeColor2, fontSize: iconSize}" style="font-size:11PX;color:#454545;margin-left:10PX" v-if="item[item.length-1].controltype === 4"></i>
                  <div style="transform:scale(0.65);margin-left:10PX">
                    <i class="iconfont icon-xuxiangwei-xin" :style="{color: themeColor2}" style="font-size:5PX;color:#454545;" v-if="item[item.length-1].controltype === 99"></i>
                  </div>
                  <i class="iconfont icon-gongjiaoche" :style="{color: themeColor, fontSize: iconSize}" style="font-size:11PX;color:#606266;margin-left:10PX" v-if="item[item.length-1].controltype === 3"></i>
                  <i class="iconfont icon-youguidianche" :style="{color: themeColor, fontSize: iconSize}" style="font-size:11PX;color:#606266;margin-left:10PX" v-if="item[item.length-1].controltype === 5"></i>
                  <div v-if="presetStageIndex === index + 1" style="color:red;width:50px;position:absolute;right:0px;bottom:5px;font-size:11px;">{{presetText}}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
/* eslint-disable */
import RingDataModel from '../../../utils/RingDataModel.js'
// import patternwalksvg from '../PatternWalkSvg/PatternWalkSvg'
import { getTheme } from '../../../utils/auth.js'

export default {
  name: 'Stages',
  components: {
    // patternwalksvg
  },
  props: {
    isShowCurrentStage: {
      type: Boolean,
      default: true
    },
    crossStatusData: {
      type: Object,
      default: () => {}
    },
    phaseList: {
      type: Array,
      default: () => []
    },
    presetText: {
      type: String,
      default: '预置'
    },
    presetIndex: {
      type: Number,
      default: -1
    },
    preselectStages:{
      type: Number,
      default: -1
    },
    preselectModel:{
      type: Number,
      default: -1
    },
    presetPhaseId: {
      type: Number,
      default: -1
    },
    zoom: {
      type: Number,
      default: 1
    },
    StageWidth: { // 图的大小样式
      type: String,
      default: '70px'
    },
    StageHeight: {
      type: String,
      default: '80px'
    },
    dirWidth: {
      type: String,
      default: '75PX'
    },
    dirHeight: {
      type: String,
      default: '75PX'
    },
    dirWidths: {
      type: String,
      default: '65PX'
    },
    dirHeights: {
      type: String,
      default: '65PX'
    },
    showStyle: { // 图内部方向的位置
      type: Object,
      default: () => ({
        top:'7PX',
        left:'13px'
      })
    },
    showStyles: { // 图内部人行道的位置
      type: Object,
      default: () => ({
        top:'5PX',
        left:'12px'
      })
    },
    noClick: { // 图是否可以点击
      type: Boolean,
      default: false
    },
    showDataType: { // 图展示的数据类型：默认按阶段展示，如果传phase则按相位维度展示
      type: String
    }
  },
  data () {
    return {
      presetStageIndex: -1,
      side: {key: 'pedphase1653818707546719', phaseid: 1, id: 1, name: '东人行横道'},
      // stagesList: [],
      currentStage: -1,
      themeColor: getTheme() === 'light' ? '#606266' : '#fff',
      themeColor2: getTheme() === 'light' ? '#454545' : '#fff'
    };
  },
  computed: {
    singleStyle () {
      return {
        width: this.StageWidth,
        height: this.StageHeight
      }
    },
    stagesList () {
      let list = []
      if (this.crossStatusData && this.crossStatusData.stages && this.phaseList && this.phaseList.length > 0) {
        let ringDataModel = new RingDataModel(this.crossStatusData, this.phaseList)
        if (this.showDataType === 'phase') {
          list = ringDataModel.getStageData('phase')
        } else {
          list = ringDataModel.getStageData()
        }
        if (this.isShowCurrentStage) {
          this.currentStage = this.crossStatusData.current_stage
        }
      }
      console.log(list,'list')
      this.clickType(list, this.currentStage)
      console.log(this.phaseList,'this.phaseList')
      return list
    },
    stageStyle () {
      return {
        zoom: this.zoom
      }
    },
    iconSize () {
      const fontsize = parseInt(this.dirWidth.replace(/px$/, ""));
      return fontsize / 75 * 11 + 'px'
    },
    iconSize2 () {
      const fontsize = parseInt(this.dirWidth.replace(/px$/, ""));
      return fontsize / 75 * 16 + 'px'
    },
    numSize () {
      const fontsize = parseInt(this.dirWidth.replace(/px$/, ""));
      const newfontsize = fontsize / 75 * 12
      if (newfontsize < 10) {
        return 10 + 'px'
      } else {
        return newfontsize + 'px'
      }
    }
  },
  watch: {
    preselectStages: { 
      handler: function (val, oldVal) {
        if(this.preselectStages === -1 && this.preselectModel !== -1) {
          this.currentStage = -1
        }
      },
      // 深度观察监听
      deep: true
    },
    preselectModel: { 
      handler: function (val, oldVal) {
        if(this.preselectStages === -1 && this.preselectModel !== -1) {
          this.currentStage = -1
        }
      },
      // 深度观察监听
      deep: true
    },
    stagesList: {
      handler: function (val, oldVal) {
        if (this.presetPhaseId > -1) {
          this.presetStageIndex = this.getComputedPresetIndex()
        } else {
          this.presetStageIndex = this.presetIndex
        }
      },
      // 深度观察监听
      deep: true
    }
  },
  methods: {
    getComputedPresetIndex() {
      let res = -1
      for (let i = 0; i < this.stagesList.length; i++) {
        let stage = this.stagesList[i]
        for (let phase of stage) {
          let phaseId = phase.id
          if (phaseId === this.presetPhaseId) {
            res = i
            break
          }
        }
        if (res > -1) {
          res = res + 1
          break
        }
      }
      return res
    },
    selectStages (value) {
      if (this.noClick) return
      if (this.isShowCurrentStage) {
        return false
      }
      this.currentStage = value
      this.$emit('onSelectStages', value)
      this.clickType(this.stagesList, value)
    },
    resetToDefaultThemeColor (List) {
      for (let i = 0; i < List.length; i++) {
        if (List[i].length) {
          if (List[i][0].clicked) {
            delete List[i][0].clicked
          }
          List[i][0].bgcolor = getTheme() === 'light' ? '#edf6ff' : '#243d59'
        } 
      }
    },
    highlightThemeColor (List, index) {
      for (let i = 0; i < List.length; i++) {
        if (i === index) {
          List[i][0].clicked = true
          List[i][0].bgcolor = getTheme() === 'light' ? '#c1e0ff' : '#0082ac'
        }
      }
    },
    clickType (stagelist, value) {
      this.resetToDefaultThemeColor(stagelist)
      this.highlightThemeColor(stagelist, value - 1)
    },
    dirListSetTheme (list) {
      let dirArr = []
      let color = getTheme() === 'light' ? '#606266' : '#F1F3F4'
      let pedColor = getTheme() === 'light' ? '#606266' : 'rgba(255, 255, 255, 0.6)'
      for (let rec of list) {
        let recd = {
          ...rec,
          color: color
        }
        dirArr.push(recd)
        for(let i=0;i<rec.peddirection.length;i++) {
          rec.peddirection[i].color = pedColor
        }
      }
      return dirArr
    }
  },
  mounted () {
    this.resetToDefaultThemeColor(this.stagesList)
  }
};
</script>
