<template>
  <div class="content">
    <van-nav-bar title="班主任工作" left-arrow @click-left="onClickLeft" />
    <van-tabs v-model:active="activeName" shrink>
      <van-tab title="审核列表" name="a">
        <div class="form px-2 mt-2">
          <div class="title flex my-2">
            <div class="text_white">
              <p>{{ cm_name }}</p>
            </div>
            <div class="flex title_btn">
              <span @click="checkboth">一键审核</span>
            </div>
          </div>
          <van-checkbox-group
            v-model="checked"
            ref="checkboxGroup"
            @change="checkGroup"
          >
            <table class="table_check">
              <tr>
                <th>
                  <input
                    type="checkbox"
                    class="chooseAll"
                    ref="checkAll"
                    @change="checkedAll()"
                  />
                </th>
                <th class="name_check overflow_hidden">学生姓名</th>
                <th class="wxname_check overflow_hidden">家长昵称</th>
                <th class="relative_check overflow_hidden">关系</th>
                <th class="action">操作</th>
              </tr>

              <tr v-for="s in msg.class_stu_supply" :key="s.id">
                <td class="box">
                  <van-checkbox
                    :name="s"
                    shape="square"
                    icon-size="15px"
                  ></van-checkbox>
                </td>
                <td>
                  <div class="name_check overflow_hidden">
                    <p>{{ s.student_realname }}</p>
                  </div>
                </td>
                <td>
                  <div class="wxname_check overflow_hidden">
                    <p>{{ s.realname }}</p>
                  </div>
                </td>
                <td class="relative_check overflow_hidden">
                  <p>{{ s.relation }}</p>
                </td>
                <td class="action">
                  <div>
                    <button
                      @click="audit(s)"
                      class="act_btu1"
                      v-if="s.statue == '0'"
                    >
                      审核
                    </button>
                    <button class="act_btu2" v-if="s.statue == '1'">
                      已通过
                    </button>
                    <button
                      class="act_btu3"
                      v-if="s.statue == '2'"
                      @click="rejDetail(s)"
                    >
                      已驳回
                    </button>
                  </div>
                </td>
              </tr>
            </table>
          </van-checkbox-group>
        </div>
      </van-tab>
      <van-tab title="我的班级" name="b">
        <div class="form px-2 mt-2">
          <div class="title flex">
            <div class="title_text">
              <p>{{ cm_name }}</p>
              <p>
                报名情况: {{ msg.class_stu_bm_num }}/{{ msg.class_stu_num }}
              </p>
            </div>
            <div class="flex title_btn">
              <span @click="deleteData">删除</span>
            </div>
          </div>
          <van-checkbox-group
            v-model="deleteMsg"
            ref="deleteGroup"
            @change="deleteGroup"
          >
            <table>
              <tr>
                <th>
                  <input
                    type="checkbox"
                    ref="deleteAll"
                    class="chooseAll"
                    @change="deleteAll()"
                  />
                </th>
                <th class="name overflow_hidden">学生姓名</th>
                <th class="wxname overflow_hidden">微信昵称</th>
                <th class="relative overflow_hidden">关系</th>
                <th class="classname overflow_hidden">报名课程</th>
              </tr>

              <tr v-for="s in msg.class_stu_bm_xx" :key="s.user_id">
                <td class="box">
                  <van-checkbox
                    :name="s.user_id"
                    shape="square"
                    icon-size="15px"
                  ></van-checkbox>
                </td>
                <td>
                  <div class="name overflow_hidden">
                    <p>{{ s.user_realname }}</p>
                  </div>
                </td>
                <td>
                  <div class="wxname overflow_hidden">
                    <p v-if="s.parent">{{ s.parent.realname }}</p>
                    <p v-else></p>
                  </div>
                </td>
                <td class="relative overflow_hidden">
                  <p v-if="s.parent">{{ s.parent.relation }}</p>
                  <p v-else></p>
                </td>
                <td>
                  <div class="classname overflow_hidden">
                    <p>{{ s.kk_name }}</p>
                  </div>
                </td>
              </tr>
            </table>
          </van-checkbox-group>
        </div>
      </van-tab>
      <van-tab title="社团到校点名" name="c">
        <stxkbzr :isShowbar="true" />
      </van-tab>
    </van-tabs>
    <van-overlay :show="show" />
    <div class="plan-nav audit-nav" v-show="auditShow">
      <van-icon class="cha" @click="cancel" name="cross" size="5vw"></van-icon>
      <h3 class="mt-5">审核</h3>
      <van-form @submit="onSubmit">
        <van-field name="radio">
          <template #input>
            <van-radio-group v-model="auditchecked">
              <van-radio name="1">通过</van-radio>
              <van-radio name="2">驳回</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <!-- <input type="textarea" v-if="auditchecked==2" v-model="rejectMsg" class="textarea" cols="30" rows="3"></input> -->
        <textarea
          class="textarea"
          v-if="auditchecked == 2"
          v-model="rejectMsg"
          rows="4"
          placeholder="请输入驳回原因"
        ></textarea>
        <div style="margin: 16px">
          <van-button round block type="primary" native-type="submit">
            提交
          </van-button>
        </div>
      </van-form>
    </div>
    <div class="plan-nav check-nav" v-show="checkShow">
      <van-icon class="cha" @click="cancel" name="cross" size="5vw"></van-icon>
      <h3>提醒</h3>
      <div>
       <p>此申请账号关系为{{ nowParent.relation }}。</p>
       <p>此学生已经关联过{{
          already.length
        }}位家长账号，关系为：<span v-for="r in already" :key="r.id">{{ r.relation }}</span></p> 
      </div>
      <div style="margin: 16px">
        <van-button round block type="primary" @click="keepUp">
          继续
        </van-button>
      </div>
    </div>
    <div class="plan-nav reject-nav" v-show="rejectShow">
      <van-icon class="cha" @click="cancel" name="cross" size="5vw"></van-icon>
      <h3>驳回详情</h3>
      <p class="text_blue">已驳回</p>
      <p>{{ rejectData }}</p>
    </div>
  </div>
</template>

<script>
import stxkbzr from "~/pages/stxkbzr/index.vue";
import request from "@/utils/request";
import getTeamInfo from "~/store/team";
import user from "../../store/user";
import { showConfirmDialog, showToast } from "vant";
export default {
  components: { stxkbzr },
  data() {
    return {
      activeName: "a",
      isShowbar: true,
      msg: {},
      show: false,
      auditShow: false,
      checkShow: false,
      rejectShow: false,
      rejectMsg: "",
      auditchecked: "",
      e_check: false,
      id: "",
      //   submiting: false,
      extra_params: {},
      checked: [],
      deleteMsg: [],
      showPopover: false,
      shenhe_status: 1,
      cm_name: "",
      cm_id: "",
      kxq_msg: {},
      code: 0,
      rejectData: "",
      already: [],
      baseURL: window.GLOBAL_CONFIG.uc,
      nowParent:{},
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push({ name: "user" });
    },
    initData() {
      let cm_id, cm_name;
      user.cm_info.forEach((item) => {
        if (item.is_manage === 1) {
          cm_id = item.cm_id;
          cm_name = item.cm_name;
          this.cm_name = item.cm_name;
          this.cm_id = item.cm_id;
        }
      });
      let kxq_code;
      getTeamInfo.then((res) => {
        if (res) {
          kxq_code = res.kxq_code;
          let data = {
            kxq_code,
            cm_id,
            cm_name,
          };
          request({
            url: "khfw/kcbmxx/class_index",
            data,
          }).then((res) => {
            if (res.code == "1") {
              if(res.data.class_stu_supply.some((item=>item.statue != "0"))){
                this.code = 0;
              }else{
                this.code = 1;
              }
              this.msg = res.data;
            }
          });
        }
      });
    },
    audit(s) {
      this.show = true;
      this.checked.push(s)
      this.nowParent = s;
      if (s.already_parent.length == 0) {
        this.auditShow = true;
        // this.checked = s;
      } else {
        if (s.statue !='0') {
          return showToast("不可重复审核!");
        }
        this.checkShow = true;
        this.already = s.already_parent;
      }
    },
    keepUp() {
      this.checkShow = false;
      this.auditShow = true;
    },
    deleteData() {
      console.log(this.deleteMsg);
      if (this.deleteMsg.length == 0) {
        showToast("请选择被删除人!");
      } else {
        showConfirmDialog({
          title: "移除班级学生",
          message: "确定移除?",
        })
          .then(() => {
            let data = {
              uid: this.deleteMsg.join(","),
              cm_id: this.cm_id,
            };
            request({
              baseURL: this.baseURL,
              url: "user/main/remove_class_student",
              data,
            }).then((res) => {
              if (res.code == "1") {
                this.initData();
                this.deleteMsg = [];
                showToast("操作成功~");
              }
            });
          })
          .catch(() => {
            showToast("取消操作~");
          });
      }
    },
    cancel() {
      (this.auditShow = false), (this.checkShow = false), (this.show = false);
      this.rejectShow = false;
      this.checked = [];
    },
    checkGroup() {
      if(this.checked.length==this.msg.class_stu_supply.length){
        this.$refs.checkAll.checked = true;
      }else{
        this.$refs.checkAll.checked = false;
      }
    },
    deleteGroup() {
      console.log(this.deleteMsg);
      if(this.deleteMsg.length==this.msg.class_stu_bm_xx.length){
        this.$refs.deleteAll.checked = true;
      }else{
        this.$refs.deleteAll.checked = false;
      }
    },
    checkedAll() {
      // 当前是全选 点击需要取消
      if (this.$refs.checkAll.checked) {
        this.$refs.checkboxGroup.toggleAll(true);
      } else {
        this.$refs.checkboxGroup.toggleAll(false);
        // this.checked = [];
      }
    },
    deleteAll() {
      // 当前是全选 点击需要取消
      // console.log(this.$refs.deleteAll);
      if (this.$refs.deleteAll.checked) {
        this.$refs.deleteGroup.toggleAll(true);
      } else {
        this.$refs.deleteGroup.toggleAll(false);
      }
    },
    checkboth() {
      if (this.checked.length == 0) {
        showToast("请选择被审核人!");
      } else {
        if (this.checked.some((item=>item.statue != "0"))) {
          return showToast("不可重复审核!");
        } else{
          this.auditShow = true;
          this.show = true;
          this.auditchecked = '';
          this.rejectMsg = '';
        } 
      }
    },
    onSubmit(value) {
      if (!value.radio) {
        showToast("请选择是否通过~");
      } else {
        let ids = [];
        this.checked.forEach((item) => {
          ids.push(item.id);
        });
        let checkdata = {
          id: ids.join(","),
          statue: value.radio,
          desc: this.rejectMsg,
        };
        console.log(ids);
        if (value.radio == "2" && this.rejectMsg == "") {
          return showToast("请填写反驳原因");
        }
        request({
          baseURL: this.baseURL,
          url: "user/main/supply_check",
          data: checkdata,
        }).then((res) => {
          if (res.code == "1") {
            this.initData();
            this.show = false;
            this.auditShow = false;
            this.checked = [];
            // this.$refs.deleteGroup.toggleAll();
            showToast(res.msg)
          }else{
            showToast(res.msg)
          }
        });
      }
    },
    rejDetail(s) {
      this.rejectData = s.desc;
      this.rejectShow = true;
      this.show = true;
    },
  },
  mounted() {
    this.initData();
  },
};
</script>

<style lang="scss" scoped>
::v-deep .van-tab--active {
  color: #003eee;
}
::v-deep .van-tabs {
  .van-tab__text {
    font-size: 0.36 * 13.3vw;
    font-weight: 400;
    // color: #707070;
    line-height: 0.36 * 13.3vw;
    z-index: 5;
  }
  .van-tabs__line {
    width: 1.2 * 13.3vw;
    height: 0.2 * 13.3vw;
    background: #003eee;
    bottom: 0.51 * 13.3vw;
    opacity: 0.8;
  }

  .van-tabs__nav {
    background: #fff;
    .van-tab {
      margin-right: 0.5 * 13.3vw;
    }
    .van-tab {
      border-bottom: 0.1 * 13.3vw solid rgba(0, 0, 0, 0);
    }
    .van-tab--active {
      font-weight: 400;
      box-sizing: border-box;
      border-bottom: 0.05 * 13.3vw solid #003eee;
    }
  }
  .van-tabs__line {
    background: unset;
  }
  .van-tabs__content {
    //   margin-top: 0.1 * 13.3vw;
    //line-height: 0;
    padding: 0;
  }
}

::v-deep .van-nav-bar {
  width: 100%;
  height: 1 * 13.3vw;
  line-height: 1 * 13.3vw;
  background-color: #003eee;
  .van-nav-bar__title {
    // color: #fff !important;
    font-size: 0.36 * 13.3vw;
    font-weight: 350;
  }
  .van-nav-bar__text {
    // color: #fff !important;
    font-size: 0.32 * 13.3vw;
    font-weight: 350;
  }
}
.nav {
  background-color: #003eee;
  border: none !important;
  // color: #fff;
}
.van-nav-bar__text {
  // color: #fff;
}
.nav::after {
  border: none !important;
}
.van-hairline--bottom::after {
  border-bottom-width: 0px;
}
.van-nav-bar .van-icon {
  // color: #fff;
}
.gap {
  width: calc(100% - 20px);
  border-bottom: 1px solid #ebedf0;
}
.van-field__control {
  text-align: right;
}
.form img {
  max-width: 100% !important;
}
.customerService {
  width: 100px;
  position: fixed;
  left: 50%;
  bottom: 10%;
  margin-left: -50px;
  text-align: center;
  border: 2px solid #f37942;
  color: #f37942;
  border-radius: 5px;
  font-weight: bold;
  padding: 5px 0;
}
.title {
  width: 100%;
  background-image: url("@/assets/images/img-title.png");
  background-size: 100%;
  height: 17vw;
  line-height: 39px;
  background-repeat: no-repeat;
}
.flex {
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
}
.title .title_text {
  font-size: 3.8vw;
  color: #ffffff;
  line-height: 8vw;
}
.title .title_btn {
  /* width: 50%; */
  justify-content: space-around;
  align-items: center;
}
.title .title_btn > span {
  background-color: #fff;
  border-radius: 30px;
  padding: 0px 2.6vw;
  line-height: unset;
  font-size: 3.9vw;
  margin-left: 5px;
  display: inline-block;
  height: 8.5vw;
  line-height: 8.5vw;
  color: #003eee;
  cursor: pointer;
}
.stu {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #e6e6e6;
}
.stu_name {
  width: 84px;
  font-size: 14px;
  font-family: DengXian;
  text-align: left;
  color: #000000;
}
.stu_class {
  width: 100px;
  font-size: 14px;
  font-family: DengXian;
  text-align: left;
  color: #9f9f9f;
}
table {
  width: 100%;
  /* border-top: #c8b9ae solid 1px; */
  border-collapse: collapse;
  tr {
    height: 10vw;
  }
}
.text_white {
  color: #fff;
  font-size: 4vw;
  line-height: 15vw;
}
.table_check {
  p {
  }
  .name_check {
    width: 22vw;
  }
  .wxname_check {
    width: 20vw;
  }
  .relative_check {
    width: 20vw;
  }
}
th {
  color: #9f9f9f;
  font-weight: 400;
  border-bottom: solid 1px #e7e2df;
}

tr td {
  overflow: hidden;
}
tr td p {
  width: 100%;
  height: 100%;
  line-height: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
th,
td {
  font-size: 12px;
  letter-spacing: 0;
  text-align: left;
}
td {
  border-bottom: #e7e2df solid 1px;
  /* padding:10px 10px 6px; */
}
.overflow_hidden {
  overflow: hidden;
}
.name {
  width: 20vw !important;
}
.wxname {
  width: 20vw;
}
.relative {
  width: 20vw;
}
.action {
  width: 20vw;
  min-width: 15vw;
  padding-right: 5px;
  text-align: center;
}
.action button {
  width: 90%;
  height: 25px;
  font-size: 12px;
  color: #fff;
  outline-color: none;
  border-radius: 4px;
  border: none;
}
.act_btu1 {
  background-color: #003eee;
}
.act_btu2 {
  background-color: #9d9d9d;
}
.act_btu3 {
  background-color: red;
  /* color: red !important; */
}
.plan-nav {
  width: 70vw;
  height: 70vw;
  color: #333333;
  background-color: #fff;
  position: fixed;
  top: 35vw;
  left: 15vw;
  border-radius: 1vw;
  z-index: 5;
  padding: 0 5vw;
  box-sizing: border-box;
}

.cha {
  display: block;
  font-size: 20px;
  position: absolute;
  right: 5vw;
  top: 5vw;
  cursor: pointer;
}
h3 {
  display: block;
  width: 12vw;
  height: 10vw;
  font-size: 5vw;
  font-weight: 400;
  position: relative;
}
h3::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 2vw;
  bottom: 3.3vw;
  left:0;
  border-radius: 10vw;
  background-color: #c5c5ff;
  opacity: 0.6;
}
.audit-nav {
  height: 100vw;
  h3{
    text-align: center;
  }
}
.reject-nav {
  padding: 20px;
  h3 {
    width: 25vw;
    font-size: 4.4vw;
    text-align: center;
}
} 
.cover {
  position: fixed;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: #000000;
  opacity: 0.3;
}
.van-radio {
  height: 10vw;
}
.btn {
  width: 30vw;
  height: 10vw;
  margin: 10vw auto;
}
.btn button {
  width: 100%;
  height: 100%;
  border: none;
  background-color: #003eee;
  color: #fff;
  outline: none;
  outline-width: 0;
  border-radius: 10vw;
}
.box {
  // padding-left: 6px;
}
.chooseAll {
  width: 16px;
  height: 16px;
  border-radius: 1px;
  border: 1px dotted #000;
  background-color: #fff;
  outline: none;
}
.delete_btn {
  width: 18%;
  height: 46px;
  line-height: 46px;
  position: absolute;
  top: 0;
  right: 20%;
  z-index: 5;
  /* background: #000000; */
  text-align: center;
}
.delete_btn > span {
  /* height: 50%; */
  padding: 3px 10px;
  background-color: red;
  color: #fff;
  border-radius: 15px;
}
.check-nav > p {
  text-align: center;
}
.van-button--primary {
  background-color: #003eee;
  border: #003eee;
}
.textarea {
  width: 95%;
  /* height: 15vw; */
  margin: 0 auto;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding-left: 2px;
  background: #f2f2f2;
}
.text_blue {
  color: #003eee;
}
</style>
