<template>
    <div class="tentativeplan-control manual-common-content">
      <!-- <div class="title" style="margin-bottom: 18px;">{{$t('openatccomponents.overview.azimuthlocking')}}</div> -->
      <el-row>
        <el-col :span="12">
           <el-form
             ref="manual"
             label-position="left"
             :model="manualInfo"
             label-width="90px">
             <el-form-item
                  :label="$t('openatccomponents.overview.duration')"
                  prop="count">
                  <el-input-number :placeholder="$t('openatccomponents.common.input')" :min="0" :max="65535" :precision="0" :step="1" :controls="false" v-model.number="manualInfo.duration" size="small"></el-input-number>
              </el-form-item>
              <el-form-item
                  :label="$t('openatccomponents.overview.yellowflash')"
                  prop="intersection">
                  <el-input-number :placeholder="$t('openatccomponents.common.input')" :min="0" :max="65535" :precision="0" :step="1" :controls="false" v-model.number="manualInfo.yellowflash" size="small"></el-input-number>
              </el-form-item>
              <el-form-item
                  :label="$t('openatccomponents.overview.mingreen')"
                  prop="intersection">
                  <el-input-number :placeholder="$t('openatccomponents.common.input')" :min="0" :max="65535" :precision="0" :step="1" :controls="false" v-model.number="manualInfo.mingreen" size="small"></el-input-number>
              </el-form-item>
             </el-form>
        </el-col>
        <el-col :span="12">
           <el-form
             ref="manual"
             label-position="left"
             :model="manualInfo"
             label-width="90px">
             <el-form-item
                  :label="$t('openatccomponents.overview.greenclear')"
                  prop="count">
                  <el-input-number :placeholder="$t('openatccomponents.common.input')" :min="0" :max="65535" :precision="0" :step="1" :controls="false" v-model.number="manualInfo.greenclear" size="small"></el-input-number>
              </el-form-item>
              <el-form-item
                  :label="$t('openatccomponents.overview.allred')"
                  prop="intersection">
                  <el-input-number :placeholder="$t('openatccomponents.common.input')" :min="0" :max="65535" :precision="0" :step="1" :controls="false" v-model.number="manualInfo.allred" size="small"></el-input-number>
              </el-form-item>
             </el-form>
        </el-col>
      </el-row>
      <el-row style="margin-top: 6px;">
        <el-col :span="24">
            <span class="model-label-title">{{$t('openatccomponents.overview.indirection')}}</span>
        </el-col>
        <el-col :span="24">
            <div class="control-model" v-for="(item, index) in imgs" :key="index">
                <div :style="{'backgroundColor': item.bgcolor}" :class="{'single-model-select':spanIndex.indexOf(index)>-1}" class="single-model"  @click="boxShow(index,item)">
                    <div v-if="item.class" :style="{color: themeColor}" :class="item.class" style="border:0px;font-size: 50px;"></div>
                    <div class="single-model-name" :style="{color: themeColor}" style="margin-top: -4px;">{{item.name}}</div>
                </div>
            </div>
            <div v-if="currentName !==''" style="width: 100%; height: auto;overflow: hidden;">
              <div style="margin-top:20px" class="model-label-title">{{currentName}}{{$t('openatccomponents.overview.currentphase')}}:</div>
              <div class="control-model" v-for="(item, index) in sidewalkPhaseData" :key="index">
                <div style="position:relative;"  class="single-model" :style="{'backgroundColor': item[0].bgcolor}">
                  <xdr-dir-selector Width="75PX" Height="75PX"  Widths="65PX" Heights="65PX" :Data="showStyle" :Datas="showStyles" :showlist="dirListSetTheme(item)"></xdr-dir-selector>
                  <div style="height:80px;display:flex;flex-direction:row;justify-content:center;align-items:end;">
                      <div class="current-stage-num" :style="{color: themeColor}" style="width:20%;">{{index + 1}}</div>
                      <div style="width:70%;">
                        <i class="iconfont icon-feijidongche" :style="{color: themeColor}" 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}" 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}" 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}" 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}" style="font-size:11PX;color:#606266;margin-left:10PX" v-if="item[item.length-1].controltype === 5"></i>
                      </div>
                  </div>
                </div>
            </div>
        </div>
        <!-- </div> -->
        </el-col>
      </el-row>
      <!-- <div class="model-label" style="width: auto;overflow: hidden;">
        <span class="intitle">{{$t('openatccomponents.overview.indirection')}}</span>
        <div class="control-model" v-for="(item, index) in imgs" :key="index">
            <div :class="{'single-model-select':spanIndex.indexOf(index)>-1}" class="single-model"  @click="boxShow(index,item)">
                <div v-if="item.class" :class="item.class" style="border:0px"></div>
                <div class="single-model-name">{{item.name}}</div>
            </div>
        </div>
      </div> -->
      <div class="footer">
          <el-button v-if="isShowBack" @click="handleClose()">{{$t('openatccomponents.button.Back')}}</el-button>
          <el-button v-if="isShowRecovery && isHasPermission('configer:manual:renew')" @click="toAutoControl()">{{$t('openatccomponents.overview.recovery')}}</el-button>
          <el-button v-if="isShowImplement" type="primary" @click="handleManualControl()">{{$t('openatccomponents.overview.implement')}}</el-button>
          <el-button v-if="!isShowImplement" type="primary" @click="handleManualControl()">{{$t('openatccomponents.overview.comfirm')}}</el-button>
      </div>
    </div>
  </template>

<script>
import { getPhase } from './utils'
import { getIframdevid, hasPermission, getTheme } from '../../../../utils/auth'
import { getlockPhase, lockPhase, getAllDerection } from '../../../../api/control'
import Stages from '../../Stages/index'
import RingDataModel from '../../../../utils/RingDataModel.js'
import { getMessageByCode } from '../../../../utils/responseMessage'
export default {
  name: 'tentativeplancontrol',
  components: {
    Stages
  },
  props: {
    realtimeStatusModalvisible: {
      type: Boolean,
      default: true
    },
    isShowBack: {
      type: Boolean,
      default: true
    },
    isShowRecovery: {
      type: Boolean,
      default: true
    },
    isShowImplement: {
      type: Boolean,
      default: true
    }
  },
  watch: {
    sidewalkPhaseData: {
      handler: function (val, oldVal) {
        this.sidewalkPhaseData = val
      },
      // 深度观察监听
      deep: true
    }
  },
  computed: {
    tankuangSize () {
      let widths = ((100 / 2) - 2) + '%'
      let styleObj = {
        width: widths
      }
      return styleObj
    },
    imgs () {
      let arrays = []
      let images = getPhase()
      images.forEach(v => {
        let obj = Object.assign({}, v)
        obj.name = this.$t(obj.name)
        obj.bgcolor = getTheme() === 'light' ? '#edf6ff' : '#243d59'
        arrays.push(obj)
      })
      let arr1Ids = this.allDirection.map(item => item.id)
      const result = arrays.filter(item => arr1Ids.includes(item.id))
      return result
    }
  },
  data () {
    return {
      showStyle: {
        top: '7PX',
        left: '13px'
      },
      showStyles: {
        top: '5PX',
        left: '12px'
      },
      sidewalkPhaseData: [],
      currentName: '',
      lockList: [],
      allDirection: [],
      patternCycleEqual: true,
      spanIndex: [],
      directions: [],
      manualInfo: {
        allred: 2,
        greenclear: 6,
        mingreen: 15,
        duration: 600,
        yellowflash: 3
      },
      themeColor: getTheme() === 'light' ? '#606266' : '#fff',
      themeColor2: getTheme() === 'light' ? '#454545' : '#fff'
    }
  },
  created () {
    this.getAllDerection()
  },
  methods: {
    checkId (val) {
      if (val.id === 1) {
        return 1
      } else if (val.id === 5) {
        return 2
      } else if (val.id === 13) {
        return 3
      } else if (val.id === 9) {
        return 4
      } else if (val.id === 17) {
        return 6
      } else if (val.id === 21) {
        return 7
      } else if (val.id === 25) {
        return 5
      } else if (val.id === 29) {
        return 8
      }
    },
    getAllDerection () {
      let iframdevid = getIframdevid()
      getAllDerection(iframdevid).then((res) => {
        if (res.data.success !== true) {
          // this.$message.error(getMessageByCode(res.data.code, this.$i18n.locale))
          console.log(getMessageByCode(res.data.code, this.$i18n.locale))
          return
        }
        this.allDirection = res.data.data.map(item => {
          return {
            id: this.checkDirection(item.direction)
          }
        })
      })
    },
    checkDirection (id) {
      if (id === 1) {
        return 1
      } else if (id === 2) {
        return 5
      } else if (id === 3) {
        return 13
      } else if (id === 4) {
        return 9
      } else if (id === 5) {
        return 25
      } else if (id === 6) {
        return 17
      } else if (id === 7) {
        return 21
      } else if (id === 8) {
        return 29
      }
    },
    getLockPhase (val) {
      this.directions = [this.checkId(val)]
      let iframdevid = getIframdevid()
      let param = {
        'agentid': iframdevid,
        'direction': this.directions
      }
      getlockPhase(param).then(res => {
        if (res.data.success !== true) {
          this.$message.error(getMessageByCode(res.data.code, this.$i18n.locale))
          return
        }
        this.lockList = res.data.data
        let ringDataModel = new RingDataModel({}, res.data.data)
        this.sidewalkPhaseData = ringDataModel.getlockData().map(ele => {
          return ele.map(item => ({
            ...item,
            bgcolor: getTheme() === 'light' ? '#edf6ff' : '#243d59'
          }))
        })
      })
    },
    boxShow (index, data) {
      this.spanIndex = []
      let arrIndex = this.spanIndex.indexOf(index)
      if (arrIndex > -1) {
        this.spanIndex.splice(arrIndex, 1)
      } else {
        this.spanIndex.push(index)
      }
      this.getLockPhase(data)
      this.currentName = data.name
      this.clickType(index)
    },
    resetToDefaultThemeColor (List) {
      for (let i = 0; i < List.length; i++) {
        if (List[i].clicked) {
          delete List[i].clicked
        }
        List[i].bgcolor = getTheme() === 'light' ? '#edf6ff' : '#243d59'
      }
    },
    highlightThemeColor (List, index) {
      for (let i = 0; i < List.length; i++) {
        if (i === index) {
          List[i].clicked = true
          List[i].bgcolor = getTheme() === 'light' ? '#c1e0ff' : '#0082ac'
        }
      }
    },
    clickType (value) {
      this.resetToDefaultThemeColor(this.imgs)
      this.highlightThemeColor(this.imgs, value)
    },
    handleClose () {
      this.$emit('closePhaseBack')
    },
    handleManualControl () {
      if (this.directions.length === 0) {
        this.$message.error(this.$t('openatccomponents.overview.directionnull'))
        return
      }
      let iframdevid = getIframdevid()
      let submitdata = {
        agentid: iframdevid,
        direction: this.directions,
        greenflash: this.manualInfo.greenclear,
        duration: this.manualInfo.duration,
        yellow: this.manualInfo.yellowflash,
        redclear: this.manualInfo.allred,
        mingreen: this.manualInfo.mingreen

      }
      lockPhase(submitdata).then(res => {
        if (!res.data.success) {
          if (res.data.code === '4002' && res.data.data.errorCode === '4209') {
            let success = res.data.data.content.success
            if (success !== 0) {
              let errormsg = 'openatccomponents.overview.putTscControlError' + success
              this.$message.error(this.$t(errormsg))
              return
            }
          }
          this.$message.error(getMessageByCode(res.data.code, this.$i18n.locale))
          return
        }
        this.$message.success(this.$t('openatccomponents.common.download'))
        // if (res.data.success !== true) {
        //   this.$message.error(getMessageByCode(res.data.code, this.$i18n.locale))
        // }
      })
    },
    toAutoControl () {
      this.$emit('toAutoControl')
    },
    isHasPermission (path) {
      let res = hasPermission(path)
      return res
    },
    dirListSetTheme (list) {
      let dirArr = []
      let color = getTheme() === 'light' ? '#606266' : '#F1F3F4'
      for (let rec of list) {
        let recd = {
          ...rec,
          color: color
        }
        dirArr.push(recd)
      }
      return dirArr
    }
  }
}
</script>

  <style lang="scss" scoped>
.single-model-select {
    background-color: #a2cfff;
  }
  </style>
