<template>
    <!--班级报名详情展示1开始-->
    <div class="classreg_show_detail_pc_1">
        <div class="container">
            <div class="row">

                <div class="col-lg-6 col-md-5 col-xs-12 col-sm-12">
          <span class="class-detail-pic"
          ><img :src="cslDetail.czPhoto" alt=""
          /></span>
                </div>
                <div class="col-lg-6 col-md-7 col-xs-12 col-sm-12">
                    <div class="class-detail-info">
            <span class="title">
            {{ cslDetail.czName }}
<!--                <div class="new_sharebtnbox" data-tag="share">-->
<!--     <a class="new_box new_wechat" data-cmd="wechat"></a>-->
<!--     <a class="new_box new_weibo " data-cmd="weibo"></a>-->
<!--     <a class="new_box new_qq" data-cmd="qzone"></a>-->
<!-- </div>-->

              <span class="twobtn">
                <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><!--class名改成faving-icon 为已收藏样式 -->
<!--                <a @click="showqs()" class="share-icon"-->
<!--                ><img-->
<!--                        src="../../theme-chalk/src/images/class-detail-share.png"-->
<!--                        alt=""-->
<!--                /></a>-->
<!--                <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>-->
                  <!--class名改成faving-icon 为已收藏样式 -->
                <!--<a href="" class="share-icon"><img src="../../theme-chalk/src/images/class-detail-share.png"-->
                                                   <!--alt=""/></a>-->
              </span>
<!--                        <div class="qrcode" v-show="qrcodeShow" ref="qrCodeUrl">-->
<!--                            打开手机扫一扫-->
<!--                        </div>-->
            </span>
                        <ul class="detail-ul clearfix">
                            <li>
                                <span>培训时间：</span>{{ cslDetail.czEndDate | formatDate}}-{{
                                cslDetail.czEndDate | formatDate
                                }}
                            </li>
                            <li><span>培训地点：</span>{{ cslDetail.czAdress }}</li>
                            <li class="half-width">
                <span>培训方式：</span
                >
                                <block v-if="cslDetail.czTrainingType == 1">线上培训
                                </block
                                >
                                <block v-else-if="cslDetail.czTrainingType == 2"
                                >线下培训
                                </block
                                >
                            </li>
                            <li class="half-width" v-if="cslDetail.czChargeMode == 1">
                                <span>培训费用：</span> <a class="money">免费学习</a>
                            </li>
                            <li class="half-width" v-else>
                                <span>培训费用：</span> <a class="money">{{ cslDetail.czTrainingFee}}元</a>
                            </li>

                            <li class="half-width">
                                <span>培训导师：</span>{{ cslDetail.czMasterTrainer }}
                            </li>
                            <li class="half-width">
                                <span>辅导老师：</span>{{ cslDetail.czSecondaryTrainer }}
                            </li>
                        </ul>
                        <div class="detail-tongji">
                            <span class="sp1">已报名人数：{{ cslDetail.czJoinupNum }}</span>
                            <span class="sp2">收藏人数：{{favNum}}</span>
                        </div>
                        <!--                        && cslDetail.czStatus=='进行中'-->
                        <span class="detail-btn" v-if="normal ==1">
              <a style="background-color: #0271b6">已报名</a>
            </span>
                        <span class="detail-btn" v-else-if="statusid=='0'">
            </span>
                        <span class="detail-btn" v-else>
              <a @click="baoming()">报名</a>
            </span>

                    </div>
                </div>
            </div>
        </div>
        <!--tab页-->
        <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="clvClick(0)" :class="{ active: cslShow === 0 }">
                                        班级简介
                                    </li>
                                    <li @click="clvClick(1)" :class="{ active: cslShow === 1 }">
                                        班级同学
                                    </li>
                                    <li @click="clvClick(2)" :class="{ active: cslShow === 2 }">
                                        相关课程({{ claList.totalCount }})
                                    </li>
                                </ul>
                            </div>
                            <div class="et4-class-body-bd">
                                <div class="et4-class-cont" v-show="cslShow === 0">
                                    <p>{{ cslDetail.czInfo }}</p>
                                </div>
                                <div class="et4-classmate" v-show="cslShow === 1">
                                    <ul class="et4-classmate-ul clearfix">
                                        <li v-for="item in stuList" :key="item.itemcustId">
                                            <img
                                                    :src="item.photo"
                                                    :onerror="default_img"
                                                    alt=""
                                            />{{ item.custNickname }}
                                        </li>
                                    </ul>
                                    <div class="pingjia-page">
                                        <el-pagination
                                                background
                                                layout="total, prev, pager, next"
                                                @prev-click="prevClick"
                                                :page-size="peorows"
                                                @next-click="nextClick"
                                                :total="stuList.totalCount"
                                        >
                                        </el-pagination>
                                    </div>
                                </div>
                                <div class="et4-classaround" v-show="cslShow === 2">
                                    <div class="row">
                                        <div
                                                class="col-lg-4 col-md-6 col-sm-6 col-xs-12"
                                                v-for="(item, index) in claList.data"
                                                :key="index"
                                        >
                                            <!--循环-->
                                            <div class="et4-classaround-list">
                        <span class="sp1">
                          <img :src="item.csPhoto" alt=""/>
                          <span class="class-pic-hover">
<!--                              浏览：121<br/>点赞：230<br/>点评：98-->
                              浏览：{{item.coulist.browseNum?item.coulist.browseNum:0}}
                              <br/>收藏：{{item.coulist.favNum?item.coulist.favNum:0}}
                          </span>
                        </span>
                                                <span class="sp2"
                                                ><a :href="'/classregdetail?id='+item.czId">{{ item.csName }}</a></span
                                                >
                                                <span class="sp3">
                          学习进度
                          <span class="sp3-jdt"
                          ><span
                                  :style="{ width: item.csStudylength + '%' }"
                          ></span
                          ></span>
                          {{ item.csStudylength }}%
                        </span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="pingjia-page">
                                        <el-pagination
                                                background
                                                layout="total, prev, pager, next"
                                                @prev-click="prevclv"
                                                @next-click="nextclv"
                                                :total="claList.totalCount"
                                                :page-size="clarow"
                                        >
                                        </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">-->
<!--                <span class="et4-teacher-part-left"-->
<!--                ><img src="../../theme-chalk/src/images/teacher01.jpg" alt=""-->
<!--                /></span>-->
<!--                                <span class="et4-teacher-part-right">-->
<!--                  <p class="et4-teacher-part-right-p1">-->
<!--                    <a href="">何向前</a>报名了该班级-->
<!--                  </p>-->
<!--                  <p class="et4-teacher-part-right-p2">2020/10/10 15:36:25</p>-->
<!--                </span>-->
<!--                            </div>-->
<!--                            <div class="et4-teacher-part clearfix">-->
<!--                <span class="et4-teacher-part-left"-->
<!--                ><img src="../../theme-chalk/src/images/teacher01.jpg" alt=""-->
<!--                /></span>-->
<!--                                <span class="et4-teacher-part-right">-->
<!--                  <p class="et4-teacher-part-right-p1">-->
<!--                    <a href="">何向前</a>收藏了该班级-->
<!--                  </p>-->
<!--                  <p class="et4-teacher-part-right-p2">2020/10/10 15:36:25</p>-->
<!--                </span>-->
<!--                            </div>-->
<!--                        </div>-->
                        <div class="et4-class-right">
                            <div class="et4-class-right-title">
                                最新班级<span><a href="/classreglist">更多</a></span>
                            </div>
                            <div
                                    class="et4-course-part"
                                    v-for="item in learnList"
                                    :key="item.czId"
                            >
                                <a :href="'/classregdetail?id='+item.czId"
                                ><img :src="item.czPhoto" alt=""/>
                                    <span>{{ item.czName }}</span></a
                                >
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--班级报名详情展示1结束-->
</template>
<style>
    .qrcode{
        position: absolute;
        left: 80%;
    }
</style>
<script>
    import * as $ from 'fy-kit';
    import msg from '../../message';
    // import QRCode from 'qrcodejs2';
    import {httpPost} from '../../../src/utils/utils';
    import lenye_base from 'lenye_base';


    export default {
        name: 'ElClassregShowDetailPc1',
        created() {
            this.czId = $.util.urlParams('id')
        },
        filters: {
            formatDate: function (value) {
                if (value == '' || value == 'undefined') {
                    return '';
                }
                // var datavalue = value.replace(/\-/g, '/');
                let date = new Date(value);
                let y = date.getFullYear();
                let MM = date.getMonth() + 1;
                MM = MM < 10 ? ('0' + MM) : MM;
                let d = date.getDate();
                d = d < 10 ? ('0' + d) : d;
                let h = date.getHours();
                h = h < 10 ? ('0' + h) : h;
                let m = date.getMinutes();
                m = m < 10 ? ('0' + m) : m;
                // let s = date.getSeconds();
                // s = s < 10 ? ('0' + s) : s;
                return y + '年' + MM + '月' + d + '日 ' + h + ":" + m;
            },
        },
        data() {
            return {
                cslDetail: [], //详情
                czId: "2a8dd2c84aaf4fe1beeb77df44dda879",//
                cslShow: 0, //分类显示隐藏
                status: {},
                normal: '',
                statusid: '',
                stuList: [], //全体学员
                docUrl: '', //头像
                default_img:
                    'this.src="' +
                    require('../../theme-chalk/src/images/jslndx-footer-icon6.png') +
                    '"',
                //学员分页
                peorows: 12,
                peopage: 1,
                //获取课程分页
                claList: [],
                clarow: 3,
                clapage: 1,
                //班级列表
                learnList: [],
                //收藏
                collId:'',
                statlist:[],
                favNum:'',
                coulist:[],
                // //二维码
                // collId: '',
                // statlist: [],
                // favNum: '',
                // coulist: []

            };
        },
        mounted() {
            // this.creatQrCode();
            this.getDetail();
            this.statList();
            this.getclapage();
            if (lenye_base.user_data.getuserData() && lenye_base.user_data.getuserData() != 'undefined') {
                this.getPeopage();
                this.cillent();
            } else {
                return;
            }
        },
        methods: {
            // creatQrCode() {
            //     var qrcode = new QRCode(this.$refs.qrCodeUrl, {
            //         text: 'xxxx', // 需要转换为二维码的内容
            //         width: 100,
            //         height: 100,
            //         colorDark: '#000000',
            //         colorLight: '#ffffff',
            //         correctLevel: QRCode.CorrectLevel.H
            //     })
            // },
            //获取课程详情
            getDetail() {
                const that = this;
                httpPost(
                    lenye_base.base_data.getapiUrl() +
                    '/schoolclass-service/common/clzClazz/queryById.do',
                    lenye_base.base_data.getformatting({
                        czId: that.czId
                    }),
                    function (data) {
                        that.cslDetail = data.data;
                    }
                );

                //班级列表

                httpPost(
                    lenye_base.base_data.getapiUrl() +
                    '/schoolclass-service/common/clzClazz/queryPageUse.do',
                    lenye_base.base_data.getformatting({
                        czId: that.czId,
                        rows: 2
                    }),
                    function (data) {
                        that.learnList = data.data;
                    }
                );
                //获取全体学员
                httpPost(
                    lenye_base.base_data.getapiUrl() +
                    '/schoolclass-service/common/clzStudentClazz/queryShowPage.do',
                    lenye_base.base_data.getformatting({
                        czId: that.czId,
                        rows: that.peorows,
                        page: that.page
                    }),
                    function (data) {
                        that.stuList = data.data;
                    }
                );
            },

            getPeopage() {
                //是否可以报名
                const that = this;
                httpPost(
                    lenye_base.base_data.getapiUrl() +
                    '/schoolclass-service/api2/clzStudentClazz/signuped.do',
                    lenye_base.base_data.getformatting({
                        custId: lenye_base.user_data.getuserData().custId,
                        czId: that.czId
                    }),
                    function (data) {
                        if (data.success == '1') {
                            that.normal = data.data[0].normal;
                        } else {
                            msg.error(data.message);
                        }

                    }
                );
            },
            //是否收藏
            cillent() {
                const that = this;
                httpPost(
                    lenye_base.base_data.getapiUrl() +
                    '/interact-service/api2/itaCollection/isCollect.do',
                    lenye_base.base_data.getformatting({
                        collects: [
                            {type: 'group', objId: that.czId, custId: lenye_base.user_data.getuserData().custId}
                        ]
                    }),
                    function (data) {
                        that.collId = data.data[0].status;
                    }
                );
            },
            //统计互动
            statList() {
                const that = this;
                httpPost(
                    lenye_base.base_data.getapiUrl() +
                    '/interact-service/common/itaInteractionTimes/queryPage.do',
                    lenye_base.base_data.getformatting({
                        list: [{
                            objId: that.czId,
                            type: 'group'
                        }]
                    }),
                    function (data) {
                        that.statlist = data.data;
                        that.favNum = data.data[0].favNum;
                    }
                );
            },
            //获取课程分页
            getclapage() {
                const that = this;
                httpPost(
                    lenye_base.base_data.getapiUrl() +
                    '/schoolclass-service/common/clzClazzCourse/queryShowPage.do',
                    lenye_base.base_data.getformatting({
                        czId: that.czId,
                        rows: that.clarow,
                        page: that.clapage
                    }),
                    function (data) {
                        // console.log(data.data.length)
                        for (let i = 0; i < data.data.length; i++) {
                            httpPost(
                                lenye_base.base_data.getapiUrl() +
                                '/interact-service/common/itaInteractionTimes/queryPage.do',
                                lenye_base.base_data.getformatting({
                                    list: [{
                                        objId: data.data[i].czId,
                                        type: 'group'
                                    }]
                                }),
                                function (e) {
                                    // that.coulist = e.data;
                                    data.data[i].coulist = e.data[0];
                                }
                            );
                        }
                        setTimeout(function () {
                            that.claList = data;
                        }, 1000);

                    }
                );
            },

            clvClick(sId) {
                this.cslShow = sId;
            },
            prevClick(page) {
                this.peopage = page;
                this.getPeopage();
            },
            nextClick(page) {
                this.peopage = page;
                this.getPeopage();
            },
            prevclv(page) {
                this.clapage = page;
                this.getclapage();
            },
            nextclv(page) {
                this.clapage = page;
                this.getclapage();
            },
            baoming() {
                if (lenye_base.user_data.getuserData() && lenye_base.user_data.getuserData() != 'undefined') {
                    window.location.href = '/projectorderpay?id=' + this.czId + '&type=0';
                } 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.czId,
                        type: 'group'
                    }),
                    function (data) {
                        if (data.success === '1') {
                            that.cillent();
                        }
                    }
                );
            },
            //添加收藏
            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.czId,
                            type: 'group'
                        }),
                        function (data) {
                            if (data.success === '1') {
                                that.cillent();
                            }
                        }
                    );
                } else {
                    msg.warning('请先登录');
                }
            },
            tuijian(id) {
                this.czId = id;
                this.getDetail();
            },
            // showqs() {
            //     this.qrcodeShow = !this.qrcodeShow
            //     const that = this;
            //     httpPost(
            //         lenye_base.base_data.getapiUrl() +
            //         "/interact-service/api/itaShare/save.do",
            //         lenye_base.base_data.getformatting({
            //             objId: that.czId,
            //             serviceType: 'group',
            //         }),
            //         function (data) {
            //             if (data.success === '1') {
            //                 console.log(data)
            //             }
            //         }
            //     )
            //
            //
            // }
        }
    }
</script>
