<template>
  <div class="content">
    <van-nav-bar title="社团选课" 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-show="index < 3" v-for="(dot, index) in week.course" :key="dot" :class="[
               index == 0 ? 'dot-blue' : '',
                index == 1 ? 'dot-orange' : '',
                index == 2 ? 'dot-purple' : '',
                index == 3 ? 'dot-green' : '',
              ]"></div>

          </div>
        </li>
      </ul>
      <div class="slide"></div>
    </div>
    <van-tabs v-model:active="activeName" shrink>
      <van-tab :title="'课程数量('+courseNum+')'" name="a">
        <div class="class-number" v-show="state.showIndex === index" v-for="(week, index) in classWeek" :key="week">
          <!-- <p>课程数量({{ week.course.length }})</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>
              <img v-if="c.is_qd.kkq_zt == 3" src="@/assets/icon/icon-success.png" alt="" />
              <img v-if="c.is_qd.kkq_zt == -1" src="@/assets/icon/icon-warning.png" alt="" />
              <p class="c-detail mt-27px">
                <span> 主讲：{{ c.khfw_kcbgl.kkb_zjjs_xm }}</span>
                <span class="mx-3px">地点：{{ c.khfw_kcbgl.kj_name }}</span>
                <span>课时：{{ c.khfw_kcgl.kk_kss }}</span>
              </p>

              <p class="c-date">
                <span>
                  <van-icon name="clock-o" />{{ c.kkbk_starttime }} -
                  {{ c.kkbk_endtime }}
                </span>
                <span class="join-number">
                  <span type="text" style="color: #6f6f6f" v-if="c.is_qd.kkq_zt == 0">通过课程申请
                  </span>
                  <span type="text" v-if="c.is_qd.kkq_zt == 2" @click="changeStatus(c, index, i)">通过课程申请
                  </span>
                  <span type="text" style="color: #6f6f6f" v-if="c.is_qd.kkq_zt == 3">已课程申请
                  </span>
                  <span type="text" v-if="c.is_qd.kkq_zt == -1" @click="assignData(c.kkbk_id), (assignTeacher = true)">分配教师
                  </span>
                  <span type="text" v-if="c.is_qd.kkq_zt == 4">已签到
                  </span>

                  <!-- <span type="text" v-if="c.is_qd.kkq_zt == 4">已签到 </span> -->

                  <span v-for="(item, index) in c.is_qd" :key="index">
                    {{ item?.kkq_zt }}
                  </span>
                </span>

                <span class="findmore" @click="toDatail(c.kkbk_id)">查看详情</span>
              </p>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab :title="'已正常开课课程('+zcNum+')'" name="b">
        <div class="class-number" v-show="state.showIndex === index" v-for="(week, index) in classWeek" :key="week">
          <!-- <p>课程数量({{ week.course.length }})</p> -->
          <div class="class-list" v-for="(c, i) in week.course" :key="i" v-show="c.kkyc=='0'">
            <div class="class-left"></div>
            <div class="class-right">
              <h1>{{ c.khfw_kcbgl.kk_name }}</h1>
              <img v-if="c.is_qd.kkq_zt == 3" src="@/assets/icon/icon-success.png" alt="" />
              <img v-if="c.is_qd.kkq_zt == -1" src="@/assets/icon/icon-warning.png" alt="" />
              <p class="c-detail mt-27px">
                <span> 主讲：{{ c.khfw_kcbgl.kkb_zjjs_xm }}</span>
                <span class="mx-3px">地点：{{ c.khfw_kcbgl.kj_name }}</span>
                <span>课时：4</span>
              </p>

              <p class="c-date">
                <span>
                  <van-icon name="clock-o" />{{ c.kkbk_starttime }} -
                  {{ c.kkbk_endtime }}
                </span>
                <span class="join-number">
                  <span type="text" style="color: #6f6f6f" v-if="c.is_qd.kkq_zt == 0">通过课程申请
                  </span>
                  <span type="text" v-if="c.is_qd.kkq_zt == 2" @click="changeStatus(c, index, i)">通过课程申请
                  </span>
                  <span type="text" style="color: #6f6f6f" v-if="c.is_qd.kkq_zt == 3">已课程申请
                  </span>
                  <span type="text" v-if="c.is_qd.kkq_zt == -1" @click="assignData(c.kkbk_id), (assignTeacher = true)">分配教师
                  </span>
                  <span type="text" v-if="c.is_qd.kkq_zt == 4">已签到
                  </span>

                  <!-- <span type="text" v-if="c.is_qd.kkq_zt == 4">已签到 </span> -->

                  <span v-for="(item, index) in c.is_qd" :key="index">
                    {{ item?.kkq_zt }}
                  </span>
                </span>

                <span class="findmore" @click="toDatail(c.kkbk_id)">查看详情</span>
              </p>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab :title="'非正常开课课程('+ycNum+')'" name="c">
        <div class="class-number" v-show="state.showIndex === index" v-for="(week, index) in classWeek" :key="week">
          <!-- <p>课程数量({{ week.course.length }})</p> -->
          <div class="class-list" v-for="(c, i) in week.course" v-show="c.kkyc=='1'" :key="i">
            <div class="class-left"></div>
            <div class="class-right">
              <h1>{{ c.khfw_kcbgl.kk_name }}</h1>
              <img v-if="c.is_qd.kkq_zt == 3" src="@/assets/icon/icon-success.png" alt="" />
              <img v-if="c.is_qd.kkq_zt == -1" src="@/assets/icon/icon-warning.png" alt="" />
              <p class="c-detail mt-27px">
                <span> 主讲：{{ c.khfw_kcbgl.kkb_zjjs_xm }}</span>
                <span class="mx-3px">地点：{{ c.khfw_kcbgl.kj_name }}</span>
                <span>课时：4</span>
              </p>

              <p class="c-date">
                <span>
                  <van-icon name="clock-o" />{{ c.kkbk_starttime }} -
                  {{ c.kkbk_endtime }}
                </span>
                <span class="join-number">
                  <span type="text" style="color: #6f6f6f" v-if="c.is_qd.kkq_zt == 0">通过课程申请
                  </span>
                  <span type="text" v-if="c.is_qd.kkq_zt == 2" @click="changeStatus(c, index, i)">通过课程申请
                  </span>
                  <span type="text" style="color: #6f6f6f" v-if="c.is_qd.kkq_zt == 3">已课程申请
                  </span>
                  <span type="text" v-if="c.is_qd.kkq_zt == -1" @click="assignData(c.kkbk_id), (assignTeacher = true)">分配教师
                  </span>
                  <span type="text" v-if="c.is_qd.kkq_zt == 4">已签到
                  </span>
                  <!-- <span type="text" v-if="c.is_qd.kkq_zt == 4">已签到 </span> -->

                  <span v-for="(item, index) in c.is_qd" :key="index">
                    {{ item?.kkq_zt }}
                  </span>
                </span>

                <span class="findmore" @click="toDatail(c.kkbk_id)">查看详情</span>
              </p>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>

    <p class="node">*社团管理教师端显示社团内所有教师的课程</p>

    <!-- 分配教师 -->
    <div v-show="assignTeacher" class="cover"></div>
    <div class="assign-teacher" v-show="assignTeacher && state.showIndex === index" v-for="(week, index) in classWeek" :key="index">
      <van-icon name="cross" size="0.4*13.3vw" @click="(assignTeacher = false), (show = false)" />
      <h3>分配教师</h3>
      <div v-show="kkbk_id === c.kkbk_id" class="class-right" v-for="(c, i) in week.course" :key="i">
        <h1>{{ c.khfw_kcbgl.kk_name }}</h1>
        <p class="fp-detail">
          <span class="ml-15px"> 主讲：{{ c.khfw_kcbgl.kkb_zjjs_xm }}</span>
          <span>地点：{{ c.khfw_kcbgl.kj_name }}</span>
          <span>课时：4</span>
        </p>
        <p class="c-date">
          <span>
            <van-icon name="clock-o" />{{ c.kkbk_starttime }} -
            {{ c.kkbk_endtime }}
          </span>
        </p>
      </div>

      <van-dropdown-menu :overlay="false">
        <van-dropdown-item v-model="dialogForm.ktdk_dkjs" :options="option1" />
      </van-dropdown-menu>
      <div class="check">
        <input type="checkbox" checked v-model="isTellCheck" />
        <p>发送消息给教师</p>
      </div>
      <div class="submit" @click="formSubmit">
        <button>提交</button>
      </div>
    </div>
  </div>
</template>

<script>
import { showToast } from "vant";
import { user } from "../../store/user";
import { stgljsd_list, zt_edit, fpjs, fpjs_list } from "./api";
import getTeamInfo from "~/store/team";

export default {
  data() {
    return {
      title: "",
      state: {
        week: "",
        showIndex: 0,
      },
      kxq_code: "",
      loading: true,
      assignTeacher: false,
      value1: 0,
      classWeek: [],

      option1: [{ text: "", value: "" }],
      dialogForm: {
        ktdk_sqr: "",
        kkb_name: "",
        kkbk_starttime: "",
        kkbk_endtime: "",
        ktdk_kcdd: "",
        ktdk_dkjs: "",
        ktdk_shzt: "2",
      },
      isTellCheck: true,
      kkbk_id: "",
      courseNum: "",
      ycNum: "0",
      zcNum: "0"
    };
  },
  beforeCreate() {
    console.log("beforeCreate");
  },
  methods: {
    onClickLeft() {

      history.back();
    },
    toDatail(id) {
      this.$router.push({ name: "stxkjsd_ckxq", params: { id: id } });
    },
    getListData() {
      getTeamInfo.then((res) => {
        this.kxq_code = res.kxq_code;
        this.loading = false;
        let data = {
          ex: "byweek",
          kxq_code: this.kxq_code,
        };
        if (user.cm_info.length > 0) {
          data.cm_id = user.cm_info[0].cm_id;
        } else {
          data.cm_id = "";
        }
        stgljsd_list(data).then((res) => {
          this.classWeek = res.data;

          this.getWeek();
        });
      });
    },
    changeWeek(week, index) {
      this.ycNum = 0;
      this.zcNum = 0
      this.state.week = week.name;
      this.state.showIndex = index;
      this.courseNum = week.course.length;
      week.course.map((item, index) => {
        if (item.kkyc == 1) {
          this.ycNum++;
        } else {
          this.zcNum++
        }
      })

      console.log(this.ycNum, this.zcNum, 88);

    },
    getWeek() {
      var day = new Date().getDay();
      var weeks = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
      let index = this.classWeek.findIndex(item => item.name == weeks[day]);
      this.changeWeek(this.classWeek[index], index);
      // this.state.week = weeks[day];
      // this.state.showIndex = weeks.indexOf(this.state.week);

    },
    changeStatus(c, index, i) {
      let data = {
        kkq_id: this.classWeek[index].course[i].is_qd.kkq_id,
        kkq_zt: "3",
      };
      console.log("data", data);
      zt_edit(data).then((res) => {
        console.log("res", res);
        if (res.code == "1") {
          this.classWeek[index].course[i].is_qd.kkq_zt = "3";
        }
      });
    },
    //分配教师列表
    getjsData() {
      let data = {
        sm_id: user.sm_info.sm_id,
        ex: "1",
      };

      fpjs_list(data).then((res) => {
        console.log(res.data, 2222);
        this.option1 = [{ text: "全部", value: undefined }].concat(
          res.data.map(({ user_id, realname }) => ({
            value: realname,
            text: realname,
          }))
        );
      });
      console.log(this.option1, 111111);
    },
    //分配教师
    assignData(id) {
      this.kkbk_id = id;
      this.dialogForm = {
        ktdk_dkjs: "",
        ktdk_shzt: "2",
        send: "",
      };
      this.assignTeacher = true;
    },
    formSubmit() {
      let data = {
        ktdk_dkjs: this.dialogForm.ktdk_dkjs,
        ktdk_shzt: "2",
        send: this.isTellCheck ? 1 : 0,
      };
      fpjs(data).then((res) => {
        if (res.code == 1) {
          showToast(res.msg);
          this.getListData();
          this.assignTeacher = false;
        }
      });
    },
  },
  mounted() {
    this.getListData();
    this.getjsData();
    // setTimeout(() => {
    //   this.getWeek();
    // }, 1000);
  },
};
</script>

<style  lang="scss" scoped>
::v-deep .van-tabs {
  margin-top: 0.648 * 13.3vw;
  .van-tab__text {
    font-size: 0.3 * 13.3vw;
    font-weight: 400;
    color: #333333;
    line-height: 0.36 * 13.3vw;
    z-index: 5;
  }
  .van-tabs__line {
    width: 1.2 * 13.3vw;
    height: 0.2 * 13.3vw;
    background: #c5c5ff;
    bottom: 0.51 * 13.3vw;
    opacity: 0.8;
  }

  .van-tabs__nav {
    background: unset;
    .van-tab {
      margin-right: 0.05 * 13.3vw;
    }
    .van-tab {
      border-bottom: 0.1 * 13.3vw solid rgba(0, 0, 0, 0);
    }
    .van-tab--active {
      font-weight: 400;
      color: #0034c9;
      box-sizing: border-box;
      border-radius: 0.05 * 13.3vw;
      border-bottom: 0.1 * 13.3vw solid #c5c5ff;
    }
  }
  .van-tabs__line {
    background: unset;
  }
  .van-tabs__content {
    margin-top: 0.1 * 13.3vw;
    line-height: 0;
    padding: 0;
  }
}
.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;
      overflow: hidden;
      .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 {
  .class-list {
    width: 6.96 * 13.3vw;
    height: 2 * 13.3vw;
    background: #ffffff;
    border-radius: 0.2 * 13.3vw;
    margin: 0 0.25 * 13.3vw 0.18 * 13.3vw 0.29 * 13.3vw;

    .class-left {
      width: 0.2 * 13.3vw;
      height: 2 * 13.3vw;
      display: inline-block;
      border-radius: 0.19 * 13.3vw 0 0 0.19 * 13.3vw;
      background-color: #e8523f;
    }
    .class-right {
      width: 6.2 * 13.3vw;
      // height: 2 * 13.3vw;
      display: inline-block;
      vertical-align: top;
      margin: 0.6 * 13.3vw 0 0.3 * 13.3vw 0.4 * 13.3vw;
      position: relative;
      //@debug border: 1px solid red;
      h1 {
        font-size: 0.32 * 13.3vw;
        font-family: AdobeHeitiStd-Regular;
        color: #000000;
      }
      img {
        width: 0.32 * 13.3vw;
        height: 0.32 * 13.3vw;
        position: absolute;
        top: 0;
        right: 13px;
        transform: translate(0.2 * 13.3vw, -0.2 * 13.3vw);
      }
      .c-detail {
        height: 0.35 * 13.3vw;
        font-size: 0.1 * 13.3vw;
        font-family: AdobeHeitiStd-Regular;
        color: #a0a0a0;
        letter-spacing: 0.01 * 13.3vw;
        padding: 0;
        // & + span {
        //   margin-left: 0.1 * 13.3vw;
        // }
      }
      .c-date {
        width: 100%;
        height: 0.2 * 13.3vw;
        font-size: 0.2 * 13.3vw;
        color: #a0a0a0;
        line-height: 0.35 * 13.3vw;
        letter-spacing: 0.01 * 13.3vw;

        .join-number {
          margin-left: 1.5 * 13.3vw;
          color: #003eee;
        }
        .findmore {
          font-size: 0.2 * 13.3vw;
          float: right;
          color: #003eee;
          line-height: 0.35 * 13.3vw;
          letter-spacing: 0.01 * 13.3vw;
        }
      }
    }
  }
}

.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;
}
.assign-teacher {
  width: 6.8 * 13.3vw;
  height: 10.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.3 * 13.3vw;
  }
  h3 {
    width: 1.3 * 13.3vw;
    height: 0.4 * 13.3vw;
    font-size: 0.3 * 13.3vw;
    position: relative;
  }
  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;
  }

  h1 {
    font-size: 0.32 * 13.3vw;
    font-family: AdobeHeitiStd-Regular;
    text-align: left;
    color: #000000;
    margin: 0.5 * 13.3vw 0 0.1 * 13.3vw 0.3 * 13.3vw;
  }
  .fp-detail {
    // height: 0.35 * 13.3vw;
    font-size: 0.1 * 13.3vw;
    font-family: AdobeHeitiStd-Regular;
    color: #a0a0a0;
    letter-spacing: 0.01 * 13.3vw;
    padding: 0;
    span {
      margin-right: 0.12 * 13.3vw;
    }
  }
  .c-date {
    width: 100%;
    height: 0.27 * 13.3vw;
    font-size: 0.2 * 13.3vw;
    color: #a0a0a0;
    line-height: 0.35 * 13.3vw;
    letter-spacing: 0.01 * 13.3vw;
    margin: 0.1 * 13.3vw 0 0.4 * 13.3vw 0.3 * 13.3vw;
  }
  .check {
    margin: 0.4 * 13.3vw;
    line-height: 0.4 * 13.3vw;
    display: flex;
    p {
      margin-left: 0.1 * 13.3vw;
      font-size: 0.24 * 13.3vw;
      color: #0036ff;
      letter-spacing: 0.02 * 13.3vw;
    }
  }
  .submit {
    text-align: center;
    margin-top: 2 * 13.3vw;
    button {
      width: 5 * 13.3vw;
      height: 0.68 * 13.3vw;
      background: #003eee;
      border-radius: 0.34 * 13.3vw;
      color: #fff;
      font-size: 0.34 * 13.3vw;
    }
  }
}
::v-deep .van-dropdown-menu {
  width: 92%;
  margin: 0 auto;
  text-align: left;
}
::v-deep .van-dropdown-item {
  width: 80%;
  margin: 0 auto;
}
::v-deep .van-dropdown-menu__item {
  background-color: #f2f2f2;
  justify-content: left;
}
</style>