<template>
  <div class="priority-control manual-common-content">
    <!-- <div class="title" style="margin-bottom: 18px;">{{$t('openatccomponents.overview.prioritycontrol')}}</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.delay')"
                prop="intersection">
                <el-input-number :placeholder="$t('openatccomponents.common.input')" :min="0" :max="65535" :precision="0" :step="1" :controls="false" v-model.number="manualInfo.delay" size="small"></el-input-number>
               <!-- <el-input v-model="manualInfo.tempDelay" size="small" :placeholder="$t('openatccomponents.common.input')"></el-input> -->
            </el-form-item>
            <el-form-item
                :label="$t('openatccomponents.overview.priorityType')"
                prop="count">
                <el-select v-model="manualInfo.type" class="col-inner"  size="small" clearable :placeholder="$t('openatccomponents.common.select')">
                  <el-option
                    v-for="item in typeSelect"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
               <!-- <el-input v-model="manualInfo.tempDuration" size="small" :placeholder="$t('openatccomponents.common.input')"></el-input> -->
            </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.duration')"
                prop="intersection">
                <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-input v-model="manualInfo.duration" size="small" :placeholder="$t('openatccomponents.common.input')"></el-input> -->
            </el-form-item>
            <el-form-item
                :label="$t('openatccomponents.overview.priorityPhase')"
                prop="count">
                <el-select v-model="manualInfo.phase" class="col-inner"  size="small" clearable :placeholder="$t('openatccomponents.common.select')">
                  <el-option
                    v-for="(item, index) in phaseSelect"
                    :key="index"
                    :label="item.label"
                    :value="item.value">
                    <div class="single-model">
                        <xdrdirselector Width="60px" Height="60px" Widths="50px" Heights="50px" :showlist="item.item"></xdrdirselector>
                        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.label }}</span>
                    </div>
                  </el-option>
                </el-select>
               <!-- <el-input v-model="manualInfo.tempDuration" size="small" :placeholder="$t('openatccomponents.common.input')"></el-input> -->
            </el-form-item>
           </el-form>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
         <el-form
           ref="manual"
           label-position="left"
           :model="manualInfo"
           label-width="90px">
            <el-form-item
                style="margin-bottom: 0;"
                :label="$t('openatccomponents.overview.level')"
                prop="count">
                <el-select v-model="manualInfo.level" class="col-inner"  size="small" clearable :placeholder="$t('openatccomponents.common.select')">
                  <el-option
                    v-for="item in levelOption"
                    :key="item.value"
                    :label="$t('openatccomponents.overview.levelOption' + item.value)"
                    :value="item.value">
                  </el-option>
                </el-select>
               <!-- <el-input v-model="manualInfo.tempDuration" size="small" :placeholder="$t('openatccomponents.common.input')"></el-input> -->
            </el-form-item>
           </el-form>
      </el-col>
    </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 xdrdirselector from '../../XRDDirSelector/XRDDirSelector'
import { getTheme, hasPermission } from '../../../../utils/auth'
import { getDirName } from './utils'
export default {
  name: 'prioritycontrol',
  components: {
    xdrdirselector
  },
  props: {
    realtimeStatusModalvisible: {
      type: Boolean,
      default: true
    },
    phaseList: {
      type: Array
    },
    isShowBack: {
      type: Boolean,
      default: true
    },
    isShowRecovery: {
      type: Boolean,
      default: true
    },
    isShowImplement: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      levelOption: [{
        value: 1,
        label: 1
      }, {
        value: 2,
        label: 2
      }, {
        value: 3,
        label: 3
      }, {
        value: 4,
        label: 4
      }, {
        value: 5,
        label: 5
      }],
      typeSelect: [{
        value: 0,
        label: this.$t('openatccomponents.overview.typeOption0')
      }, {
        value: 1,
        label: this.$t('openatccomponents.overview.typeOption1')
      }],
      phaseSelect: [],
      manualInfo: {
        level: 1,
        phase: 1,
        type: 0,
        duration: 60,
        delay: 0
      }
    }
  },
  created () {
    this.getSelect(this.phaseList)
  },
  methods: {
    getSelect (list) {
      let color = getTheme() === 'light' ? '#1E1E1E' : '#F1F3F4'
      this.phaseSelect = list.map((item, index) => {
        let dirArr = []
        for (let rec of item.direction) {
          let recd = {
            id: rec,
            color: color
          }
          dirArr.push(recd)
        }
        let nameArr = getDirName(dirArr)
        let name = ''
        nameArr = nameArr.map(record => this.$t(record))
        name = nameArr.join(',')
        return {
          label: name,
          item: dirArr,
          value: item.id
        }
      })
    },
    handleClose () {
      this.$emit('closePhaseBack')
    },
    handleManualControl () {
      let submitdata = {
        control: 24,
        delay: this.manualInfo.delay,
        duration: this.manualInfo.duration,
        type: this.manualInfo.type,
        phase: this.manualInfo.phase,
        level: this.manualInfo.level
      }
      this.$emit('closePhaseControl', submitdata)
    },
    toAutoControl () {
      this.$emit('toAutoControl')
    },
    isHasPermission (path) {
      let res = hasPermission(path)
      return res
    }
  }
}
</script>

<style>

</style>
