<template>
  <div class="orderContact">
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="110px"
      class="demo-ruleForm"
      label-position="left"
    >
      <el-form-item label="客户联系人：" prop="contanct">
        <el-input
          v-model="ruleForm.contanct"
          placeholder="请输入联系人"
        ></el-input>
      </el-form-item>
      <el-form-item label="联系电话：" prop="phone">
        <el-input
          v-model="ruleForm.phone"
          placeholder="请输入联系电话"
        ></el-input>
      </el-form-item>
      <el-form-item label="电子邮箱：" prop="email">
        <el-input
          v-model="ruleForm.email"
          placeholder="请输入电子邮箱"
        ></el-input>
      </el-form-item>
      <el-form-item label="座机：">
        <el-input v-model="ruleForm.tel" placeholder="区号座机号码"></el-input>
      </el-form-item>
      <el-form-item label="传真：">
        <el-input
          v-model="ruleForm.faxNumber"
          placeholder="请输入传真号"
          :maxlength="6"
        ></el-input>
      </el-form-item>
    </el-form>
    <!-- 底部按钮 -->
    <div class="drawer-bottom">
      <button class="esc">取消</button>
      <button class="enter">保存</button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      ruleForm: {
        contanct: "",
        phone: "",
        email: "",
        tel: "",
        faxNumber: ""
      },
      rules: {
        contanct: [
          { required: true, message: "请输入联系人", trigger: "blur" }
        ],
        phone: [
          { required: true, message: "请输入统一社会信用代码", trigger: "blur" }
        ],
        email: [
          { required: true, message: "请输入邮箱地址", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"]
          }
        ]
      }
    };
  },
  methods: {}
};
</script>
<style lang="scss">
.orderContact {
  width: 100%;
  .el-radio {
    height: auto;
    padding: 7px 28px;
    border-radius: 0px;
    border: 1px solid #dee0eb;
    .el-radio__label {
      padding: 0;
      font-family: PingFangSC-Regular;
      font-size: 12px;
      color: #333333;
    }
  }
  .el-radio__input {
    display: none;
  }
  .el-form-item {
    .el-button {
      border: none;
      width: 12px;
      height: 12px;
      border-radius: 100%;
      font-size: 12px;
      padding: 0;
      color: #3071fe;
      line-height: 10px;
      text-align: left;
      margin-left: 10px;
    }
  }
  .el-input {
    width: 350px;
    height: 40px;
    input {
      width: 350px;
      height: 40px;
      border-radius: 0px;
    }
  }
}
</style>
