/**
 * 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="manual-control-modal closephase-control  manual-common-content">
    <!-- <div class="title" style="margin-bottom: 18px;">{{$t('openatccomponents.overview.phaseclosecontrol')}}</div> -->
    <el-row>
      <el-col :span="24">
         <el-form
           ref="manual"
           label-position="left"
           :model="manualInfo"
           label-width="90px">
            <el-form-item
                :label="$t('openatccomponents.overview.delay')"
                prop="intersection">
              <el-input-number :min="0" :max="65535" :precision="0" :step="1" :controls="false" v-model.number="manualInfo.tempDelay" size="small"></el-input-number>
            </el-form-item>
            <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>
      </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"
            :Draggable="false"
            :sidewalkPhaseData="sidewalkPhaseData"
            :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.close" class="col-inner"  size="small" :placeholder="$t('openatccomponents.common.select')">
                  <el-option
                    v-for="item in closeOption"
                    :key="item.value"
                    :label="$t('openatccomponents.overview.closeOption' + item.value)"
                    :value="item.value">
                  </el-option>
                </el-select>
            </template>
          </common-kanban>
        </div>
    </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="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 { hasPermission } from '../../../../utils/auth'

export default {
  name: 'closePhaselControl',
  props: {
    Visible: {
      type: Boolean
    },
    controlData: {
      type: Object
    },
    modelList: {
      type: Array
    },
    stagesList: {
      type: Array
    },
    currModel: {
      type: Number
    },
    preselectModel: {
      type: Number
    },
    currentStage: {
      type: Number
    },
    preselectStages: {
      type: Number
    },
    specialcontrolList: {
      type: Array
    },
    closePhaseRings: {
      type: Array
    },
    realtimeStatusModalvisible: {
      type: Boolean,
      default: true
    },
    sidewalkPhaseData: {
      type: Array
    },
    roadDirection: {
      type: String
    },
    isShowBack: {
      type: Boolean,
      default: true
    },
    isShowRecovery: {
      type: Boolean,
      default: true
    },
    isShowImplement: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      visible: this.Visible,
      manualInfo: {
        tempDelay: 0, // 控制方式手动操作的情况下的延迟时间的临时值。
        tempDuration: 300 // 控制方式手动操作的情况下的持续时间的临时值。
      },
      closeOption: [{
        value: 0
      }, {
        value: 1
      }, {
        value: 2
      }, {
        value: 3
      }]
    }
  },
  methods: {
    handleClose () {
      this.$emit('closePhaseBack')
    },
    handleManualControl () {
      let submitdata = {
        control: 23,
        delay: this.manualInfo.tempDelay !== undefined ? Number(this.manualInfo.tempDelay) : 0,
        duration: this.manualInfo.tempDuration !== undefined ? Number(this.manualInfo.tempDuration) : 0,
        data: {}
      }
      submitdata.data.phases = this.handleSubmitPhaseClose()

      this.$emit('closePhaseControl', submitdata)
    },
    handleSubmitPhaseClose (element) {
      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.close = phase[j].close
          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
    }
  },
  mounted () {
    if (this.controlData.tempDelay) {
      this.manualInfo.tempDelay = this.controlData.delay
    }
    if (this.controlData.tempDuration) {
      this.manualInfo.tempDuration = this.controlData.duration
    }
  }
}
</script>
<style lang="scss" scoped>
.col-inner {
  width: 100%;
  float: left;
}
.col-title {
  width: 100%;
  float: left;
}
</style>
