//*
// 个人中心 我的预约
// */

import Loger from "../Loger";
import Ape from "./Ape";
import $ from "jquery";
import ClassDataProxy from "proxy/ClassDataProxy";
import ErrorApe from "./ErrorApe";
import MessageTypes from "../MessageTypes";

const classifyList = `<div class="courseMinuteListTimeTit" style="display: {_isShowTitle}">
                            <span class="courseMinuteListTime">{_liveTimer}</span>
                            <span class="courseMinuteListWire"></span>
                        </div>
                      <div class="classifyListMyCenter {_classifyListR}">
                            <div class="myCenterContentMask accessLearningBtn">
                                <button class="myCenterContentMaskBtn btnHover" data="{_meetingNumber}">进入学习</button>
                            </div>
                            <div class="myCenterContentMask cancelReservation">
                                <button class="myCenterContentMaskBtn btnHover" data="{_studentMeetingId}">取消预约</button>
                            </div>
                            <img class="myCenterContentListImg" src="{_msgImg}" alt="">
                            <p class="myCenterContentListTit">{_meetingName}</p>
                            <p class="myCenterContentListTit1">主讲人：{_create_user}</p>
                            <p class="myCenterContentMin">45min</p>
                            <span class="myCenterContentTimer">{_liveTimer}</span>
                        </div>`;

//学生端显示老师信息
const teacherInfoLeft = `<div class="teacherCorrelatedInfoBox">
                                <div class="teacherCorrelatedInfoLeft">
                                    <img class="teacherCorrelatedInfoImg" id="teacherCorrelatedInfoImg" src="images/u293.png" alt="">
                                    <div class="teacherCorrelatedInfo">
                                        <b class="teacherCorrelatedInfoName" id="teacherCorrelatedInfoName">{_teacherName}</b>
                                        <b class="teacherCorrelatedInfoMajor">北京市|少儿英语</b>
                                        <b class="teacherCorrelatedInfoCourse">课程:50</b>
                                        <span class="teacherCorrelatedInfoMajorMsg">毕业于外国语学院，专业8级</span>
                                        <p class="cancelReservationBtn"">取消预约</p>
                                    </div>
                                </div>
                                <div class="teacherCorrelatedInfoCenter">`;
const teacherInfoCenter= `<img class="teachercourseImg" data="{_id}" src="{_imgSrc}" alt="">`;
const teacherInfoRight = `</div> <div class="teacherCorrelatedInfoBtn" data="{_teacherName}" value="{_meetingId}">更多课程</div>
                        </div></div>`;

const teacherDetail = `<span class="teacherDetailCurriculumList">《{_detailList}》</span>`

let loger = Loger.getLoger('PC-MyBookingsApe');
class MyBookingsApe extends Ape {
    constructor() {
        super();
        this.dataList = {};
        this.teacherList = {};
        this.presentInd = 1;//点击翻页默认为第一页
        this.pageNo = 0;
        this.orderId = 0;
        this.addEvent();
        this.init();
    }

    init() {

        $('#subscribeList .liveInfoLeftLi').on('click',this._subscribeListHandler.bind(this));//课程 老师

        $('#studentMyCenterContentList').on('mouseenter','.classifyListMyCenter',this._mouseenter.bind(this));//个人中心移入进入课堂
        $('#studentMyCenterContentList').on('mouseleave','.classifyListMyCenter',this._mouseleave.bind(this));//个人中心移出进入课堂

        $('#courseMinuteList').on('mouseenter','.classifyListMyCenter',this._mouseenter.bind(this));//课程移入进入课堂
        $('#courseMinuteList').on('mouseleave','.classifyListMyCenter',this._mouseleave.bind(this));//课程移出进入课堂

        $('#teacherCorrelatedInfo').on('mouseenter','.classifyListMyCenter',this._cancelMouseenter.bind(this));//我的预约 课程移入显示取消预约
        $('#teacherCorrelatedInfo').on('mouseleave','.classifyListMyCenter',this._cancelMouseleave.bind(this));//我的预约 课程移出隐藏取消预约

        $('#studentMyCenterContentList').on('click','.accessLearningBtn',this._enterClassRoomHandler.bind(this));//我的预约进入课堂
        $('#courseMinuteList').on('click','.accessLearningBtn',this._enterClassRoomHandler.bind(this));//我的预约进入课堂

        $('#myCurriculumInfo').on('click','.teacherEnterClass',this._enterClassRoomHandler.bind(this));//我的课程进入课堂


        $('#teacherCorrelatedInfo').on('click','.teacherCorrelatedInfoBtn',this._teacherSubscribeMoveHandler.bind(this));//点击预约查看当前点击的更多信息

        $('#teacherCorrelatedInfo').on('click','.cancelReservation',this._cancelReservationBtn.bind(this));//取消预约
        $('#removeCancel').on('click',this._removeCancelHandler.bind(this));//取消预约 取消
        $('#removeConfirm').on('click',this._removeConfirmHandler.bind(this));//取消预约 确定

        $('#teacherCorrelatedInfo').on('click','.teachercourseImg',this._teacherClassDetails.bind(this));//点击进入老师课堂详情页

        $('#courseHomePage').on('click',this._homePageHandler.bind(this));//首页
        $('#courseUpPage').on('click',this._upPageHandler.bind(this));//上页
        $('#courseDownPage').on('click',this._downPageHandler.bind(this));//下页
        $('#courseEndPage').on('click',this._endPageHandler.bind(this));//尾页
        $('#courseSpecificPage').on('click',this._assignPageHandler.bind(this));//指定页

    }

    addEvent() {

    }
    //首页
    _homePageHandler(){
        this.presentInd = 1;
        this.studentBookings(this.presentInd);
    }
    //上页
    _upPageHandler(){
        if(this.presentInd > 1){
            this.presentInd--;
            this.studentBookings(this.presentInd);
        }
    }
    //下页
    _downPageHandler(){
        loger.log('点击下一页')
        if(this.presentInd < this.pageNo){
            this.presentInd++;
            this.studentBookings(this.presentInd);
        }
    }
    //尾页
    _endPageHandler(){
        this.presentInd = this.pageNo;
        this.studentBookings(this.presentInd);
    }
    //指定页
    _assignPageHandler(){
        let inputVal = $('#classHandlerPageInfoInput').val();
        if(parseInt(inputVal) <= this.pageNo || parseInt(inputVal) >= 1 ){
            this.studentBookings(parseInt(inputVal));
        }
    }
    //我的预约
    myBookingsMessage(){
        let subscribeList = $('#subscribeList');
        this._anewLoad(subscribeList)
        if(ClassDataProxy.userType == ClassDataProxy.USER_TYPE_8){
            this.studentBookings(1);
        }
    }
    _anewLoad(ele){
        ele.find('.liveInfoLeftLi').eq(0).addClass('liveInfoLeftLiCheck').siblings().removeClass('liveInfoLeftLiCheck')
    }
    studentBookings(ind){
        let that = this;
        let data = $('#subscribeList').find('.liveInfoLeftLiCheck').attr('data');
        if(parseInt(data) == 1){
            this._studentCurriculumInfo(32,ind,function(_data){
                that._studentSubscribeTeacher(_data.returnData.data)
            })
        }else{
            this._studentCurriculumInfo(12,ind,function(_data){
                if(_data){
                    that._studentSubscribe(_data.returnData.data)
                }
            })
        }
    }
    _studentSubscribe(_data){
        let teacherCorrelatedInfo = $('#teacherCorrelatedInfo');
        teacherCorrelatedInfo.empty();
        if(_data){

          //  let count = _data.count;
          //  let page = _data.page;
           // let pageno = _data.pageno;
          //  let pagenum = Math.ceil(count / pageno);
            //let _dataList = _data.meetingInfo;
        //    this.pageNo = pagenum;

            $('#coursePageBox').hide();
            for(let i = 0;i<_data.length;i++){
                if(_data[i]){
                    let j = (i%4)==3;
                    let _classifyList = this._format(classifyList,{
                        _classifyListR : j?'classifyListR':'',
                        _isShowTitle : 'none',
                        _meetingNumber : _data[i].meetingNumber,
                        _msgImg : '../images/u373.png',
                        _meetingName : _data[i].meeting_name,
                        _create_user : _data[i].teacherName,
                        _liveTimer : _data[i].meetingBeginTime.split(' ')[0],
                        _studentMeetingId : _data[i].studentMeetingId
                    })
                    teacherCorrelatedInfo.append(_classifyList)

                }else{
                    console.error('_gainClassData没数据')
                }
            }
        }


    }
    _studentSubscribeTeacher(_data){
        let teacherCorrelatedInfo = $('#teacherCorrelatedInfo');
        teacherCorrelatedInfo.empty();
        if(_data){
            this.teacherList={};
            for(let i = 0;i<_data.length;i++){
                let item=_data[i];
                if(item){
                    let temp = item.teacherName;
                    if(!this.teacherList[temp]) {
                        this.teacherList[temp] = [];
                    }
                    this.teacherList[temp].push(item)
                }
            }
            for( let key in this.teacherList){
                let teacherInfo = ''
                let arrList = this.teacherList[key];
                teacherInfo = this._format(teacherInfoLeft,{
                    _teacherName : key
                })
                for(let n = 0;n<arrList.length;n++){
                    if(n<2){
                        teacherInfo += this._format(teacherInfoCenter,{
                            _imgSrc : 'images/u374.png',
                            _id : arrList[n].teacherName
                        })
                    }
                }
                teacherInfo += this._format(teacherInfoRight,{
                    _teacherName : key,
                    _meetingId :arrList[0].meetingId
                })
                teacherCorrelatedInfo.append(teacherInfo)
            }
        }
    }
    _cancelReservationBtn(evt){
        let _id = $(evt.target).attr('data');
        this.orderId = _id;
        ClassDataProxy.getMarginTopHandler($('#removeHandler'));
        $("#removeHandlerBox").show();
        $('#removeHandlerContent').html('确定要取消预约吗？');
    }
    _removeCancelHandler(){
        this._hideRemoveBox();
    }
    _removeConfirmHandler(){
       this._cancelSubscribeHandler(this.orderId);
        this._hideRemoveBox();
    }
    _hideRemoveBox(){
        $("#removeHandlerBox").hide();
        $('#removeHandlerContent').html('');
    }
    //取消预约
    _cancelSubscribeHandler(_id){

        let _url = ClassDataProxy.locationProtocol + ClassDataProxy.locationProt + '/studentMeeting/updateStudentMeetingBySite/'+_id;
        let that = this;
        $.ajax({
            type: "PUT",
            url: _url,
            timeout:5000,
            headers: {
                siteId:ClassDataProxy.siteId,
                'token':ClassDataProxy.token
            },
            data:{status:'5'},
            success:function(_data){
                //获取课堂数据
                if(_data && _data.code == 200){
                    that.studentBookings();
                }
            },
            error:function(error){
                console.log(error,'失败')
            }
        })

    }
    //点击老师预约显示 老师详细
    _teacherClassDetails(evt){
        let name = $(evt.target).attr('data');
        let ind = $(evt.target).index();
        let _data = this.teacherList[name][ind]

        $('#lanclassBox').show();
        $('#myCenterBox').hide();

        $('#lanclassContentTitle').html(_data.meeting_name);
        $('#lanclassContentInfoName').html(_data.teacherName);
        $('#lanclassContentInfoTimeStart').html('开始时间：'+_data.meetingBeginTime);
        $('#lanclassContentInfoTimeEnd').html('结束时间：'+_data.meetingEndTime);
    }
    _teacherSubscribeMoveHandler(evt){
        let _id = $(evt.target).attr('value');
        $('#teacherDetailBox').attr('data',_id);
        $('#teacherDetailBox').show();
        $('#myCenterBox').hide();

      /*  let buttonIsCheck = $('#orderBtn').attr('value','0');
        if($('#orderBtn').attr('value') == '0'){
            $('#orderBtn').attr('disabled',false)
            $('#orderBtn').css('background','#ccc')
        }*/

        let teacherDetailCurriculum = $('#teacherDetailCurriculum');
        teacherDetailCurriculum.empty();

        let _data = $(evt.target).attr('data');
        if(_data){
            let _dataList = this.teacherList[_data];
            $('#teacherDetailInfoDetailName').html(_dataList[0].teacherName);
            for(let i = 0;i<_dataList.length;i++){
                let _teacherDetail = this._format(teacherDetail,{
                    _detailList : _dataList[i].meeting_name
                })
                teacherDetailCurriculum.append(_teacherDetail)
            }
        }
    }
    //切换类的公用样式
    commonality(evt){
        $(evt.currentTarget).addClass('liveInfoLeftLiCheck').siblings().removeClass('liveInfoLeftLiCheck');
    }
    _subscribeListHandler(evt){
        this.commonality(evt);
        this.studentBookings();
    }
    _cancelMouseenter(evt){
        $(evt.currentTarget).find('.cancelReservation').show();
    }
    _cancelMouseleave(evt){
        $(evt.currentTarget).find('.cancelReservation').hide();
    }
    _mouseenter(evt){
        $(evt.currentTarget).find('.accessLearningBtn').show();
    }
    _mouseleave(evt){
        $(evt.currentTarget).find('.accessLearningBtn').hide();
    }
    _enterClassRoomHandler(evt){
        let ind = $(evt.target).attr('data');
        window.open('http://networkshool.xuedianyun.com/3m/attend.do?meetingNumber=' + ind);
    }
    _studentCurriculumInfo(num,ind,callback){
        let _url = ClassDataProxy.locationProtocol + ClassDataProxy.locationProt + '/studentMeeting/getStudentMeetingByStudentId/'+ClassDataProxy.id;
        let that = this;
        $.ajax({
            type: "GET",
            url: _url,
            timeout:5000,
            headers: {siteId:ClassDataProxy.siteId,pageno:num,page:ind,id:ClassDataProxy.id,
                'token':ClassDataProxy.token},
            success:function(_data){
             //   loger.log('预约信息斯柯达开始',_data)
                //获取我的课程数据
                if(_data && _data.code == 200){
                    if(callback){
                        callback(_data);
                    }
                }else{
                    if(callback){
                        callback(null);
                    }
                }
            },
            error:function(error){
                //alert('直播数据获取失败')
                if(callback){
                    callback(null);
                }
                loger.log(error,'直播数据获取失败')
            }
        })
    }
    //工具类
    _format(str, obj) {
        return str.replace(/\{(\w+)\}/g, function (match, group, index) {
            return obj[group];
        });
    };
}
export default MyBookingsApe;