<script src="../../course_show_list_pc_1/index.js"></script>
<template>
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <!--课程分类列表展示组件1开始-->
                <div class="course_show_list_pc_1"><!--使用此组件，请复制此div-->
                    <div class="row">
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                            <div class="screening-body">
                                <div class="screening-body-hd">
                                    <ul style="text-align:center;">
                                        <li v-for="(item,index) in typeofList" v-show="typeofList.length!=1" :key="index"
                                            :class="{on:typeOfActive === index}"
                                            @click="chooseType(index,item.typeId)"
                                        >{{item.typeName}}
                                        </li>
                                        <!--<li class="on">三项岗位人员</li>-->
                                        <!--<li>注安师培训</li>-->
                                        <!--<li>注安继教育</li>-->
                                        <!--<li>消防工程师</li>-->
                                    </ul>
                                </div>
                                <div class="screening-body-bd">
                                    <div class="screening-body-part">
                                        <div v-for="(item,index) in courseClassIfyList" :key="index"
                                             @click="chooseClassIfy(index,'',item.catId)"
                                             :class="['screening-body-list' ,'clearfix']">
                                            <!--条目-->
                                            <span :class="['tit',index === firstClass ? active : '']">{{item.catName}}</span>
                                            <ul>
                                                <div v-for="(elem,count) in item.children" :key="count"
                                                     @click.stop="chooseClassIfy(index,count,elem.catId)">
                                                    <li :class="{active: elem.active === count}">
                                                        {{elem.catName}}
                                                    </li>
                                                    <span v-if="count !== item.children.length -1">|</span>
                                                </div>
                                            </ul>
                                        </div>

                                        <!--备用的-->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                            <div class="class-tongji-bar clearfix">
                                <span class="sp1">共<i>{{courseNum}}</i>门课程</span>
                                <!--课程类型暂时不搞-->
                                <!--<ul class="classify">-->
                                <!--<li class="on">全部</li>-->
                                <!--<li>精品课程</li>-->
                                <!--</ul>-->
                                <form action="" class="search clearfix">
                                    <input type="text" v-model="getListData.csName" placeholder="输入关键字查找课程"
                                           class="search-inp">
                                    <input type="button" @click="getCourseList" class="search-sub">
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div v-for="(item,index) in courseList" :key="index" @click="goDetails(item.csId)"
                             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 class="spp2"><img src="../../theme-chalk/lib/images/jpclass-icon.png"-->
                                <!--alt=""></span>-->
                            </span>
                                <span class="sp2"><a @click.prevent href="javascript:;">{{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">&lt;!&ndash;循环&ndash;&gt;
                            <div class="jpclass-list">
                           <span class="sp1">
                             <img src="../../theme-chalk/lib/images/class-pic02.jpg" alt="">
                                <span class="spp1">学员评分：5星</span>
                                <span class="spp2"><img src="../../theme-chalk/lib/images/jpclass-icon.png"
                                                        alt=""></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 class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <!--翻页-->
                            <div class="tp-page">
                                <el-pagination
                                        background
                                        layout="total, sizes, prev, pager, next, jumper"
                                        :page-sizes="[8, 16, 24, 32]"
                                        @current-change="currentChange"
                                        @prev-click="prevClick"
                                        @next-click="nextClick"
                                        @size-change="sizeChange"
                                        :total="courseNum">
                                </el-pagination>
                                <!--  <ul>
                                      <li class="li4"><a href="">首页</a></li>
                                      <li><a href="">上一页</a></li>
                                      <li class="li1 on"><a href="">1</a></li>
                                      <li class="li1"><a href="">2</a></li>
                                      <li class="li1"><a href="">3</a></li>
                                      <li class="li1"><a href="">4</a></li>
                                      <li class="li1"><a href="">5</a></li>
                                      <li class="li1"><a href="">6</a></li>
                                      <li><a href="">下一页</a></li>
                                      <li class="li4"><a href="">尾页</a></li>
                                      <li class="li2">跳转至<input type="text"></li>
                                      <li class="li3">共<span>12</span>门课程/共<span>6</span>页</li>
                                  </ul>-->
                            </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: 'courseClassify',
        mixins: [formMixin],

        data() {
            return {
                // 站点数据
                siteData: '',
                // 用户信息
                userData: '',
                // 一级分类选中的下标
                firstClass: -1,
                // 一级分类选中的样式
                active: 'active',
                // 大类选中样式
                typeOfActive: 0,
                //请求课程要用的数据
                getListData: {
                    orderType:1,
                    sites: '',  //站点
                    page: 1, //页数
                    rows: 8,  //行数
                    typeId: '',  // 课程大类
                    csCatstr: '', // 课程分类
                    csModel: '',  //课程类型
                    csName: ''  //课程名称
                },
                //课程大类列表
                typeofList: [
                    {
                        siteId: '',
                        typeId: '',
                        typeName: '全部',
                        typePic: ''
                    }],
                //课程分类列表请求数据
                courseClassIfy: {
                    siteId: '', //站点id
                    parentId: '',  //父级id
                    typeId: '', // 大类id
                    cascade: 4  //级联
                },
                // 课程分类列表
                courseClassIfyList: [],
                // 课程列表
                courseList: [],
                // 课程总数
                courseNum: 0
            };
        },
        // 渲染之前，但此时的变量已经可用
        created() {
            this.siteData = lenye_base.site_data.getsiteData();
            this.getListData.sites = this.siteData.siteId;
            this.courseClassIfy.siteId = this.siteData.siteId;
            if (lenye_base.user_data.getuserData()) {
                this.userData = lenye_base.user_data.getuserData();
            }
        },
        // 渲染完毕之后
        mounted() {
            this.getTypeof();
            this.getCourseList();
            this.getClassIfyList();
        },
        methods: {
            // 跳转到课程详情页面
          goDetails(id) {
              window.open('/coursedetail?id='+id);
          },
            //获取课程大类事件
            getTypeof() {
                const that = this;
                var obj = {
                    url: lenye_base.api_url.course.crsClassifyqueryList,
                    data: {siteIds: that.siteData.siteId},
                    Ajax: function (data) {
                        console.log(data);
                        // 拼接请求回来的数据
                        that.typeofList = that.typeofList.concat(data.data);
                    }
                };
                this.getData(obj);
            },
            // 切换课程大类事件
            chooseType(index, typeId) {
                this.typeOfActive = index;
                this.firstClass = -1;
                this.courseClassIfy.typeId = typeId;
                this.getListData.csCatstr = '';
                this.getListData.typeId = typeId;
                this.getCourseList();
                this.getClassIfyList();
            },
            // 获取课程分类事件
            getClassIfyList() {
                const that = this;
                var obj = {
                    url: lenye_base.api_url.course.queryUsableTree,
                    data: that.courseClassIfy,
                    Ajax: function (data) {
                        for (let key in data.data) {
                            for (let item in data.data[key].children) {
                                data.data[key].children[item].active = false;
                            }
                        }
                        ;
                        console.log('课程分类', data.data);
                        that.courseClassIfyList = data.data;
                    }
                };
                this.getData(obj);
            },
            // 选择课程分类事件
            chooseClassIfy(index, count, catId) {
                this.firstClass = index;
                for (let key in this.courseClassIfyList) {
                    for (let item in this.courseClassIfyList[key].children) {
                        this.courseClassIfyList[key].children[item].active = false;
                    }
                }
                ;
                if (count !== '') {
                    this.courseClassIfyList[index].children[count].active = count;
                } else {
                    for (let key in this.courseClassIfyList) {
                        for (let item in this.courseClassIfyList[key].children) {
                            this.courseClassIfyList[key].children[item].active = false;
                        }
                    }
                    ;
                }
                this.getListData.csCatstr = catId;
                // 调用请求课程事件
                this.getCourseList();
            },
            // 获取课程列表事件
            getCourseList() {
                //定义指针
                const that = this;
                console.log('站点信息', that.siteData);
                var obj = {
                    url: lenye_base.api_url.course.crsCoursequeryShowPage,
                    data: that.getListData,
                    Ajax: function (data) {
                        that.courseList = data.data;
                        that.courseNum = data.totalCount;
                    }
                };
                this.getData(obj);
            },
            // 翻页：当前页数的显示条数改变触发
            sizeChange(rows) {
                this.getListData.rows = rows;
                this.getCourseList();
            },
            // 翻页：选中当前页
            currentChange(page) {
                this.getListData.page = page;
                this.getCourseList();
            },
            // 翻页：上一页
            prevClick(page) {
                this.getListData.page = page;
                this.getCourseList();
            },
            // 翻页：下一页
            nextClick(page) {
                this.getListData.page = page;
                this.getCourseList();
            },
            // 请求函数
            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>
