<template>
  <el-dialog title="表单" :visible.sync="dialogVisible" width="500px" append-to-body>

    <el-form ref="formRef" :model="formData" :rules="formRules" :inline="false" label-width="auto">

      <el-form-item label="用户名" prop="username">
        <el-input v-model="formData.username"></el-input>
      </el-form-item>


      <el-form-item label="密码" prop="password">
        <el-input v-model="formData.password"></el-input>
      </el-form-item>


    </el-form>

    <div slot="footer">
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="onClickSubmitBtn">确定</el-button>
    </div>

  </el-dialog>
</template>

<script>

export default {
  name: 'DeviceMqttAuthTestDialog',
  data(){
    return {
      dialogVisible: true,
      formData: {
        username: '',
        password: '',
      },
      formRules: {
        username: [{required: true, message: '请输入用户名', trigger: 'blur'}],
        password: [{required: true, message: '请输入密码', trigger: 'blur'}],
      }
    }
  },
  mounted(){
  },
  methods: {
    start(){
      this.dialogVisible = true
      this.formData = {
        username: '',
        password: ''
      }
    },
    onClickSubmitBtn(){
      const doSubmit = () => {
        console.log(JSON.stringify(this.formData, null, 2))
      }
      this.$refs.formRef.validate(valid => {
        if (valid) {
          doSubmit()
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>