<template>
  <!-- <product-detail :is-edit='false'></product-detail> -->
  <div class="container">
    <el-form
      ref="form"
      :rules="rules"
      :model="form"
      :label-position="labelPosition"
      label-width="80px"
    >
      <div class="optionbox">
        <div class="line line1">
          <el-form-item label="姓名" prop="nameCn">
            <el-input v-model.trim="form.nameCn"></el-input>
          </el-form-item>
          <el-form-item label="拼音" prop="nameEn">
            <el-input v-model="form.nameEn"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-select clearable v-model="form.sex" placeholder="">
              <el-option label="男" :value="1"></el-option>
              <el-option label="女" :value="0"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="line line1">
          <el-form-item label="学校名称" prop="school">
            <el-input v-model="form.school"></el-input>
          </el-form-item>
          <el-form-item label="年级" prop="grade">
            <el-input
              v-model="form.grade"
              placeholder="请输入数字"
              @input="checkNumGrade"
            ></el-input>
          </el-form-item>
          <el-form-item label="专业" prop="domian">
            <el-input v-model="form.domian"></el-input>
          </el-form-item>
        </div>
        <div class="line line2">
          <el-form-item label="学号" prop="stuNumber">
            <el-input v-model="form.stuNumber"></el-input>
          </el-form-item>
          <el-form-item label="身份证号" prop="idCard">
            <el-input v-model="form.idCard"></el-input>
          </el-form-item>
          <el-form-item label="微信号" prop="wechatNumber">
            <el-input v-model="form.wechatNumber"></el-input>
          </el-form-item>
        </div>
        <div class="line line2">
          <el-form-item label="电话(国内)" prop="inlandMobile">
            <el-input v-model="form.inlandMobile"></el-input>
          </el-form-item>
          <el-form-item label="电话(国外)" prop="foreignMobile">
            <el-input v-model="form.foreignMobile"></el-input>
          </el-form-item>
          <el-form-item label="GPA" prop="gpa">
            <el-input
              v-model="form.gpa"
              placeholder="请输入数字"
              @input="checkNumGpa"
            ></el-input>
          </el-form-item>
        </div>

        <div class="line line3">
          <el-form-item label="地址(国内)" prop="inlandAddr">
            <el-input v-model="form.inlandAddr"></el-input>
          </el-form-item>
          <el-form-item label="地址(国外)" prop="foreignAddr">
            <el-input v-model="form.foreignAddr"></el-input>
          </el-form-item>
        </div>
        <div class="line line3">
          <el-form-item label="常用邮箱" prop="mail">
            <el-input v-model="form.mail"></el-input>
          </el-form-item>
          <el-form-item label="备用邮箱" prop="reserveMail">
            <el-input v-model="form.reserveMail"></el-input>
          </el-form-item>
        </div>

        <div class="line line3">
          <!-- <el-form-item label="校园大使" v-if="form.channel !== 1">
            <el-input v-model="form.campusAgent"></el-input>
          </el-form-item> -->
          <el-form-item
            label="校园大使"
            :prop="form.channel == 1 ? 'campusAgent' : ''"
          >
            <el-input v-model="form.campusAgent"></el-input>
          </el-form-item>
          <el-form-item label="渠道" prop="channel">
            <el-select
              clearable
              v-model="form.channel"
              placeholder="渠道为'主动推荐引流',必须填写校园大使"
            >
              <el-option label="主动推荐引流" :value="1"></el-option>
              <el-option label="客服自主添加" :value="2"></el-option>
              <el-option label="搜索引擎引流" :value="3"></el-option>
              <el-option label="外部资源推荐" :value="4"></el-option>
              <el-option label="自媒体引流" :value="5"></el-option>
              <el-option label="地推活动" :value="6"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="意向度" prop="planStatus">
            <el-select clearable v-model="form.planStatus">
              <el-option label="低" :value="1"></el-option>
              <el-option label="中" :value="2"></el-option>
              <el-option label="高" :value="3"></el-option>
            </el-select>
          </el-form-item>
        </div>
      </div>
      <div class="line line4">
        <el-form-item label="出生日期" prop="birthday">
          <el-date-picker
            v-model="form.birthday"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          label="学习签证到期时间"
          prop="studyPermitTime"
          label-width="140px"
        >
          <el-date-picker
            v-model="form.studyPermitTime"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          label="入境签证到期时间"
          prop="entryVisaTime"
          label-width="140px"
        >
          <el-date-picker
            v-model="form.entryVisaTime"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
      </div>
      <div class="line line5">
        <el-button type="primary" @click="submitForm('form')">提交</el-button>
        <el-button @click="resetForm('form')">重置</el-button>
      </div>
    </el-form>
  </div>
</template>
<script>
// import ProductDetail from "./components/ProductDetail";
import { createUser } from "@/api/cso";

const defaultForm = {
  nameCn: undefined,
  nameEn: undefined,
  sex: undefined,
  wechatNumber: undefined,
  idCard: undefined,
  stuNumber: undefined,
  gpa: undefined,
  birthday: undefined,
  school: undefined,
  grade: undefined,
  domian: undefined,
  inlandMobile: undefined,
  channel: undefined,
  planStatus: undefined,
  mail: undefined,
  foreignAddr: undefined,
  reserveMail: undefined,
  foreignMobile: undefined,
  inlandAddr: undefined,
  campusAgent: undefined,
  studyPermitTime: undefined,
  entryVisaTime: undefined,
  planStatus: undefined
};
export default {
  name: "addProduct",
  // components: { ProductDetail }
  data() {
    return {
      form: Object.assign({}, defaultForm),

      rules: {
        nameCn: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        wechatNumber: [
          { required: true, message: "请输入微信号", trigger: "blur" }
        ],
        school: [{ required: true, message: "请输入学校", trigger: "blur" }],
        channel: [{ required: true, message: "请选择渠道", trigger: "change" }],
        // gpa: [{ type: 'number', message: 'gpa必须为数字值', trigger: "blur" }],
        // grade: [{ type: 'number', message: '年级必须为数字值' }],
        campusAgent: [
          { required: true, message: "请输入校园大使", trigger: "blur" }
        ]
      },
      labelPosition: "left"
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$confirm("是否要提交", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            createUser(this.form).then(response => {
              this.$message({
                type: "success",
                message: "提交成功",
                duration: 1000
              });
              this.$refs[formName].resetFields();
              this.form = Object.assign({}, defaultForm);
              // location.reload();
            });
          });
        } else {
          console.log("error submit!!");
          console.log(valid);
          return false;
        }
      });
      // createUser(this.form)
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      // console.log(this.$refs[formName], "this.$refs[formName]");
      this.form = Object.assign({}, defaultForm);
      // console.log(this.form, "this.form");
      // this.form.grade = "";
      // this.form.gpa = "";
    },
    checkNumGrade() {
      this.form.grade = parseInt(this.form.grade.replace(/[^\d]/g, ""));
      // console.log(this.form.grade);
    },
    checkNumGpa() {
      this.form.gpa = parseFloat(this.form.gpa.replace(/[^0-9.]/g, ""));
      // console.log(this.form.gpa);
    }
  }
};
</script>
<style lang="scss" scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px;
  // background-color: pink;
}
.el-form {
  width: 80%;
  // background-color: pink;
  .el-form-item {
    margin-right: 80px;
  }
}
.optionbox {
  display: flex;
  flex-direction: column;

  // align-items: center;
}
.line {
  display: flex;
  // background-color: pink;
}

.el-input {
  width: 200px;
}

.line3 {
  .el-select {
    width: 250px;
  }
}
.line5 {
  display: flex;
  justify-content: center;
}

// .inputNumber{
//   width: 200px;
// }
.el-select {
  width: 200px;
}
.el-button {
  width: 200px;
}
.el-date-picker {
  width: 200px;
}
</style>
