<template>
  <div class="content">
    <van-nav-bar title="课程详情" left-arrow @click-left="onClickLeft" />
    <div class="content-title">
      <h1 v-if="classDetail.khfw_kcgl">{{ classDetail.khfw_kcgl.kk_name }}</h1>
      <p class="c-detail" v-if="classDetail.teach_info">
        <span> 主讲：{{ classDetail.teach_info.kkb_zjjs_xm }}</span>
        <span>地点：{{ classDetail.teach_info.kj_name }}</span>
        <span>课时：{{classDetail.khfw_kcgl.kk_kss}}</span>
      </p>
      <p class="c-date" v-if="classDetail.khfw_kcgl">
        {{ classDetail.khfw_kcgl.kk_skqjkssj }}
        {{ classDetail.kkbk_starttime }} -
        {{ classDetail.khfw_kcgl.kk_skqjjwsj }} {{ classDetail.kkbk_endtime }}
      </p>
      <!-- <div class="c-teach" v-for="(item, index) in newJa" :key="index">
        课程教案：{{ item.kkj_fj.split(",")[0] }}
      </div> -->
      <div class="c-teach" v-for="(item, index) in newJa" :key="index">
        课程教案：
        <a :href="resolveSingleFileString(item.kkj_fj).url">{{
          resolveSingleFileString(item.kkj_fj).name
        }}</a>
      </div>
    </div>
    <div class="content-main" v-if="classDetail.khfw_kcgl" v-html="classDetail.khfw_kcgl.kk_kcjj"></div>
    <van-tabs v-model:active="activeName" shrink>
      <van-tab title="上课点名" name="a">
        <div class="student-detail">
          <div>
            <p>
              <i></i>报名情况：（共{{
                classDetail?.member?.length ?? 0
              }}名学生）
            </p>
            <div class="bm">
              <!--    <span class="real-name"></span> -->
              <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"
                >啧啧啧</span
              > -->
            </div>
          </div>
          <div>
            <p>
              <i></i>预点名情况：<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>
              <!-- <span class="ydm-name" v-for="(item, index) in 33" :key="index">
                张谁说缺勤
              </span> -->
            </div>
          </div>
          <div>
            <p>
              <i></i>签到情况：<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 45" :key="index">
                啊啊啊阿女  刹车撒旦擦拭成都市 缺勤
              </span> -->
            </div>
          </div>
          <div>
            <p>
              <i></i>错到情况：<span style="color: #003eee">{{
                classDetail.cd?.length
              }}</span>
            </p>
            <div class="bm">
              <div class="qd-name color-red" v-for="(item, index) in classDetail?.cd" :key="index">
                <p>{{ item.kkc_user_realname }}</p>
                <p>所在班级: {{ item.kkc_class_name }}</p>
                <p>所在社团: {{ item.kk_name_right }}</p>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="课程情况反馈" name="b">
        <div class="class-feedback">
          <div class="text-content">{{ classDetail.fk.kkk_content }}</div>
          <div class="img-list">
            <img v-for="{ url } in resolveFileString(classDetail.fk.kkk_img)" :key="url" :src="url" alt="" />
          </div>
          <div class="line"></div>
          <div class="rate" v-for="(item, index) in newpj" :key="index">
            <div>
              <p>课程评价</p>
              <van-rate v-model="item.kkc_kcpjxj" :size="25" color="#ffd21e" void-icon="star" void-color="#eee" />
            </div>
            <div>
              <p>老师评价</p>
              <van-rate v-model="item.kkc_jspjxj" :size="25" color="#ffd21e" void-icon="star" void-color="#eee" />
            </div>
            <div>
              <p>服务评价</p>
              <van-rate v-model="item.kkc_fwpjxj" :size="25" color="#ffd21e" void-icon="star" void-color="#eee" />
            </div>
          </div>
          <div class="rate-detail" v-for="(item, index) in newpj" :key="index">
            <img :src="https + item.avatar" alt="" />
            <p>{{ item.kkc_user_realname }}</p>
            <div>
              {{ item.kkc_kcpjnr }}
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="教师签到情况" name="c">
        <div class="sign-in" v-show="classDetail.qd.kkq_zt == 2 || 3 || -1 || 0">
          <img src="@/assets/icon/icon-success.png" alt="" />
          <p>{{ classDetail.qd.create_dateline }}签到</p>
          <div>
            <img v-if="classDetail.qd.kkq_img" :src="resolveSingleFileString(classDetail.qd.kkq_img).url" alt="" />
            <p>{{ classDetail.qd.kkq_address }}</p>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { kc_detail } from "./api";
import getTeamInfo from "~/store/team";
import { resolveFileString, resolveSingleFileString } from "~/utils/helper";
export default {
  data() {
    return {
      value: "",
      classDetail: {},
      newArr: [],
      kxq_code: "",
      https: window.GLOBAL_CONFIG.api,
    };
  },
  methods: {
    resolveFileString,
    resolveSingleFileString,
    onClickLeft() {
      console.log("onClickLeft", this.$router);
      try {
        this.$router.back();
      } catch (error) {
        console.log(error);
      }
    },

    getListData() {
      getTeamInfo.then((res) => {
        console.log(res);
        this.kxq_code = res.kxq_code;
        let data = {
          kkbk_id: this.kkbk_id,
          // kxq_code: this.kxq_code,
        };
        kc_detail(data).then((res) => {
          this.classDetail = res.data.one_info;
          this.newJa = res.data.one_info.ja;
          this.newYdmqk = res.data.one_info.dm.ydmqk;
          this.newMember = res.data.one_info.member;
          this.newQdqk = res.data.one_info.dm.qdqk;
          this.newpj = res.data.one_info.pj.list;
          console.log(this.newpj);
        });
      });
    },
  },

  mounted() {
    if (this.$route.params.id != "") {
      this.kkbk_id = this.$route.params.id;
      this.getListData();
    }
  },
};
</script>

<style  lang="scss" scoped>
.content {
  margin: 0 auto;
  background: #fff;
}

::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;
  }
}
.content-title {
  width: 6 * 13.3vw;
  // height: 2.4 * 13.3vw;
  display: inline-block;
  vertical-align: top;
  margin: 0.3 * 13.3vw 0 0 0.5 * 13.3vw;
  position: relative;
  h1 {
    font-size: 0.32 * 13.3vw;
    font-family: AdobeHeitiStd-Regular;
    text-align: left;
    color: #000000;
  }
  .c-detail {
    // height: 0.3 * 13.3vw;
    font-size: 0.28 * 13.3vw;
    font-family: AdobeHeitiStd-Regular;
    color: #a0a0a0;
    // line-height: 0.35 * 13.3vw;
    margin: 0.15 * 13.3vw 0;
    letter-spacing: 0.01 * 13.3vw;
    span {
      margin-right: 0.1 * 13.3vw;
    }
  }
  .c-date {
    // height: 0.27 * 13.3vw;
    font-size: 0.28 * 13.3vw;
    color: #a0a0a0;
    // line-height: 0.35 * 13.3vw;
    letter-spacing: 0.01 * 13.3vw;
    margin-top: 0.25 * 13.3vw;
  }
  .c-teach {
    width: 6.07 * 13.3vw;
    // height: 0.51 * 13.3vw;
    font-size: 0.3 * 13.3vw;
    font-family: DengXian;
    text-align: left;
    color: #003eee;
    // line-height: 0.49 * 13.3vw;
    margin: 0.25 * 13.3vw 0 * 13.3vw;
  }
}
.content-main {
  width: 6.53 * 13.3vw;
  // height: 3.05 * 13.3vw;
  font-size: 0.24 * 13.3vw;
  font-family: PingFang-SC-Regular;
  text-align: left;
  color: #7f7f7f;
  // line-height: 0.4 * 13.3vw;
  letter-spacing: 0.019 * 13.3vw;
  margin: 0 * 13.3vw 0.52 * 13.3vw 0.2 * 13.3vw 0.45 * 13.3vw;
}
//上课点名
.student-detail {
  width: 100%;
  // height: 5.6 * 13.3vw;
  padding: 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;
    }
    .bm {
      width: 100%;
      height: 1.5 * 13.3vw;
      color: #7f7f7f;
      // min-height: 80px;
      overflow: scroll;
      padding-right: 5px;
      ::-webkit-scrollbar {
        width: 0;
        height: 0;
        color: transparent;
      }
      .real-name {
        // border: 0.05 * 13.3vw solid red;
        display: inline-block;
       // width: 45%;
        height: 0.25 * 13.3vw;
        margin-left: 0.18 * 13.3vw;
        margin-top: 0.35 * 13.3vw;
        color: #7f7f7f;
        font-size: 0.28 * 13.3vw;
      }

      .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;
      }
      .color-red {
        p {
          color: #ee0000;
        }
      }
    }
    i {
      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;
    }
  }
}
//课堂反馈
.class-feedback {
  height: 100vh;
  width: 100%;
  .text-content {
    width: 6.53 * 13.3vw;
    // height: 3.3 * 13.3vw;
    margin: 0 * 13.3vw 0.52 * 13.3vw 0 * 13.3vw 0.45 * 13.3vw;
    opacity: 0.65;
    font-size: 0.24 * 13.3vw;
    font-family: PingFang-SC-Regular;
    text-align: left;
    color: #010101;
    line-height: 0.48 * 13.3vw;
  }

  .img-list {
    width: 6.53 * 13.3vw;
    //border: 1px solid red;
    height: 1.96 * 13.3vw;
    margin: 0 * 13.3vw 0.52 * 13.3vw 0.8 * 13.3vw 0.45 * 13.3vw;
    display: flex;
    img {
      // border: 1px solid red;

      width: 50%;
      padding: 0.07 * 13.3vw;
    }
  }
  // .line {
  //   width: 100%;
  //   height: 0.03 * 13.3vw;
  //   opacity: 0.5;
  //   border: 0.01 * 13.3vw solid #707070;
  // }
  .rate {
    margin: 0.3 * 13.3vw 0.52 * 13.3vw 0.3 * 13.3vw 0.45 * 13.3vw;
    p {
      display: inline-block;
      width: 1.2 * 13.3vw;
      height: 0.28 * 13.3vw;
      font-size: 0.2 * 13.3vw;
      font-weight: 400;
      text-align: left;
      color: #040404;
      line-height: 0.25 * 13.3vw;
      margin-bottom: 0.2 * 13.3vw;
    }
  }
  .rate-detail {
    margin: 0.3 * 13.3vw 0.52 * 13.3vw 0.3 * 13.3vw 0.45 * 13.3vw;
    border-bottom: 1px solid #dbdbdb;
    img {
      display: inline-block;
      width: 0.71 * 13.3vw;
      height: 0.68 * 13.3vw;
      background: #924a5d;
      border-radius: 0.34 * 13.3vw;
      margin-right: 0.2 * 13.3vw;
    }
    p {
      display: inline-block;
      vertical-align: middle;
      font-size: 0.24 * 13.3vw;
      font-family: DengXian;
      text-align: left;
      color: #000000;
    }
    div {
      width: 6.7 * 13.3vw;
      height: 0.65 * 13.3vw;
      font-size: 0.23 * 13.3vw;
      font-family: DengXian;
      text-align: left;
      color: #797878;
      line-height: 0.4 * 13.3vw;
      margin-top: 0.1 * 13.3vw;
    }
  }
}
//教师签到
.sign-in {
  margin: 0.3 * 13.3vw 0.6 * 13.3vw;
  img {
    display: inline-block;
    width: 0.32 * 13.3vw;
    height: 0.32 * 13.3vw;
  }
  p {
    display: inline-block;
    vertical-align: top;
    // width: 3.06 * 13.3vw;
    //height: 0.37 * 13.3vw;
    font-size: 0.28 * 13.3vw;
    font-family: Segoe UI, Segoe UI-Regular;
    font-weight: 400;
    text-align: left;
    color: #003eee;
    line-height: 0.37 * 13.3vw;
    letter-spacing: 0.014 * 13.3vw;
    margin-left: 0.2 * 13.3vw;
  }
  div img {
    display: block;
    width: 1.5 * 13.3vw;
    //height: 1.5 * 13.3vw;
    border-radius: 0.1 * 13.3vw;
    margin-top: 0.3 * 13.3vw;
    background: rgba(0, 0, 0, 0);
  }
}
::v-deep .van-tabs {
  .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.23 * 13.3vw;
    height: 0.2 * 13.3vw;
    background: #c5c5ff;
    bottom: 0.51 * 13.3vw;
    opacity: 0.8;
  }

  .van-tabs__nav {
    .van-tab {
      margin-right: 0.4 * 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;
  }
}
::v-deep .van-uploader__wrapper {
  flex-direction: row-reverse;
  .van-uploader__preview {
    .van-image {
      overflow: unset;
    }
    .van-uploader__preview-delete {
      width: 0.42 * 13.3vw;
      height: 0.42 * 13.3vw;
      border-radius: 50%;
      position: absolute;
      top: -0.15 * 13.3vw;
      right: -0.15 * 13.3vw;
      background-color: #e64545;
      .van-icon-cross {
        display: none;
      }
    }
    .van-uploader__preview-delete::before {
      content: "";
      position: absolute;
      width: 0.26 * 13.3vw;
      height: 0.03 * 13.3vw;
      border-radius: 0.03 * 13.3vw;
      background-color: #fff;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
    }
  }
}
::v-deep .MsoNormal {
  span {
    font-size: 3.74vw !important;
    color: #7f7f7f;
    font-family: PingFang-SC-Regular;
  }
}
</style>