<template>
  <common-header/>
  <div class="common100 maxchapter">
    <div class="withShadow">
      <div class="likeBread">
        <div class="likeBread_left">{{courseDetailData.kk_name}}</div>
        <div class="likeBread_right">
          <span>课程资源</span>-
          <span>基础课程</span>-
          <span>查看更多</span>-
          <span>{{courseDetailData.kk_name}}</span>
        </div>
      </div>
    </div>
    <div class="common1280 baseInfoShow">
      <p class="bigT">{{courseDetailData.kk_name}}</p>
      <div class="infoShow">责任教师:<span>{{courseDetailData.kk_zrjs}}</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;机构名称:<span>{{courseDetailData.kk_jgmc}}</span></div>
      <p class="introT">简介： </p>
      <p class="intro">{{courseDetailData.kc_jj}}</p>
    </div>
    <div class="common1280 chapterAll">
      <div class="chapterAllIn">
        <div class="chapterAllIn_left">
          <div class="normalT">课程资源</div>
          <div class="searchValue">
          <input type="text" placeholder="搜索关键字" v-model="searchKey" >
          <div class="searchBtn" @click="searchBtn">
            <img src="/kczy/searchIcon.png" alt="">
          </div>
        </div>
          <div class="sourceWidthCoverList">

            <div class="singlePart" v-for="(item,index) in sourceListData" :key="index" @click="reviewFile(item)">
              <div class="courseCover"> <img :src="item.kf_img" alt=""></div>
              <p>{{item.kf_name}}</p>
              <div class="evalStar">
                <img src="../assets/kczy/stars.png" v-for="(item,index) in item.kf_star_num" :key="index">
              </div>
              <!-- positing -->
<!--              <div class="dataShow">-->
<!--                <div class="baseInfoPart">-->
<!--                  <img src="../assets/kczy/cellectIcon.png" alt="">-->
<!--                  <span>{{item.kf_fav_num}}</span>-->
<!--                </div>-->
<!--                <div class="baseInfoPart">-->
<!--                  <img src="../assets/kczy/fingerIcon.png" alt="">-->
<!--                  <span>{{item.kf_like_num}}</span>-->
<!--                </div>-->
<!--              </div>-->
            </div>

          </div>
        </div>
        <div class="chapterAllIn_right" v-show="courseDetailData.file_preview">
          <div class="normalT">预览</div>
          <div class="reviewAll">
            <iframe class="network_show" name="content_frame" :src="courseDetailData.file_preview" frameborder=0  scrolling="no"></iframe>
          </div>
        </div>
      </div>
    </div>
  </div>
  <common-footer/>
</template>

<script>
import CommonHeader from "@/components/CommonHeader/index.vue";
import CommonFooter from "@/components/CommonFooter/index.vue";
import { courseDetail,courseSourceList } from "./kczy/allApi.js";
import { user } from "@/store/user.js";
  export default {
  name: 'chapter',
  components:{
    CommonHeader,
    CommonFooter
  },
  data() {
    return {
      classificationData:["全部","word","ppt","pdf","excel","视频","其他"],
      num: 0,
      fileIcon: [
        {
          id: Math.random(),
          file_prefix: 'ppt',
          file_name:'文件名'
        },
      ],
      prefixImg: 'https://tyyxopenapi.bozedu.top/',
      courseDetailData: '',
      sourceListData: [],
      kkID:'',
      searchKey:'',

    }
  },
  mounted() {
    this.initDetail();
    this.initSourceData();
  },
  methods: {
    /**初始化详情数据*/
    initDetail() {
      this.kkID = this.$route.query.id;
      let transObj = {
        token:user?.token,
        kk_id:this.kkID
      }
      courseDetail(transObj)
        .then(res => {
          if (res.code == "1") {
            this.courseDetailData = res.data.one_info;
          }
        })
        .catch(error => {
        console.log(error)
      })
    },
    initSourceData() {
      this.kkID = this.$route.query.id;
      // this.searchKey = this.$route.query.filterText;
      let transObj = {
        token:user?.token,
        kk_id: this.kkID,
        keyword:this.searchKey,
      }
      courseSourceList(transObj)
        .then(res => {
          if (res.code == "1") {
            this.sourceListData = res.data.page_data;
          }
        })
        .catch(error => {
        console.log(error)
      })

    },
    /**预览页面*/
    reviewFile(item) {
      let marklable = item.kf_path.substr(item.kf_path.lastIndexOf(".") + 1);
      let kfId = item.kf_id;
      sessionStorage.removeItem("index");
      this.$router.push({ path:'/resourceMovReview', query:{kfId:kfId,kkID:this.kkID} });
    },
    /***/
    searchBtn() {
      this.initSourceData();
    },
  },

  }
</script>

<style lang="scss" scoped>
@import "../styles/common_resource.scss";
.maxchapter{
  margin:0;
  padding:0;
  width:100%;
  // min-height: 1650px;
  background: url("/kczy/sourceBg.png") no-repeat left top;
  background-size: 100%;
}
// .withShadow{
//   width: 100%;
//   height: 60px;
//   background: #ffffff;
//   box-shadow: 0px 0px 0px 10px rgba(17,46,74,0.10);
// }
.baseInfoShow{
  height: 322px;
  border-radius: 12px;
  box-sizing: border-box;
  padding:52px 66px;
  color: #ffffff;
  background: url('/kczy/chapterBG.png') no-repeat top left;
  background-size: 100%;

  .bigT{
    font-size: 28px;
    font-weight: 600;
    text-align: left;
  }
  .infoShow{
    font-size: 16px;
    font-weight: 400;
    text-align: left;
    margin-top:15px;
    span{
      margin-left:1%;
    }
  }
  .introT{
    margin-top:35px;
  }
  .introT,.intro{
    font-size: 14px;
    font-weight: 400;
    text-align: left;
    color: #ffffff;
  }
  .intro{
    max-height:87px;
    overflow:hidden;
  }
}
.chapterAll{
  box-sizing: border-box;
  padding: 25px 20px;
  .chapterAllIn{
    display: flex;
    .normalT{
      font-size: 16px;
      font-weight: 600;
      text-align: left;
      color: #171721;
      margin-bottom:20px;
    }
    .chapterAllIn_left{
     flex:1;
      box-sizing:border-box;
      padding:10px;
      .sourceWidthCoverList{
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
        max-height: 525px;
        overflow-y:scroll ;
        .singlePart{
          width:32%;
          height: 234px;
          border-radius: 12px;
          box-shadow: 0px 10px 24px 0px rgba(153,160,168,0.18);
          margin-right: 1%;
          margin-bottom: 30px;
          position: relative;
          cursor: pointer;
          .courseCover{
            height: 157px;
            border-bottom: 1px solid #999;
            img{
              width:100%;
              height: 100%;
            }
          }
          p{
            height: 22px;
            font-size: 16px;
            font-weight: 400;
            text-align: left;
            color: #000000;
            box-sizing: border-box;
            padding: 0 6px;
            margin:10px 0;
            display: block;
            overflow: hidden;
            white-space: nowrap;
            text-overflow:ellipsis;
          }
          .evalStar{
            box-sizing: border-box;
            padding: 0 6px;
            margin-top:5px;
            img{
              width:18px;
              display: inline-block;
            }
          }
          .dataShow{
            position: absolute;
            right:0;
            top: 0;
            z-index: 13;
            width: 160px;
            height: 32px;
            background: rgba(0,0,0,0.5);
            border-bottom-left-radius: 12px;
            border-top-right-radius: 12px;
            display: flex;
            .baseInfoPart{
              width:50%;
              box-sizing: border-box;
              padding-left: 4px;
              img{
                display: inline-block;
                vertical-align: middle;
              }
              span{
                font-size: 14px;
                font-weight: 400;
                text-align: left;
                color: #ffffff;
                margin-left:5px;
              }
            }
          }
        }
        .singlePart:nth-child(3n){
          margin-right: 0!important;
        }
      }
    }
    .sourceWidthCoverList::-webkit-scrollbar {
      width: 10px;
      // height: 10px; // 高度写不写，都不影响，因为会根据内容的长度自动计算
    }
    .sourceWidthCoverList::-webkit-scrollbar-thumb {
      background: #C0C0C0; // 滑块颜色
      border-radius: 5px; // 滑块圆角
    }
    .sourceWidthCoverList::-webkit-scrollbar-thumb:hover {
      background: #7D7D7D; // 鼠标移入滑块变红
    }
    .sourceWidthCoverList::-webkit-scrollbar-track {
      border-radius: 10px; // 轨道圆角
      background-color: #ffffff // 轨道颜色
    }
    .chapterAllIn_right{
      width: 35%;
      border-radius: 12px;
      box-shadow: 2px 10px 24px 0px rgba(161,153,168,0.18);
      box-sizing: border-box;
      padding:1%;
      margin-left:10px;
      .reviewAll{
        height: 100%;
        .network_show{
          width:100%;
          height:100%;
        }
      }
    }
  }
}
.searchValue{
  width: 497px;
  height: 50px;
  background: #ffffff;
  border: 1px solid #00a3ff;
  border-radius: 8px;
  margin: 16px 0 23px 33%;
  overflow: hidden;
  position:relative;
  input{
    width:100%;
    height: 100%;
    outline: 0;
    box-sizing: border-box;
    padding-left: 10px;
  }
  .searchBtn{
    width: 26px;
    height: 26px;
    background: #00a3ff;
    border-radius: 6px;
    position: absolute;
    right:5px;
    top:50%;
    transform: translate(-50%,-50%);
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    img{
      display: block;
      text-align: center;
      margin: 6px auto 0;
    }
  }
}
.selectActiveSpan{
  background: #DCF1FF;
  border-radius: 6px;
  color: #00a3ff!important;
  padding: 5px;
}
.selectActiveLi{
  background: #00a3ff!important;
  color: #ffffff!important;
}

</style>
