<template>
  <!-- 推荐书籍 生涯故事 生涯案例 -->
  <div class="career_learn">
    <Top :active="active" :isCareerTop="isCareerTop" ></Top>
    <!-- 主体内容 -->
    <div class="career_wrap">
      <!-- 面包屑 -->
      <div class="major_title layout align_left">
        <el-breadcrumb separator="|">
          <el-breadcrumb-item>首页</el-breadcrumb-item>
          <el-breadcrumb-item>生涯学习</el-breadcrumb-item>
          <el-breadcrumb-item>{{isNav == 0?"推荐书籍":isNav == 1?"生涯案例":"生涯故事"}}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 内容 -->
      <div class="career_main clearfix">
        <!-- 导航栏 -->
        <div class="career_nav clearfix">
          <div
            class="nav_single"
            :class="{nav_bottom:isNav == index}"
            v-for="(item,index) in navList"
            :key="index"
            @click="changeNav(index)"
          >{{item}}</div>
        </div>
        <!-- 推荐书籍 -->
        <div class="career_book clearfix" v-if="isNav == 0">
          <div class="clearfix">
            <dl v-for="item in bookList" :key="item.id" @click="toDetail(item)">
              <dt>
                <img :src="item.image" alt />
              </dt>
              <dd>{{item.name}}</dd>
            </dl>
          </div>
          <!-- 分页 -->
          <el-pagination
            v-show="totalPage>1"
            background
            layout="prev, pager, next"
            :page-count="totalPage"
            @current-change="handleCurrentChange"
          ></el-pagination>
        </div>
        <!-- 生涯案例 -->
        <div class="career_book clearfix" v-if="isNav == 1">
          <div class="clearfix">
            <dl v-for="item in bookList" :key="item.id" @click="toDetail(item)">
              <dt>
                <img :src="item.image" alt />
              </dt>
              <dd>{{item.name}}</dd>
            </dl>
          </div>
          <!-- 分页 -->
          <el-pagination
            v-show="totalPage>1"
            background
            layout="prev, pager, next"
            :page-count="totalPage"
            @current-change="handleCurrentChange"
          ></el-pagination>
        </div>
        <!-- 生涯故事 -->
        <div class="career_book clearfix" v-if="isNav == 2">
          <div class="clearfix">
            <dl v-for="item in bookList" :key="item.id" @click="toDetail(item)">
              <dt>
                <img :src="item.image" alt />
              </dt>
              <dd>{{item.name}}</dd>
            </dl>
          </div>
          <!-- 分页 -->
          <el-pagination
            v-show="totalPage>1"
            background
            layout="prev, pager, next"
            :page-count="totalPage"
            @current-change="handleCurrentChange"
          ></el-pagination>
        </div>
      </div>
    </div>
    <Bottom2></Bottom2>
  </div>
</template>
<script>
import Top from "../../common/Top";
import Bottom2 from "../../common/Bottom2";
import { post } from "@/api/http";
export default {
  data() {
    return {
      active: 4,
      navList: ["推荐书籍", "生涯案例", "生涯故事"],
      isNav: 0,
      bookList: [],
      // 推荐书籍分页
      // 生涯案例分页
      //生涯故事分页
      totalPage: 0,
      page: "",
      type: 1,
      isCareerTop:-1
    };
  },
  methods: {
    //   分页
    handleCurrentChange(val) {
      this.page = val;
      this.getBooksList();
    },
    changeNav(index) {
      this.isNav = index;
      this.isCareerTop = index;
      
      // console.log(this.isCareerTop,"当前页面")
      // console.log(this.$store.state.isCareer,"vuex1")
      this.type = index + 1;
      this.getBooksList();
    },
    // 详情
    toDetail(item) {
      this.$router.push({
        path: "/CareerDetail",
        query: { id: item.id }
      });
    },
    // 学习资源列表
    getBooksList() {
      let url = "/api/resource/getBooksList/";
      let params = {
        type: this.type,
        page: this.page
      };
      post(url, params).then(res => {
        this.bookList = res.res_list;
        this.totalPage = res.total_page;
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
      });
    }
  },
  components: {
    Top,
    Bottom2
  },
  mounted() {
    this.isNav = this.$route.query.isNav;
    this.isCareerTop = this.$route.query.isNav;
    this.type = this.isNav / 1 + 1;
    this.getBooksList();
  },
  watch: {
    $route(to, from) {
      this.isNav = to.query.isNav;
      this.changeNav(this.isNav);
      // this.isCareerTop = this.isNav;
      
    },
    isCareerTop(newV,oldV){
      this.$store.commit("changeStatus",newV)
      // console.log(this.$store.state.isCareer,"监听vuex")
      //  console.log(newV,oldV,"监听")
    }
  }
};
</script>
<style scoped>
@import "../../../style/career.css";
.career_learn {
  background-color: #f2f5fa;
  width: 100%;
}
.career_wrap {
  width: 1200px;
  margin: 0 auto;
}
.career_main {
  width: 1200px;
  background-color: #fff;
}

</style>