<template>
  <div id="userInfoForm">
    <el-row>
      <el-col :span="24" class="top">
        <span class="shu"></span><span class="title">{{ formTitle }}</span>
      </el-col>
      <el-col :span="24" class="form">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-col :span="24">
            <el-form-item label="用户名称" prop="name">
              <el-input v-model="ruleForm.name" placeholder="请输入用户名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="手机号" prop="phone">
              <el-input disabled v-model="ruleForm.phone" placeholder="请输入手机号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24" class="clickBtn">
            <el-form-item>
              <el-button type="primary" size="small" @click="submitForm('ruleForm')">提交</el-button>
              <el-button size="small" @click="resetForm('ruleForm')">取消</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'userInfoForm',
  props: {
    ruleForm: null,
    formTitle: null,
  },
  components: {},
  data: () => ({
    rules: {
      name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
      phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
    },
  }),
  created() {},
  computed: {},
  methods: {
    submitForm() {
      this.$emit('submitForm', { data: this.ruleForm });
    },
    resetForm() {
      this.$emit('resetForm');
    },
  },
};
</script>

<style lang="less" scoped>
p {
  padding: 0;
  margin: 0;
}
.top .shu {
  float: left;
  width: 4px;
  height: 20px;
  background: rgba(233, 2, 29, 1);
}
.top .title {
  float: left;
  padding: 0 10px;
  font-size: 16px;
  font-family: Source Han Sans SC;
  font-weight: bold;
  color: rgba(40, 40, 40, 1);
}
/deep/.el-textarea__inner {
  min-height: 100px !important;
}
/deep/.select {
  width: 632px;
}
.selects {
  width: 473px;
  margin: 0 15px 0 0;
}
/deep/.el-radio__input.is-checked + .el-radio__label {
  color: #e9021d;
}
/deep/.el-radio__input.is-checked .el-radio__inner {
  border-color: #e9021d;
  background: #e9021d;
}
/deep/.el-checkbox__input.is-checked + .el-checkbox__label {
  color: #e9021d;
}
/deep/.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #e9021d;
  border-color: #e9021d;
}
/deep/.el-checkbox-button,
.el-checkbox-button__inner {
  margin: 0 15px 0 0;
}
/deep/.el-checkbox-button__inner {
  padding: 7px 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
/deep/.el-checkbox-button__inner:hover {
  color: #e9021d;
}
/deep/.el-checkbox-button:first-child .el-checkbox-button__inner {
  border-left: 1px solid #ccc;
  border-radius: 5px;
}
/deep/.el-checkbox-button:last-child .el-checkbox-button__inner {
  border-radius: 5px;
}
/deep/.el-checkbox-button.is-checked .el-checkbox-button__inner {
  color: #e9021d;
  background-color: #ffffff;
  border-color: #e9021d;
}
/deep/.el-checkbox-button.is-checked .el-checkbox-button__inner {
  box-shadow: none;
}
/deep/.el-switch.is-checked .el-switch__core {
  border-color: #e9021d;
  background-color: #e9021d;
}
.clickBtn .el-button {
  width: 100px;
  height: 40px;
  padding: 0;
  color: #ffffff;
  background: #b9b9b9;
  border-radius: 4px;
  margin: 40px;
}
.clickBtn {
  text-align: center;
  margin: 40px 0;
  border-top: 1px solid #ccc;
}
.clickBtn .el-button:first-child {
  background-color: #e9021d;
}
</style>
