<template>

<div class="resource_show_list_pc_1">
   <div class="container">
      <div class="row">
         <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
             <div class="showlist-title">
                 <span class="sp1">资源推荐</span>
                 <span class="sp2"><a href="http://jslnxxzypc.learningyun.com">更多>></a></span>
             </div>
         </div>
     </div>
      <div class="row">
         <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="showlist-body">
               <div class="showlist-hd">
                   <ul class="clearfix" v-show="className!=''">
                       <!-- <li class="active"><a href="">书法美术</a></li>
                       <li><a href="">医学健身</a></li>
                       <li><a href="">文学戏曲</a></li>
                       <li><a href="">历史地理</a></li>
                       <li><a href="">社会科学</a></li>
                       <li><a href="">生活艺术</a></li>
                       <li><a href="">音乐舞蹈</a></li>
                       <li><a href="">江苏文化</a></li>
                       <li><a href="">农村农业</a></li> -->
                       <li :class="{active:classId===''}" @click="civckall()"><a >全部</a></li>
                       <li :class="{active:index===classId}" v-for="(item,index) in className" :key="index" @click="civck(item.catName,index)"><a>{{item.catName}}</a></li>
                   </ul>
               </div>
               <div class="showlist-bd">
                   <div class="row">
                       <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6" v-for="item in resourceList" :key="item.resId"><!--循环-->
                           <div class="showlist-part">
                               <span class="sp1">
                                 <img class="imgbg" :src="item.resPhoto" alt="">
                                 <span class="play"><a :href="'/resourcedetail?id='+item.resId"></a></span>
                                 <span class="tip"><img src="images/jslndx-new-icon.png" alt=""></span>
                               </span>
                               <span class="sp2">
                                   <p class="spp1"><a :href="'/resourcedetail?id='+item.resId" >{{item.resName}}</a></p>
                                   <p class="spp2">{{item.resAuthor}}<span class="play-cont">{{item.studyNum}}</span></p>
                               </span>
                           </div>
                       </div>

                   </div>
               </div>
           </div>
         </div>
      </div>
   </div>
</div>
</template>

<script>import {httpPost} from '../../../src/utils/utils';
import lenye_base from "lenye_base";
export default {
  name: 'ElResourceShowListPc1',
  data(){
     return{
      // 站点数据
      siteData: "",
      // 分类
      className: "",
      catname:'',//分类名称
      classId:'',//分类id
      resourceList:[],
     }
  },
   mounted(){
      this.getClass();
      this.getlist();
  },

  methods: {
    //请求分类
     getClass(){
       const that = this;
      httpPost(
        lenye_base.base_data.getapiUrl() +
         "/resource-service/common/resCategory/queryShowPage.do",
        lenye_base.base_data.getformatting({
          sites: lenye_base.site_data.getsiteData().siteId,
        }),
        function (data) {
          that.className = data.data;
          console.log(data.data)
        }
      );
    },
    //请求列表
    getlist(){
       const that = this;
      httpPost(
        lenye_base.base_data.getapiUrl() +
         "/resource-service/common/resResource/queryShowPageModify.do",
        lenye_base.base_data.getformatting({
          sites: lenye_base.site_data.getsiteData().siteId,
          resTjStatus:1,
          sorts: "createDate=0",
          rows: 8,
            resCatnamestr:that.catname
        }),
        function (data) {
          that.resourceList = data.data;
          console.log(data.data)
        }
      );
    },
     civck(name,index){
            this.catname=name;
            this.classId=index;
            // console.log(index)
            this.getlist();
      },
      civckall(){
          this.catname='';
          this.classId='';
          this.getlist();
      },
  },
  getData(obj) {
      // 请求的api，格式为 lenye_base.api_url.setting.queryShowPage
      const url = obj.url;
      //请求的数据，类型是对象
      const data = obj.data;
      // 只能是箭头函数
      const Ajax = obj.Ajax;
      lenye_base.httpPost(
        lenye_base.base_data.getapiUrl() + url,
        lenye_base.base_data.getformatting(data),
        Ajax
      );
    },
    redetail(id){
        window.open('/resourcedetail?id='+id)
    }
};
</script>
