/**
 * 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="lockingphase-control manual-common-content">
    <!-- <div class="title" style="margin-bottom: 18px;">{{$t('openatccomponents.overview.phaselocking')}}</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 :min="0" :max="65535" :precision="0" :step="1" :controls="false" v-model.number="manualInfo.tempDuration" size="small"></el-input-number>
           </el-form-item>

            <el-form-item
                :label="$t('openatccomponents.overview.yellowflash')"
                prop="intersection">
              <el-input-number :min="0" :max="65535" :precision="0" :step="1" :controls="false" v-model.number="manualInfo.tempYellow" size="small"></el-input-number>
            </el-form-item>

            <el-form-item
                :label="$t('openatccomponents.overview.mingreen')"
                prop="count">
              <el-input-number :min="0" :max="65535" :precision="0" :step="1" :controls="false" v-model.number="manualInfo.tempMingreen" 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="intersection">
            <el-input-number :min="0" :max="65535" :precision="0" :step="1" :controls="false" v-model.number="manualInfo.tempGreenflash" size="small"></el-input-number>
          </el-form-item>
           <el-form-item
               :label="$t('openatccomponents.overview.allred')"
               prop="intersection">
             <el-input-number :min="0" :max="65535" :precision="0" :step="1" :controls="false" v-model.number="manualInfo.tempRedclear" size="small"></el-input-number>
           </el-form-item>
          </el-form>
     </el-col>
    </el-row>
    <el-row>
        <!-- <div class="model-label">{{$t('openatccomponents.overview.mode')}}:</div>
        <div style="width: 100%; overflow: hidden;margin-top: 20px;">
          <common-kanban
            v-for="ring in closePhaseRings"
            :key="ring.num" class="closephasekanban"
            :list="ring.phases"
            :header-text="$t('openatccomponents.pattern.ring') + ring.num"
            :roadDirection="roadDirection"
            @handleSort="handleSort">
              <template v-slot:kanbantitle>
                <div class="col-title" v-text="$t('openatccomponents.overview.closemode')"></div>
              </template>
              <template v-slot:kanbancontent="data">
                <el-select v-model="data.element.locktype" class="col-inner"  size="small" :placeholder="$t('openatccomponents.common.select')">
                  <el-option
                    v-for="item in lockingOption"
                    :key="item.value"
                    :label="$t('openatccomponents.overview.lockingOption' + item.value)"
                    :value="item.value">
                  </el-option>
                </el-select>
            </template>
          </common-kanban>
        </div> -->
      <PhasePedSelect :closePhaseRings="closePhaseRings"
                      :sidewalkPhaseData="sidewalkPhaseData"
                      :roadDirection="roadDirection"
                      @onPhasePedSelectChange="onPhasePedSelectChange"
                      ></PhasePedSelect>
    </el-row>
    <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="handleLockPhase()">{{$t('openatccomponents.overview.implement')}}</el-button>
        <el-button v-if="!isShowImplement" type="primary" @click="handleLockPhase()">{{$t('openatccomponents.overview.comfirm')}}</el-button>
    </div>
  </div>
</template>

<script>
import RingDataModel from '../../../../utils/RingDataModel.js'
import { hasPermission } from '../../../../utils/auth'
import PhasePedSelect from '../../PhasePedSelect/index'

export default {
  name: 'LockPhaselControl',
  components: {
    PhasePedSelect
  },
  props: {
    phaseList: {
      type: Array
    },
    patternStatus: {
      type: Object
    },
    roadDirection: {
      type: String
    },
    isShowBack: {
      type: Boolean,
      default: true
    },
    isShowRecovery: {
      type: Boolean,
      default: true
    },
    isShowImplement: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      params: {},
      closePhaseRings: [],
      sidewalkPhaseData: [],
      manualInfo: {
        tempGreenflash: 6,
        tempDuration: 600, // 控制方式手动操作的情况下的持续时间的临时值。
        tempYellow: 3,
        tempRedclear: 2,
        tempMingreen: 15
      },
      lockingOption: [{
        value: 0
      }, {
        value: 1
      }, {
        value: 2
      }, {
        value: 3
      }]
    }
  },
  mounted () {
    if (this.patternStatus && this.phaseList && this.phaseList.length > 0) {
      let ringDataModel = new RingDataModel(this.patternStatus, this.phaseList)
      this.closePhaseRings = ringDataModel.initRingPhaseData()
      this.sidewalkPhaseData = ringDataModel.getPedPhasePos()
    }
  },
  methods: {
    onPhasePedSelectChange (params) {
      this.phases = params
    },
    handleClose () {
      this.$emit('closePhaseBack')
    },
    handleLockPhase () {
      let submitdata = {
        control: 22,
        data: {}
      }
      if (this.manualInfo.tempGreenflash !== undefined) {
        submitdata.data.greenflash = Number(this.manualInfo.tempGreenflash)
      }
      if (this.manualInfo.tempDuration !== undefined) {
        submitdata.data.duration = Number(this.manualInfo.tempDuration)
      }
      if (this.manualInfo.tempYellow !== undefined) {
        submitdata.data.yellow = Number(this.manualInfo.tempYellow)
      }
      if (this.manualInfo.tempRedclear !== undefined) {
        submitdata.data.redclear = Number(this.manualInfo.tempRedclear)
      }
      if (this.manualInfo.tempMingreen !== undefined) {
        submitdata.data.mingreen = Number(this.manualInfo.tempMingreen)
      }
      submitdata.data.phases = this.phases
      this.$emit('closePhaseControl', submitdata)
    },
    handleSubmitPhaseLocking () {
      let allRingsPhases = []
      for (let i = 0; i < this.closePhaseRings.length; i++) {
        let ring = this.closePhaseRings[i]
        let phase = ring.phases
        for (let j = 0; j < phase.length; j++) {
          let obj = {}
          obj.id = phase[j].id
          obj.type = phase[j].locktype
          allRingsPhases.push(obj)
        }
      }
      return allRingsPhases
    },
    handleSort (sortedlist) {
      // 重新排序数据
      let ringid = sortedlist[0].ring
      for (let i = 0; i < this.closePhaseRings.length; i++) {
        if (ringid === this.closePhaseRings[i].num) {
          this.closePhaseRings[i].phases = sortedlist
        }
      }
    },
    toAutoControl () {
      this.$emit('toAutoControl')
    },
    isHasPermission (path) {
      let res = hasPermission(path)
      return res
    }
  }
}
</script>
<style lang="scss" scoped>
.col-inner {
  width: 100%;
  float: left;
}
.col-title {
  width: 100%;
  float: left;
}
</style>
