<template>
  <d2-container>
    <p style="font-size: 14px;color: #666666;margin-bottom: 20px">
      前置机配置</p>
		
    <div style="width: 40%">
    <el-form ref="form" :model="form" label-width="120px" labelPosition="right" :rules="formRules">
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="前置机名称" prop="beforeName">
            <el-input v-model.trim.trim="form.beforeName" maxlength="16" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="IP" prop="beforeIp">
            <el-input v-model.trim.trim="form.beforeIp"/>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="端口号" prop="beforePort">
            <el-input v-model.trim.trim="form.beforePort" maxlength="5"/>
          </el-form-item>
        </el-col>
        <el-col :span="24" style="text-align: center">
            <zl-button type="primary" style="margin-left: 120px" @click="operInstance()">保存</zl-button>
        </el-col>
      </el-row>
    </el-form>
    </div>
		
  </d2-container>
</template>

<script>
  import { getSetInterFace,SaveSetInterFace} from '@/api/face/setInterface'

  export default {
		name:'',
    data () {
      let checkIP = (rule, value, callback) => {
        let reg = /^(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9])\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[0-9])$/
        if (!reg.test(value)) {
          return callback(new Error('请输入正确的IP'))
        } else {
          callback ()
        }
      }
      let checkNumber = (rule, value, callback) => {
        if(!value&&value!==0){
          return callback(new Error('不能为空'))
        }
        let reg = /^[0-9]*$/
        if (!reg.test(value)) {
          return callback(new Error('请输入数字'))
        } else {
          callback ()
        }
      }
      return {
        form:{
          beforePort:"",
          fbId:"",
          beforeName:"",
          beforeIp:""
        },
        formRules: {
           beforeIp:[{validator:checkIP,required: true, trigger: 'blur'}], 
          beforePort:[{validator: checkNumber,required: true, trigger: 'blur'}],
          beforeName:[{required: true, message: '请输入前置机名称', trigger: 'blur'}],
        },
      }
    },
    methods: {
      operInstance () {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            SaveSetInterFace(this.form).then(res=>{
              this.$message({
                message:'保存成功',
                type: 'success',
                duration:1000

              })
              this.getSetInterFaceClick()
            })
          }
        })
      },
      // 回显
      getSetInterFaceClick(){
        getSetInterFace({}).then(res=>{
         this.form=res.faceBefore
        })
      },
      clearForm(){
        if (this.$refs['form']!==undefined) {
          this.$refs['form'].resetFields()
        }
        this.form={}
      },
    },
    mounted () {
      this.getSetInterFaceClick()
      /* GetParams().then(res=>{
        if (res.data) {
          this.form = res.data
        }
      }) */
			
    }
  }
</script>