<template>
  <div class="bg_gray pb-10">
    <van-nav-bar title="申请表单" />
    <van-form @submit="onSubmit" class="w-full">
      <div class="bg-light-50 w-95vw px-3 center text-3.7vw rounded-md pb-4">
        <div class="flex items-center justify-between w-full mt-2">
          <span class="text-red-500">*</span>
          <span>应聘类型</span>
          <div class="relative">
           <select
            class="w-65vw bg-light-100 py-3 pr-6 ml-2 text-right" style="text-align-last: right;direction: rtl"
            v-model="ruleForm.nzy_yplx"
          >
            <option
              v-for="t in typeList"
              :key="t.value"
              :value="t.name"
              :label="t.name"
            >
              {{ t.name }}
            </option>
          </select>
            <img class="absolute w-14px top-4vw right-1.5vw" src="../../assets/images/arrow_down.png" alt=""> 
          </div> 
        </div>
        <van-divider />
        <div class="flex items-center justify-between w-full mt-2 pr-4">
          <span class="text-red-500">*</span>
          <span>姓名</span>
          <input
            class="pl-2 py-2 ml-2 w-7/9 text-right"
            v-model="ruleForm.nzy_xm"
            label="姓名"
            @input="limitInput"
            placeholder="请填写"
          />
        </div>
        <van-divider />
        <div class="flex items-center justify-between w-full mt-2 pr-4">
          <span class="text-red-500">*</span>
          <span>年龄</span>
          <input
            class="pl-2 py-2 ml-2 w-7/9 text-right"
            v-model="ruleForm.nzy_nl"
            label="年龄"
            placeholder="请填写"
          />
        </div>
        <van-divider />
        <div class="flex items-center justify-between w-full py-2 pr-4">
          <div>
            <span class="text-red-500 mr-2vw">*</span>
            <span>个人照片</span>
          </div>
          <FileUploadProgress
            class="w-30vw"
            v-model="ruleForm.nzy_grzp_img"
            result-type="file"
            :limit="1"
            :key="timestamp"
            :isDisadle="false"
          ></FileUploadProgress>
        </div>
        <van-divider />
        <div class="flex items-center w-full mt-2 justify-between">
          <span class="text-red-500">*</span>
          <span>申报项目</span>
          <div class="relative">
            <select
            class="w-65vw bg-light-100 py-3 pr-6 ml-2 text-right"
            v-model="ruleForm.nzy_kk_id" style="text-align-last: right;direction: rtl"
            >
              <option
                v-for="t in sbxmList"
                :key="t.kk_id"
                :value="t.kk_id"
                :label="t.kk_name"
              >
                {{ t.kk_name }}
              </option>
            </select>
            <img class="absolute w-14px top-4vw right-1.5vw" src="../../assets/images/arrow_down.png" alt=""> 
          </div>
          
        </div>
        <van-divider />
        <div class="flex items-center w-full mt-2 justify-between pr-4">
          <span class="text-red-500">*</span>
          <span>毕业院校</span>
          <input
            class="pl-2 py-2 ml-2 w-8/11 text-right"
            v-model="ruleForm.nzy_byyx"
            label="毕业院校"
            placeholder="请填写"
          />
        </div>
        <van-divider />
        <div class="flex items-center justify-between w-full mt-2 pr-4">
          <span class="text-red-500">*</span>
          <span>所学专业</span>
          <input
            class="pl-2 py-2 ml-2 w-8/11 text-right"
            v-model="ruleForm.nzy_sxzy"
            label="所学专业"
            placeholder="请填写"
          />
        </div>
        <van-divider />
        <div class="flex items-center justify-between w-full mt-2 pr-4">
          <span class="text-red-500">*</span>
          <span>专业最高荣誉</span>
          <input
            class="pl-2 py-2 ml-2 w-7/11 text-right"
            v-model="ruleForm.nzy_zgry"
            label="专业最高荣誉"
            placeholder="请填写"
          />
        </div>
        <van-divider />
        <div class="py-4">
          <div class="flex items-center justify-between w-full">
            <div class="w-1/2">
              <p class="w-30vw text-center">最高荣誉证书</p>
              <FileUploadProgress
                class="w-30vw py-2"
                result-type="file"
                v-model="img_alternative.nzy_zgryzs_img"
                :limit="1"
                :key="timestamp"
                :isDisadle="false"
              ></FileUploadProgress>
            </div>
            <div class="w-1/2">
              <p class="w-30vw text-center">教师资格证</p>
              <FileUploadProgress
                class="w-30vw py-2"
                result-type="file"
                :key="timestamp"
                v-model="img_alternative.nzy_jszgz_img"
                :limit="1"
                :isDisadle="false"
              ></FileUploadProgress>
            </div>
          </div>
          <p class="text-2.6vw text-gray-400">
            *提示：最高荣誉证书、教师资格证需二选一上传
          </p>
        </div>
        <van-divider />
        <div class="flex items-center w-full justify-between mt-2 pr-4">
          <span class="text-red-500"> </span>
          <span>教师资格证编号</span>
          <input
            class="pl-2 py-2 ml-2 w-6/11 text-right"
            v-model="nzy_jszgzbh_img"
            label="教师资格更正编号"
            placeholder="请填写"
          />
        </div>
        <van-divider />
        <div class="w-full my-2">
          <span class="text-red-500 mx-2vw">*</span>
          <span>身份证</span>
          <div class="flex">
            <div class="w-1/2">
              <FileUploadProgress
                class="w-30vw text-center py-2"
                capt
                result-type="file"
                :key="timestamp"
                v-model="idCard.idCard_pro"
                :limit="1"
                :isDisadle="false"
              ></FileUploadProgress>
              <p class="w-30vw text-center text-2vw text-gray-400">正面</p>
            </div>
            <div class="w-1/2">
              <FileUploadProgress
                class="w-30vw py-2"
                result-type="file"
                v-model="idCard.idCard_con"
                :limit="1"
                :key="timestamp"
                :isDisadle="false"
              ></FileUploadProgress>
              <p class="w-30vw text-center text-2vw text-gray-400">反面</p>
            </div>
          </div>
        </div>
        <van-divider />
        <div class="w-full my-2">
          <p><span class="text-red-500 mx-2vw">*</span> <span>毕业证书</span></p>
          <FileUploadProgress
            class="w-30vw text-center py-2"
            v-model="ruleForm.nzy_byzs_json_img"
            :limit="1"
            :key="timestamp"
            :isDisadle="false"
          >
          </FileUploadProgress>
        </div>
        <van-divider />
        <div class="w-full my-2">
          <p class="my-2"><span class="text-red-500 mx-2vw">*</span> <span>教师简介</span></p>
          <!-- <textarea class="w-full bg-gray-200 rounded" rows="5" maxlength="150" show-word-limit></textarea> -->
          <van-field
            v-model="ruleForm.nzy_jsjj"
            maxlength="150"
            placeholder="请输入留言"
            type="textarea"
            class="bg_gray"
            show-word-limit
          />
        </div>
      </div>
      <div style="margin: 8vw auto; width: 50vw">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>
<script setup>
// import { timestamp } from "@vueuse/core";
import { showToast } from "vant";
import { watch } from "vue";
import { useRouter } from "vue-router";
import { stxk_up } from "./api";
import FileUploadProgress from "./components/fileUpload.vue";
let timestamp = Date.now()
let router = useRouter();
// #region 招聘教师类型
let typeList = $ref([
  {
    name: "社团老师",
    value: "1",
  },
  {
    name: "正式老师",
    value: "2",
  },
]);
// #endregion

let sbxmList = $ref([]);
request({
  url: "/khfw/kcgl/index",
  timeout: 10 * 1000,
  data: {
    token:'',
    page: "1",
    limit: "9999",
  },
}).then((res) => {
  if (res.code == "1") {
    sbxmList = res.data.page_data;
  }
});

let honorDisadle = $ref(false);

let ruleForm = $ref({
  nzy_yplx: "",
  nzy_xm: "",
  nzy_nl: "",
  nzy_grzp_img: "",
  nzy_kk_id: "",
  nzy_byyx: "",
  nzy_sxzy: "",
  nzy_zgry: "",
  nzy_sfz_json_img: "",
  nzy_byzs_json_img: "",
  nzy_jsjj: "",
});
let img_alternative = $ref({
  nzy_jszgz_img: "",
  nzy_zgryzs_img: "",
});
let nzy_jszgzbh_img = $ref("");
let idCard = $ref({
  idCard_pro: "",
  idCard_con: "",
});
watch(
  [ruleForm,img_alternative,idCard],
  (newValue, oldValue)=>{
    localStorage.setItem('recruit',JSON.stringify(newValue))
  },
  {immediate: true}
)
function limitInput(e){
  ruleForm.nzy_xm = ruleForm.nzy_xm.replace(/[^a-zA-Z\u4E00-\u9FA5]/g, "")
}
function onSubmit() {
  let isFlag = true;
  ruleForm.nzy_sfz_json_img = `${idCard.idCard_pro};${idCard.idCard_con}`;
  Object.keys(ruleForm).forEach((key) => {
    if (Array.isArray(ruleForm[key])) {
      ruleForm[key].forEach((item) => {
        Object.keys(item).forEach((key) => {
          if (item[key] == "" || item[key] == null || item[key] == undefined) {
            isFlag = false;
          }
        });
      });
    }
    if (
      ruleForm[key] == "" ||
      ruleForm[key] == null ||
      ruleForm[key] == undefined
    ) {
      isFlag = false;
    }
  });
  if (idCard.idCard_con == "" || idCard.idCard_pro == "") {
    isFlag = false;
  }
  if (
    img_alternative.nzy_jszgz_img == "" &&
    img_alternative.nzy_zgryzs_img == ""
  ) {
    isFlag = false;
  }
  console.log(idCard);
  if (isFlag === false) {
    return showToast("请填写完整~");
  }
  let nzy_kk_name;
  sbxmList.forEach((item) => {
    if (ruleForm.nzy_kk_id == item.kk_id) {
      nzy_kk_name = item.kk_name;
    }
  });
  let data = {
    nml_zp_ypgl: {
      ...ruleForm,
      nzy_kk_name,
      ...img_alternative,
      nzy_jszgzbh_img,
      nzy_shzt: "3",
    },
  };
  request({
    url:'/nml/zp_ypgl/add',
    data,
  }).then(res=>{
    if(res.code=='1'){
      showToast('提交成功，请耐心等待审核结果');
      localStorage.removeItem('recruit');
      timestamp = Date.now();
      location.reload();
    }
  })
}
</script>
<style lang="scss" scoped>
.bg_gray{
  background-color: #f2f2f2;
}
.center {
  margin: 0 auto;
}
::v-deep .van-cell {
  padding: 0 3vw;
  height: 20vw;
  .van-cell__value {
    width: 100%;
    background-color: #f2f2f2;
    padding: 1vw;
    height: 100%;
    .van-field__body {
      height: 80%;
      .van-field__control {
        height: 100%;
      }
    }
  }
}
::v-deep .van-divider {
  margin: 0;
}
select{
  appearance:none;
  -moz-appearance:none;
  -webkit-appearance:none;
  outline: none;
}
select::-ms-expand { display: none; }
</style>