<template>
    <div class="course_show_list_pc_2">
        <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 @click="more()">更多>></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">
                                <!-- <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 @click="clvClick(item.catId,index)" v-for="(item,index) in claList" :key="index"
                                    :class="{active:showId===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 courseList"
                                     :key="item.csId"><!--循环-->
                                    <div class="showlist-part">
                                    <span class="sp1">
                                        <a :href="item.thirdCsPlayUrl" v-if="item.thirdCourse==1">
                                            <img :src="item.csPhoto" alt="">
                                            <span class="spp1"></span>
                                        </a>
                                         <a @click="csdetail(item.csId)" v-else>
                                            <img :src="item.csPhoto" alt="">
                                            <span class="spp1"></span>
                                        </a>
                                    </span>
                                        <span class="sp2">
                                        <p class="spp1"><a>{{item.csName}}</a></p>
                                        <p class="spp2">课时：<span>{{item.csStudylength}}课时</span></p>
                                    </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {httpPost} from '../../../src/utils/utils';
    import formMixin from '../../../src/mixins/formMixin';
    import lenye_base from 'lenye_base';

    export default {
        name: 'ElCourseShowListPc2',
        mixins: [formMixin],
        model: {},
        data() {
            return {
                //课程列表
                courseList: [],
                //分类ID
                typeId: '',
                showId: 0,
                //分类列表
                claList: []
            };
        },
        mounted() {

            this.getclalist();
        },

        methods: {
            getlist() {
                const that = this;
                httpPost(
                    lenye_base.base_data.getapiUrl() +
                    '/course-service/common/crsCourse/queryShowPage.do',
                    lenye_base.base_data.getformatting({
                        sites: lenye_base.site_data.getsiteData().siteId,
                        // csCatnamestr:data.data[0].catId,
                        csCatstr: that.typeId,
                        rows: 8,
                        page: 1
                    }),
                    function (data) {
                        that.courseList = data.data;
                    }
                );
            },

            getclalist() {
                const that = this;
                httpPost(
                    lenye_base.base_data.getapiUrl() +
                    '/course-service/common/crsCatalog/queryShowPage.do',
                    lenye_base.base_data.getformatting({
                        parentName: '按类型',
                        sites: lenye_base.site_data.getsiteData().siteId
                    }),
                    function (data) {
                        that.claList = data.data;
                        that.typeId = data.data[0].catId;
                        that.getlist();
                    }
                );
            },
            clvClick(id, index) {
                this.typeId = id;
                this.showId = index;
                this.getlist();
            },
            more() {
                window.open("/courselist?type=kccs");
            },
            csdetail(id) {
                window.open('/coursedetail?id=' + id);
            }
        }
    };
</script>
