<template>
    <div class="live_show_detail_pc_1">
        <div class="st-moni-buy">
            <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="cslDetail.lylPhoto" alt="">
                                    <span v-show="cslDetail.payType==1" class="play-icon"><a href="javascript:;" @click="baoming()"></a></span>
                                    <span v-if="lylRealStatus=='1' && cslDetail.lylLiveStatus=='1'" class="play-icon"><a href="javascript:;" @click="look(lylId,lylRealStatus)"></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">{{cslDetail.lylName}}</p>
                                    <div class="st-moni-buy-txt-p4">
                                        <span class="st-span2"><i>{{cslDetail.lylSignupNum}}人</i>购买</span>|
<!--                                        <span class="st-span2">好评度<i>90%</i></span>|-->
                                        <a @click="delcill()" v-if="collId==1" class="share-icon"><img src="../../theme-chalk/src/images/class-detail-faving.png" alt=""></a>
                                        <a @click="addcill()" v-else class="share-icon"><img src="../../theme-chalk/src/images/class-detail-fav.png" alt=""></a>
                                        <a v-if="favNum==''">收藏(0)</a>
                                        <a v-else>收藏({{favNum}})</a>
                                        <span class="st-span2">直播时间：<i>{{cslDetail.lylStartDate}}至{{cslDetail.lylEndDate}}</i></span>
                                    </div>
                                    <p class="st-moni-buy-txt-p5" v-show="cslDetail.payType==1">¥{{cslDetail.price}}元</p>
                                    <p class="st-moni-buy-txt-p3" v-if="csuser!='' || cslDetail.payType==0">
                                        <a v-if="lylRealStatus==3" @click="look(lylId,lylRealStatus)"
                                           class="st-moni-buy-txt-p3-buy">直播回放</a>
                                        <a v-if="lylRealStatus=='1' && cslDetail.lylLiveStatus=='1'" @click="look(lylId,lylRealStatus)"
                                                                                                          class="st-moni-buy-txt-p3-buy">立即观看</a>

                                    </p>
                                    <p class="st-moni-buy-txt-p3" v-else><a @click="baoming()"
                                                                                                   class="st-moni-buy-txt-p3-buy">立即购买</a>
                                    </p>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--课程详情-->
        <div class="et4-class">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div class="et4-class-body">
                            <div class="et4-class-body-hd">
                                <ul>
                                    <li @click="clvClick(0)" :class="{active:cslShow===0}">直播介绍</li>
                                    <li @click="clvClick(1)" :class="{active:cslShow===1}">讲师介绍</li>
                                    <li @click="clvClick(2)" :class="{active:cslShow===2}">
                                        直播评价({{pinglist.totalCount}})
                                    </li>
                                </ul>
                            </div>
                            <div class="et4-class-body-bd">
                                <div class="et4-class-cont tab-louceng" v-show="cslShow===0">
                                    <p>{{cslDetail.lylInfo}}</p>
                                </div>
                                <!-- <div class="et4-class-teacherinfo tab-louceng" v-show="cslShow===1" >
                                    <div class="row">
                                       <div class="col-lg-3 col-md-3 col-sm-4 col-xs-5">
                                          <img class="teacher-pic" :src="cslTeach.list.etPhoto" alt="">
                                       </div>
                                       <div class="col-lg-9 col-md-9 col-sm-8 col-xs-7">
                                          <span class="sp1">{{cslTeach.list.etName}}<i>{{cslTeach.list.etKeywords}}</i></span>
                                          <p class="p2">{{cslTeach.list.etContent}}</p>
                                       </div>
                                    </div>
                                </div> -->
                                <div class="et4-class-pingjia tab-louceng" v-show="cslShow===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">全部评价（{{pinglist.totalCount}}条）</span>
                                    <div class="pingjia-list">
                                        <div class="pingjia-list-cont clearfix" v-for="(item,index) in pinglist.data"
                                             :key="index">
                                            <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">
                                        <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="pinglist.totalCount"
                                            >
                                            </el-pagination>
                                        </div>
                                    </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';
    import * as $ from 'fy-kit';
    import msg from "../../message";

    export default {
        name: 'ElLiveShowDetailPc1',
        created() {
            this.lylId = $.util.urlParams('id')
            this.lylRealStatus = $.util.urlParams('lylRealStatus')
        },

        data() {
            return {
                lylId: 'fe050c2a7a034adeb1a4b3066a3216cc',
                cslDetail: [],//详情
                cslShow: 0,//分类显示隐藏
                lylRealStatus:'3',//状态

                cslTeach: [],//课程老师信息
                pinglist: [],//评论列表
                //评论分页
                row: 5,
                pageSize: 1,
                //评论打分
                xingNum: null,
                comment: '',
                //收藏
                collId:'',

                docUrl: "", //头像
                default_img: 'this.src="' + require("../../theme-chalk/src/images/jslndx-footer-icon6.png") + '"',
                favNum:'',
                csuser:'',
            }
        },
        mounted() {
            this.lylId = lenye_base.getUrlParam('id');

                this.getDetail();
                this.getMent();
                this.statList();
                if (lenye_base.user_data.getuserData() && lenye_base.user_data.getuserData()!='undefined') {
                    this.cillent();
                    this.isuser();

            }

        },
        methods: {
            //获取直播详情
            getDetail() {
                const that = this;
                httpPost(
                    lenye_base.base_data.getapiUrl() +
                    "/learnyeai-live-service/common/lylLive/queryById.do",
                    lenye_base.base_data.getformatting({
                        lylId: that.lylId
                    }),
                    function (data) {
                        that.cslDetail = data.data
                        console.log(data)
                    }
                )
                //获取分类详情
                httpPost(
                    lenye_base.base_data.getapiUrl() +
                    "/learnyeai-live-service/common/lylLive/queryById.do",
                    lenye_base.base_data.getformatting({
                        lylId: that.lylId
                    }),
                    function (data) {
                        that.cslDetail = data.data
                        console.log(data)
                    }
                )
                //获取评论列表

            },
            //获取回放详情
            getoldDetail(){

            },
            getMent() {
                const that = this;
                httpPost(
                    lenye_base.base_data.getapiUrl() +
                    "/interact-service/common/itaComment/queryPage.do",
                    lenye_base.base_data.getformatting({
                        objId: that.lylId,
                        type: 'arve',
                        rows: that.row,
                        siteIds: lenye_base.site_data.getsiteData().siteId,
                        page: that.pageSize,
                        sorts: "cmtDate=0"
                    }),
                    function (data) {
                        that.pinglist = data
                        console.log(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.lylId,
                            type:'live',}]
                    }),
                    function (data) {
                        that.statlist = data.data
                        that.favNum =data.data[0].favNum
                    }
                )
            },
            //判断用户是否报名
            isuser(){
                const that = this;
                httpPost(
                    lenye_base.base_data.getapiUrl() +
                    "/learnyeai-live-service/api2/lylUserLive/queryUserByLylId.do",
                    lenye_base.base_data.getformatting({
                        userlylId: that.lylId
                    }),
                    function (data) {
                        that.csuser = 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:'live',objId: that.lylId},
                        ]
                    }),
                    function (data) {
                        that.collId = data.data[0].status
                    }
                )
            },

            clvClick(sId) {
                this.cslShow = 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.lylId,
                                starNum: that.xingNum,
                                content: that.comment,
                                userAuth: 1,
                                type: 'arve',
                            }),
                            function (data) {
                                that.comment='';
                                that.starNum=0;
                                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()
            },
            baoming(){
                if (lenye_base.user_data.getuserData() && lenye_base.user_data.getuserData()!='undefined') {
                    window.location.href='/projectorderpay?id='+this.lylId+'&type=5';
                }else {
                    msg.warning("请先登录");
                }
            },
            delcill(){
                const that = this;
                httpPost(
                    lenye_base.base_data.getapiUrl() +
                    "/interact-service/api2/itaCollection/delete.do",
                    lenye_base.base_data.getformatting({
                        objId: that.lylId,
                        type:'live ',
                    }),
                    function (data) {
                        if(data.success === '1'){
                            that.cillent();
                            // that.getall()
                        }
                    }
                )
            },
            look(id,lylRealStatus){
                if (lenye_base.user_data.getuserData() && lenye_base.user_data.getuserData()!='undefined') {
                    window.location.href='/livestudio?id='+id+'&lylRealStatus='+lylRealStatus
                }else {
                    msg.warning("请先登录");
                }

            },
            addcill(){
                console.log(lenye_base.user_data.getuserData())
                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.lylId,
                            type:'live ',
                        }),
                        function (data) {
                            if(data.success === '1'){
                                that.cillent();
                                // that.getall()
                            }
                        }
                    )
                }else {
                    msg.warning("请先登录");
                }
            }

        },
    };
</script>
