<template>
  <div class="content">
    <van-nav-bar title="社团开展情况" left-arrow @click-left="onClickLeft" />
    <van-cell-group>
      <select
        @change="getListData"
        class="w-full bg-light-100"
        v-model="kxq_code"
      >
        <!-- <option :label="kxq_code">
        </option> -->
        <option
          v-for="t in teamData"
          :key="t.kxq_code"
          :value="t.kxq_code"
          :label="t.kxq_name"
        >
          {{ t.kxq_name }}
        </option>
      </select>
      <select
        @change="getListData(1)"
        class="w-full bg-light-100"
        v-model="week"
      >
        <!-- <option value="" label="">请选择周</option> -->
        <option
          v-for="w in weekData"
          :key="w.weeknum"
          :value="w.weeknum"
          :label="w.weekname"
        >
          {{ w.weekname }}
        </option>
      </select>
    </van-cell-group>
    <div class="detail">
      <h3>课程情况</h3>
      <div class="course-num flex">
        <div class="img-1 w-180px mr-10px">
          <div class="title">社团正常开班数</div>
          <div class="num">{{ kcqkData.zc }}</div>
        </div>
        <div class="img-2 w-180px">
          <div class="title">社团非正常开班数</div>
          <div class="num">{{ kcqkData.fzc }}</div>
        </div>
      </div>
      <div class="flex justify-between">
        <h3 class="h-3">异常学生情况</h3>
        <span>共{{ ycxsqkData.total }}次</span>
      </div>
      <div class="level">
        <van-collapse v-model="activeNames">
          <van-collapse-item name="1">
            <template #title>
              <div style="border-left: 5px solid #ff0000; padding-left: 16px">
                一级
                <span class="text-hex-FF0000 ml-14px">未到校未请假</span>
              </div>
            </template>
            <div class="list" v-for="i in ycxsqkData.level_1">
              <span class="one">{{ i.realname }}</span>
              <span class="two">{{ i.classname }}</span>
              <div class="three">
                <div class="ellipsis" v-for="j in i.desc">{{ j }}</div>
              </div>
            </div>
          </van-collapse-item>
          <van-collapse-item name="2">
            <template #title>
              <div style="border-left: 5px solid #003eee; padding-left: 16px">
                二级
                <span class="text-hex-003EEE ml-14px">未到校已请假</span>
              </div>
            </template>
            <div class="list" v-for="i in ycxsqkData.level_2">
              <span class="one">{{ i.realname }}</span>
              <span class="two">{{ i.classname }}</span>
              <div class="three">
                <div class="ellipsis" v-for="j in i.desc">{{ j }}</div>
              </div>
            </div>
          </van-collapse-item>
          <van-collapse-item name="3">
            <template #title>
              <div style="border-left: 5px solid #00a25c; padding-left: 16px">
                三级
                <span class="text-hex-00A25C ml-14px">未进入指定社团</span>
              </div>
            </template>
            <div class="list" v-for="i in ycxsqkData.level_3">
              <span class="one">{{ i.realname }}</span>
              <span class="two">{{ i.classname }}</span>
              <div class="three">
                <div class="ellipsis" v-for="j in i.desc">{{ j }}</div>
              </div>
            </div>
          </van-collapse-item>
        </van-collapse>
      </div>
    </div>
  </div>
</template>

<script>
import { stkz_list, team_list } from "./api";

export default {
  data() {
    return {
      grade: "",
      classes: "",
      nj: [],
      bj: [],
      stu: [],
      student: "",
      activeNames: ["1"],
      collapse: null,
      kcqkData: {},
      ycxsqkData: {},
      teamData: [],
      curTeam: "",
      weekData: [],
      curTeamCode: "",
      kxq_code: "",
      week: "",
    };
  },
  methods: {
    getTeamData() {
      team_list().then((res) => {
        this.teamData = res.data.page_data;
        this.teamData.map((item) => {
          if (item.kxq_sfdqxq_option_k == "1") {
            //  this.curTeam=item.kxq_name;
            this.kxq_code = item.kxq_code;
            this.getListData();
            console.log(this.teamData, 123);
          }
        });
      });
    },
    getListData(num) {
      let data = {
        kxq_code: this.kxq_code,
        week: this.week,
      };
      console.log(this.curTeam, 34);
      stkz_list(data).then((res) => {
        this.kcqkData = res.data.kcqk;
        this.ycxsqkData = res.data.ycxsqk;
        if (num != "1") {
          this.weekData = res.data.xq_week;
          this.weekData.map((item) => {
            if (item.current == "1") {
              this.week = item.weeknum;
              console.log(this.weeknum, 123);
            }
          });
        }
      });
    },
    onClickLeft() {
      this.$router.push({ name: "user" });
    },
  },
  mounted() {
    this.getTeamData();
  },
};
</script>

<style  lang="scss" scoped>
.van-cell-group {
  width: 100%;
  margin: 0;
  // padding: 0.05 * 13.3vw 0.2 * 13.3vw;
  box-sizing: border-box;
  background-color: #f0f3fa;
}
select {
  width: 46%;
  height: 0.8 * 13.3vw;
  margin-top: 0.14 * 13.3vw;
  margin-left: 0.2 * 13.3vw;
  border-radius: 0.08 * 13.3vw;
}
.van-button {
  margin-top: 1 * 13.3vw;
  box-sizing: border-box;
}
.content {
  margin: 0 auto;
  background: #f0f3fa;
  min-height: 100vh;
}
::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;
  }
}

::v-deep .van-cell {
  padding-left: 0;
}
.detail {
  width: 100%;
  color: #333333;
  margin-top: 0.3 * 13.3vw;
  border-radius: 0.1 * 13.3vw;
  padding: 0.2 * 13.3vw;
  box-sizing: border-box;

  h3 {
    //  width: 100%;
    height: 0.4 * 13.3vw;
    font-size: 0.3 * 13.3vw;
    position: relative;
  }
  h3::before {
    position: absolute;
    content: "";
    width: 18%;
    height: 0.2 * 13.3vw;
    bottom: 0 * 13.3vw;
    border-radius: 0.1 * 13.3vw;
    background-color: #c5c5ff;
    opacity: 0.5;
  }
  .h-3::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;
  }
  .course-num {
    width: 100%;
    height: 110px;
    margin: 0.15 * 13.3vw 0 0.3 * 13.3vw 0;
    .img-1 {
      padding: 0.32 * 13.3vw 0.23 * 13.3vw;
      background: url("@/assets/images/img-1.png") center no-repeat;
      background-size: 180px 110px;
    }
    .img-2 {
      padding: 0.32 * 13.3vw 0.23 * 13.3vw;
      background: url("@/assets/images/img-2.png") center no-repeat;
      background-size: 180px 110px;
    }
    .title {
      font-size: 0.3 * 13.3vw;
      color: #333333;
    }
    .num {
      margin-top: 0.25 * 13.3vw;
      font-size: 0.68 * 13.3vw;
      color: #333333;
    }
  }
}
.level {
  width: 100%;
  background: #fff;
  margin-top: 0.25 * 13.3vw;
}
.list {
  width: 100%;
  //  height: 40px;
  border-bottom: 1px solid #e8e8e8;
  // line-height: 40px;

  .one,
  .two,
  .three {
    display: inline-block;
    height: 100%;
    line-height: 40px;
  }
  .one {
    width: 25%;
  }
  .two {
    width: 33%;
  }
  .three {
    width: 42%;
    vertical-align: middle;
  }
  .now,
  .pass {
    height: 20px;
    line-height: 20px;
    font-size: 12px;
  }
  .ellipsis {
    vertical-align: top;
    word-wrap: break-word;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
  }
}
</style>