<template>
  <!-- 视频资源 -->
  <div class="video_source">
    <Top :active="active"></Top>
    <!-- banner -->
    <div class="video_banner">
      <img :src="videoSrc" alt />
    </div>
    <!-- 视频分类 -->
    <div class="video_main">
      <!-- 导航栏 -->
      <div class="career_nav clearfix">
        <div
          class="nav_single"
          :class="{nav_bottom:isNav == index}"
          v-for="(item,index) in navList"
          :key="index"
          @click="changeNav(item,index)"
        >{{item}}</div>
      </div>
      <!-- 政策解读 -->
      <div class="career_book clearfix" v-show="isNav == 0">
        <dl v-for="item in bookList" :key="item.id" @click="toDetail(item)">
          <dt>
            <img :src="item.video_image" alt />
          </dt>
          <dd>{{item.name}}</dd>
        </dl>
      </div>
      <!-- 学生课程 -->
      <div class="career_book video_course clearfix" v-show="isNav == 1">
        <!-- 标签检索 -->
        <div class="layout flex_row align_left label_search">
          标签检索：
          <div
            class="label_content"
            v-for="item in labeList"
            :key="item.id"
            :class="{label_content_choice:isChoiced == item.id}"
            @click="byLabel(item)"
          >{{item.name}}</div>
        </div>
        <dl v-for="item in bookList" :key="item.id" @click="toDetail(item)">
          <dt>
            <img :src="item.video_image" alt />
          </dt>
          <dd>{{item.name}}</dd>
        </dl>
        <div v-show="bookList.length == 0" class="no_book_list">暂无数据...</div>
      </div>
      <!-- 专业解读 -->
      <div class="career_book video_course clearfix" v-show="isNav == 2">
        <div class="layout flex_row align_left label_search">
          检索：
          <input
            type="text"
            placeholder="请直接输入专业名称，通过下拉选项检索"
            v-model="major"
            @input="changeSelect(isNav)"
          />
          <div class="major_select clearfix" v-show="isShow">
            <div
              class="selection"
              v-show="selectList.length>0"
              v-for="(item,index) in selectList"
              :key="index"
              @click="toVideoPlay(item)"
            >{{item.name}}</div>
            <div class="selection" v-show="selectList.length==0">没有检索到对应信息</div>
          </div>
        </div>
        <dl v-for="item in bookList" :key="item.id" @click="toDetail(item)">
          <dt>
            <img :src="item.video_image" alt />
          </dt>
          <dd>{{item.name}}</dd>
        </dl>
      </div>
      <!-- 职业解读 -->
      <div class="career_book video_course clearfix" v-show="isNav == 3">
        <div class="layout flex_row align_left label_search">
          检索：
          <input
            type="text"
            placeholder="请直接输入职业名称"
            v-model="profession"
            @input="changeSelect(isNav)"
          />
          <div class="major_select" v-show="isShow">
            <div
              class="selection"
              v-show="selectList.length>0"
              v-for="(item,index) in selectList"
              :key="index"
              @click="toVideoPlay(item)"
            >{{item.name}}</div>
            <div class="selection" v-show="selectList.length==0">没有检索到对应信息</div>
          </div>
        </div>
        <dl v-for="item in bookList" :key="item.id" @click="toDetail(item)">
          <dt>
            <img :src="item.video_image" alt />
          </dt>
          <dd>{{item.name}}</dd>
        </dl>
      </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: [],
      // 学习标签
      labeList: [],
      isChoiced:"",
      // 参数
      type: 1,
      signId: "",
      keyword: "",
      name: "政策解读",
      major: "",
      profession: "",
      // 搜索下拉框
      isShow: false,
      selectList: [],
      videoSrc:"",
    };
  },
  methods: {
    imgZip(){
      let file = require("@/assets/img/video.png");
      lrz(file)
      .then(res=>{
        this.videoSrc = res.base64;
        console.log(res)
      })
    },
    // 导航栏
    changeNav(item, index) {
      this.isNav = index;
      this.type = index + 1;
      this.name = item;
      this.isShow = false;
      this.major = "";
      this.profession = "";
      this.getVideoList();
    },
    // 详情
    toDetail(item) {
      this.$router.push({
        path: "/VideoPlay",
        query: {
          id: item.id,
          type: this.type,
          name: this.name,
          title: item.name,
          isNav: this.isNav
        }
      });
    },
    // 通过标签获取视频
    byLabel(item) {
      this.signId = item.id;
      this.isChoiced = item.id;
      this.getVideoList();
    },
    // 检索输入
    changeSelect(isNav) {
      this.isShow = true;
      let keyword = "";
      if (isNav == 2) {
        if (!this.major) {
          this.isShow = false;
          return "";
        }
        keyword = this.major;
      } else if (isNav == 3) {
        if (!this.profession) {
          this.isShow = false;
          return "";
        }
        keyword = this.profession;
      }
      if (keyword) {
        this.getSearchList(keyword, isNav);
      }
    },
    // 视频资源智能筛选列表
    getSearchList(keyword, isNav) {
      let url = "/api/resource/getSearchList/";
      let params = {
        type: isNav / 1 + 1,
        keyword: keyword
      };
      post(url, params).then(res => {
        this.selectList = res.res_list;
      });
    },
    toVideoPlay(item) {
      this.$router.push({
        path: "/VideoPlay",
        query: {
          id: item.id,
          type: this.type,
          name: this.name,
          title: item.name,
          isNav: this.isNav
        }
      });
    },
    // 视频资源列表
    getVideoList() {
      let url = "/api/resource/getVideoList/";
      let params = {
        type: this.type,
        sign_id: this.signId,
        keyword: this.keyword
      };
      post(url, params).then(res => {
        this.bookList = res.res_list;
      });
    },
    // 学生课程标签列表
    getStudySignList() {
      let url = "/api/resource/getStudySignList/";
      post(url).then(res => {
        this.labeList = res.sign_list;
      });
    }
  },
  components: {
    Top,
    Bottom2
  },
  mounted() {
    this.isNav = this.$route.query.isNav;
    this.type = this.isNav / 1 + 1;
    this.getVideoList();
    this.getStudySignList();
    this.imgZip();
  }
};
</script>
<style scoped>
@import "../../../style/career.css";
.video_source {
  width: 100%;
  background-color: #f2f5fa;
}
.video_banner {
  width: 100%;
  height: 404px;
}
.video_banner img {
  width: 100%;
  height: 100%;
}
.video_main {
  width: 1200px;
  margin: 30px auto 0;
  background-color: #fff;
}
.video_course {
  padding-top: 0;
}
/* 标签检索 */
.label_search {
  line-height: 70px;
  color: #5b5e63;
  font-size: 14px;
  position: relative;
}
.label_content {
  height: 22px;
  padding: 0 12px;
  background-color: #eeeeee;
  border-radius: 3px;
  margin: 24px 11px;
  line-height: 22px;
}
.label_content_choice{
  background-color: #409eff;
  color: #fff;
}
input {
  width: 354px;
  margin-top: 18px;
}
/* 下拉搜索框 */
.major_select {
  position: absolute;
  left: 42px;
  top: 52px;
  border: 1px solid #eee;
  border-top: none;
}
.selection {
  width: 354px;
  height: 34px;
  line-height: 34px;
  text-align: left;
  padding-left: 14px;
  background-color: #fff;
}
.no_book_list {
  font-size: 16px;
}
</style>