<template>
  <div class="container">
    <!-- {{ UserInfoDetail }} -->
    <div class="btn">
      <el-button @click="dialogFormVisible = true" size="mini" type="primary"
        >编辑</el-button
      >
    </div>

    <el-descriptions title="用户信息" :column="6">
      <el-descriptions-item label="姓名">{{
        form.nameCn
      }}</el-descriptions-item>
      <el-descriptions-item label="拼音">{{
        form.nameEn
      }}</el-descriptions-item>
      <el-descriptions-item label="性别">{{
        form.sex == "1" ? "男" : form.sex == "0" ? "女" : ""
      }}</el-descriptions-item>

      <el-descriptions-item label="学校名称">{{
        form.school
      }}</el-descriptions-item>

      <el-descriptions-item label="年级">{{ form.grade }}</el-descriptions-item>

      <el-descriptions-item label="专业">{{
        form.domian
      }}</el-descriptions-item>

      <el-descriptions-item label="学号">{{
        form.stuNumber
      }}</el-descriptions-item>

      <el-descriptions-item label="身份证号">{{
        form.idCard
      }}</el-descriptions-item>

      <el-descriptions-item label="微信号">{{
        form.wechatNumber
      }}</el-descriptions-item>

      <el-descriptions-item label="电话(国内)">{{
        form.inlandMobile
      }}</el-descriptions-item>

      <el-descriptions-item label="电话(国外)">{{
        form.foreignMobile
      }}</el-descriptions-item>

      <el-descriptions-item label="GPA">{{ form.gpa }}</el-descriptions-item>

      <el-descriptions-item label="地址(国内)">{{
        form.inlandAddr
      }}</el-descriptions-item>

      <el-descriptions-item label="地址(国外)">{{
        form.foreignAddr
      }}</el-descriptions-item>
      <!-- 
      <el-descriptions-item label="学员状态">{{
        form.userStatus == 0
          ? "未报名"
          : form.userStatus == 1
          ? "在读学员"
          : form.userStatus == 2
          ? "退费学员"
          : form.userStatus == 3
          ? "结课学员"
          : ""
      }}</el-descriptions-item> -->

      <el-descriptions-item label="常用邮箱">{{
        form.mail
      }}</el-descriptions-item>

      <el-descriptions-item label="备用邮箱">{{
        form.reserveMail
      }}</el-descriptions-item>

      <el-descriptions-item label="校园大使">{{
        form.campusAgent
      }}</el-descriptions-item>

      <el-descriptions-item label="渠道">{{
        // form.channel
        form.channel == "1"
          ? "主动推荐引流"
          : form.channel == "2"
          ? "客服自主添加"
          : form.channel == "3"
          ? "搜索引擎引流"
          : form.channel == "4"
          ? "外部资源推荐"
          : form.channel == "5"
          ? "自媒体引流"
          : form.channel == "6"
          ? "地推活动"
          : ""
      }}</el-descriptions-item>

      <el-descriptions-item label="意向度">{{
        // form.campusAgent
        form.planStatus == "1" ? "低" : form.planStatus == "2" ? "中" : "高"
      }}</el-descriptions-item>

      <el-descriptions-item label="出生日期">{{
        form.birthday
      }}</el-descriptions-item>

      <el-descriptions-item label="学生签到">{{
        form.studyPermitTime
      }}</el-descriptions-item>

      <el-descriptions-item label="是否考虑读研究生">{{
        form.isGraduate === 0 ? "是" : form.isGraduate === 1 ? "否" : ""
      }}</el-descriptions-item>

      <el-descriptions-item label="读研究生的国家">{{
        form.graduateCountry
      }}</el-descriptions-item>

      <el-descriptions-item label="是否有移民计划">{{
        form.isImmigrant === 0 ? "是" : form.isImmigrant === 1 ? "否" : ""
      }}</el-descriptions-item>

      <el-descriptions-item label="移民国家">{{
        form.immigrantCountry
      }}</el-descriptions-item>

      <el-descriptions-item label="是否想了解更多cso学员福利">{{
        form.isUnderstandCso === 0
          ? "是"
          : form.isUnderstandCso === 1
          ? "否"
          : ""
      }}</el-descriptions-item>
    </el-descriptions>

    <el-dialog
      @close="resetForm('form')"
      title="编辑个人信息"
      :visible.sync="dialogFormVisible"
    >
      <el-form
        ref="form"
        :rules="rules"
        :model="UserInfoDetail"
        :label-position="labelPosition"
        label-width="80px"
      >
        <!-- <div class="optionbox"> -->
        <!-- <div class="line line1"> -->
        <div class="line">
          <el-form-item label="姓名" prop="nameCn">
            <el-input v-model.trim="UserInfoDetail.nameCn"></el-input>
          </el-form-item>
          <el-form-item label="拼音">
            <el-input v-model="UserInfoDetail.nameEn"></el-input>
          </el-form-item>
        </div>

        <div class="line">
          <el-form-item label="性别">
            <el-select clearable v-model="UserInfoDetail.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="UserInfoDetail.school"></el-input>
          </el-form-item>
        </div>

        <div class="line">
          <el-form-item label="年级">
            <el-input
              v-model="UserInfoDetail.grade"
              placeholder="请输入数字"
              @input="checkNumGrade"
            ></el-input>
          </el-form-item>
          <el-form-item label="专业">
            <el-input v-model="UserInfoDetail.domian"></el-input>
          </el-form-item>
        </div>

        <div class="line">
          <el-form-item label="学号">
            <el-input v-model="UserInfoDetail.stuNumber"></el-input>
          </el-form-item>
          <el-form-item label="身份证号">
            <el-input v-model="UserInfoDetail.idCard"></el-input>
          </el-form-item>
        </div>

        <!-- </div> -->
        <!-- <div class="line line2"> -->

        <div class="line">
          <el-form-item label="微信号" prop="wechatNumber">
            <el-input v-model="UserInfoDetail.wechatNumber"></el-input>
          </el-form-item>
          <!-- </div> -->
          <!-- <div class="line line2"> -->
          <el-form-item label="电话(国内)">
            <el-input v-model="UserInfoDetail.inlandMobile"></el-input>
          </el-form-item>
        </div>

        <div class="line">
          <el-form-item label="电话(国外)">
            <el-input v-model="UserInfoDetail.foreignMobile"></el-input>
          </el-form-item>
          <el-form-item label="GPA">
            <el-input
              v-model="UserInfoDetail.gpa"
              placeholder="请输入数字"
              @input="checkNumGpa"
            ></el-input>
          </el-form-item>
        </div>

        <!-- </div> -->

        <!-- <div class="line line3"> -->

        <div class="line">
          <el-form-item label="地址(国内)">
            <el-input v-model="UserInfoDetail.inlandAddr"></el-input>
          </el-form-item>
          <el-form-item label="地址(国外)">
            <el-input v-model="UserInfoDetail.foreignAddr"></el-input>
          </el-form-item>
        </div>

        <div class="line">
          <el-form-item label="学员状态">
            <el-select
              clearable
              v-model="UserInfoDetail.userStatus"
              placeholder=""
            >
              <el-option label="未报名" :value="0"></el-option>
              <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 class="line line3"> -->
          <el-form-item label="常用邮箱">
            <el-input v-model="UserInfoDetail.mail"></el-input>
          </el-form-item>
        </div>

        <div class="line">
          <el-form-item label="备用邮箱">
            <el-input v-model="UserInfoDetail.reserveMail"></el-input>
          </el-form-item>
          <!-- </div> -->

          <!-- <div class="line line3"> -->
          <el-form-item
            label="校园大使"
            :prop="UserInfoDetail.channel == 1 ? 'campusAgent' : ''"
          >
            <el-input v-model="UserInfoDetail.campusAgent"></el-input>
          </el-form-item>
        </div>

        <div class="line">
          <el-form-item label="渠道" prop="channel">
            <el-select
              clearable
              v-model="UserInfoDetail.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="意向度">
            <el-select clearable v-model="UserInfoDetail.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> -->
        <!-- <div class="line line4"> -->

        <div class="line">
          <el-form-item label="出生日期">
            <el-date-picker
              v-model="UserInfoDetail.birthday"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="学生签到">
            <el-date-picker
              v-model="UserInfoDetail.studyPermitTime"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
        </div>

        <el-form-item label="入境签到">
          <el-date-picker
            v-model="UserInfoDetail.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>
        </div>
      </el-form>
    </el-dialog>
    <!-- {{ form }} -->
  </div>
</template>

<script>
import { UserInfoUpdate } from "@/api/cso";
import { formatDate } from "@/utils/date";

export default {
  name: "stuDetailInfo",
  props: ["UserInfoDetail"],
  //   props: {
  //     UserInfoDetail: {
  //       type: Object,
  //       default: {}
  //     }
  //   },
  data() {
    return {
      aaa: this.UserInfoDetail,
      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",
      dialogFormVisible: false
    };
  },
  computed: {
    form() {
      return JSON.parse(JSON.stringify(this.UserInfoDetail));
    }
  },
  methods: {
    checkNumGrade() {
      this.UserInfoDetail.grade = parseInt(
        this.UserInfoDetail.grade.replace(/[^\d]/g, "")
      );
      // console.log(this.form,"111111111");
    },
    checkNumGpa() {
      this.UserInfoDetail.gpa = parseFloat(
        this.UserInfoDetail.gpa.replace(/[^0-9.]/g, "")
      );
      // console.log(this.form.gpa);
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$confirm("是否要提交", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            UserInfoUpdate(this.UserInfoDetail).then(response => {
              this.$message({
                type: "success",
                message: "提交成功",
                duration: 1000
              });
              // location.reload();
              this.dialogFormVisible = false;
              this.$forceUpdate();
            });
            // console.log(this.UserInfoDetail, "submitForm");
          });
        } else {
          console.log("error submit!!");
          console.log(valid);
          return false;
        }
      });
      // createUser(this.form)
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.UserInfoDetail.grade = "";
      this.UserInfoDetail.gpa = "";
    }
  },
  filters: {
    formatDateTime(time) {
      if (time == null || time === "") {
        return "N/A";
      }
      let date = new Date(time);
      return formatDate(date, "yyyy-MM-dd hh:mm:ss");
    }
  }
  //   mounted() {
  //     console.log(this.UserInfoDetail, "mounted");

  //   }
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
}
.el-form {
  // display: flex;
  // flex-wrap: wrap;
  // width: 100%;
  // 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-select {
    width: 150px;
  }
}

.el-input {
  width: 150px;
}
.el-select {
  width: 150px;
}

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

// .inputNumber{
//   width: 200px;
// }
.el-select {
  width: 200px;
}
.btn {
  margin-bottom: 20px;
  .el-button {
    float: right;
  }
}
// .el-button {
//   width: 200px;
// }
// .el-date-picker {
//   width: 200px;
// }
// .el-dialog {
//   width: 80%;
// }
</style>
