<template>
  <div class="jsyx">
    <van-nav-bar
      title="教师研训项目详情"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="nav">
      <img
        v-if="yxMsg.yjkc_img"
        class="coverImg"
        :src="https + yxMsg.yjkc_img.split(',')[1]"
        alt=""
      />
      <h3 class="title">
        {{ yxMsg.yjkc_title }}
        <span class="hour" v-if="yxMsg.yjkc_kss"
          >{{ yxMsg.yjkc_kss.length }}课时</span
        >
      </h3>
      <div class="mybar">
        我的进度
        <div class="bar">
          <div
            :style="{ width: 3.2 * 13.3 * (yxMsg.jindu * 0.01) + 'vw' }"
            class="bar-blue"
          ></div>
          <span
            v-if="yxMsg.jindu > 0"
            :style="{
              left: 3.2 * 13.3 * (yxMsg.jindu * 0.01) - 0.6 * 13.3 + 'vw',
            }"
            class="bar-num"
            >{{ yxMsg.jindu }}%</span
          >
        </div>
        <div
          :class="[yxMsg.jindu === 100 ? 'getBlue' : '']"
          @click="getZs(yxMsg.jindu)"
          class="getCertificate"
        >
          领取结业证书
        </div>
      </div>
      <van-tabs v-model:active="active" shrink title-active-color="#0034C9">
        <van-tab title="课程详情">
          <h3>课程简介</h3>
          <p class="intro">
            {{ yxMsg.yjkc_kcjj }}
          </p>
          <h3>课程大纲</h3>
          <van-steps
            :active="classactive"
            direction="vertical"
            inactive-icon="stop"
            active-icon="stop"
            finish-icon="stop"
            inactive-color="#999"
          >
            <van-step v-for="(c, i) in yxMsg.yjkc_kss" :key="c">
              <div class="className">
                <p>第{{ c.yjkcdg_no }}讲</p>
                <span v-if="c.is_finish === '1'" @click="studyAgain(c)"
                  >已学完</span
                >
                <span @click="study(c, i)" v-if="c.is_finish === '0'"
                  >未学习</span
                >
              </div>
              <div class="classTitle">
                <p>{{ c.yjkcdg_title }}</p>
                <span>{{ c.yjkcdg_zjjs }}</span>
              </div>
            </van-step>
          </van-steps>
        </van-tab>
        <van-tab title="教师完成度排行">
          <ul v-if="yxMsg.rank.length" class="rank">
            <li v-for="(v, i) in yxMsg.rank" :key="v">
              <div class="order">
                <span>
                  <span v-show="i > 2">{{ i + 1 }}</span></span
                >
              </div>
              <div class="img">
                <img :src="v.yjkx_avatar" alt="" />
              </div>
              <div class="jindu">
                <p class="teacher">
                  <span class="name">{{ v.yjkx_realname }}</span
                  ><span class="school">{{ v.yjkx_school }}</span>
                </p>
                <div class="bar">
                  <div
                    :style="{
                      width: 4.78 * 13.3 * (yxMsg.jindu * 0.01) + 'vw',
                    }"
                    class="bar-blue"
                  ></div>
                  <span
                    :style="{
                      left:
                        4.78 * 13.3 * (yxMsg.jindu * 0.01) - 0.6 * 13.3 + 'vw',
                    }"
                    class="bar-num"
                    >{{ v.jindu }}%</span
                  >
                </div>
              </div>
            </li>
          </ul>
          <div class="none" style="" v-else>暂无数据</div>
        </van-tab>
      </van-tabs>
    </div>
    <div v-show="cerShow" class="certificate">
      <img
        class="close"
        @click="(cerShow = false), (show = false)"
        src="../../../assets/jscz/关闭.png"
        alt=""
      />
      <div class="cert">
        <span class="cert-js">{{ yxMsg.yjkc_cjr }} 老师</span>
        <p class="cert-des">
          &emsp;&emsp;恭喜您已修完{{
            yxMsg.yjkc_title
          }}课程，成绩优异，准予结业。
        </p>
        <p class="cert-so">特发此证，予以奖励</p>
      </div>
    </div>
    <div v-show="show" class="cover"></div>
    <van-dialog v-model:show="videoShow" title="学习视频">
      <div>
        <video :src="https + videoSrc" autoplay controls></video>
      </div>
    </van-dialog>
  </div>
</template>
<script setup>
import { jsyx_detail, jsyx_add } from "./api";
import { ref } from "vue";
import { useRoute } from "vue-router";
import { user } from "../../../store/user";
import { showToast } from "vant";
let https = ref(window.GLOBAL_CONFIG.api);
const $route = useRoute();
const onClickLeft = () => history.back();
const active = ref(0);
const classactive = ref(1);
const show = ref(false); //覆盖层
const blueWidth = ref(0);
const videoShow = ref(false);

const cerShow = ref(false); //证书弹窗
function getZs(jindu) {
  if (jindu < 100) {
    return showToast("进度未达100%");
  } else {
    cerShow.value = true;
    show.value = true;
  }
}
let userMsg = {};

// 研训详情
let yxMsg = ref({});
const yxData = {
  yjkc_id: $route.params.yjkc_id,
};
function getDetail() {
  jsyx_detail(yxData).then((res) => {
    yxMsg.value = res.data.one_info;
    console.log(yxMsg.value, "111");
  });
}
getDetail();
let addDate;
let videoSrc = ref("");
function study(c, i) {
  addDate = {
    ybk_jsyx_kcxx: {
      yjkc_id: yxMsg.value.yjkc_id,
      yjkcdg_id: c.yjkcdg_id,
      yjkx_realname: c.yjkcdg_zjjs,
      yjkx_school: user.sm_info.sm_name,
      yjkx_avatar: user.user_avatar.middle,
    },
  };
  videoSrc.value = c.yjkcdg_zy.split(",")[1];
  jsyx_add(addDate).then((res) => {
    console.log(res, "222");
    getDetail();
    videoShow.value = true;
  });
}
function studyAgain(c) {
  videoSrc.value = c.yjkcdg_zy.split(",")[1];
  videoShow.value = true;
}
</script>
<style lang="scss" scoped>
* {
  --van-nav-bar-arrow-size: 0.5 * 13.3vw;
  --van-nav-bar-icon-color: #fff;
  --van-nav-bar-title-text-color: #fff;
  --van-nav-bar-title-font-size: 0.36 * 13.3vw;
  --van-nav-bar-background: #003eee;
  --van-nav-bar-height: 1 * 13.3vw;
  --van-tab-font-size: 0.3 * 13.3vw;
  --van-tabs-line-height: 0.8 * 13.3vw;
  --van-tabs-bottom-bar-color: none;
  --van-padding-xs: 0;
  --van-step-icon-size: 0.4 * 13.3vw;
  --van-step-text-color: #999999;
  --van-step-active-color: unset;
  --van-step-finish-line-color: unset;
}
::v-deep .van-nav-bar {
  .van-nav-bar__title {
    font-weight: 350;
    line-height: 1 * 13.3vw;
    font-family: Segoe UI, Segoe UI-Regular;
  }
}
.jsyx {
  min-height: 100vh;
  background-color: #fff;
  .nav {
    padding: 0 0.2 * 13.3vw;
    box-sizing: border-box;
    .coverImg {
      width: 7.1 * 13.3vw;
      height: 2.8 * 13.3vw;
      margin: 0.18 * 13.3vw auto;
      border-radius: 0.08 * 13.3vw;
    }
    .title {
      font-size: 0.32 * 13.3vw;
      height: 0.48 * 13.3vw;
      line-height: 0.48 * 13.3vw;
      letter-spacing: 0.03 * 13.3vw;
      .hour {
        display: inline-block;
        width: 1.2 * 13.3vw;
        height: 0.4 * 13.3vw;
        line-height: 0.4 * 13.3vw;
        font-size: 0.24 * 13.3vw;
        color: #fff;
        text-align: center;
        background-color: #003eee;
        opacity: 0.3;
        border-radius: 0.2 * 13.3vw;
        margin-left: 0.4 * 13.3vw;
      }
    }
    .mybar {
      display: flex;
      font-size: 0.32 * 13.3vw;
      height: 0.5 * 13.3vw;
      line-height: 0.5 * 13.3vw;
      margin: 0.22 * 13.3vw 0;
      letter-spacing: 0.02 * 13.3vw;
      color: #333333;
      .bar {
        width: 3.2 * 13.3vw;
        height: 0.28 * 13.3vw;
        line-height: 0.28 * 13.3vw;
        background: #e4e7ed;
        border-radius: 0.14 * 13.3vw;
        margin: 0 0.2 * 13.3vw;
        text-align: center;
        position: relative;
        margin-top: 0.1 * 13.3vw;
        .bar-num {
          font-size: 0.14 * 13.3vw;
          color: #fff;
          position: absolute;
        }
        .bar-blue {
          position: absolute;
          // width: 2.2*13.3vw;
          height: 0.28 * 13.3vw;
          background: #003eee;
          border-radius: 0.14 * 13.3vw;
          top: 0;
          left: 0;
        }
      }
      .getCertificate {
        width: 1.92 * 13.3vw;
        height: 0.48 * 13.3vw;
        line-height: 0.48 * 13.3vw;
        text-align: center;
        background: #e4e7ed;
        border-radius: 0.24 * 13.3vw;
        font-size: 0.24 * 13.3vw;
        font-weight: 400;
        color: #ffffff;
        vertical-align: middle;
      }
      .getBlue {
        background: #0034c9;
      }
    }
  }
}
::v-deep .van-tabs {
  .van-tabs__nav--line {
    padding-bottom: 0;
  }
  .van-tabs__wrap {
    border-top: 0.01 * 13.3vw solid #e4e4e4;
    border-bottom: 0.02 * 13.3vw solid #c0c0c0;
    .van-tabs__nav {
      .van-tab {
        margin-right: 0.4 * 13.3vw;
        height: 100%;
        border-bottom: 0.05 * 13.3vw solid rgba(0, 0, 0, 0);
        padding: 0.2 * 13.3vw 0;
      }
      .van-tab--active {
        font-weight: 400;
        color: #0034c9;
        box-sizing: border-box;
        border-bottom: 0.05 * 13.3vw solid #0034c9;
      }
    }
  }
  .van-tabs__content {
    .van-tab__panel {
      h3 {
        width: 1.26 * 13.3vw;
        height: 0.4 * 13.3vw;
        font-size: 0.3 * 13.3vw;
        position: relative;
        margin: 0.2 * 13.3vw 0;
      }
      h3::before {
        position: absolute;
        content: "";
        width: 100%;
        height: 0.2 * 13.3vw;
        bottom: -0.05 * 13.3vw;
        left: -0.02 * 13.3vw;
        border-radius: 0.1 * 13.3vw;
        background-color: #c5c5ff;
        opacity: 0.6;
      }
      .intro {
        width: 6.97 * 13.3vw;
        // height: 2.43*13.3vw;
        font-size: 0.26 * 13.3vw;
        font-family: DengXian;
        color: #666666;
        line-height: 0.36 * 13.3vw;
      }
      .rank {
        li {
          width: 7 * 13.3vw;
          height: 1.2 * 13.3vw;
          padding-left: 0.3 * 13.3vw;
          border-bottom: 1px solid #e4e4e4;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .order {
            width: 0.65 * 13.3vw;
            line-height: 0.4 * 13.3vw;
            position: relative;
            text-align: center;
            span {
              font-size: 0.3 * 13.3vw;
              line-height: 0.6 * 13.3vw;
              span {
                color: #333333;
              }
            }
          }
          .img {
            width: 0.65 * 13.3vw;
            height: 0.65 * 13.3vw;
            border-radius: 50%;
            img {
              width: 100%;
            }
          }
          .jindu {
            width: 5 * 13.3vw;
            height: 100%;
            .teacher {
              height: 0.6 * 13.3vw;
              line-height: 0.45 * 13.3vw;
              .name {
                font-size: 0.26 * 13.3vw;
                color: #0088ff;
                margin-right: 0.14 * 13.3vw;
              }
              .school {
                color: #a3a3a3;
                font-size: 0.18 * 13.3vw;
              }
            }
            .bar {
              width: 4.78 * 13.3vw;
              height: 0.2 * 13.3vw;
              line-height: 0.3 * 13.3vw;
              background: #e4e7ed;
              border-radius: 0.1 * 13.3vw;
              // text-align: center;
              position: relative;
              margin-top: 0.1 * 13.3vw;
              .bar-num {
                font-size: 0.14 * 13.3vw;
                line-height: 0.2 * 13.3vw;
                color: #fff;
                position: absolute;
                // left: 2*13.3vw;
              }
              .bar-blue {
                position: absolute;
                width: 2.39 * 13.3vw;
                height: 0.2 * 13.3vw;
                background: #003eee;
                border-radius: 0.1 * 13.3vw;
                top: 0;
                left: 0;
              }
            }
          }
        }
        li:first-of-type {
          .order {
            span {
              color: #fff;
              display: inline-block;
              width: 0.45 * 13.3vw;
              height: 0.45 * 13.3vw;
              font-size: 0.2 * 13.3vw;
              background-image: url("../../../assets/jscz/组\ 542.png");
              background-size: 100%;
              background-position: center;
              background-repeat: no-repeat;
              z-index: 5;
            }
          }
        }
        li:nth-of-type(2) {
          .order {
            span {
              color: #fff;
              display: inline-block;
              width: 0.45 * 13.3vw;
              height: 0.45 * 13.3vw;
              font-size: 0.2 * 13.3vw;
              // z-index: 5;
              background-image: url("../../../assets/jscz/组\ 543.png");
              background-size: 100%;
              background-position: center;
              background-repeat: no-repeat;
            }
          }
        }
        li:nth-of-type(3) {
          .order {
            span {
              color: #fff;
              font-size: 0.2 * 13.3vw;
              display: inline-block;
              width: 0.45 * 13.3vw;
              height: 0.45 * 13.3vw;
              z-index: 5;
              background-image: url("../../../assets/jscz/组\ 544.png");
              background-size: 100%;
              background-position: center;
              background-repeat: no-repeat;
            }
          }
        }
      }
      .none {
        margin: 1 * 13.3vw auto;
        width: 2.4 * 13.3vw;
        height: 1 * 13.3vw;
        line-height: 13.3vw;
        color: #fff;
        background-color: #666;
        border-radius: 0.1 * 13.3vw;
        text-align: center;
      }
    }
  }
}
::v-deep .van-steps {
  .van-steps__items {
    color: #999999 !important;
    .van-step__line {
      background-color: #003de9 !important;
    }
  }
  .van-step__title {
    display: flex;
    .className {
      margin-right: 0.4 * 13.3vw;
      p {
        height: 0.34 * 13.3vw;
        font-size: 0.34 * 13.3vw;
        font-family: SimHei;
        text-align: left;
        color: #999999;
        line-height: 0.21 * 13.3vw;
        padding-left: 0.1 * 13.3vw;
      }
      span {
        display: block;
        width: 1.2 * 13.3vw;
        height: 0.48 * 13.3vw;
        line-height: 0.48 * 13.3vw;
        text-align: center;
        border: 0.01 * 13.3vw solid #003eee;
        border-radius: 0.05 * 13.3vw;
        font-size: 0.23 * 13.3vw;
        color: #003de9;
        margin: 0.05 * 13.3vw 0;
      }
    }
    .classTitle {
      p {
        height: 0.46 * 13.3vw;
        font-size: 0.36 * 13.3vw;
        font-family: DengXian;
        text-align: left;
        color: #000000;
        line-height: 0.29 * 13.3vw;
      }
      span {
        font-size: 0.28 * 13.3vw;
        color: #999999;
      }
    }
  }
  .van-step__circle-container {
    .van-badge__wrapper {
      color: #003de9;
    }
  }
}
.certificate {
  position: fixed;
  top: 1.2 * 13.3vw;
  left: 0.65 * 13.3vw;
  background-image: url("../../../assets/jscz/组\ 533.png");
  background-size: 100%;
  width: 6.18 * 13.3vw;
  height: 10.57 * 13.3vw;
  z-index: 5;
  .close {
    width: 0.7 * 13.3vw;
    position: absolute;
    top: 0.58 * 13.3vw;
    right: 0.16 * 13.3vw;
  }
  .cert {
    position: absolute;
    width: 4.7 * 13.3vw;
    line-height: 0.38 * 13.3vw;
    top: 6.2 * 13.3vw;
    left: 0.9 * 13.3vw;
    .cert-js {
      font-size: 0.24 * 13.3vw;
      font-weight: 600;
    }
    .cert-des {
      margin-top: 0.1 * 13.3vw;
      font-size: 0.24 * 13.3vw;
      color: #666;
    }
    .cert-so {
      font-size: 0.24 * 13.3vw;
      margin-top: 0.5 * 13.3vw;
      color: #666;
    }
  }
}
.cover {
  position: fixed;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: #000000;
  opacity: 0.3;
}
</style>
