<template>
  <div class="content">
    <van-nav-bar title="本班学生选课" @click="changeTitle" v-show="!isShowbar" left-arrow @click-left="onClickLeft" />
    <div class="week">
      <ul class="weekday">
        <li @click="changeWeek(week,index)"  :class="[state.week == week.name ? 'dayblue' : '']" v-for="(week, index) in classWeek" :key="week">
          <p class="day">{{ week.name }}</p>
          <div class="dot">
            <!-- <div v-for="(dot,indexs) in week.course" v-show="indexs < 3" :key="dot" :class="[
                dot.khfw_kcbgl.kkb_id === '304' ? 'dot-orange' : '',
                dot.khfw_kcbgl.kkb_id === '305' ? 'dot-purple' : '',
                dot.khfw_kcbgl.kkb_id === '306' ? 'dot-blue' : '',
                dot.khfw_kcbgl.kkb_id === '307' ? 'dot-green' : '',
              ]"></div> -->
            <div v-show="index < 3" v-for="(dot, index) in week.course" :key="dot" :class="[
                index == 1 ? 'dot-orange' : '',
                index == 2 ? 'dot-purple' : '',
                index == 0 ? 'dot-blue' : '',
                index == 3 ? 'dot-green' : '',
              ]"></div>
          </div>
        </li>
      </ul>
      <div class="slide"></div>
    </div>

    <div class="class-number" v-show="state.showIndex === index" v-for="(week, index) in classWeek" :key="week">
      <p>课程数量({{ week?.course?.length ?? 0 }})</p>
      <p class="flex justify-between">
            <div>  今日本班学生到校: <span style="color: #003eee">{{ week.dmxx.xsqd }}</span>/{{ week.dmxx.xszs }}</div>
      <div class="ydmBtn">  <span @click="(toSignUp = true)">预点名</span></div>
      </p>
      <div class="class-list" v-for="(c,i) in week.course" :key="i">
        <div class="class-left"></div>
        <div class="class-right">
          <h1>{{ c.khfw_kcbgl.kk_name }}</h1>
          <p class="c-detail mt-7px">
            <span> 主讲：{{ c.khfw_kcbgl.kkb_zjjs_xm }}</span>
            <span>地点：{{ c.khfw_kcbgl.kj_name }}</span>
            <span>课时：{{ c.khfw_kcgl.kk_kss }}</span>
          </p>
          <p class="c-date">
            <span class="qz-date">
              <van-icon name="clock-o" />{{ c.kkbk_starttime }} -
              {{ c.kkbk_endtime }}
            </span>
            <span class="join-number">{{ c?.khfw_kcbgl?.bzr_info?.bmxx?.length ?? 0 }}名学生报名</span>
            <span class="findmore" @click="detailData(c.kkbk_id), (toDetail = true)">查看详情</span>
          </p>
        </div>
      </div>
    </div>

    <p class="node">*显示本班学生今日选课的所有课程</p>

    <div v-show="toSignUp" class="cover"></div>
    <div class="sign-up" v-if="toSignUp">
      <van-icon @click="close" name="cross" size="0.4*13.3vw" />
      <h3>预点名</h3>
      <p>
        今日本班学生到校:
        <span style="color: #003eee">{{ xsxx.m1 }}</span>/{{ xsxx.m2 }}
      </p>
      <div class="students">
        <span @click="selectStudent(item, index,'0')" :class="initClass(item)" v-for="(item, index) in ydmStu" :key="item">{{ item.realname}} {{item.kk_name}} </span>
      </div>
      <div class="submit"  >
        <button :class="absentStu.length == 0 ||state.showIndex!=index ?' disabled':'blueBtn'" @click="submitDM('0')">
          到校
        </button>
        <button :class="absentStu.length == 0||state.showIndex!=index ?' disabled':'orangeBtn'" @click="submitDM('1')">
          请假
        </button>
        <button :class="absentStu.length == 0||state.showIndex!=index ?' disabled':'redBtn'" @click="submitDM('2')">
          异常
        </button>
      </div>
    </div>
    <!-- 查看详情弹窗 -->
    <div v-show="toDetail" class="cover"></div>
    <div class="detail" v-if="toDetail">
      <van-icon @click="toDetail = false" name="cross" size="0.4*13.3vw" />
      <h3>本班学生情况</h3>
      <div class="student-detail">
        <div>
          <p>
            <a class="icon"></a>报名情况：（共{{
              classDetail?.member?.length ?? 0
            }}名学生）
          </p>
          <div class="bm">
            <span v-for="(item, index) in newMember" :key="index" class="real-name">{{ item.kkbm_s_realname }} {{item.kkbm_s_class_name}}</span>
            <!-- <span v-for="(item, index) in 23" :key="index" class="real-name">啧啧啧 一年级(1)班</span> -->
          </div>
        </div>
        <div>
          <p>
            <a class="icon"></a>预点名情况：<span style="color: #003eee">{{
              (classDetail?.member?.length ?? 0) -
              (classDetail?.dm?.ydmqk?.length ?? 0)
            }}</span>/{{ classDetail?.member?.length ?? 0 }}
          </p>
          <div class="bm">
            <span class="ydm-name" v-for="(item, index) in newYdmqk" :key="index">
              {{ item.kkbm_s_realname }} {{item.kkbm_s_class_name}}
              <span v-if="item.ydm_statue=='1'">请假</span>
              <span v-else>缺勤</span>
            </span>
            <!-- <span class="ydm-name" v-for="(item, index) in 4" :key="index">
              张谁说 一年级(1)班 缺勤
            </span> -->
          </div>
        </div>
        <div>
          <p>
            <a class="icon"></a>签到情况：<span style="color: #003eee">{{
              (classDetail?.member?.length ?? 0) -
              (classDetail?.dm?.qdqk?.length ?? 0)
            }}</span>/{{ classDetail?.member?.length ?? 0 }}
          </p>
          <div class="bm">
            <span class="qd-name" v-for="(item, index) in newQdqk" :key="index">
              {{ item.kkbm_s_realname }} {{item.kkbm_s_class_name}}缺勤
            </span>
            <!-- <span class="qd-name" v-for="(item, index) in 5" :key="index">
              啊啊啊 一年级(1)班 缺勤
            </span> -->
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import { showToast } from "vant";
import { bzr_list, kc_detail, stxkjs_check, ydm_list } from "./api";
import getTeamInfo from "~/store/team";
import { isSameValue } from "vant/lib/utils";
export default {
  props: ["isShowbar"],
  data() {
    return {
      toSignUp: false,
      toDetail: false,
      state: {
        week: "",
        showIndex: 0,
      },
      classWeek: [],
      classDetail: {},
      dm: {},
      kkbk_id: "",
      memberMsg: [],
      stuInfo: "",
      cm_id: "",
      userInfo: user,
      ydmStu: [],
      ydmData: [],
      absentStu: [],
      xsxx: { m1: "", m2: "" },
      kxq_code: "",
      stateData: [],
      weekname: "",
      index: "",
      cm_id: "",
    };
  },
  methods: {
    getListData() {
      this.userInfo.cm_info.forEach((item) => {
        this.cm_id = item.cm_id;
      });

      getTeamInfo.then((res) => {
        this.kxq_code = res.kxq_code;
        let data = {
          ex: "byweek",
          cm_id: this.cm_id,
          kxq_code: this.kxq_code,
        };
        bzr_list(data).then((res) => {
          this.classWeek = res.data;
          this.ydmStu = res.class_member;
          this.classWeek.map((item) => {
            this.weekname = item.name;
            this.stateData = item.dmxx.yichang_stu;
            this.getWeek();
          });
        });
      });
    },
    detailData(id) {
      this.kkbk_id = id;
      let data = {
        kkbk_id: this.kkbk_id,
      };

      kc_detail(data).then((res) => {
        this.classDetail = res.data.one_info;
        this.newYdmqk = res.data.one_info.dm.ydmqk;
        this.newQdqk = res.data.one_info.dm.qdqk;
        this.newMember = res.data.one_info.member;
      });
    },

    onClickLeft() {
      this.$router.push({ name: "home" });
    },
    changeWeek(week, index) {
      this.state.week = week.name;
      this.state.showIndex = index;
      console.log(this.state.showIndex, 33);
      this.courseNum = week.course.length;
      this.xsxx.m1 = week.dmxx.xsqd;
      this.xsxx.m2 = week.dmxx.xszs;
      this.stateData = week.dmxx.yichang_stu;
      this.ydmStu.map((j) => {
        j.statue = "0";
        j.isCheck = false;

        this.stateData.map((i) => {
          if (i.uid == j.uid) {
            j.statue = i.statue;
          }
        });
      });
      this.absentStu = [];
    },
    getWeek() {
      var day = new Date().getDay();
      var weeks = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
      this.index = this.classWeek.findIndex((item) => item.name == weeks[day]);
      console.log(this.classWeek[this.index], this.index, 678);
      this.changeWeek(this.classWeek[this.index], this.index);
      // this.state.week = weeks[day];
      // this.state.showIndex = weeks.indexOf(this.state.week);
    },

    //点名
    selectStudent(stu, index) {
      stu.isCheck = !stu.isCheck;
      if (stu.isCheck) {
        this.absentStu.push({
          kccq_cqycxsxm: stu.realname,
          kccq_cqycxsbh: stu.uid,
        });
        console.log(stu.isCheck, 456);
      } else {
        let i = this.absentStu.findIndex(
          (item) => stu.uid == item.kccq_cqycxsbh
        );
        this.absentStu.splice(i, 1);
        console.log(stu.isCheck, 567);
      }
      if (this.state.showIndex != this.index) {
        showToast("只有当天才能点名呦~");
      }
    },
    initClass(data) {
      let className = "";
      if (data.statue == 0) {
        className = "blueBg";
      } else if (data.statue == "1") {
        className = "orangeBg";
      } else if (data.statue == 2) {
        className = "redBg";
      }
      if (data.isCheck) {
        className += " blueName";
      }
      return className;
    },
    submitDM(type) {
      this.absentStu.map((item) => {
        item.kccq_cqycztbh = type;
      });
      let data = {
        kccq_sfydm: 1,
        member: this.absentStu,
      };

      stxkjs_check(data).then((res) => {
        showToast("预点名成功！");
        this.xsxx.m1 = 0;
        this.ydmStu.map((j) => {
          this.absentStu.map((i) => {
            if (i.kccq_cqycxsbh == j.uid) {
              j.statue = type;
            }
          });
          if (j.statue == 0) {
            this.xsxx.m1++;
          }
          j.isCheck = false;
        });
        this.$forceUpdate();
        this.absentStu = [];
        //   this.isCheck=
      });
    },
    close() {
      this.getListData();
      (this.toSignUp = false),
        this.ydmStu.map((item) => {
          item.isCheck = false;
        });
    },
  },
  mounted() {
    this.getListData();
  },
};
</script>

<style  lang="scss" scoped>
.content {
  margin: 0 auto;
  background: #f0f3fa;
  min-height: 100vh;
}

::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;
  }
}
.week {
  width: 100%;
  height: 1.8 * 13.3vw;
  background-color: #fff;
  border-radius: 0px 0px 0.4 * 13.3vw 0.4 * 13.3vw;
  padding: 0.2 * 13.3vw 0.05 * 13.3vw;
  box-shadow: 0px 0px 20px 0px rgba(12, 13, 10, 0.1);
  .weekday {
    display: flex;
    justify-content: space-between;
    li {
      width: 0.88 * 13.3vw;
      height: 1.07 * 13.3vw;
      line-height: 1.07 * 13.3vw;
      font-size: 0.28 * 13.3vw;
      background-color: #f0f2f7;
      border-radius: 0.1 * 13.3vw;
      .day {
        width: 100%;
        height: 0.37 * 13.3vw;
        line-height: 0.34 * 13.3vw;
        margin-top: 0.2 * 13.3vw;
        text-align: center;
      }
      .dot {
        display: flex;
        justify-content: center;
        div {
          width: 0.1 * 13.3vw;
          height: 0.1 * 13.3vw;
          border-radius: 50%;
          margin: 0.15 * 13.3vw 0.06 * 13.3vw;
          border: 1px solid #ffffff;
          // box-sizing: border-box;
        }
        .dot-orange {
          background-color: #eb6100;
        }
        .dot-purple {
          background-color: #601986;
        }
        .dot-blue {
          background-color: #1d2088;
        }
        .dot-green {
          background-color: #009944;
        }
      }
    }
    .dayblue {
      background-color: #003eee;
      color: #fff;
    }
  }
  .slide {
    margin: 0.2 * 13.3vw auto;
    width: 1 * 13.3vw;
    height: 0.1 * 13.3vw;
    background: #e8e8e8;
    border-radius: 0.05 * 13.3vw;
  }
}
.class-number {
  margin-top: 0.648 * 13.3vw;
  p:first-of-type {
    width: 100%;
    padding-left: 0.325 * 13.3vw;
    height: 0.33 * 13.3vw;
    line-height: 0.33 * 13.3vw;
    font-size: 0.32 * 13.3vw;
    font-family: SimHei;
    text-align: left;
    color: #000000;
    margin-bottom: 0.2 * 13.3vw;
  }
  p:last-of-type {
    margin-left: 0.325 * 13.3vw;
    width: 95%;
    height: 0.48 * 13.3vw;
    font-size: 0.28 * 13.3vw;
    font-family: AdobeHeitiStd-Regular;
    text-align: left;
    color: #a0a0a0;
    line-height: 0.48 * 13.3vw;
    padding-right: 0.325 * 13.3vw;
    .ydmBtn {
      width: 1.3 * 13.3vw;
      height: 0.48 * 13.3vw;
      line-height: 0.48 * 13.3vw;
      background: #003eee;
      border-radius: 0.24 * 13.3vw;
      font-size: 0.24 * 13.3vw;
      font-family: Segoe UI, Segoe UI-Regular;
      font-weight: 400;
      text-align: center;
      color: #ffffff;
      // margin-left: 2.2 * 13.3vw;
    }
  }

  .class-list {
    display: flex;
    width: 6.96 * 13.3vw;
    height: 2 * 13.3vw;
    background: #ffffff;
    border-radius: 0.2 * 13.3vw;
    margin: 0.24 * 13.3vw 0.25 * 13.3vw 0.18 * 13.3vw 0.29 * 13.3vw;
    &:nth-child(even) {
      .class-left {
        background: #eb6100;
      }
    }
    &:nth-child(odd) {
      .class-left {
        background: #009944;
      }
    }
    .class-left {
      width: 0.2 * 13.3vw;
      height: 2 * 13.3vw;

      border-radius: 0.19 * 13.3vw 0 0 0.19 * 13.3vw;
      background-color: #e8523f;
    }
    .class-right {
      width: 6.3 * 13.3vw;
      height: 2 * 13.3vw;

      vertical-align: top;
      margin: 0.3 * 13.3vw 0 0 0.27 * 13.3vw;

      h1 {
        font-size: 0.32 * 13.3vw;
        font-family: AdobeHeitiStd-Regular;
        text-align: left;
        color: #000000;
      }
      .c-detail {
        //  background: #000;
        height: 0.3 * 13.3vw;
        font-size: 0.28 * 13.3vw;

        color: #a0a0a0;
        //@error   letter-spacing: 0.01 * 13.3vw;
        padding: 0;
        span {
          margin-right: 0.15 * 13.3vw;
        }
      }
      .c-date {
        width: 100%;
        height: 0.27 * 13.3vw;
        font-size: 0.25 * 13.3vw;
        color: #a0a0a0;
        line-height: 0.35 * 13.3vw;
        letter-spacing: 0.01 * 13.3vw;
        margin-top: 0.2 * 13.3vw;
        margin-left: 0;
        position: relative;
        .join-number {
          position: absolute;
          right: 70px;
          bottom: -3px;
        }
        .findmore {
          font-size: 0.2 * 13.3vw;
          color: #003eee;
          background: unset;
          letter-spacing: 0.01 * 13.3vw;
          margin-left: 0;
          position: absolute;
          right: 0px;
          bottom: -2px;
        }
      }
    }
  }
}

.node {
  font-size: 0.24 * 13.3vw;
  font-family: PingFang-SC-Regular;
  text-align: left;
  color: #ff0000;
  line-height: 0.36 * 13.3vw;
  padding: 20px;
}

.cover {
  position: fixed;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: #000000;
  opacity: 0.3;
}

.detail,
.sign-up {
  width: 6.8 * 13.3vw;
  // height: 8.24 * 13.3vw;
  color: #333333;
  background-color: #fff;
  position: fixed;
  top: 1.5 * 13.3vw;
  left: 0.32 * 13.3vw;
  border-radius: 0.1 * 13.3vw;
  z-index: 5;
  padding: 0.2 * 13.3vw 0.1 * 13.3vw;
  box-sizing: border-box;
  i {
    position: absolute;
    right: 0.2 * 13.3vw;
    top: 0.23 * 13.3vw;
  }
  h3 {
    width: 1 * 13.3vw;
    height: 0.4 * 13.3vw;
    font-size: 0.3 * 13.3vw;
    position: relative;
    margin: 0 0.15 * 13.3vw;
  }
  h3::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 0.2 * 13.3vw;
    bottom: 0 * 13.3vw;
    border-radius: 0.1 * 13.3vw;
    background-color: #c5c5ff;
    opacity: 0.5;
  }
}
.sign-up {
  p {
    width: 95%;
    height: 0.37 * 13.3vw;
    font-size: 0.28 * 13.3vw;
    font-family: AdobeHeitiStd-Regular;
    text-align: left;
    color: #a0a0a0;
    line-height: 0.35 * 13.3vw;
    margin: 0.3 * 13.3vw 0.15 * 13.3vw;
  }
}
.students {
  width: 98%;
  margin-left: 0.2 * 13.3vw;
  display: flex;
  flex-wrap: wrap;
  //  border: 1px solid red;
  height: 6.6 * 13.3vw;
  overflow: auto;
  span {
    width: 45%;
    height: 0.6 * 13.3vw;
    line-height: 0.6 * 13.3vw;
    margin: 0.06 * 13.3vw;
    text-align: center;
    font-size: 0.24 * 13.3vw;
    color: #a0a0a0;
    border: 1px solid #a0a0a0;
    border-radius: 0.05 * 13.3vw;
    letter-spacing: 0.02 * 13.3vw;
    position: relative;
    word-wrap: break-word;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
  }
  .blueName {
    color: #003adf;
    border: 1px solid #003eee;
  }
  .blueBg {
    color: #003adf;
    background: rgba(#003eee, 0.2);
  }
  .orangeBg {
    color: #003adf;
    background: rgba(#ff9900, 0.2);
  }
  .redBg {
    color: #003adf;
    background: rgba(#ff0000, 0.2);
  }
}
.detail {
  h3 {
    width: 1.8 * 13.3vw;
  }
  //上课点名
  .student-detail {
    width: 100%;
    // height: 5.6 * 13.3vw;
    margin: 0 * 13.3vw 0.3 * 13.3vw;

    & > div {
      width: 90%;
      //height: 1.2 * 13.3vw;
      margin: 0 * 13.3vw 0.2 * 13.3vw 0.3 * 13.3vw 0;

      & p {
        width: 100%;
        font-size: 0.28 * 13.3vw;
        font-family: Segoe UI, Segoe UI-Regular;
        font-weight: 400;
        text-align: left;
        color: #7f7f7f;
        line-height: 0.4 * 13.3vw;
        letter-spacing: 0.024 * 13.3vw;
        margin-top: 0.15 * 13.3vw;
        .icon {
          display: inline-block;
          width: 0.1 * 13.3vw;
          height: 0.1 * 13.3vw;
          line-height: 0.1 * 13.3vw;
          background: #003eee;
          border-radius: 50%;
          margin: 0.08 * 13.3vw;
        }
      }
      .bm {
        width: 100%;
        // border: 1px solid red;
        color: #7f7f7f;
        height: 100px;
        overflow: scroll;
        padding-right: 5px;

        .real-name {
          display: inline-block;
          //  width: 20%;
          height: 0.4 * 13.3vw;
          margin-left: 0.18 * 13.3vw;
          //   margin-top: 0.1 * 13.3vw;
          color: #7f7f7f;
        }
        .ydm-name {
          display: inline-block;
          //  width: 20%;
          height: 0.4 * 13.3vw;
          margin-left: 0.18 * 13.3vw;
          //   margin-top: 0.2 * 13.3vw;
          color: #ee0000;
        }
        .qd-name {
          display: inline-block;
          //  width: 20%;
          height: 0.4 * 13.3vw;
          margin-left: 0.18 * 13.3vw;
          //     margin-top: 0.2 * 13.3vw;
          color: #ee0000;
        }
      }
    }
  }
}

.submit {
  text-align: center;
  margin: 0.4 * 13.3vw 0;
  // button {
  //   width: 1.5 * 13.3vw;
  //   height: 0.68 * 13.3vw;
  //   background: #003eee;
  //   border-radius: 0.34 * 13.3vw;
  //   color: #fff;
  //   font-size: 0.34 * 13.3vw;
  //   margin: 0 0.2 * 13.3vw;
  .disabled {
    pointer-events: none;
    background: #ccc;
    width: 1.5 * 13.3vw;
    height: 0.68 * 13.3vw;
    // background: #003eee;
    border-radius: 0.34 * 13.3vw;
    color: #fff;
    font-size: 0.34 * 13.3vw;
    margin: 0 0.2 * 13.3vw;
  }
  .blueBtn {
    width: 1.5 * 13.3vw;
    height: 0.68 * 13.3vw;
    background: #003eee;
    border-radius: 0.34 * 13.3vw;
    color: #fff;
    font-size: 0.34 * 13.3vw;
    margin: 0 0.2 * 13.3vw;
  }
  .orangeBtn {
    width: 1.5 * 13.3vw;
    height: 0.68 * 13.3vw;

    border-radius: 0.34 * 13.3vw;
    color: #fff;
    font-size: 0.34 * 13.3vw;
    margin: 0 0.2 * 13.3vw;
    background: #ff9900;
  }
  .redBtn {
    width: 1.5 * 13.3vw;
    height: 0.68 * 13.3vw;
    border-radius: 0.34 * 13.3vw;
    color: #fff;
    font-size: 0.34 * 13.3vw;
    margin: 0 0.2 * 13.3vw;
    background: #ff0000;
  }
  // }
}
</style>