<template>
    <!--课程详情展示组件1开始-->
    <div class="el-course_show_detail_pc_1">
        <div class="course_show_detail_pc_1">
            <div class="st-moni-buy">
                <!--培训学习-->
                <div class="st-moni-buy" v-if="csLearn=''">
                    <div class="container">
                        <div class="row">
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                <div class="st-moni-buy-body clearfix">
                                    <div class="col-lg-4 col-md-5 col-sm-5 col-xs-12">
                                        <div class="st-moni-buy-img">
                                            <img :src="classDetail.csPhoto" alt="">
                                            <span class="play-icon"><a @click="bofang()"></a></span>
                                        </div>
                                    </div>
                                    <div class="col-lg-8 col-md-7 col-sm-7 col-xs-12">
                                        <div class="st-moni-buy-txt">
                                            <p class="st-moni-buy-txt-p1">{{classDetail.csName}}</p>
                                            <div class="st-moni-buy-txt-p4">
                                            <span class="st-span1"><a
                                                    href="">{{parseInt(classDetail.csStudylength)}}课时</a></span>|
                                                <span class="st-span2"><i v-if="classDetail.studyNum==''">0</i><i v-else>{{classDetail.studyNum}}</i>人已学</span>
                                                <span class="st-span3">
                                    <i>评星：</i>
                                    <span id="star" class="top-star">
                                        <ul class="star_UL" sid="0">
                                            <li class="on"><a href="javascript:;"></a></li>
                                            <li class="on"><a href="javascript:;"></a></li>
                                            <li class="on"><a href="javascript:;"></a></li>
                                            <li><a href="javascript:;"></a></li>
                                            <li><a href="javascript:;"></a></li>
                                        </ul>
                                    </span>
                                    <a v-if="judgeMent.totalCount==''">(0评价)</a>
                                    <a v-else>({{judgeMent.totalCount}}评价)</a></span>
                                                <a @click="delcill()" href="javascript:;" v-if="collId==1" class="share-icon"><img
                                                        src="../../theme-chalk/src/images/class-detail-faving.png"
                                                        alt=""></a>
                                                <a @click="addcill()" href="javascript:;" v-else class="share-icon"><img
                                                        src="../../theme-chalk/src/images/class-detail-fav.png" alt=""></a>
                                                <span class="st-span4"><a href="javascript:;">收藏({{favNum?favNum:0}})</a></span>
                                                <!--|-->
                                                <!--<span class="st-span5"><a href="">分享</a></span>-->
                                            </div>
                                            <p class="st-moni-buy-txt-p5">¥{{classDetail.csPrice}}元</p>
                                            <!-- <p class="et3-banner-body-p3 st-moni-buy-txt-p6">
                                                <span class="et3-banner-body-ps1">已获积分：<i>20</i></span>
                                                <span class="et3-banner-body-ps2">全网进度排名：<i>14</i>/52</span>
                                                <span class="et3-banner-body-ps2">全单位进度排名：<i>2</i>/12</span>
                                                <span class="et3-banner-body-ps3">学习勋章：<span class="et3-banner-body-ps4">最快完成</span></span>
                                            </p> -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                <div class="st-moni-buy-jdt"><span :style="'width:'+csLearn.lcsProcess+'%'"></span></div>
                            </div>
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                <div class="et4-studing clearfix">
                                    <span class="et4-studing-left">完成课时：{{parseInt(classDetail.csStudylength)}}/{{classDetail.cptNum}}</span>
                                    <span class="et4-studing-right">
<!--                        <a href="" class="et4-studing-next">下一课时：电工类作业取证培训入门规范（二）</a>-->
                        <a :href="'/courseplay?id='+ csId" class="st-moni-buy-txt-p3-buy">继续学习</a>
                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="container" v-else>
                    <div class="row">
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                            <div class="st-moni-buy-body clearfix">
                                <div class="col-lg-4 col-md-5 col-sm-5 col-xs-12">
                                    <div class="st-moni-buy-img"
                                         v-if="classDetail.csPrice==0 || classDetail.csPrice=='0.00'">
                                        <img :src="classDetail.csPhoto" alt="">
                                        <span @click="bofang()" class="play-icon"></span>
                                    </div>
                                    <div class="st-moni-buy-img" v-else>
                                        <img :src="classDetail.csPhoto" alt="">
                                        <span @click="baoming()" class="play-icon"></span>
                                    </div>
                                </div>
                                <div class="col-lg-8 col-md-7 col-sm-7 col-xs-12">
                                    <div class="st-moni-buy-txt">
                                        <p class="st-moni-buy-txt-p1">{{classDetail.csName}}</p>
                                        <div class="st-moni-buy-txt-p4">
                                            <span class="st-span1"><a href="">{{classDetail.csStudylength}}</a></span>|
                                            <span class="st-span2"><i v-if="classDetail.studyNum==''">0</i><i v-else>{{classDetail.studyNum}}</i>人已学</span>
                                            <span class="st-span3">
                                    <i>评星：</i>
                                    <span id="star" class="top-star">
                                        <ul class="star_UL" sid="0">
                                             <li class="on" v-for="item in allxing" :key="item.cptId"><a
                                                     href="javascript:;"></a></li>
                                                <li v-for="(item2,index) in 5-allxing" :key="index"><a
                                                        href="javascript:;"></a></li>
                                        </ul>
                                    </span>
                                    <a v-if="judgeMent.totalCount==''">(0评价)</a>
                                    <a v-else>({{judgeMent.totalCount}}评价)</a></span>
                                            <span> <a href="javascript:;" @click="delcill()" v-if="collId=='1'" class="share-icon"><img
                                                    src="../../theme-chalk/src/images/class-detail-faving.png" alt=""></a>
                                            <a @click="addcill()" href="javascript:;" v-else class="share-icon"><img
                                                    src="../../theme-chalk/src/images/class-detail-fav.png" alt="">
                                            </a><a href="javascript:;">收藏({{favNum?favNum:0}})</a></span>
                                            <!--|-->
                                            <!--<span class="st-span5"><a href="">分享</a></span>-->
                                        </div>
                                        <p v-if="classDetail.csPrice==0 || classDetail.csPrice=='0.00'"
                                           class="st-moni-buy-txt-p5">免费学习</p>
                                        <p v-else class="st-moni-buy-txt-p5">¥{{classDetail.csPrice}}元</p>
                                        <p class="st-moni-buy-txt-p3">
                                            <a v-if="classDetail.csPrice==0 || classDetail.csPrice=='0.00'"
                                               @click="bofang()" class="st-moni-buy-txt-p3-buy">课程播放</a>
                                            <a v-else @click="baoming()" class="st-moni-buy-txt-p3-buy">加入学习</a>
<!--                                            <a-->
<!--                                                    href="" class="st-moni-buy-txt-p3-phone">去移动端学习</a>-->
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--课程详情-->
            <div class="et4-class">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-9 col-md-8 col-sm-12 col-xs-12">
                            <div class="et4-class-body">
                                <div class="et4-class-body-hd">
                                    <ul>
                                        <li @click="showck(0)" :class="{active:showId===0}">课程简介</li>
                                        <li @click="showck(1)" :class="{active:showId===1}">课程目录</li>
                                        <li v-if="judgeMent.totalCount==''" @click="showck(2)"
                                            :class="{active:showId==='2'}">
                                            课程评价(0)
                                        </li>
                                        <li v-else="" @click="showck(2)" :class="{active:showId===2}">
                                            课程评价({{judgeMent.totalCount}})
                                        </li>
                                    </ul>
                                </div>
                                <div class="et4-class-body-bd">
                                    <div class="et4-class-cont tab-louceng" v-show="showId===0">
                                        <p>{{classDetail.lylInfo}}</p>

                                    </div>
                                    <div class="et4-class-mulu tab-louceng" v-show="showId===1">
                                        <div class="nLi on" v-for="item in csDetailList" :key="item.cptId">
                                            <div class="et4-class-mulu-title">
                                                <!--<i>第{{item.cptLevel}}章</i>-->
                                                {{item.cptName}}<span
                                                    @click="parCivck(item)" :class="{on:!item.cptId}" class="nli-icon" ></span></div>
                                            <ul class="et4-class-mulu-ul" v-show="!item.cptId">
                                                <li v-for="(item1,index3) in item.childs" :key="index3">
                                                    <div class="mulu-pie" id="mulu-pie1"></div>
                                                    <a href="javascript:;">课时{{index3+1}}：{{item1.cptName}}</a>
                                                    <span  class="mulu-time">
                                                    <!--<i>28:56</i>/28:56-->
                                                </span>
                                                </li>
                                                <!-- <li><div class="mulu-pie" id="mulu-pie2"></div><a href="">课时1：电工类作业取证培训要求</a><span class="mulu-time"><i>28:56</i>/28:56</span></li>
                                                <li><div class="mulu-pie" id="mulu-pie3"></div><a href="">课时1：电工类作业取证培训要求</a><span class="mulu-time"><i>28:56</i>/28:56</span></li>
                                                <li><div class="mulu-pie" id="mulu-pie4"></div><a href="">课时1：电工类作业取证培训要求</a><span class="mulu-time mulu-time-un"><i>00:00</i>/28:56</span></li>
                                                <li><div class="mulu-pie" id="mulu-pie5"></div><a href="">课时1：电工类作业取证培训要求</a><span class="mulu-time mulu-time-un"><i>00:00</i>/28:56</span></li> -->
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="et4-class-pingjia tab-louceng" v-show="showId===2">
                                        <p class="et4-class-pingjia-tip"><span>发布您的评论</span>为维护健康文明的学习氛围，请不要发表具有谩骂、诽谤、广告、宣传等类的评论！
                                        </p>
                                        <span class="et4-class-pingjia-inp">
                                <textarea maxlength="200" name="" id="" cols="30" rows="4"
                                          placeholder="此处发表评论内容……（内容不超过200字）" v-model="comment"></textarea>
                                            <!-- <a href="">发布</a> -->
                            </span>
                                        <div class="BOX">
                                            <div id="star">
                                                <span class="stat-title">给课程打个分吧:</span>
                                                <ul class="star_UL" sid="0">
                                                    <el-rate v-model="xingNum" show-text></el-rate>
                                                </ul>
                                                <span class="star_result_span">
                                        <strong></strong>&nbsp;&nbsp;<a></a>
                                    </span>
                                            </div>
                                        </div>
                                        <span class="et4-class-pingjia-sub" style="text-align: right;">
                                <a @click="issueMent()">发布</a>
                            </span>
                                        <span class="et4-class-pingjia-title">全部评价（{{judgeMent.totalCount}}条）</span>
                                        <div class="pingjia-list" v-for="item in judgeMent.data" :key="item.cptId">
                                            <div class="pingjia-list-cont clearfix">
                                            <span class="pingjia-list-cont-left"><img :src="item.photo"
                                                                                      :onerror="default_img"
                                                                                      alt=""></span>
                                                <span class="pingjia-list-cont-right">
                                        <p class="pingjia-p1">
                                            <span style="color: #000;">{{item.createByName}}</span>
                                            <!--                                            <span>课程完成进度：8/15</span>-->
                                            <span>评价时间：{{item.cmtDate}}</span>
                                        </p>
                                        <div id="star">
                                            <ul class="star_UL" sid="0">
                                                <li class="on" v-for="item in item.starNum" :key="item.cptId"><a
                                                        href="javascript:;"></a></li>
                                                <li v-for="(item2,index) in 5-item.starNum" :key="index"><a
                                                        href="javascript:;"></a></li>
                                            </ul>
                                        </div>
                                        <p class="pingjia-p3">{{item.content}}</p>
                                    </span>
                                            </div>
                                        </div>
                                        <div class="pingjia-page">

                                            <el-pagination
                                                    background
                                                    layout="total, prev, pager, next"
                                                    @prev-click="prevClick"
                                                    @next-click="nextClick"
                                                    :page-size="5"
                                                    @current-change="sizeChange"
                                                    :total="judgeMent.totalCount"
                                            >
                                            </el-pagination>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-4 col-sm-12 col-xs-12 et4-class-right-body">
                            <div class="et4-class-right">
                                <div class="et4-class-right-title">授课老师</div>
                                <div class="et4-teacher-part clearfix" v-for="item in teachList.list" :key="item.etId">
                                    <span class="et4-teacher-part-left"><img :src="item.etPhoto" alt=""></span>
                                    <span class="et4-teacher-part-right">
                            <p class="et4-teacher-part-right-p1"><a href="">{{item.etName}}</a></p>
                            <p class="et4-teacher-part-right-p2">{{item.etKeywords}}</p>
                        </span>
                                </div>
                            </div>
                            <div class="et4-class-right">
                                <div class="et4-class-right-title">相关课程<span><a href="/courselist">更多</a></span></div>
                                <div class="et4-course-part" v-for="(item,index) in courseList" :key="index">
                                    <a :href="'/coursedetail?id='+item.csId"><img :src="item.csPhoto" alt="">
                                        <span>{{item.csName}}</span></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>


    <!--课程详情展示组件1结束-->
</template>

<script>
    //  import formMixin from '../../../src/mixins/formMixin';
    import {httpPost} from '../../../src/utils/utils';
    import lenye_base from 'lenye_base';
    import * as $ from 'fy-kit';
    import msg from '../../message';

    export default {
        name: 'ElCourseShowDetailPc1',
        created() {
            this.csId = $.util.urlParams('id')
        },
        data() {
            return {
                csId: '578ff528c291415d9c3fb3ad2dc304e9',//
                classDetail: [],//获取详情
                csLearn: [],//判断学员是否学习
                csDetailList: [],//获取章节列表
                parId: '',
                judgeMent: [],//获取评论
                //评论分页
                row: 5,
                pageSize: 1,

                collId: '',//是否收藏
                csteachInfo: [],//课程老师信息
                xingList: [],//评星
                //评论打分
                xingNum: null,
                comment: '',
                showId: '0',//切换卡

                docUrl: '', //头像
                default_img: 'this.src="' + require('../../theme-chalk/src/images/jslndx-footer-icon6.png') + '"',

                hotList: [],//互动数据-列表
                //代课老师列表
                teachList: {},
                groupName: 'group',//获取课程列表
                groupList: [],
                courseName: 'course',
                courseList: [],
                allxing: '',
                favNum: ''
                // session:{},


            }
        },
            mounted() {
                this.getDetail();//获取详情
                this.getMent();//获取评论
                this.getDetailList();//获取章节列表
                this.statList();
                if (lenye_base.user_data.getuserData() && lenye_base.user_data.getuserData() != 'undefined') {
                    // this.getxing();//评星
                    this.cillent();//是否收藏
                    this.getHotList();//判断用户登录是否为报名用户
                }
            },
            methods: {
                //获取详情

                getDetail()
                {
                    const that = this;
                    httpPost(
                        lenye_base.base_data.getapiUrl() +
                        '/course-service/common/crsCourse/queryById.do',
                        lenye_base.base_data.getformatting({
                            csId: that.csId
                        }),
                        function (data) {
                            that.classDetail = data.data;
                            // console.log(data)
                        }
                    );

                    //获取授课老师列表
                    httpPost(
                        lenye_base.base_data.getapiUrl() +
                        '/course-service/common/csrCourseTutorRel/queryListByCsId.do',
                        lenye_base.base_data.getformatting({
                            csId: that.csId
                        }),
                        function (data) {
                            that.teachList = data.data[0];
                        }
                    );
                    //总星
                    httpPost(
                        lenye_base.base_data.getapiUrl() +
                        '/interact-service/common/itaInteractionTimes/queryPage.do',
                        lenye_base.base_data.getformatting({
                            list: [{
                                objId: that.csId,
                                type: 'course'
                            }]
                        }),
                        function (data) {
                            that.allxing = Math.ceil(data.data[0].starAvgNum);
                        }
                    );
                    //课程推荐
                    httpPost(
                        lenye_base.base_data.getapiUrl() +
                        '/course-service/common/crsCourse/queryShowPage.do',
                        lenye_base.base_data.getformatting({
                            sites: lenye_base.site_data.getsiteData().siteId,
                            // csTjStatus:1,
                            rows: 2,
                            page: 1
                        }),
                        function (data) {
                            that.courseList = data.data;
                        }
                    );

                },

                //获取评论
                getMent()
                {
                    const that = this;
                    httpPost(
                        lenye_base.base_data.getapiUrl() +
                        '/interact-service/common/itaComment/queryPage.do',
                        lenye_base.base_data.getformatting({
                            objId: that.csId,
                            rows: that.row,
                            page: that.pageSize,
                            siteIds: lenye_base.site_data.getsiteData().siteId,
                            sorts: 'cmtDate=0',
                            type: 'course'

                        }),
                        function (data) {
                            that.judgeMent = data;
                        }
                    );
                },
                //统计
                statList()
                {
                    const that = this;
                    httpPost(
                        lenye_base.base_data.getapiUrl() +
                        '/interact-service/common/itaInteractionTimes/queryPage.do',
                        lenye_base.base_data.getformatting({
                            list: [{
                                objId: that.csId,
                                type: 'course'
                            }]
                        }),
                        function (data) {
                            that.statlist = data.data;
                            that.favNum = data.data[0].favNum;
                        }
                    );
                },
                //获取章节
                getDetailList()
                {
                    const that = this;
                    httpPost(
                        lenye_base.base_data.getapiUrl() +
                        '/course-service/common/crsChapter/treeList.do',
                        lenye_base.base_data.getformatting({
                            csId: that.csId
                        }),
                        function (data) {
                            that.csDetailList = data.data;
                        }
                    );
                    //获取当前章节
                    // httpPost(
                    //   lenye_base.base_data.getapiUrl() +
                    //   '/course-service/common/crsCustLearnCourse/queryUserCoursePage.do',
                    //   lenye_base.base_data.getformatting({
                    //     csId: that.csId
                    //   }),
                    //   function(data) {
                    //     that.getDetailList = data.data;
                    //   }
                    // );
                    //获取评星
                    // getxing() {
                    //   const that = this;
                    //   httpPost(
                    //     lenye_base.base_data.getapiUrl() +
                    //     '/interact-service/api2/inaGainStars/isStar.do',
                    //     lenye_base.base_data.getformatting({
                    //       csId: that.csId
                    //     }),
                    //     function(data) {
                    //       that.xingList = data;
                    //     }
                    //   );
                },
                //获取学员是否加入
                getHotList()
                {
                    const that = this;

                    httpPost(
                        lenye_base.base_data.getapiUrl() +
                        '/course-service/api2/crsCustLearnCourse/queryUserCoursePageById.do',
                        lenye_base.base_data.getformatting({
                            csId: that.csId
                        }),
                        function (data) {
                            that.csLearn = data.data;
                            console.log(data.data);
                        }
                    );
                },
                //判断是否收藏
                cillent()
                {
                    const that = this;
                    httpPost(
                        lenye_base.base_data.getapiUrl() +
                        '/interact-service/api2/itaCollection/isCollect.do',
                        lenye_base.base_data.getformatting({
                            collects: [
                                {type: 'course', objId: that.csId, custId: lenye_base.user_data.getuserData().custId}
                            ]
                        }),
                        function (data) {
                            that.collId = data.data[0].status;
                        }
                    );
                },
                //切换卡
                showck(sId) {
                    this.showId = sId;
                },
                //发布评价
                issueMent() {
                    const that = this;
                    if (that.comment == '') {
                        this.$message({
                            message: '请填写评论',
                            type: 'warning'
                        });
                    } else if (that.xingNum == '') {
                        this.$message({
                            message: '请勾选评价星星',
                            type: 'warning'
                        });
                    } else {
                        if (lenye_base.user_data.getuserData() && lenye_base.user_data.getuserData() != 'undefined') {
                            httpPost(
                                lenye_base.base_data.getapiUrl() +
                                '/interact-service/api2/itaComment/insert.do',
                                lenye_base.base_data.getformatting({
                                    objId: that.csId,
                                    starNum: that.xingNum,
                                    content: that.comment,
                                    userAuth: 1,
                                    type: 'course'
                                }),
                                function (data) {
                                    that.comment = '';
                                    that.starNum = '';
                                    that.getMent();

                                }
                            );

                        } else {
                            this.$message({
                                message: '登录之后才能发表评论',
                                type: 'warning'
                            });
                        }
                    }

                },
                prevClick(page)
                {
                    this.pageSize = page;
                    this.getMent();
                },
                nextClick(page)
                {
                    this.pageSize = page;
                    this.getMent();
                },
                sizeChange(page)
                {
                    this.pageSize = page;
                    this.getMent();
                },
                parCivck(item)
                {
                    item.cptId = !item.cptId;
                    // if (this.parId == id) {
                    //   // this.parId = '';
                    //
                    // } else {
                    //   this.parId = id;
                    // }
                    //   id = !id;
                },
                baoming()
                {
                    if (lenye_base.user_data.getuserData() && lenye_base.user_data.getuserData() != 'undefined') {
                        window.location.href = '/projectorderpay?id=' + this.csId + '&type=1';
                    } else {
                        msg.warning('请先登录');
                    }
                },
                bofang()
                {
                    // if (!lenye_base.user_data.getuserData()) {
                    window.location.href = '/courseplay?id=' + this.csId + '&type=1';
                    // }else {
                    //     msg.error("请先登录");
                    // }
                },
                //取消收藏
                delcill()
                {
                    const that = this;
                    httpPost(
                        lenye_base.base_data.getapiUrl() +
                        '/interact-service/api2/itaCollection/delete.do',
                        lenye_base.base_data.getformatting({
                            objId: that.csId,
                            type: 'course'
                        }),
                        function (data) {
                            if (data.success === '1') {
                                that.cillent();
                                that.statList()
                            }
                        }
                    );
                },
                //添加收藏
                addcill()
                {
                    if (lenye_base.user_data.getuserData() && lenye_base.user_data.getuserData() != 'undefined') {
                        const that = this;
                        httpPost(
                            lenye_base.base_data.getapiUrl() +
                            '/interact-service/api2/itaCollection/insert.do',
                            lenye_base.base_data.getformatting({
                                objId: that.csId,
                                type: 'course'
                            }),
                            function (data) {
                                if (data.success === '1') {
                                    that.cillent();
                                    that.statList();
                                }
                            }
                        );
                    } else {
                        msg.warning('请先登录');
                    }
                }

        }
    }
</script>
