<template>
  <!-- 网元修改对话框 -->
  <el-dialog @close="close"
             @opened="updateDeviceInit"
             v-if="updateDeviceVisible"
             :title="$t('DeviceConfigurationManagement.updateDeviceInfo')"
             v-dialogDrag
             style="font-size: 10px; " width='750px' heigt='700px'
             :visible.sync="updateDeviceVisible">

    <el-row>

      <el-form :model="form" inline="true" ref="form" style="margin-bottom: -20px;margin-top:-20px">

        <el-form-item style="margin-bottom: -10px;">
          <el-form-item prop="number"
                        :label="'*'+ $t('DeviceConfigurationManagement.uuid')+':'"
                        :label-width="formLabelWidth">
            <el-input type="age" size='mini' :placeholder="$t('common.placeholder')" v-model="form.uuid"
                      v-on:blur="uuidCheck "
                      autocomplete="off"
                      style="width:200px"></el-input>
          </el-form-item>
          <el-form-item prop="string"
                        :label="'*'+ $t('DeviceConfigurationManagement.deviceName')+':'"
                        :label-width="formLabelWidth">
            <el-input size='mini' :placeholder="$t('common.placeholder')" v-model="form.deviceName"
                      v-on:blur="deviceNameCheck "
                      autocomplete="off"
                      style="width:200px"></el-input>
          </el-form-item>
        </el-form-item>
        <el-form-item style="margin-bottom: -10px;">
          <el-form-item prop="string"
                        :label=" $t('DeviceConfigurationManagement.deviceType')+':'"
                        :label-width="formLabelWidth">
            <el-input size='mini' unselectable="on" :placeholder="$t('common.doNotEdit')"
                      v-model="form.deviceTypeLabel"
                      autocomplete="off"
                      :disabled="disableFlag"
                      style="width:200px" readonly></el-input>
          </el-form-item>
          <el-form-item prop="string"
                        :label=" $t('DeviceConfigurationManagement.deviceModel')+':'" :label-width="formLabelWidth">
            <el-input size='mini' unselectable="on" :placeholder="$t('common.doNotEdit')" v-model="form.deviceModel"
                      autocomplete="off"
                      :disabled="disableFlag"
                      style="width:200px" prop="string" readonly></el-input>
          </el-form-item>
        </el-form-item>
        <el-form-item style="margin-bottom: -10px;">
          <el-form-item :label=" $t('DeviceConfigurationManagement.locationKey')+':'"
                        :label-width="formLabelWidth"
                        prop="string">
            <el-select clearable size="mini" v-model="form.locationKey"
                       :placeholder="$t('common.placeholderSelect')"
                       autocomplete="off"
                       v-on:change="queryCabinetByCondition"
                       v-on:clear="clearCabinetKey"
                       style="width:200px">
              <el-option v-for="item in locationList" :key="item.locationKey" :label="item.locationName"
                         :value="item.locationKey"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label=" $t('DeviceConfigurationManagement.cabinetKey')+':'"
                        :label-width="formLabelWidth"
                        prop="string">
            <el-select clearable size='mini' v-model="form.cabinetKey" :placeholder="$t('common.placeholderSelect')"
                       autocomplete="off"
                       v-on:input="queryLocationByCondition"
                       style="width:200px">
              <el-option v-for="item in cabinetList" :key="item.cabinetKey" :label="item.cabinetName"
                         :value="item.cabinetKey"></el-option>
              <!--cabinetKeyList   -->
            </el-select>
          </el-form-item>
        </el-form-item>
        <el-form-item style="margin-bottom: -10px;">
          <el-form-item :label=" $t('DeviceConfigurationManagement.subnetKey')+':'"
                        :label-width="formLabelWidth"
                        prop="string">
            <el-select clearable size='mini' v-model="form.subnetKey" :placeholder="$t('common.placeholderSelect')"
                       autocomplete="off"
                       style="width:200px">
              <el-option v-for="item in subnetList" :key="item.subnetKey" :label="item.subnetName"
                         :value="item.subnetKey"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            :label="'*'+ $t('DeviceConfigurationManagement.ipAddress')+':'"
            :label-width="formLabelWidth" prop="string">
            <el-input size='mini' :placeholder="$t('common.placeholder')" v-model="form.ipAddress"
                      autocomplete="off"
                      v-on:blur="ipCheck"
                      style="width:200px"></el-input>
          </el-form-item>
        </el-form-item>
        <el-form-item style="margin-bottom: -10px;">
          <el-form-item unselectable="on"
                        :label="'*'+ $t('DeviceConfigurationManagement.snmpVersion')+':'"
                        :label-width="formLabelWidth"
                        prop="string">
            <el-select clearable size='mini' v-model="deviceSNMP" :placeholder="$t('common.placeholderSelect')"
                       autocomplete="off"
                       v-on:change="deviceSNMPCheck"
                       style="width:200px">
              <el-option v-for="item in deviceSNMPList" :key="item.key" :label="item.label"
                         :value="item.key"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="'*'+ $t('DeviceConfigurationManagement.snmpPort')+':'"
                        :label-width="formLabelWidth" prop="string">
            <el-input size='mini' :placeholder="$t('common.placeholder')" v-model="form.snmpPort" autocomplete="off"
                      v-on:blur="getnumberCheck"
                      style="width:200px"></el-input>
          </el-form-item>
        </el-form-item>
        <el-form-item style="margin-bottom: -10px;">
          <el-form-item :label="'*'+ $t('DeviceConfigurationManagement.trapPort')+':'"
                        :label-width="formLabelWidth" prop="string">
            <el-input size='mini' :placeholder="$t('common.placeholder')" v-model="form.trapPort" autocomplete="off"
                      v-on:blur="trapnumberCheck"
                      style="width:200px"></el-input>
          </el-form-item>
          <el-form-item
            :label="'*'+ $t('DeviceConfigurationManagement.deviceStatus')+':'"
            :label-width="formLabelWidth"
            prop="string">
            <el-select clearable size='mini' v-model="valueState" :placeholder="$t('common.placeholderSelect')"
                       autocomplete="off"
                       v-on:change="valueStateCheck " style="width:200px">
              <!--:formatter="formatStateKey"-->
              <el-option v-for="item in deviceStatusList" :key="item.key" :label="item.label"
                         :value="item.key"></el-option>
            </el-select>
          </el-form-item>
        </el-form-item>
        <el-form-item style="margin-bottom: -10px;">
          <el-form-item :label="$t('DeviceConfigurationManagement.deviceVersion')+':'"
                        :label-width="formLabelWidth" prop="string">
            <el-input size='mini' :placeholder="$t('common.doNotEdit')" v-model="form.deviceVersion"
                      autocomplete="off"
                      :disabled="disableFlag"
                      style="width:200px" readonly></el-input>
          </el-form-item>
          <el-form-item :label=" $t('DeviceConfigurationManagement.startTime')+':'"
                        :label-width="formLabelWidth">
            <el-input size='mini' :placeholder="$t('common.placeholder')" v-model="form.startTime"
                      autocomplete="off"
                      v-on:blur="timeCheak"
                      style="width:200px"></el-input>
          </el-form-item>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row style="margin-bottom: 0px;" slot="footer" class="dialog-footer">
      <el-button size='mini' type="primary" @click="updateDevice">
        {{$t("common.updateBtn")}}
      </el-button>
      <el-button size='mini' @click="close">{{$t("common.cancel")}}</el-button>
    </el-row>
  </el-dialog>

</template>

<script>
  import DeviceManager from "../../../domain/models/DeviceManager";
  import SubnetManager from "../../../domain/models/SubnetManager";
  import legitimacyCheck from "../../../utils/legitimacyCheck";
  import DeviceService from '@/domain/services/DeviceService'
  import SubnetService from '@/domain/services/SubnetService.js'
  import LocationService from '@/domain/services/LocationService.js'
  import CabinetService from '@/domain/services/CabinetService.js'
  import cabinetManager from '@/domain/models/CabinetManager.js';
  import locationManager from '@/domain/models/LocationManager.js';
  import HelperUtil from '../../../utils/HelperUtil'

  export default {
    props: ['command'],

    components: {},
    data() {
      return {
        updateDeviceVisible: true,
        initList: this.command.target,

        deviceInfo: {},

        formLabelWidth: '120px',

        cabinetList: [],
        cabinetListInit: [],
        locationListInit: [],
        locationList: [],
        subnetList: [],

        state: true,

        //双向绑定弹出窗口ipput域
        form: {
          deviceKey: '',
          uuid: '',
          deviceName: '',
          deviceType: '',
          //显示用
          deviceTypeLabel: '',

          deviceModel: '',
          locationKey: '',
          cabinetKey: '',
          subnetKey: '',
          ipAddress: '',
          snmpVersion: '',
          snmpPort: '',
          trapPort: '',
          deviceStatus: '',
          deviceVersion: '',
          startTime: '',
          subcardModel1: '',
          subcardModel2: '',
          subcardModel3: '',
          configFileKey: '',
          configFileName: '',
          delFlag:'',
          modifyTime:'',
        },


        //网元状态下拉菜单
        deviceStatusList: [
          {
            key: '0',
            label: '在用'
          },
          {
            key: '1',
            label: '停用'
          },
        ],
        valueState: '1',
        //SNMP版本下拉菜单
        deviceSNMPList: [
          {
            key: '0',
            label: 'v1'
          },
          {
            key: '1',
            label: 'v2c'
          },
          {
            key: '3',
            label: 'v3'
          }
        ],
        deviceSNMP: '1',
        deviceTypeList: [
          {
            deviceTypeKey: '0',
            deviceTypeName: '传统'
          },
          {
            deviceTypeKey: '1',
            deviceTypeName: 'SDN',
          }
        ],
        disableFlag: true,

      }
    },

    methods: {
      close() {
        this.command.done();
      },

      /**
       * @Description  :修改网元信息初始化
       * @author       :
       * @param        :
       * @return       :
       * @exception    :
       * @date         :
       */
      updateDeviceInit: function () {
        /*this.deviceSNMP = this.initList.snmpVersion
        this.valueState = this.initList.deviceStatus.toString()
        this.state = true*/

        this.form.deviceKey = this.initList.deviceKey;
        this.form.uuid = this.initList.uuid
        this.form.deviceName = this.initList.deviceName
        this.form.deviceType =this.initList.deviceType //""//禁用
        this.form.deviceModel = this.initList.deviceModel// ""//禁用
        this.form.locationKey = this.initList.locationKey
        this.form.cabinetKey = this.initList.cabinetKey
        this.form.subnetKey = this.initList.subnetKey
        this.form.ipAddress = this.initList.ipAddress
        this.form.snmpVersion = this.initList.snmpVersion
        this.form.snmpPort = this.initList.snmpPort
        this.form.trapPort = this.initList.trapPort
        this.form.deviceStatus=this.initList.deviceStatus
        this.form.deviceVersion = this.initList.deviceVersion// ""//禁用
        this.form.startTime = this.initList.startTime
        this.form.subcardModel1 = this.initList.subcardModel1
        this.form.subcardModel2 = this.initList.subcardModel2
        this.form.subcardModel3 = this.initList.subcardModel3
        this.form.configFileKey = this.initList.configFileKey
        this.form.configFileName = this.initList.configFileName
        this.form.delFlag = this.initList.delFlag
        this.form.modifyTime = this.initList.modifyTime

        this.formatdeviceTypeForupdate()
      },


      updateDevice: function (){
        this.initList.deviceKey = this.form.deviceKey;;
        this.initList.uuid = this.form.uuid;
        this.initList.deviceName = this.form.deviceName;
        this.initList.deviceType =this.form.deviceType;//""//禁用
        this.initList.deviceModel = this.form.deviceModel;// ""//禁用
        this.initList.locationKey = this.form.locationKey;
        this.initList.cabinetKey = this.form.cabinetKey;
        this.initList.subnetKey = this.form.subnetKey;
        this.initList.ipAddress = this.form.ipAddress;
        this.initList.snmpVersion = this.form.snmpVersion;
        this.initList.snmpPort = this.form.snmpPort;
        this.initList.trapPort = this.form.trapPort;
        this.initList.deviceStatus=this.form.deviceStatus;
        this.initList.deviceVersion = this.form.deviceVersion;// ""//禁用
        this.initList.startTime = this.form.startTime;
        this.initList.subcardModel1 = this.form.subcardModel1;
        this.initList.subcardModel2 = this.form.subcardModel2;
        this.initList.subcardModel3 = this.form.subcardModel3;
        this.initList.configFileKey = this.form.configFileKey;
        this.initList.configFileName = this.form.configFileName;
        this.initList.delFlag = this.form.delFlag;
        this.initList.modifyTime = this.form.modifyTime;
        this.command.done();
      },
      queryLocationByCondition: function (){},
      clearCabinetKey() {},


      queryCabinetByCondition: function () {
      },
      formatdeviceTypeForupdate: function () {
        console.log('this.form.deviceType' + this.form.deviceType)
        if (this.form.deviceType == '0')
          this.form.deviceTypeLabel = '传统'
        else if (this.form.deviceType == '1')
          this.form.deviceTypeLabel = 'SDN'
        else
          this.form.deviceTypeLabel = ''
      },









      //网元状态改变触发函数
      timeChange(){
        this.form.startTime = this.getCurentTime()
      },


//     ------------------------------- 开始合法性校验--------------


      //时间合法性验证
      timeCheak: function () {
//        var result = false
        let deviceCheck = legitimacyCheck()

        var result = deviceCheck.timeCheck(this.form.startTime)
        if (!result) {
          this.InfoTip.warningTip(this, {message: '请输入有效的时间'});
          return false
        }
        return true
      },
      // 验证IP合法性
      ipCheck: function () {

        let deviceCheck = legitimacyCheck()

        var result = deviceCheck.ipCheck(this.form.ipAddress)
        if (!result) {
          this.InfoTip.warningTip(this, {message: '请输入有效的设备地址'});
          return false
        }
        return true

      },


      //输入文本长度验证
      textLengthCheck: function (checkString) {
        let deviceCheck = legitimacyCheck()

        var result = deviceCheck.textLengthCheck(checkString)
        if (!result) {
          this.InfoTip.warningTip(this, {message: '所输文本长度必须控制在20之内！'});
          return false
        }
        return true
      },

      getnumberCheck: function () {

        let deviceCheck = legitimacyCheck()

        var result = deviceCheck.numberCheck(this.form.snmpPort)
        if (!result) {
          this.InfoTip.warningTip(this, {message: 'Get端口号应为数字！'});
          return false
        }
        if (!this.textLengthCheck(this.form.snmpPort)) {
          return false
        }
        return true
      },
      trapnumberCheck: function () {

        let deviceCheck = legitimacyCheck()

        var result = deviceCheck.numberCheck(this.form.trapPort)
        if (!result) {
          this.InfoTip.warningTip(this, {message: 'Trap端口号应为数字'});
          return false
        }
        if (!this.textLengthCheck(this.form.trapPort)) {
          return false
        }
        return true
      },

      uuidCheck: function () {
        let deviceCheck = legitimacyCheck()

        var result = deviceCheck.textNullCheck(this.form.uuid)
        if (!result) {
          this.InfoTip.warningTip(this, {message: 'UUID不可为空！'});
          return false
        }
        if (!this.textLengthCheck(this.form.uuid)) {
          return false
        }

        return true
      },
      deviceNameCheck: function () {
        let deviceCheck = legitimacyCheck()

        var result = deviceCheck.textNullCheck(this.form.deviceName)
        if (!result) {
          this.InfoTip.warningTip(this, {message: '设备名称不可为空！'});
          return false
        }
        if (!this.textLengthCheck(this.form.deviceName)) {
          return false
        }

        return true
      },
      deviceSNMPCheck: function () {
        let deviceCheck = legitimacyCheck()

        var result = deviceCheck.textNullCheck(this.deviceSNMP)
        if (!result) {
          this.InfoTip.warningTip(this, {message: 'SNMP版本不可为空！'});
          return false
        }
        return true
      },

      valueStateCheck: function () {

        this.timeChange()
        let deviceCheck = legitimacyCheck()

        var result = deviceCheck.textNullCheck(this.valueState)
        if (!result) {
          this.InfoTip.warningTip(this, {message: '网元状态不可为空！'});
          return false
        }
        return true

      },

      totalCheck: function () {

        if (!this.timeCheak()) {
          console.log('时间不合法')
          return false;
        }
        if (!this.ipCheck()) {
          console.log('ip不合法')
          return false;
        }
        if (!this.getnumberCheck()) {
          console.log('get端口号不合法')
          return false;
        }
        if (!this.trapnumberCheck()) {
          console.log('trap端口号不合法')
          return false;
        }
        if (!this.uuidCheck()) {
          console.log('UUID不合法')
          return false;
        }
        if (!this.deviceNameCheck()) {
          console.log('设备名称不合法')
          return false;
        }
        if (!this.deviceSNMPCheck()) {
          console.log('SNMP版本号不合法')
          return false;
        }
        if (!this.valueStateCheck()) {
          console.log('设备状态不合法')
          return false;
        }
        return true
      },

//     ------------------------------- 结束合法性校验--------------
    },


    //初始化函数，加载数据
    created: function () {

    },

    watch: {},

  }
</script>

<style scoped>

</style>