<template>
<el-container>
  <el-header style="height: 80px;padding: 0;top:-0px">
     <el-row class="biaotou">
     <el-col :span="20" style="text-align:center;color:seashell;font-size:32px;line-height: 70px;" >
         培训视频
  </el-col>

</el-row> 


  </el-header>
  <el-main style="max-height: 700px;">

<el-row style="background-color: #f5f7fa;
    position: fixed;width: 83%;z-index:1000;margin-top: -58px;
">
     <el-col style="width:120px;margin-top: 12px;">
        <el-link :underline="false" @click="getList"><el-span class="mune">全部</el-span></el-link>
  </el-col>
  <el-col style="width:120px;margin-top: 12px;" v-for="o in typeOptions" :key="o">
        <el-link :underline="false" @click="getListtype(o)"><el-span class="mune">{{o.name}}</el-span></el-link>
  </el-col>
</el-row>
  <el-row  style="margin-top:-5px;">
  <el-col style="margin:0.5%;width: 24%;" v-for="o in videoList.results" :key="o">
    <el-card :body-style="{ padding: '0px' }" shadow="always" class="cardDiv" >
        <a @click="clickImg(o)">
      <el-image :src="o.coverurl" style="width:100%;height: 300px;" ></el-image>
      <div class="des"> <span>{{o.description}}</span></div>
       </a>
      <div style="padding: 14px;">
        <span style="font-family: 'Helvetica Neue';color:#af4545">{{o.name}}</span>
        <div class="bottom clearfix">
            <el-row>
                <el-col :span="12">
          <el-button type="warning" style="border: none;float: left;padding: 2px;    color:#dcae07;
    background-color: white;" icon="el-icon-s-custom">{{o.viewsp}}</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 {
    
      videoList:"",
      typeOptions:[],
     
    };
  },
  computed: {},
 
  created() {
        
    this.getList();
       this.getTypeAll();

  
  },
  methods: {


      //列表加载
       getList() {
      this.listLoading = true;
      getVideoList().then((response) => {
        if (response.data) {
          this.videoList = response.data;
        }
        this.listLoading = false;
      });
    },
    getListtype(a){
      getVideoList({category:a.id}).then((response) => {
          
        if (response.data) {
          this.videoList = response.data;
        }
        this.listLoading = false;
      });
    },
       //视频类型
     
 getTypeAll() {
      getDictList({ type__code: "data_video" }).then((res) => {
        this.typeOptions = genTree(res.data);
      });
    },

   
    //跳转播放视频界面
    clickImg(a){
         this.$router.push({name: "Index", params: { fileid: a.fileid,id:a.id} })
    }
  
     
  },
};


</script>
 

  <style  lang="scss" scoped>
  .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: 72px;
}
  .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;
  }
  
  .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: 60px;
   
  }
  .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>