<template>
  <el-container>
    <el-header style="height: 80px;padding: 0;">
      <el-row class="biaotou">
        <el-col :span="20" class="redBgTitle">
          培训视频
        </el-col>
      </el-row>
    </el-header>
    <el-main style="padding:20px 0;">
      <el-row class="typesButtons">
        <div style="width: fit-content;">
          <el-col class="typeItemWrap"  style="width:100px;margin-top: 6px;">
            <el-link :underline="false" @click="getList">
              <span class="mune">全部</span>
            </el-link>
          </el-col>
          <el-col
            class="typeItemWrap"
            style=""
            v-for="o in typeOptions"
            :key="o.id">
            <el-link :underline="false" @click="getListtype(o)">
              <span class="mune">{{o.name}}</span>
            </el-link>
          </el-col>
          <el-col v-if="hasLowerLevel">
            <el-divider style="margin: 0!important;"></el-divider>
          </el-col>
          <el-col
            v-if="hasLowerLevel"
            class="typeItemWrap"
            style=""
            v-for="p in subTypeOptions"
            :key="p.id">
            <el-link :underline="false" @click="getListSub(p)">
              <span class="mune">{{p.name}}</span>
            </el-link>
          </el-col>
        </div>
      </el-row>
      <!--<el-divider style="margin: 0!important;"></el-divider>-->
      <el-row id="videoListWrap" style="margin-top:50px;" :gutter="10">
        <el-col :xs="12" :sm="8" :lg="6" :xl="4"  v-for="o in videoList" :key="o.id" style="margin-bottom: 10px">
          <el-card :body-style="{ padding: '0px' }" shadow="always" class="cardDiv">
            <a @click="clickImg(o)">
              <el-image :src="o.coverurl" style="width:100%;height: 200px;"></el-image>
              <div class="des"><span>{{o.description}}</span></div>
            </a>
            <div style="padding: 14px;">
              <div style="height:50px">
                <span style="font-family: 'Helvetica Neue';color:#af4545;">{{o.name}}</span>
              </div>
              <div class="bottom clearfix">
                <el-row>
                  <el-col :span="6">
                    <el-button type="warning" style="border: none;float: left;padding: 2px;    color:#dcae07;background-color: white;" icon="el-icon-view">{{o.views_n}}
                    </el-button>
                  </el-col>
                  <el-col :span="6">
                    <el-button type="warning" style="border: none;float: left;padding: 2px;    color:#dcae07;
    background-color: white;" icon="el-icon-s-custom">{{o.viewsp_n}}
                    </el-button>
                  </el-col>
                  <el-col :span="12">
                    <el-button type="warning" style="border: none;float: right;padding: 2px;    color:#dcae07;
    background-color: white;">{{ o.create_time.substring(0,10) }}
                    </el-button>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>
<script type="text/javascript">
  import {getsignature, createVideo, getVideoList} from "@/api/video";
  import {getDictList, getDictTypeList} from "@/api/dict";


  import {genTree} from "@/utils";
  export default {
    components: {},
    data() {
      return {
        type:null,
        videoList: "",
        typeOptions: [],
        hasLowerLevel:false,
        subTypeOptions:[],
      };
    },
    computed: {},
    created() {
      /*this.getList();
      this.getTypeAll();*/
    },
    mounted(){
      let type = sessionStorage.getItem('videoType');
      if(type){
        this.type = type;
        this.getTypeData();
        this.getTypeAll();
      }else{
        this.getList();
        this.getTypeAll();
      }
      let bigHeight = document.getElementsByClassName('app-main')[0].clientHeight;
      let topHeight = document.getElementsByClassName('typesButtons')[0].clientHeight;
      console.log(topHeight);
      debugger;
      let domHeight = bigHeight-200-topHeight;
      document.getElementById('videoListWrap').style.height = domHeight + 'px';
      // document.getElementById('videoListWrap').style.paddingTop = topHeight + 'px';
    },
    methods: {
      //列表加载
      getList() {
        this.type = null;
        this.listLoading = true;
        getVideoList({pageoff: true}).then((response) => {
          if (response.data) {
            this.videoList = response.data;
          }
          this.listLoading = false;
        });
      },

      getListtype(a) {
        this.type = a.id;
        if(a.children){
          this.hasLowerLevel = true;
          this.subTypeOptions  = a.children;
        }else{
          this.hasLowerLevel = false;
          this.subTypeOptions  = [];
        }
        getVideoList({category: a.id, pageoff: true}).then((response) => {
          if (response.data) {
            this.videoList = response.data;
          }
          this.listLoading = false;
        });
      },
      getListSub(a){
        getVideoList({category: a.id, pageoff: true}).then((response) => {
          if (response.data) {
            this.videoList = response.data;
          }
          this.listLoading = false;
        });
      },
      getTypeData(){
        getVideoList({category: this.type, pageoff: true}).then((response) => {
          if (response.data) {
            this.videoList = response.data;
          }
          this.listLoading = false;
        });
      },
      //视频类型
      getTypeAll() {
        getDictList({type__code: "data_video",is_used:true}).then((res) => {
          this.typeOptions = genTree(res.data);
          console.log(this.typeOptions);
        });
      },

      //跳转播放视频界面
      clickImg(a) {
        if(this.type!==null){
          let type = sessionStorage.getItem('videoType');
          if(type){
            sessionStorage.removeItem('videoType');
            sessionStorage.setItem('videoType',this.type);
          }else{
            sessionStorage.setItem('videoType',this.type);
          }
        }else{
          sessionStorage.removeItem('videoType');
        }
        let routeData = this.$router.resolve({ 
          path: "/test/index",
            query: { 
              id: a.id
            }
        });
	
        //必要操作，否则不会打开新页面
        window.open(routeData.href, '_blank');  
        // this.$router.push({path: "index", query: {fileid: a.fileid, id: a.id}})
      }
    },
  };


</script>


<style lang="scss" scoped>
  .el-divider--horizontal{
    margin: 6px 0 0 0!important;
  }
  .typeItemWrap{
    margin-top: 6px;
    width:fit-content;
    min-width:100px;
  }
  .el-link.el-link--default{
    margin-right: 10px!important;
    margin-bottom: 0!important;
  }
  .typeItemWrap:last-child .el-link.el-link--default{
    margin-bottom: 10px!important;
  }
  #videoListWrap{
    overflow-y: scroll;
  }
  .navbar {
    display: none;
    position: fixed;
  }

  .el-col-offset-0 {
    margin-left: 50px;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .biaotou {
    background: url(../../assets/year-100-bg.png) no-repeat 50%, linear-gradient(90deg, #e95353 50%, #bf2221 0);
    box-shadow: none;
    height: 70px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }

  .el-header, .el-footer {
    color: #333;
    text-align: center;
    line-height: 40px;
    position: fixed;
    width: 100%;
    z-index: 1010;
  }

  .redBgTitle {
    text-align: center;
    color: seashell;
    font-size: 32px;
    line-height: 70px;
  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  .el-main {
    background-color: #ffffff;
    color: #333;
    text-align: center;
    margin-top: 130px;

  }

  .typesButtons {
    position: fixed;
    /*width: 83%;*/
    z-index: 1000;
    margin-top: -80px;
    background-color: rgb(245, 247, 250);
  }

  .des {
    height: 100px;
    margin-top: -100px;
    z-index: 9999;
    position: relative;
    background-color: rgba(220, 38, 38, 0.2);
    color: #f5f4f4;
    opacity: 0;
  }

  .cardDiv:hover .des {
    opacity: 1;
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .mune {
    font-family: PingFang SC, DFPKingGothicGB-Medium, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    max-width: 112px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .el-link.el-link--default {
    color: seashell;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 100px;
    color: rgba(131, 24, 24, 0.9);
    cursor: pointer;
    display: flex;
    justify-content: center;
    min-width: 72px;
    padding: 5px 16px;
    margin-bottom: 12px;
    margin-right: 16px;

  }

</style>
