<template>
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <!--课程固定条数展示组件1开始-->
                <div class="course_show_fixrecord_pc_1"><!--使用此组件，请复制此div-->
                    <div class="row">
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                            <div class="index-title">
                                <span class="sp1">精品课程</span>
                                <span class="sp2"><a href="/courselist">更多>></a></span>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div v-for="(item,index) in courseList" @click.prevent="goDetails(item.thirdCsPlayUrl)"
                             :key="index"
                             class="col-lg-3 col-md-3 col-sm-4 col-xs-6"><!--循环-->
                            <div class="jpclass-list">
                        <span class="sp1">
                            <img :src="item.csPhoto" style="cursor:pointer;" alt="">
                            <!--<span class="spp1">评分：5星</span>-->
                        </span>
                                <span class="sp2"><a href="">{{item.csName}}</a></span>
                                <span class="sp3">
                            <!--<p><i>类型：</i>低压电工作业 | 高压电工作业 | 防空作业</p>-->
                            <p><i>学时：</i>{{item.csStudylength}}学时</p>
                            <p v-show="item.bsName!=''"><i>来源：</i>{{item.bsName}}</p>
                        </span>
                            </div>
                        </div>


                        <!--<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">
                            <div class="jpclass-list">
                        <span class="sp1">
                            <img src="../../theme-chalk/src/images/class-pic02.jpg" alt="">
                            <span class="spp1">评分：5星</span>
                        </span>
                                <span class="sp2"><a href="">电工类作业取证培训课程一</a></span>
                                <span class="sp3">
                            <p><i>类型：</i>低压电工作业 | 高压电工作业 | 防空作业</p>
                            <p><i>学时：</i>20.0学时</p>
                            <p><i>来源：</i>金学安全云平台一</p>
                        </span>
                            </div>
                        </div>-->
                    </div>
                </div>
                <!--课程固定条数展示组件1结束-->
            </div>
        </div>
    </div>
</template>
<script type="text/babel">
  import formMixin from '../../../src/mixins/formMixin';
  import lenye_base from 'lenye_base';
  import msg from '../../message';

  export default {
    name: 'courseInfo',
    mixins: [formMixin],
    data() {
      return {
        // 站点数据
        siteData: '',
        // 用户信息
        userData: '',
        //    课程列表
        courseList: [],
        //    请求课程列表的数据
        getListData: {
          sites: '', //站点
          page: 1, //页数
          rows: 8, //行数
          typeId: '', //课程大类
          csCatstr: '', //课程分类
          csModel: '', //课程类型
          csName: '', //课程名称
          orderType: '1'
        }
      };
    },
    created() {
      this.siteData = lenye_base.site_data.getsiteData();
      this.getListData.sites = this.siteData.siteId;
      if (lenye_base.user_data.getuserData()) {
        this.userData = lenye_base.user_data.getuserData();
      }
    },
    mounted() {
      this.getCourseList();
    },
    methods: {
      // 详情
      goDetails(thirdCsPlayUrl) {
        if(thirdCsPlayUrl){
          let token = '';
          if (this.userData) {
            token = this.userData.token;
          }
          window.open(lenye_base.setUrlParam("token",token,thirdCsPlayUrl));
        }else{
          msg.warning('暂无课程链接');
        }
      },
      // 请求课程列表
      getCourseList() {
        //定义指针
        const that = this;
        console.log('站点信息', that.siteData);
        var obj = {
          url: lenye_base.api_url.course.crsCoursequeryShowPage,
          data: that.getListData,
          Ajax: function(data) {
            console.log('课程列表', data);
            that.courseList = data.data;
          }
        };
        this.getData(obj);
      },
      // 请求函数
      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);
      }
    }
  };
</script>