<template>
  <div class="content">
   
    <a-form-model
      ref="ruleForm"
      :model="form"
      :rules="rules"
      :label-col="inline"
      layout="vertical"
      :wrapper-col="wrapperCol"
    >
      <a-form-model-item><div class="cardTitle">基础信息</div></a-form-model-item>
      <a-form-model-item label="订单号" prop="code">
        <a-input disabled style="width:60%"/>
      </a-form-model-item>
      <a-form-model-item label="选择功能模块" prop="code">
        <a-select style="width:60%"/>
      </a-form-model-item>
      <a-form-model-item label="选择有效时长" prop="code">
        <a-select style="width:60%"/>
      </a-form-model-item>
      <a-form-model-item label="购买金额">
        <span style="color:#D53131">25，000</span>
      </a-form-model-item>
      <a-form-model-item label="企业名称">
        <span>广西印象物业服务有限公司</span>
      </a-form-model-item>
      <a-form-model-item label="选择小区">
        <a-input style="width:60%" placeholder="请输入小区全称"/>
      </a-form-model-item>
      <a-form-model-item><div class="cardTitle">高级配置</div></a-form-model-item>
      <a-row>
        <a-col :span='12'>
          <a-form-model-item label="域名信息" prop="">
            <a-input v-model="form.verificationCode"
                placeholder="请输入域名信息"
                style="width:130%"
            />
          </a-form-model-item>
        </a-col>
        <a-col :span='12'>
          <a-form-model-item label="服务器IP" prop="">
            <a-input v-model="form.verificationCode"
                placeholder="请输入服务器IP"
                style="width:130%"
            />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span='12'>
          <a-form-model-item label="是否定制" prop="">
            <a-select v-model="form.verificationCode"
                style="width:100%"
            />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-form-model-item label="定制需求">
        <a-textarea
          v-model="value"
          placeholder="请输入定制需求"
          disabled
          :auto-size="{ minRows: 3, maxRows: 5 }"
        />
      </a-form-model-item>
      <a-form-model-item label="其他附件">
        <span>建议上传小于5M，支持上传word、excel格式的文件</span>
        <a-row  style="margin-top:5px">
          <a-col :span='12'>
            <a-upload
              name="file"
              :multiple="true"
              action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
              :headers="headers"
              @change="handleChange"
            >
              <a-button> <a-icon type="upload" /> 选择文件</a-button>
            </a-upload>
          </a-col>
        </a-row>
      </a-form-model-item>
      <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
        <a-button type="primary" @click="onSubmit"> 提交 </a-button>
        <a-button style="margin-left: 10px" @click="resetForm">
          重置
        </a-button>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 表单
      labelCol: { span: 4 },
      wrapperCol: { span: 10 },
      other: "",
      form: {
        tel: "",
        name: "",
        address:""
      },
      rules: {
        tel: [
          {
            required: true,
            message: "请输入手机号",
            trigger: "blur",
          },
          {
            min: 11,
            max: 11,
            message: "姓名长度必须为 11 位",
            trigger: "blur",
          },
        ],
        name: [
          {
            required: true,
            message: "请输入姓名",
            trigger: "blur",
          },
          {
            min: 3,
            max: 5,
            message: "姓名长度必须为 3 至 5位",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    // 获取验证码
    getCode(){},
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 重置
    resetForm() {
      this.$refs.ruleForm.resetFields();
    },
  },
};
</script>

<style lang="less" scoped>
.content {
  background: #fff;
  padding-left: 125px;
  padding-top: 48px;
}
.cardTitle{
  margin-left: -10px;
  margin-bottom: -10px;
}
/deep/.ant-col .ant-form-item-label{
  margin-top: -10px;
}
.uploadImg{
  background: #0000000A;
  border:2px solid #00000029;
  color: #00000029;
  width: 180px;
  height: 120px;
  text-align: center;
  line-height: 110px;
  font-size:60px;
  cursor: pointer;
}
</style>  