<template>
  <div>
    <van-nav-bar class="nav" left-arrow @click-left="onClickLeft">
      <template #title>
        <div class="color-fff">我的孩子</div>
      </template>
      <template #right>
        <span class="w-10 text-white" @click="deleteChild">删除</span>
        <span class="w-10 text-white" @click="addChild">添加</span>
      </template>
    </van-nav-bar>
    <van-checkbox-group
      v-model="checked"
      ref="checkboxGroup"
      @change="checkGroup"
    >
      <table>
        <!-- <tr>
          <th>
            <input type="checkbox" class="chooseAll" @change="checkedAll()" />
          </th>
          <th class="name">学生姓名</th>
          <th class="wxname">微信昵称</th>
          <th class="relative">关系</th>
          <th class="action">操作</th>
          <th class="classname">报名课程</th>
        </tr> -->
        <van-checkbox-group v-model="checked" @change="checkGroup">
          <tr v-for="s in childrenList" :key="s.user_id">
            <td class="box">
              <van-checkbox
                :name="s.id"
                shape="square"
                icon-size="4vw"
                class="mr-5px ml-2vw"
              ></van-checkbox>
            </td>
            <td>
              <div class="name">
                <p>{{ s.student_realname }}</p>
              </div>
            </td>
            <td>
              <div class="parent">
                <!-- <p v-if="s.parent.length > 0">{{ s.parent.realname }}</p> -->
                <!-- <p v-else></p> -->
                <p>{{  s.parent_realname }}</p>
              </div>
            </td>
            <td class="relative">
              <p v-if="s.relation">{{ s.relation }}</p>
              <!-- <p v-else></p> -->
            </td>
            <td>
              <div class="wxname">
                <p>{{ s.classname }}</p>
              </div>
            </td>
            <td class="action">
              <div>
                <span class="act_btu1" v-if="s.statue == '0'">
                  待审核
                </span>
                <span class="act_btu2" v-if="s.statue == '1'">
                  已通过
                </span>
                <span
                  class="act_btu3"
                  v-if="s.statue == '2'"
                  @click="rejectData(s)"
                >
                  驳回
                </span>
              </div>
              <!-- <div v-else></div> -->
            </td>
            <td>
              <div class="classname">
                <p>{{ s.kk_name }}</p>
              </div>
            </td>
          </tr>
        </van-checkbox-group>
      </table>
    </van-checkbox-group>
    <div class="plan-nav reject-nav" v-show="rejectShow">
      <van-icon
        class="cha"
        @click="cancelData"
        name="cross"
        size="5vw"
      ></van-icon>
      <h3>驳回详情</h3>
      <p class="text-blue-600 text-4vw mt-3">已驳回</p>
      <!-- <p>{{驳回原因}}</p> -->
      <p class="text-gray-500 text-3vw mt-4 leading-5 tracking-wider">
        {{ desc }}
      </p>
    </div>
    <div v-show="show" class="cover"></div>
  </div>
</template>
<script setup>
import { showConfirmDialog, showToast } from "vant";
import { user } from "../../store/user";
import { useRouter } from "vue-router";
const router = useRouter();
const onClickLeft = () => router.push('/user');
let show = $ref(false);
function addChild() {
  router.push('/xszc')
}
let checked = $ref([]);
let childrenList = $ref([]);
function deleteChild() {
  if (checked.length == 0) {
    return showToast("请选择被删除人!");
  }

  showConfirmDialog({
    title: "移除被绑定人",
    message: "确认移除?",
  })
    .then(() => {
        request({
          baseURL: window.GLOBAL_CONFIG.uc,
          timeout: 10 * 1000,
          url: "/user/main/parent_supply_delete",
          data: {
            id: checked.join(','),
          },
        }).then((res) => {
           if(res.code=='1'){
             showToast('操作成功!')
             initData()
            }
      });
    })
    .catch(() => {
      showToast("取消操作!");
    });
}

function initData() {
  request({
    baseURL: window.GLOBAL_CONFIG.uc,
    timeout: 10 * 1000,
    url: "/user/main/parent_supply_list",
    data: {},
  }).then((res) => {
    if (res.code == "1") {
      childrenList = res.data.child;
    }
  });
}
initData();

function checkGroup() {
  console.log(checked);
}

// 驳回详情
let desc = $ref('');
let rejectShow = $ref(false);
function rejectData(s) {
  show = true;
  rejectShow = true;
  desc = s.desc
}
// ×
function cancelData() {
  show = false;
  rejectShow = false;
}
</script>
<style lang="scss" scoped>
table {
  width: 100%;
  /* border-top: #c8b9ae solid 1px; */
  border-collapse: collapse;
  tr {
    width: 100%;
    height: 11vw;
    line-height: 11vw;
  }
  tr td {
    overflow: hidden;
    //   height: 6vw;
  }
  tr td p {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  th,
  td {
    font-size: 3.6vw;
    letter-spacing: 0;
    text-align: left;
  }
  td {
    border-bottom: #e7e2df solid 1px;
    /* padding:10px 10px 6px; */
  }
  .name {
    width: 20vw !important;
    overflow: hidden;
  }
  .wxname {
    width: 26vw;
    overflow: hidden;
  }
  .parent{
    width: 16vw;
    overflow: hidden;
  }
  .relative {
    width: 20vw;
    overflow: hidden;
  }
  .action {
    width: 25vw;
    min-width: 15vw;
    padding-right: 5px;
    text-align: center;
    cursor: pointer;
  }
  .action span {
    width: 90%;
    height: 25px;
    font-size: 3.8vw;
    //   color: #fff;
    outline-color: none;
    border-radius: 4px;
    border: none;
  }
  .act_btu1 {
    //   background-color: #003eee;
    color: #003eee;
  }
  .act_btu2 {
    //   background-color: #9d9d9d;
    color: #666666;
  }
  .act_btu3 {
    //   background-color: #efecec;
    color: red !important;
  }
}

.plan-nav {
  width: 78vw;
  height: 80vw;
  color: #333333;
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border-radius: 1vw;
  z-index: 5;
  padding: 5vw;
  box-sizing: border-box;
  .cha {
    display: block;
    // width: 0.4 * 13.3vw;
    // height: 0.4 * 13.3vw;
    font-size: 0.5 * 13.3vw;
    position: absolute;
    right: 0.2 * 13.3vw;
    top: 0.2 * 13.3vw;
    cursor: pointer;
  }
  h3 {
    width: 20vw;
    height: 0.4 * 13.3vw;
    text-align:center;
    font-size: 4vw;
    position: relative;
  }
  h3::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 0.2 * 13.3vw;
    bottom: -0.05 * 13.3vw;
    left: -0.02 * 13.3vw;
    border-radius: 0.1 * 13.3vw;
    background-color: #c5c5ff;
    opacity: 0.6;
  }
}
.cover {
  position: fixed;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: #000000;
  opacity: 0.3;
}
</style>