<template>
  <el-dialog title="拉黑用户" :visible.sync="userDialogVisible">
    <el-form
      :model="userForm"
      ref="userForm"
      class="form-main"
      label-width="80px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="用户名">{{userForm.name}}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="真实姓名">{{userForm.name}}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机账号">{{userForm.account}}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="性别">{{userForm.sex}}</el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="所在机构">{{userForm.position}}</el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item class="is-required" label="拉黑理由" prop="desc">
            <el-input type="textarea" :rows="8" v-model="userForm.desc" placeholder="请用一句话概括该用户拉黑理由" maxlength="100"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24" class="el-btn-col">
          <div class="el-btn-col-box">
            <el-button type="primary">确定</el-button>
          </div>
        </el-col>
        <el-col :span="24">
          <el-form-item align="right">
            <span>创建时间：2018/08/23 18：52：12</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script>
  export default {
    data() {
      return {
        userDialogVisible: false,
        userForm: {
          account: '',
          name: '',
          tel: '',
          mail: '',
          position: '',
          department: '',
          org: '',
          module: ''
        }
      }
    },
    created() {

    },
    methods: {
      submitForm(formName) {
        // this.$refs[formName].validate((valid) => {
        //   if (valid) {
        //   } else {
        //     return false
        //   }
        // })
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  .form-main{
    width:100%;
    .form-line{
      border-top:1px dashed #ccc;
      margin-bottom:20px;
    }
  }
  .shortW{
    width:300px;
  }
  .card-title{
    font-size: 20px;
    font-weight: bold;
  }
  .el-checkbox-group{
    .el-checkbox{
      font-size: 16px;
      margin: 10px 60px;
      .el-checkbox__inner{
        width: 16px;
        height: 16px;
      }
      .el-checkbox__inner::after{
        left:5px;
        top:2px;
      }
      .el-checkbox__label{
        line-height:24px;
        font-size:16px;
      }
    }
  }
    
</style>
