<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">
      <h4>课程章节</h4>
      <div class="unitAll">
        <el-collapse class="unitAll" v-model="activeNames"  accordion >
          <el-collapse-item :title="item.name" :name="index" v-for="(item,index) in unitNames" :key="index" @click="handleUnit(item,index)">
            <div class="UnitChapter">
            <div class="singleUnitChapter" v-for="(item,secindex) in unitChapters[index]" :key="secindex" @click="toDetail(item)">{{ item.kf_name }}</div>
          </div>
          </el-collapse-item>
        
        </el-collapse>


      </div>
      
    </div>
  </div>
  <common-footer/>
</template>

<script>
import CommonHeader from "@/components/CommonHeader/index.vue";
import CommonFooter from "@/components/CommonFooter/index.vue";
import { courseDetail,courseSourceList,attribDetail } 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: '',
      activeNames: ['1'],
      unitNames: [],
      unitChapters: [] // 用数组存储数据

    }
  },
  mounted() {
    this.initDetail();
    this.initSourceData();
    this.initUnitDetail();
  },
  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;
      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)
      })

    },
    initUnitDetail() {
      let transObj = {
        kk_id:this.$route.query.id,
      }
      attribDetail(transObj)
        .then(res => {
          if (res.code == '1') {
            let responseData = res.data.details;
            responseData.forEach(item => {
              this.unitNames.push(
                { id: item.ka_id, name: item.ka_name}
              )
            })
            this.dialogFormVisibleChapter = true;
          }
        })
        .catch(err => {
        console.log('err', err);
      })
    },
    /**预览页面*/
    reviewFile(item) {
      let marklable = item.kf_path.substr(item.kf_path.lastIndexOf(".") + 1);
      let kfId = item.kf_id;
      if (marklable == "mp4" || marklable == "mp3") {
        this.$router.push({ path:'/resourceMovReview', query:{icon:marklable,kfId:kfId,kkID:this.kkID} });
      } else {
        this.$router.push({ path:'/resourceFileReview', query:{icon:marklable,kfId:kfId} });
      }
    },
    /***/
    searchBtn() {
      this.initSourceData();
    },
    /**单元点击*/
    handleUnit(item,chapterIndex) {
      this.kkID = this.$route.query.id;
      let transObj = {
        token:user?.token,
        kk_id: this.kkID,
        ka_attrib_level_1:item.id,
      }
      courseSourceList(transObj)
        .then(res => {
          if (res.code == "1") {
            this.unitChapters[chapterIndex] = res.data.page_data;
            // 触发响应式更新
            this.$forceUpdate();
          }
        })
        .catch(error => {
          console.log(error)
        });

    },
    toDetail(allItem) {
      let marklable = allItem.kf_path.substr(allItem.kf_path.lastIndexOf(".") + 1);
      let kfId = allItem.kf_id;
      this.$router.push({ path:'/resourceMovReview', query:{kfId:kfId,kkID:this.kkID} });
    },

  },

  }
</script>

<style lang="scss" scoped>
@import "../styles/common_resource.scss";
.maxchapter{
  margin:0;
  padding:0;
  width:100%;
  background: url("/kczy/sourceBg.png") no-repeat left top;
  background-size: 100%;
}

.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{
  margin-bottom: 20px;
  box-sizing: border-box;
  padding: 25px 20px;
  box-shadow: 0 0 10px #aaaaaa;
  border-radius: 5px;
  h4{
    font-weight: bold;
  }
  .UnitTitle{
    height: 30px;
    line-height: 30px;
  }
  .unitAll{
    margin-top: 20px;
    .UnitChapter{
      box-sizing: border-box;
      padding: 0 10px;
      .singleUnitChapter{
        height: 40px;
        line-height: 40px;
        box-sizing: border-box;
        padding: 0 10px;
        border-bottom: 2px dashed #c9c9c9;
        cursor: pointer;
      }
    }
  }
  
}

::v-deep {
  .el-collapse-item__header{
    box-sizing: border-box;
    padding: 0 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    color: #000000;
    background-color: #f2f9ff;
  }
  .el-collapse-item__header.is-active{
    color: #ffffff;
    background-color: #01a3ff;
  }
  .el-collapse-item__header {
    margin-bottom: 10px;
  }
  .el-collapse{
    border: 0px;
  }
}

</style>
