<template>
  <div class="table-form">
    <Form :model="model" :ref="action" :rules="rules" :label-width="labelWidth">
      <Row :gutter="10">
        <Col span="24">
           <Form-item label="数据源标识" prop="code" v-validate:code.required.engCode.maxInputLength="rules">
            <Input v-model="model.code" placeholder="不能重复，只能输入英文" :disabled="disabled"></Input>
            </Form-item>
        </Col>
      </Row>
     <Row :gutter="10">
                <Col span="24">
                <Form-item label="版本类型" prop="version" v-validate:version.required.@change.$number="rules">
                    <Select v-model="model.version" placeholder="请选择数据源类型"  :disabled="disabled">
                        <Option :value=0>SNMPv1</Option>
                        <Option :value=1>SNMPv2</Option>
                       <!-- <Option value="2">SNMPv3</Option>-->
                        <!-- <Option value="3">其他认证方式</Option> -->
                    </Select>
                </Form-item>
                </Col>
        </Row>
        <Row :gutter="10" >
        <Col span="24">
            <FormItem label="地址" prop="ip"  v-validate:ip.required.ip.maxInputLength="rules">
                <Input v-model="model.ip"  placeholder="请输入IP地址"  :disabled="disabled"></Input>
            </FormItem>
        </Col>
      </Row>
        
       <Row :gutter="10" >
        <Col span="24">
           <FormItem label="端口" prop="port"  v-validate:port.required.port.maxInputLength.$number="rules">
                <Input v-model="model.port"  placeholder="请输入端口"  :disabled="disabled" :number="true"></Input>
            </FormItem>
        </Col>
      </Row>

      <Row :gutter="10" v-if="model.version==2">
        <Col span="24">
            <FormItem label="用户名" prop="username"  v-validate:username.required.maxInputLength="rules">
                <Input v-model="model.username"  placeholder="请输入用户名"  :disabled="disabled"></Input>
            </FormItem>
        </Col>
      </Row>
       <Row :gutter="10" v-if="model.version==2">
        <Col span="24">
           <FormItem label="认证密码" prop="password"  v-validate:password.required.maxInputLength="rules">
                <Input v-model="model.password" type="password"  placeholder="请输入认证密码"  :disabled="disabled"></Input>
            </FormItem>
        </Col>
      </Row>
     
       <Row :gutter="10" v-if="model.version==2">
        <Col span="24">
           <FormItem label="加密密码" prop="privateKey"  v-validate:privateKey.required.maxInputLength="rules">
                <Input v-model="model.privateKey" type="password"  placeholder="请输入加密密码"  :disabled="disabled"></Input>
            </FormItem>
        </Col>
      </Row>
        <Row :gutter="10">
                <Col span="24">
                    <Form-item label="只读团体字" prop="rcommunity" v-validate:rcommunity.required.maxInputLength="rules">
                        <Input v-model="model.rcommunity"  placeholder="请输入只读团体字" :disabled="disabled"></Input>
                    </Form-item>
                </Col>
        </Row>
         <Row :gutter="10" v-if="false">
                <Col span="24">
                    <Form-item label="读写团体字" prop="rwCommunity" v-validate:rwCommunity.required.maxInputLength="rules">
                        <Input v-model="model.rwCommunity"  placeholder="请输入读写团体字" :disabled="disabled"></Input>
                    </Form-item>
                </Col>
        </Row>
         <Row :gutter="10">
                <Col span="24">
                    <Form-item label="超时时间" prop="expireTime" v-validate:expireTime.required.$number.maxInputLength="rules">
                        <InputNumber v-model="model.expireTime"  placeholder="请输入超时时间" :disabled="disabled"></InputNumber>
                    </Form-item>
                </Col>
        </Row>
        <Row :gutter="10">
                <Col span="24">
                    <Form-item label="重试次数" prop="reconnectCount" v-validate:reconnectCount.required.$number.maxInputLength="rules">
                        <InputNumber :max="1000" :min="1" step="1" v-model="model.reconnectCount" :disabled="disabled"></InputNumber>
                    </Form-item>
                </Col>
        </Row>
         <Row :gutter="10">
                <Col span="24">
                    <Form-item label="描述" prop="description" v-validate:description.maxTextLength="rules">
                        <Input v-model="model.description" type="textarea" placeholder="请输入描述" :disabled="disabled"></Input>
                    </Form-item>
                </Col>
        </Row>
      <Row class="buttonDiv">
        <Button :loading="loading"
          @click="submitForm(action)"
          type="primary"
          v-if="!(action == 'detail')"
        >确&nbsp;&nbsp;定</Button>
        <Button @click="cancel">关&nbsp;&nbsp;闭</Button>
      </Row>
    </Form>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Emit } from "vue-property-decorator";


@Component
export default class SnmpForm extends Vue {
   
    loading : boolean = false;
    @Prop() private model!:any;
    @Prop(String) private action!:string;
    @Prop() private tableVm!:any;

    labelWidth:number =120;
    rules : any={};
    @Emit('close-modal') close(){}
    cancel () {
        this.close();
        setTimeout(()=>{
          (this.$refs[this.action] as any).resetFields();
        },300);
        
    }

    save(){
        this.getApiData('post',this.$msPrefix.base+'/api/v1/data/save/snmpCollector',this.model,res=>{
            this.loading=!1;
            if (res.rtnCode == 0) {
                this.tableVm.getData();
                this.cancel();
                this.$tools.message('success',(this.action == 'update'?'修改':'新增')+'成功！')
            }else{
               this.$tools.message('error',res.msg)
            }
        },err=>{
           this.loading=!1;
        })
    }
    /*提交*/
      submitForm (action) {
      	
        (this.$refs[action] as any).validate((valid) => {
          if (valid) {
          	if(!this.loading){
                this.loading=!0;
                this.save()
            }
          } else {
           this.$tools.message('info',"请完善必填项!")
          }
        });
      }

       get disabled(){
        return this.action=='detail'
      }
}
</script>

