<template>
  <div>
    <van-nav-bar
      title="学生信息注册"
      left-text=""
      left-arrow
      @click-left="onClickLeft"
    />
    <div>
      <van-form @submit="onSubmit" class="bg-light-50 w-full p-0">
        <van-cell-group inset v-for="(g, i) in forms">
          <div
            v-if="childrenList.length > 0 || forms.length > 1"
            class="text-center px-6 mt-2"
          >
            <span v-if="childrenList.length > 0"
              >学生{{ childrenList.length + i + 1}}</span
            >
            <span v-if="forms.length > 1 && childrenList.length==0">学生{{ i + 1 }}</span>
            <span
              class="text-red-500 float-right cursor-pointer"
              @click="deleteStu(i)"
              >删除</span
            >
          </div>
          <div class="flex items-center w-full mt-2">
            <span>姓名</span>
            <input
              class="pl-2 py-2 ml-2 w-70vw"
              style="border: 1px solid #f2f2f2; border-radius: 5px"
              v-model="g.student_realname"
              label="姓名"
              placeholder="姓名"
            />
          </div>
          <div class="flex items-center w-full mt-2">
            <span>年级</span>
            <select
              class="w-70vw bg-light-100 py-3 pl-2 ml-2 border_gray"
              v-model="g.gradenum"
            >
              <option value="" label="年级" disabled class="text-gray-500 w-70vw">
                年级
              </option>
              <option
                v-for="n in njList"
                :key="n.grade"
                :value="n.grade"
                :label="n.gradename"
              >
                {{ n.gradename }}
              </option>
            </select>
          </div>
          <div class="flex items-center w-full mt-2">
            <span>班级</span>
            <select
              class="w-70vw bg-light-100 py-3 pl-2 ml-2 border_gray"
              v-model="g.classnum"
            >
              <option class="w-70vw" value="" label="班级" disabled>班级</option>
              <option class="w-70vw" v-for="b in 30" :key="b" :value="b" :label="b + '班'">
                {{ b }}班
              </option>
            </select>
          </div>
          <div class="flex items-center w-full my-2">
            <span>关系</span>
            <select
              class="w-70vw bg-light-100 py-3 pl-2 ml-2 border_gray"
              v-model="g.relation"
            >
              <option class="w-70vw" value="" label="关系" disabled>关系</option>
              <option class="w-70vw" v-for="(b,i) in relationList" :key="i" :value="b" :label="b">
                {{ b }}
              </option>
            </select>
          </div>
        </van-cell-group>
        <div style="margin: 32px 64px">
          <van-button icon="plus" block type="primary" @click="addStu">
            <span v-if="childrenList.length <= 0 && forms.length <= 1"
              >多子女添加</span
            >
            <span v-if="childrenList.length > 0 || forms.length > 1"
              >继续添加</span
            >
          </van-button>
        </div>
        <div style="margin: 16px">
          <van-button :disabled="isButton" round block type="primary" native-type="submit">
            申请
          </van-button>
        </div>
      </van-form>
    </div>
    <div v-show="coverShow" class="cover"></div>
    <div v-if="dialogShow" class="dialog_show flex flex-col justify-evenly">
      <div></div>
      <div class="text-center">申请成功，等待班主任审核！</div>
      <div class="text-center">
        <span
          class="py-2 px-4 rounded-2xl bg-blue-500 text-white cursor-pointer"
          @click="handleBack"
        >
          返回</span
        >
      </div>
    </div>
  </div>
</template>
<script setup>
import { showToast } from "vant";
import { useRouter } from "vue-router";
const router = useRouter();
const onClickLeft = () => router.push('/user');
let baseURL = window.GLOBAL_CONFIG.uc;
let relationList = $ref(['父亲','母亲','爷爷','奶奶','姥姥','姥爷','其他']);
let forms = $ref([
  {
    student_realname: "",
    gradenum: "",
    classnum: "",
    relation: "",
  },
]);
let childrenList = $ref([]);
let njList = $ref([]);
function initData() {
  request({
    baseURL,
    timeout: 10 * 1000,
    url: "/index.php?mod=user&action=main&do=my_child",
    data: {},
  }).then((res) => {
    if (res.code == "1") {
      childrenList = res.data.info;
    }
  });
  request({
    baseURL,
    url: "/school/main/detail?mod=school&action=main&do=detail",
    data: {
      token:'',
      sm_id: "666",
    },
  }).then((res) => {
    if (res.code == "1") {
      njList = res.data.one_info.school_grade;
    }
  });
}
initData();

let isButton = $ref(false);

// 添加学生信息
function addStu() {
  forms.push({
    student_realname: "",
    gradenum: "",
    classnum: "",
    relation: "",
  });
  if(forms.length!=0){
    isButton = false;
  }
}

// 删除学生信息
function deleteStu(i) {
  forms.splice(i, 1);
  if(forms.length==0){
    isButton = true;
  }
}

let dialogShow = $ref(false);
let coverShow = $ref(false);
// 添加申请
const onSubmit = (values) => {
  console.log(forms);
  let isFlag = true;
  forms.forEach((item) => {
    Object.keys(item).forEach((key) => {
      if (Array.isArray(item[key])) {
        item[key].forEach((val) => {
          Object.keys(val).forEach((key) => {
            if (val[key] == "" || item[key] == null) {
              isFlag = false;
            }
          });
        });
      }
      if(item[key]==''||item[key]==null||item[undefined]){
        isFlag = false;
      }
    });
  });
  if (isFlag === false) {
    return showToast("请填写完成~");
  }
  let data = {
    sm_id: "666",
    child: forms,
  };
  request({
    baseURL,
    url: "/user/main/parent_supply_stureg",
    data,
  }).then((res) => {
    if (res.code == "1") {
      dialogShow = true;
      coverShow = true;
    }else{
      showToast(res.msg)
    }
  });
};
function handleBack() {
  router.push("/home");
}
</script>

<style lang="scss" scoped>
// --van-padding-md: 0;
.border_gray {
  border: 1px solid #f2f2f2;
  border-radius: 5px;
}
.dialog_show {
  background-image: url("../../assets/home/dialog.png");
  background-size: 100%;
  background-repeat: no-repeat;
  width: 76vw;
  height: 86vw;
  //   color: #333333;
  //   background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border-radius: 1vw;
  z-index: 5;
  padding: 0 5vw;
  box-sizing: border-box;
}
.cover {
  position: fixed;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: #000000;
  opacity: 0.3;
}
select{
  appearance:none;
  -moz-appearance:none;
  -webkit-appearance:none;
  outline: none;
}
select::-ms-expand { display: none; }
</style>