<template>
  <common-header/>
  <div class="allPageWidthBg courseResources">
    <div class="courseResourcesCont ">
      <div class="baseTop">
        <p>课程资源，搜索一下</p>
        <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="littleTab">
          <ul>
            <li :class="{active:chooseNum==index }" v-for="(item,index) in quickInput" :key="index" @click="quickIn(item,index)">{{item}}  <span v-show="index!=4">|</span></li>
          </ul>
        </div>
      </div>

      <CourseType :transBaseData="baseData" @toParentDetail="toDetail" @baseCourseAll="baseCourseAll"></CourseType>
      <CourseType :transBaseData="famousBaseData" @toParentDetail="toDetail" @baseCourseAll="baseCourseAll"></CourseType>
      <CourseType :transBaseData="homeworkAssBaseData" @toParentDetail="toDetail" @baseCourseAll="baseCourseAll"></CourseType>
      <CourseType :transBaseData="familyBaseData" @toParentDetail="toDetail" @baseCourseAll="baseCourseAll"></CourseType>
      <CourseType :transBaseData="specialBaseData" @toParentDetail="toDetail" @baseCourseAll="baseCourseAll"></CourseType>
      <CourseType :transBaseData="resourceCenterBaseData" @toParentDetail="toDetail" @baseCourseAll="baseCourseAll"></CourseType>
    </div>
  </div>
</template>

<script>
  import CourseType from '../components/CourseType.vue'
import CommonHeader from "@/components/CommonHeader/index.vue";
import {courseIndex } from "./kczy/allApi.js";
import { user } from "@/store/user.js";
  export default {
    name: 'courseResources',
    components:{
      CourseType,
      CommonHeader
    },
    data() {
      return {
        searchKey: '',
        num: 0,
        quickInput: ['微课', '教案', '课件', '微视频', '网络资源'],
        chooseNum:2,
        baseData: {
          id:"baseCourse",
          mainTitle: '基础课程',
          secTitle: '实现直播教师上传资源，兼职美术老师下载资源',
          label: ['微课', '教案', '课件', '微视频', '网络资源'],
          courseDetail: [
            {
              ni_pid:'baseCourse',
              img: '/kczy/singlePic1.png',
              title: '野天鹅',
              starNum: 5,
              collectNum: '10w+',
              zanNum:'14w+'
            },
            {
              ni_pid:'baseCourse',
              img: '/kczy/singlePic2.png',
              title: '安徒生世界插画',
              starNum: 5,
              collectNum: '10w+',
              zanNum:'14w+'
            },
            {
              ni_pid:'baseCourse',
              img: '/kczy/singlePic3.png',
              title: '传送门',
              starNum: 5,
              collectNum: '10w+',
              zanNum:'14w+'
            }
          ]
        },
        famousBaseData: {
          id:"famousCourse",
          mainTitle: '名师在线',
          secTitle: '实现直播教师上传资源，兼职美术老师下载资源',
          label: ['微课', '教案', '课件', '微视频', '网络资源'],
          courseDetail: [
            {
              ni_pid:'famousCourse',
              img: '/kczy/mszx1.png',
              title: '初中语文',
              starNum: 5,
               collectNum: '10w+',
              zanNum:'14w+'
            },
            {
              ni_pid:'famousCourse',
              img: '/kczy/mszx2.png',
              title: '初中社会思品',
              starNum: 4,
               collectNum: '10w+',
              zanNum:'14w+'
            },
            {
              ni_pid:'famousCourse',
              img: '/kczy/mszx3.png',
              title: '小学语文',
              starNum: 3,
               collectNum: '10w+',
              zanNum:'14w+'
            }
          ]
        },
        homeworkAssBaseData: {
          id:"homeworkAss",
          mainTitle: '作业辅导',
          secTitle: '实现直播教师上传资源，兼职美术老师下载资源',
          label: ['微课', '教案', '课件', '微视频', '网络资源'],
          courseDetail: [
            {
              ni_pid:'homeworkAss',
              img: '/kczy/zyfd1.png',
              title: '作业同步辅导',
              starNum:5,
               collectNum: '10w+',
              zanNum:'14w+'
            }
          ]
        },
        familyBaseData: {
          id:"familyCourse",
          mainTitle: '家庭教育',
          secTitle: '实现直播教师上传资源，兼职美术老师下载资源',
          label: ['微课', '教案', '课件', '微视频', '网络资源'],
          courseDetail: [
            {
              ni_pid:'familyCourse',
              img: '/kczy/jtjy1.png',
              title: '亲子沟通教育2.0',
              starNum: 5,
               collectNum: '10w+',
              zanNum:'14w+'
            },
            {
              ni_pid:'familyCourse',
              img: '/kczy/jtjy2.png',
              title: '阅读时光',
              starNum: 3,
               collectNum: '10w+',
              zanNum:'14w+'
            },
          ]
        },
        specialBaseData: {
          id:"specialCourse",
          mainTitle: '特色课程',
          secTitle: '实现直播教师上传资源，兼职美术老师下载资源',
          label: ['微课', '教案', '课件', '微视频', '网络资源'],
          courseDetail: [
            {
              ni_pid:'specialCourse',
              img: '/kczy/tskc1.png',
              title: '体育综合素质课程',
              starNum: 3,
               collectNum: '10w+',
              zanNum:'14w+'
            },
            {
              ni_pid:'specialCourse',
              img: '/kczy/tskc2.png',
              title: '一起学寓言',
              starNum:5,
               collectNum: '10w+',
              zanNum:'14w+'
            },
          ]
        },
        resourceCenterBaseData: {
          id:"resourceCenter",
          mainTitle: '资源中心',
          secTitle: '实现直播教师上传资源，兼职美术老师下载资源',
          label: ['微课', '教案', '课件', '微视频', '网络资源'],
          courseDetail: [
            {
              ni_pid:'specialCourse',
              img: '/kczy/singlePic1.png',
              title: '野天鹅',
              starNum: 5,
               collectNum: '10w+',
              zanNum:'14w+'
            },
            {
              ni_pid:'specialCourse',
              img: '/kczy/singlePic2.png',
              title: '安徒生世界插画',
              starNum:1,
               collectNum: '10w+',
              zanNum:'14w+'
            },
            {
              ni_pid:'specialCourse',
              img: '/kczy/singlePic3.png',
              title: '传送门',
              starNum: 3,
               collectNum: '10w+',
              zanNum:'14w+'
            },
            {
              ni_pid:'specialCourse',
              img: '/kczy/singlePic5.png',
              title: '拇指姑娘',
              starNum: 4,
               collectNum: '10w+',
              zanNum:'14w+'
            },
            {
              ni_pid:'specialCourse',
              img: '/kczy/singlePic4.png',
              title: '书中花园',
              starNum:5,
               collectNum: '10w+',
              zanNum:'14w+'
            }
          ]
        },
      }
    },
    mounted() {
      this.initData();
    },
  methods: {
    //初始化数据
    initData() {
      let transObj = {
        token: user.token,
        keyword:this.searchKey,
      }
      courseIndex(transObj)
        .then(res => {
          if (res.code == "1") {
            let responseDataAll = Object.values(res.data);
            console.log(responseDataAll, "00000xwwww");
            this.baseData = responseDataAll[0];
            this.famousBaseData =responseDataAll[1];
            this.homeworkAssBaseData=responseDataAll[2];
            this.familyBaseData=responseDataAll[3];
            this.specialBaseData=responseDataAll[4];
            this.resourceCenterBaseData=responseDataAll[5];
        }
      })
      .catch(error=>{
        console.log(error)
      })
    },
    //便捷输入
    quickIn(item,index) {
      this.chooseNum = index;
      this.searchKey = item;
    },
    //搜索
    searchBtn() {
      this.initData();
    },
    //暂时注释掉
    switchTab(index) {
      this.num = index;
    },
    //全部-查看更多
    baseCourseAll(item) {
      this.$router.push({
        path: '/resourceAll',
        query: {
          kkId: item.kk_id,
          kcName: item.kc_name,
          kcId:item.kc_id//1:代表基础课程...
        }
      });
    },
      //详情页
    toDetail(transParams) {
      this.$router.push({ path: '/resourceChapter', query: { id: transParams.kk_id }})
    },

  },
  }
</script>
<style scoped lang="scss">
  @import "../styles/common_resource.scss";
.courseResources{
  width:100%;
  .courseResourcesCont{
    width: 1280px;
    margin: 0 auto;
    .baseTop{
      p{
        font-size: 48px;
        font-weight: 600;
        text-align: center;
        color: #000000;
        padding-top:60px;
      }
      .searchValue{
        width: 497px;
        height: 50px;
        margin:0 auto;
        background: #ffffff;
        border: 1px solid #00a3ff;
        border-radius: 8px;
        margin-top: 33px;
        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;
          }
        }
      }
      .littleTab{
        width: 300px;
        margin: 0 auto;
        ul{
          margin-top:22px;
          display: flex;
          li{
            display: inline-block;
            font-size: 16px;
            font-weight: 400;
            text-align: left;
            color: #606565;
            margin:0 5px;
            justify-content: space-between;
            cursor: pointer;
          }
        }
      }
    }
  }
}
.active{
  color: #000000!important;
  font-weight: bold!important;
}
</style>
