<template>
  <!-- 视频播放 -->
  <div class="video_play">
    <Top :active="active"></Top>
    <div class="video_play_wrap">
      <!-- 面包屑 -->
      <div class="major_title layout align_left">
        <el-breadcrumb separator="|">
          <el-breadcrumb-item>首页</el-breadcrumb-item>
          <el-breadcrumb-item>{{name}}</el-breadcrumb-item>
          <el-breadcrumb-item>{{title}}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 视频 -->
      <div class="video_screen">
        <!-- 导航栏 -->
        <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="video_single">
          <!-- 视频标题 -->
          <div class="video_play_title">{{title}}</div>
          <div class="video_playing">
            <div class="video_playing_top layout flex_row">
              <!-- 当前播放视频 -->
              <div class="big_video">
                <video id="myVideo" ref="video" autoplay= "muted" controls class="video-js vjs-default-skin"></video>
                <!-- 遮层 -->
                <!-- <div class="big_video_cover" v-show="isPlay">
                  <div class="start_btn" @click="startVideo()">
                    <img src="@/assets/img/start.png" alt />
                  </div>
                </div> -->
              </div>
              <!-- 视频列表 -->
              <div class="small_video">
                <div
                  class="small_video_single layout flex_row"
                  v-for="item in allList"
                  :key="item.id"
                  :class="{small_change_color:isView == item.id}"
                  :id="item.id"
                  @click="playVideo(item)"
                >
                  <div class="video_cover">
                    <img :src="item.video_image" alt />
                  </div>
                  <div class="layout flex_diection justify_around">
                    <div class="video_list_name">{{item.name}}</div>
                    <div class="layout flex_row video_icon">
                      <div class="watch_num">
                        <img :src="isView == item.id?srcView1:srcView" alt />
                      </div>
                      {{item.play}}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 视频播放量 -->
            <div class="video_playing_bot layout flex_row">
              <div class="layout flex_row video_icon">
                <div class="watch_num">
                  <img src="@/assets/img/view1.png" alt />
                </div>
                {{nowPlay}}
              </div>
              <div class="layout flex_row video_icon" @click="collect()">
                <div class="collect">
                  <img :src="isFavorite?src2:src1" alt />
                </div>收藏
              </div>
            </div>
          </div>
        </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,
      id: "",
      type: "",
      name: "",
      title: "",
      // 收藏
      isFavorite: "",
      src1: require("../../../assets/img/career.png"),
      src2: require("../../../assets/img/star1.png"),
      srcView: require("../../../assets/img/view.png"),
      srcView1: require("../../../assets/img/view2.png"),
      // 播放的视频
      videoList: [],
      // 视频列表
      allList: [],
      isPlay: true,
      isView: "",
      nowPlay: ""
    };
  },
  methods: {
    // 视频列表
    playVideo(item) {
      this.isPlay = true;
      this.nowPlay = item.play;
      this.title = item.name;
      this.id = item.id;
      this.isView = item.id;
      this.$refs.video.src = item.videofile;
      this.startVideo();
    },
    // 导航栏
    changeNav(item, index) {
      this.isNav = index;
      this.$router.push({ path: "/VideoSource", query: { isNav: index } });
    },
    // 开始播放视频
    startVideo() {
      // 视频资源播放
      let url = "/api/resource/playVideo/";
      let params = {
        id: this.id,
        type: this.type
      };
      post(url, params).then(res => {
        this.getVideoDetail();
      });
    },
    // 视频资源详情
    getVideoDetail() {
      let url = "/api/resource/getVideoDetail/";
      let params = {
        id: this.id,
        type: this.type
      };
      post(url, params).then(res => {
        this.allList = res.all_list;
        for (let obj of this.allList) {
          if (obj.name == this.title) {
            this.isView = obj.id;
          }
        }

        this.videoList = res.res_detail;
        this.nowPlay = this.videoList.play;
        this.isFavorite = res.res_detail.is_favorite;
        // 视频地址
        this.$refs.video.src = res.res_detail.videofile;
      });
    },
    // 收藏/取消收藏
    collect() {
      let type = 5;
      switch (this.isNav) {
        case 0:
          type = 5;
          break;
        case 1:
          type = 6;
          break;
        case 2:
          type = 7;
          break;
        case 3:
          type = 8;
          break;
      }
      let url = "/api/common/favorite";
      let params = {
        object_id: this.videoList.id,
        type: type
      };
      post(url, params).then(res => {
        this.isFavorite = !this.isFavorite;
      });
    },
    // 视频播放
    initVideo() {
      //初始化视频方法
      // let myPlayer = this.$video(myVideo, {
      //   //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
      //   controls: true,
      //   // 自动播放属性,muted:静音播放
      //   autoplay: "muted",
      //   //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
      //   preload: "auto",
      //   //设置视频播放器的显示宽度（以像素为单位）
      //   width: "839px",
      //   //设置视频播放器的显示高度（以像素为单位）
      //   height: "542px"
      // });
    }
  },
  components: {
    Top,
    Bottom2
  },
  mounted() {
    this.id = this.$route.query.id;
    this.type = this.$route.query.type;
    this.name = this.$route.query.name;
    this.title = this.$route.query.title;
    this.isNav = this.$route.query.isNav;
    this.getVideoDetail();
    this.initVideo();
    this.startVideo();
  },
  watch: {
    isView(newV, oldV) {
      let id = newV;
      document.getElementById(id).scrollIntoView();
    }
  },
  watch:{
    '$route'(to,from){
      this.id = this.$route.query.id;
      this.getVideoDetail();
    }
  },
};
</script>
<style scoped>
@import "../../../style/career.css";
.video_play {
  width: 100%;
  background-color: #f2f5fa;
}
.video_play_wrap {
  width: 1200px;
  margin: 0 auto;
}
.video_screen {
  width: 1200px;
  background-color: #fff;
}
/* 视频播放 */
.video_single {
  padding: 12px 20px;
  text-align: left;
}
/* 视频标题 */
.video_play_title {
  line-height: 76px;
  font-size: 30px;
  color: #34485e;
}
/* 视频 */
.big_video {
  width: 839px;
  height: 542px;
  position: relative;
  z-index: 1;
}
/* 遮层 */
.big_video_cover {
  width: 840px;
  height: 542px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  background-color: rgba(0,0,0,0);
}
/* 播放按钮 */
.start_btn {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.start_btn img {
  width: 100%;
  height: 100%;
  line-height: 76px;
}
/* 视频列表 */
.small_video {
  width: 321px;
  height: 542px;
  overflow-y: auto;
  background-color: #313131;
  font-size: 14px;
  color: #fff;
}
.small_video_single {
  padding: 18px 18px 0;
}
.small_change_color {
  color: #47d1a0;
}
.video_list_name {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.video_cover {
  width: 108px;
  height: 60px;
  margin-right: 15px;
}
.video_cover img {
  width: 100%;
  height: 100%;
}
/* 收藏 观看次数 */
.video_playing_bot {
  margin-top: 18px;
  margin-left: 14px;
  font-size: 14px;
  color: #8c9198;
}
.video_icon {
  margin-right: 40px;
}
.watch_num {
  width: 21px;
  height: 16px;
  line-height: 16px;
  margin-right: 10px;
}

.collect {
  width: 20px;
  height: 18px;
  margin-right: 10px;
  line-height: 16px;
}
.watch_num img,
.collect img {
  width: 100%;
  height: 100%;
}
/* 视频播放 */
.video-js {
  width: 839px;
  height: 542px;
}
</style>