<template>
  <div class="container">
    <!-- {{ UserInfoDetail }} -->

    <el-form
      ref="form"
      :rules="rules"
      :model="UserInfoDetail"
      :label-position="labelPosition"
      label-width="80px"
    >
      <div class="optionbox">
        <div class="line line1">
          <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>
          <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>
          <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 line2">
          <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>
          <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>
          <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 class="line line3">
          <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>
          <!-- <el-form-item label="学员状态">
            <el-select 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>
          <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> -->
          <!-- <el-form-item label="渠道" prop="channel">
            <el-select
              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 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 class="line line4">
        <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>
        <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 line3">
        <el-form-item label="是否考虑读研" label-width="120px">
          <el-radio v-model="UserInfoDetail.isGraduate" :label="0">是</el-radio>
          <el-radio v-model="UserInfoDetail.isGraduate" :label="1">否</el-radio>
        </el-form-item>

        <el-form-item label="读研国家">
          <el-input
            v-model="UserInfoDetail.graduateCountry"
            :disabled="UserInfoDetail.isGraduate === 1"
            clearable
          ></el-input>
        </el-form-item>
      </div>

      <div class="line line3">
        <el-form-item label="是否有移民计划" label-width="120px">
          <el-radio v-model="UserInfoDetail.isImmigrant" :label="0"
            >是</el-radio
          >
          <el-radio v-model="UserInfoDetail.isImmigrant" :label="1"
            >否</el-radio
          >
        </el-form-item>

        <el-form-item label="移民国家">
          <el-input
            v-model="UserInfoDetail.immigrantCountry"
            :disabled="UserInfoDetail.isImmigrant === 1"
            clearable
          ></el-input>
        </el-form-item>
      </div>

      <div class="line line3">
        <el-form-item label="是否想了解更多cso学员福利" label-width="200px">
          <el-radio v-model="UserInfoDetail.isUnderstandCso" :label="0"
            >是</el-radio
          >
          <el-radio v-model="UserInfoDetail.isUnderstandCso" :label="1"
            >否</el-radio
          >
        </el-form-item>
      </div>
      <!-- <div class="line pic"></div> -->

      <div class="line line5">
        <!-- <el-button type="primary" @click="submitForm('form')">保存</el-button> -->
        <!-- <el-button @click="resetForm('form')">重置</el-button> -->
      </div>
    </el-form>

    <el-form
      ref="pic"
      :model="UserInfoDetail"
      :label-position="labelPosition"
      label-width="100px"
    >
      <div class="line pic">
        <el-form-item label="上传身份证信息">
          <el-upload
            :action="`${$UPLOAD_BASE_URL}/storage/upload`"
            :headers="headers"
            list-type="picture-card"
            name="file"
            :file-list="idCardfileList"
            :on-preview="handleIdCardPreview"
            :on-remove="handleIdCardRemove"
            :on-success="handleIdCardSuccess"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogIdCardVisible">
            <img width="100%" :src="dialogIdCardUrl" alt="" />
          </el-dialog>
        </el-form-item>
        <!-- <div
          class="item"
          v-for="(item, index) in picUrl.idCardUrl"
          :key="index"
        >
          <img :src="item" alt="" />
        </div> -->
      </div>
      <div class="line">
        <el-form-item label="上传GPA凭证">
          <el-upload
            :action="`${$UPLOAD_BASE_URL}/storage/upload`"
            :headers="headers"
            list-type="picture-card"
            name="file"
            :file-list="gpafileList"
            :on-preview="handleGpaPreview"
            :on-remove="handleGpaRemove"
            :on-success="handleGpaSuccess"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogGpaVisible">
            <img width="100%" :src="dialogGpaUrl" alt="" />
          </el-dialog>
        </el-form-item>
      </div>
      <div class="line">
        <el-form-item label="上传证件">
          <el-upload
            :action="`${$UPLOAD_BASE_URL}/storage/upload`"
            :headers="headers"
            list-type="picture-card"
            name="file"
            :file-list="papersfileList"
            :on-preview="handlePapersPreview"
            :on-remove="handlePapersRemove"
            :on-success="handlePapersSuccess"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogPapersVisible">
            <img width="100%" :src="dialogPapersUrl" alt="" />
          </el-dialog>
        </el-form-item>
      </div>
      <div class="line">
        <el-form-item label="上传护照">
          <el-upload
            :action="`${$UPLOAD_BASE_URL}/storage/upload`"
            :headers="headers"
            list-type="picture-card"
            name="file"
            :file-list="passportfileList"
            :on-preview="handlePassportPreview"
            :on-remove="handlePassportRemove"
            :on-success="handlePassportSuccess"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogPassportVisible">
            <img width="100%" :src="dialogPassportUrl" alt="" />
          </el-dialog>
        </el-form-item>
      </div>
      <div class="line line5">
        <el-button type="primary" @click="submitForm('form')">保存</el-button>
        <el-button type="primary" @click="handleBaseConfirmState"
          >审核完成</el-button
        >
        <!-- <el-button @click="resetForm('form')">重置</el-button> -->
      </div>
    </el-form>
  </div>
</template>

<script>
import { UserInfoUpdate, single, picUrl, baseConfirmState } from "@/api/cso";
import { formatDate } from "@/utils/date";
import { includes } from "shelljs/commands";
import { getToken } from "@/utils/auth";

export default {
  name: "singleUnConfirmBase",

  data() {
    return {
      userId: "",
      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",
      dialogIdCardUrl: "",
      dialogGpaUrl: "",
      dialogPapersUrl: "",
      dialogPassportUrl: "",
      dialogIdCardVisible: false,
      dialogGpaVisible: false,
      dialogPapersVisible: false,
      dialogPassportVisible: false,
      picUrl: {
        idCardUrlList: [],
        gpaUrlList: [],
        papersUrlList: [],
        passportUrlList: [],
        userId: ""
      },
      idCardfileList: [],
      gpafileList: [],
      papersfileList: [],
      passportfileList: [],
      token: ""
    };
  },
  methods: {
    // test() {
    //   let arr = {};
    //   let arr2 = {};
    //   for (const key in this.picUrl) {
    //     arr[key] = JSON.stringify(this.picUrl[key]);
    //     arr2[key] = JSON.parse(arr[key]);
    //     // console.log(arr[key], "555");
    //     // console.log(JSON.parse(arr[key]), "6666666");
    //   }
    //   console.log(arr, "arr");
    //   console.log(arr2, "arr2");
    // },
    checkNumGrade() {
      this.UserInfoDetail.grade = parseInt(
        this.UserInfoDetail.grade.replace(/[^\d]/g, "")
      );
      // console.log(this.form.grade);
    },
    checkNumGpa() {
      this.UserInfoDetail.gpa = parseFloat(
        this.UserInfoDetail.gpa.replace(/[^0-9.]/g, "")
      );
      // console.log(this.form.gpa);
    },
    submitForm(formName) {
      // let arr = {};
      // for (const key in this.picUrl) {
      //   arr[key] = this.picUrl[key];

      //   console.log(key, "key");
      // }
      // arr.userId = this.picUrl.userId;
      // console.log(arr, "arr");
      this.picUrl.idCardUrlList = this.idCardfileList;
      this.picUrl.gpaUrlList = this.gpafileList;
      this.picUrl.papersUrlList = this.papersfileList;
      this.picUrl.passportUrlList = this.passportfileList;

      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$confirm("是否要保存", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            Promise.all([
              UserInfoUpdate(this.UserInfoDetail),
              picUrl(this.picUrl)
            ]).then(response => {
              // picUrl(this.picUrl).then(response => {
              this.$message({
                type: "success",
                message: "保存成功",
                duration: 1000
              });
              // location.reload();
              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 = "";
    },
    getUserInfo() {
      single(this.userId).then(res => {
        // single("00784959ba7e46018e0b1bc717658f82").then(res => {
        this.UserInfoDetail = JSON.parse(JSON.stringify(res.data));

        this.idCardfileList = this.UserInfoDetail.idCardUrlList;

        this.gpafileList = this.UserInfoDetail.gpaUrlList;
        this.papersfileList = this.UserInfoDetail.papersUrlList;
        this.passportfileList = this.UserInfoDetail.passportUrlList;
        console.log(this.UserInfoDetail, "this.UserInfoDetail");
      });
    },
    // -----------------------
    handleIdCardRemove(file, fileList) {
      let arr = this.idCardfileList.filter(item => {
        return item.url !== file.url;
      });
      this.idCardfileList = arr;
      console.log(this.idCardfileList, "this.idCardfileList");
    },
    handleIdCardPreview(file) {
      this.dialogIdCardUrl = file.url;
      this.dialogIdCardVisible = true;
    },
    handleIdCardSuccess(res, file, fileList) {
      let arr = {};
      arr.url = res.data.url;
      this.idCardfileList.push(arr);
      console.log(this.idCardfileList, "this.idCardfileList");
    },
    // -----------------------
    handleGpaRemove(file, fileList) {
      let arr = this.gpafileList.filter(item => {
        return item.url !== file.url;
      });
      this.gpafileList = arr;
      console.log(this.gpafileList, "this.gpafileList");
    },
    handleGpaPreview(file) {
      this.dialogGpaUrl = file.url;
      this.dialogGpaVisible = true;
    },
    handleGpaSuccess(res, file, fileList) {
      let arr = {};
      arr.url = res.data.url;
      this.gpafileList.push(arr);
      console.log(this.gpafileList, "this.gpafileList");
    },
    // -----------------------
    handlePapersRemove(file, fileList) {
      let arr = this.papersfileList.filter(item => {
        return item.url !== file.url;
      });
      this.papersfileList = arr;
      console.log(this.papersfileList, "this.papersfileList");
    },
    handlePapersPreview(file) {
      this.dialogpapersUrl = file.url;
      this.dialogPapersUrlVisible = true;
    },
    handlePapersSuccess(res, file, fileList) {
      let arr = {};
      arr.url = res.data.url;
      this.papersfileList.push(arr);
      console.log(this.papersfileList, "this.papersfileList");
    },
    // -----------------------
    handlePassportRemove(file, fileList) {
      let arr = this.passportfileList.filter(item => {
        return item.url !== file.url;
      });
      this.passportfileList = arr;
      console.log(this.passportfileList, "this.passportfileList");

      // passportfileList
    },
    handlePassportPreview(file) {
      this.dialogPassportUrl = file.url;
      this.dialogPassportVisible = true;
    },
    handlePassportSuccess(res, file, fileList) {
      let arr = {};
      arr.url = res.data.url;
      this.passportfileList.push(arr);
      console.log(this.passportfileList, "this.passportfileList");
    },
    handleBaseConfirmState() {
      this.$confirm("是否审核完成", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        baseConfirmState(this.picUrl.userId).then(response => {
          this.$message({
            type: "success",
            message: "审核成功",
            duration: 1000
          });
          // location.reload();
          this.$forceUpdate();
        });
        // console.log(this.UserInfoDetail, "submitForm");
      });
    }
  },
  filters: {
    formatDateTime(time) {
      if (time == null || time === "") {
        return "N/A";
      }
      let date = new Date(time);
      return formatDate(date, "yyyy-MM-dd hh:mm:ss");
    }
  },
  computed: {
    headers() {
      return {
        Authorization: this.token
      };
    }
  },
  mounted() {
    console.log(this.UserInfoDetail, "mounted");
    this.picUrl.userId = this.$route.query.id;
    this.userId = this.$route.query.id;
    // console.log(this.userId, "this.userId");
    this.getUserInfo();
    this.token = getToken();
  }
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  //   align-items: center;
  flex-direction: column;
  padding: 20px;
}
.el-form {
  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-input {
  width: 200px;
}

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

// .inputNumber{
//   width: 200px;
// }
.el-select {
  width: 200px;
}
.el-button {
  width: 200px;
}
.el-date-picker {
  width: 200px;
}
.pic {
  display: flex;
  align-items: center;
  .item {
    width: 300px;
    height: 300px;
    margin: 30px;
    background-color: #f1c40f;
    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }
}
</style>
