//*
// 答题卡模块
// */

import Loger from "../Loger";
import Ape from "./Ape";
import xdysdk from "libs/xdysdk";
import ClassDataProxy from "proxy/ClassDataProxy";
import $ from "jquery";
let loger = Loger.getLoger('PC-AnswerApe');

const newAnswerInput = `<li class="themeTrendsLi">
                             <input type="text" class="themeVal" value="输入答案" maxlength="26">
                             <span>&times;</span>
                           </li>`;
const newAnswerP = `<li class="themeTrendsLi">
                             <p></p>
                             <span>&times;</span>
                           </li>`;
const newList = `<li class="resultValueList">
                        <input type="radio" name="result" value="{value}" data-val="{index}">{value}
                    </li>`;
const newResultList = `<li class="resultList">
                              <b>{ele}</b>
                              <span>{_ratio}%</span>
                              <p class="staticPlan"></p>
                              <p class="dynamicPlan dynamicPlan{index}"></p>
                         </li>`;

class AnswerApe extends Ape {
    constructor () {
        super();
        this._questionObject = {};//问题 对象
        this._isErrer = false;//自定义题目的时候用来判断是不是输入值
        this._showPage = false;//判断当前页面是不是终止状态
        this._maxLen = 6;//题目最大长度
        this._minLen = 2;//input最小长度
        this._minLen1 = 1;//其他题目最小长度
        this._countNum = 0;//控制题目长度，默认为0
        this._brevity = []
        this.timerList = [0,30,60,120,180,300]; //选择答题倒计时
        this.isCancel = false;//控制学生端是否显示
        this.isHide = false;//控制老师端是否显示
        this.addEvent();
        this.init();
    }

    init() {

        $('.slelctShow').on("click", this._slelctShowHandler.bind(this));//点击显示答题倒计时
        $('.answer').on("click", this._answerHandler.bind(this));//点击弹出答题卡
        $(".themeHeadline .iconfont").on("click", this._closeAnswerHandler.bind(this));//关闭答题卡/最小化
        $('.themeUl').on("click",'li',this._answerLiHandler.bind(this));//选择答题计时时间
        $('.themeList').on('mouseenter',this._mouseenterAnswer.bind(this));//移入题目项显示发布按钮
        $('.themeList').on('mouseleave',this._mouseleaveAnswer.bind(this));//移出题目项移除发布按钮
        $('.themeTrendsUl').on('mouseenter','li',this._mouseenterAddOff.bind(this));//移入每一条题目列表时显示关闭按钮
        $('.themeTrendsUl').on('mouseleave','li',this._mouseleaveAddOff.bind(this));//移出每一条题目列表时移除关闭按钮
        $('.themeTrendsUl').on('focus','.themeVal',this._answerFocus.bind(this));//input框获得焦点隐藏默认字体
        $('.themeTrendsUl').on('blur','.themeVal',this._answerBlur.bind(this));//input框失去焦点显示默认字体
        $('.themeTrendsUl').on('click','span',this._answerListRemove.bind(this));//点击X删除列表项
        $('.themeAdd').on('click',this._answerAdd.bind(this));//点击列表后添加按钮 来添加列表项
        $('.dynamicRight').on('click',this._answerSubmit.bind(this));//点击发布提交信息
        $('.inputErrerA').on('click',this._inputErrerClone.bind(this));//关闭input自定义题目为空时弹出框
        $('.resultConceal').on('click',this._resultConcealClone.bind(this));//隐藏按钮
        $('.resultHeadline .iconfont').on('click',this._resultConcealClone.bind(this));//答题卡结果关闭按钮
        $('.resultTermination').on('click',this._resultTermination.bind(this));//终止答题卡
        $('.referBtn').on('click',this._referBtnClone.bind(this));//学生端提交信息
        $('.abandonBtn').on('click',this._abandonBtnClone.bind(this));//学生端放弃提交信息
        //老师端结果 移入显示当前选项选择人数
        $('.resultListUl').on('mouseenter','p',this._mouseenterResult.bind(this));
        $('.resultListUl').on('mouseleave','p',this._mouseleaveResult.bind(this));
        $('body').on('click',function(evt){
            $('.layerBox').hide();
            if(!$(evt.target).is('.themeShow')){
                $('.themeUl').hide();
            }
        });
        //渲染题目列表显示数据
        this._renderDom();
        //刷新列表时input框重新改为默认值
        this._setDefault();


    }
    addEvent() {
        //更新显示答题结果
        xdysdk.on('update_answer_question',this.upDateAnswerQuestion.bind(this));
        //答题结束
        xdysdk.on('stop_answer_question',this.stopAnswerQuestion.bind(this));
        //收到答题消息
        xdysdk.on('start_answer_question',this.startAnswerQuestion.bind(this));

        //点名和答题卡的计时器
        xdysdk.on("update_question_time",this.updateQuestionTime.bind(this));

    }
    timerCounterUptate(timestamp){
        $('#answerCountDown').html(this._newTime(timestamp));
    }
    _newTime(timestamp){
        let minute = 0,
            second = 0;
        minute = Math.floor(timestamp / 60)<10 ? '0'+Math.floor(timestamp / 60):Math.floor(timestamp / 60);
        second = Math.floor(timestamp - minute * 60)<10?'0'+Math.floor(timestamp - minute * 60):Math.floor(timestamp - minute * 60)

        let timeValue = ClassDataProxy.localConfig.answerCountdown
        timeValue +=( minute > 0 ) ? minute + ' : ' : '00 : '
        timeValue += (second > 0 ) ? second : '00'
        return timeValue;
    }
    //事件监听-----------
    //更新显示答题结果
    upDateAnswerQuestion(_data){
        if(_data.type!=100 && ClassDataProxy.userRole==ClassDataProxy.USER_HOST){
            this._questionObject = _data;
            this._showPage = true;
            loger.log('更新显示答题结果');
            if(!this.isHide){
                this._showResultBox();
            }
            this._resultDom(_data);
        }
       
    }
    //答题结束
    stopAnswerQuestion(_data){
        if(_data.type!=100){
            loger.log('答题结束',_data);
            this._questionObject = null;
            this._hideAnswerStudentBox();
            this._hideResultBox();
            this._showPage = false;
            this.isCancel = false;
            this.isHide = false;
        }
    }
    //收到答题消息
    startAnswerQuestion(_data){
        if(_data.type!=100){
            if(ClassDataProxy.userRole==ClassDataProxy.USER_NOTMAL){
                this._questionObject = _data;
                loger.log('收到答题消息',_data)
                if(_data.timeLimit == 100000){
                    $('.countdown').css('opacity',0);
                }else{
                    $('.countdown').css('opacity',1);
                }
                if(!this.isCancel){
                    this._showAnswerStudentBox();
                }
                this._answerStudent(_data);
            }
        }
    }
    //答题卡的计时器
    updateQuestionTime(_data){
        if(_data.type!=100){
            //loger.log('答题卡的计时器',_data)
            this.timerCounterUptate(_data.timestamp);
        }
    }
    
    _setDefault(){
        $('.themeTrendsUl .themeVal').val(ClassDataProxy.localConfig.inputAnswer);
    }
    _renderDom(){
        let renderArray = ['A','B','C','D','E','F'];
        let themeTrendsUlA = $('#themeTrendsUlA li p');
        let themeTrendsUlB = $('#themeTrendsUlB li p');
        let themeTrendsUlC = $('#themeTrendsUlC li input');

        $.each(themeTrendsUlA,function(index,ele){
            $(ele).text(renderArray[index])
        })
        $.each(themeTrendsUlB,function(index,ele){
            $(ele).text(index+1)
        })
    }
    // 渲染答题结果
    _resultDom(_data){
        if(_data){
            //清除原数据 重新渲染老师端答题结果列表
            $('.resultListUl').html('');
            let list = _data.totalUser;
            let _newResultList = '';
            let _this = this;
            $('.attendNum').text(list)
            let _ratio = 0;
            $.each(_data.options,function(index,ele){
                _ratio = _data.answers[index].percent;
                _newResultList = _this._format(newResultList, {
                    ele : ele,
                    _ratio :_ratio,
                    index : index
                });
                $('.resultListUl').append(_newResultList);
                $('.resultListUl').find('.dynamicPlan'+index).css('width',_ratio+'%');
            })
        }
    }
    //点击弹出答题卡
    _answerHandler(){
        //弹出答题卡时 渲染倒计时列表
        this._showTimerList();
        //显示时间格式
        $('.themeShow').html($('.themeUl').find('li').eq(0).html())  //默认答题计时显示第一个
                        .attr('data-val',$('.themeUl li').eq(0).attr('data-val'));
        this._showAnswerAllBox();
        if(!this._showPage){
            $(".themeBox").fadeIn(800);
        }else{
            $('.resultBox').fadeIn(800);
        }
    }
    //关闭答题卡/最小化
    _closeAnswerHandler() {
        this.isHide = true;
        this._hideAnswerAllBox();
    }
    //点击显示答题倒计时
    _slelctShowHandler() {
        $('.themeUl').is(':hidden') ? $('.themeUl').show() : $('.themeUl').hide();
    }
    //选择答题计时时间
    _answerLiHandler(evt){
        let ele = $(evt.target);
        let index = ele.index();
        //选择倒计时时 添加类
        this._judgeDddClass($('.themeUl li'),index)
        $('.themeShow').html(ele.html())
                        .attr('data-val',ele.data('val'));

        $('.themeUl').hide();
    }
    //选择倒计时时 添加类
    _judgeDddClass(ele,ind){
        ele.eq(ind).addClass('active').siblings().removeClass('active');
    }
    //移入题目项显示发布按钮
    _mouseenterAnswer(evt){
        $(evt.target).find('.dynamicRight').show();
       /* if($('#themeTrendsUlC .themeTrendsLi').length >= 6){
            $('#themeAdd').hide();
        }*/
    }
    //移出题目项移除发布按钮
    _mouseleaveAnswer(evt){
        $('.dynamicRight').hide();
    }
    //移入每一条题目列表时显示关闭按钮
    _mouseenterAddOff(evt){
        $(evt.target).next().show();
    }
    //移出每一条题目列表时移除关闭按钮
    _mouseleaveAddOff(){
        $('.themeList span').hide();
    }
    //input框获得焦点隐藏默认字体
    _answerFocus(evt){
        let price = $(evt.target);
        if(price.val() === ClassDataProxy.localConfig.inputAnswer) price.val('');
    }
    //input框失去焦点显示默认字体
    _answerBlur(evt){
        let price = $(evt.target);
        if(price.val() === '') price.val(ClassDataProxy.localConfig.inputAnswer);
    }
    //点击发布提交信息
    _answerSubmit(evt){
        let _themeLi = $(evt.target).prev().children();
        let _themeP = _themeLi.find('p');
        let _themeInput =  _themeLi.find('input');
        let _parentType = $(evt.target).parent().data('type');
        let _this = this;
        let array =[];
        $.each(_themeP,function(key,val){
            let text = $(val).text();
            array.push(text);
        })
        let length = [];
        $.each(_themeInput,function(key,val){
            let text = $(val).val();
            let parten = /(^\s*)|(\s*$)/g ;
            if(text=== ClassDataProxy.localConfig.inputAnswer || text.replace(parten,'') == ''){
                length.push(text)
                _this._isErrer = true;
                _this._inputErrerOpen();
            }else{
                array.push(text);
            }
        })

        if(length.length > 0){
            this._inputErrerOpen();
        }else{
            this._resultBounced();
            let _timeLimit = parseInt( $('.themeShow').attr('data-val') );

            let paramInfo = {};
            paramInfo.type =  parseInt(_parentType) || 1;; //1单选，2多选，3判断，4点名
            paramInfo.content = '答题'; //题目 没有就传""
            paramInfo.timeLimit = _timeLimit;//有效时间（秒）
            paramInfo.correct = [];//正确答案，没有就传[]
            paramInfo.options = array || [] ;//选项数组，没有就传[]
            paramInfo.answer = [];//学生选择的答案，没有就传[]
            xdysdk.api("creatQuestion",paramInfo);
        }
    }
    _resultBounced(){
        this._showPage = true;
        $('.themeBox').hide();
        $('.resultBox').show();
    }
    //答题题目为自定义时需输入内容否则弹出错误弹框
    _inputErrerOpen(){
        if(this._isErrer){
            $(".inputErrerBox").show();
        }
    }
    //错误弹框关闭
    _inputErrerClone(){
        $(".inputErrerBox").hide();
    }
    _inputAdd(_answerLi,Dom){
        this._countNum ++;
        _answerLi.before(newAnswerInput);
        $('.themeTrendsLi').attr('value',ClassDataProxy.localConfig.inputAnswer)
       // this._setDefault();
        if(this._countNum === this._maxLen){
            this._countNum = 6;
            Dom.hide();
        }
    }
    _textAdd(_answerLi,Dom){
        this._countNum ++;
        _answerLi.before(newAnswerP);
        this._renderDom();
        if(this._countNum === this._maxLen){
            this._countNum = 6;
            Dom.hide();
        }
    }
    _inputDomPos(){
        let themeTrendsLi = $('#themeTrendsUlC').children('.themeTrendsLi');
        let liList = $('#themeTrendsUlC li');
        let len = themeTrendsLi.length;
        let _dynamicRight1 = $('.dynamicRight1');
        if(len > 3){
            _dynamicRight1.css('top','33px');
        }else{
            _dynamicRight1.css('top','12px');
        }
    }
    _answerAdd(evt){
        let themeTrendsUlA = $('#themeTrendsUlA');
        let themeTrendsUlB = $('#themeTrendsUlB');
        let themeTrendsUlC = $('#themeTrendsUlC');
        let _isInput = $(evt.target).prev().children().is('input');
        let _isText = $(evt.target).parent().children().first().text();
        let _themeLi = $(evt.target);
        let _len = $(evt.target).parent().children('.themeTrendsLi').length;
        let _inputLen = $(evt.target).siblings().length;
        this._countNum = _inputLen;
        if(themeTrendsUlC && _isInput){
            this._inputAdd(_themeLi,$(evt.target));
        }else if((themeTrendsUlA || themeTrendsUlB ) && ( _isText ===  'A×' || _isText === '1×' )){
            this._textAdd(_themeLi,$(evt.target));
        }
        this._inputDomPos();
    }
    _removeList(_countNum,len,ele){
        if(_countNum === len){
            _countNum = len;
        }else{
            _countNum --;
            ele.remove();
            this._renderDom();
        }
    }
    //点击X删除列表项
    _answerListRemove(evt){
        let _plus = $(evt.target).parents('ul').children().find('.themeAdd').is(':hidden');
        let _isP = $(evt.target).prev().is('p');
        let _inputLen = $(evt.target).parent().siblings().length;
        let _themeAdd = $(evt.target).parents('ul').children('.themeAdd');
        if(_themeAdd.is(":hidden")){
            _themeAdd.show();
        }
        this._countNum = _inputLen;
        let parentDom = $(evt.target).parent();
        if(_isP){
            this._removeList(this._countNum,this._minLen,parentDom);
        }else{
            this._removeList(this._countNum,this._minLen1,parentDom);
        }
        this._inputDomPos();
    }
    //答题卡结果关闭按钮
    _resultConcealClone(){
        this.isHide = true;
        $('.resultBox').hide();
        $('.answerAllBox').hide();
    }
    //终止答题卡
    _resultTermination(){
        //清除所有数据 还原默认数据
        this._clearAnswer();
        //终止时隐藏所有盒子
        this._hideResultBox();
        //调用SDK停止答题
        this._stopAnswer();
    }
    //清除所有数据 还原默认数据
    _clearAnswer(){
        this._showPage = false;
        $('#minute,#second').text('00');
        //答题卡结果关闭按钮
        this._resultConcealClone();
        //终止答题卡时题目列表默认显示原数据
        this._revocation();
        //终止答题卡时input框的默认值显示原数据
        this._setDefault();
        //默认 无  默认选中
        this._judgeDddClass($('.themeUl li'),0);
        this.isCancel = false;
        this.isHide = false;
        //input框重置
        $('.dynamicRight1').css('top','12px');
        $('#themeAdd').show();
        $('.dynamicPlan').css('width',0)
        $('.resultList span').html('0%');
        $('.resultList').empty();
        $('.attendNum').text('0')
    }
    _stopAnswer(){
        let paramInfo = {};
        paramInfo.itemIdx = this._questionObject.itemIdx;
        paramInfo.questionId = this._questionObject.questionId;
        xdysdk.api("stopQuestion",paramInfo);
        this._questionObject = null;
    }
    _revocation(){
        $('.themeShow').html(ClassDataProxy.localConfig.nothing);
        let themeTrendsUlA = $('#themeTrendsUlA .themeTrendsLi').length;
        let themeTrendsUlB = $('#themeTrendsUlB .themeTrendsLi').length;
        let themeTrendsUlC = $('#themeTrendsUlC .themeTrendsLi').length;
        let len,len1,len2;

        this._recoverfunc(themeTrendsUlC,len,'C',3);
        this._recoverfunc(themeTrendsUlB,len2,'B',4);
        this._recoverfunc(themeTrendsUlA,len1,'A',4);
    }
    _recoverfunc(ele,len,val,count){
        if( ele < count){
            len = count - ele;
            this._addfunc(val,len);
        }else{
            len = ele - count;
            this._removefunc(val,len);
        }
    }
    _addfunc(ele,len){
        for(let i = 0;i<len;i++){
            $('#themeTrendsUl'+ele).prepend($('#themeTrendsUl'+ele).children().first().clone(true));
        }
        this._renderDom();
    }
    _removefunc(ele,len){
        for(let i = 0; i< len;i++){
            $('#themeTrendsUl'+ele).children().first().remove();
        }
        this._renderDom();
    }
    _answerStudent(_data){
        this._answerStudentShow();
        let resultValueUl = $('.resultValueUl');
        //清除原数据 重新渲染学生端列表
        resultValueUl.html('');
        let array = _data.options;
        let _newList = '';
        let _this = this;
        $.each(array,function(index,value){
            _newList += _this._format(newList, {
                value: value,
                index:index
            });
        })
        resultValueUl.append(_newList)
        let len = resultValueUl.find('li').length;
        $('.resultValueList').width(100/len+'%');
    }
    _answerStudentShow(){
       $('.answerStudentBox').show();
    }
    //学生端提交信息
    _referBtnClone(){
        let _val = $('.resultValueList input:checked').attr('data-val');
        if(_val){
            let paramInfo = {};
            paramInfo.itemIdx = this._questionObject.itemIdx;
            paramInfo.questionId = this._questionObject.questionId;
            paramInfo.answer = [];//答题当前单选 存取的值是答题的索引
            paramInfo.answer.push(parseInt(_val));
            xdysdk.api("sendAnswer",paramInfo);
            loger.log('学生端提交信息',paramInfo)
            this._abandonBtnClone();
        }
        return;
    }
    //老师端结果 移入显示当前选项选择人数
    _mouseenterResult(evt){
        let array = this._questionObject;
        let _text = $(evt.target).siblings('b').text();
        let layerBox = $('.layerBox');
        let _resultContentx = $('.resultContent').offset().left;
        let _resultContenty = $('.resultContent').offset().top;
        let _x = evt.pageX - _resultContentx;
        let _y = evt.pageY - _resultContenty - layerBox.outerHeight();
        let _span = '';
        layerBox.show()
                .css({'left':_x,'top':_y})
                .html('');
        let ind = $(evt.target).parent().index()
        let nameList = array.answers[ind].userNames.toString();
        let reg = /\,/g;
        if( nameList && nameList.length > 0){
            nameList = nameList.replace(reg,'、');
            _span = '<span>'+ nameList +'</span>';
        }
        if(_span){
            layerBox.html(_span)
        }else{
            layerBox.hide();
        }
    }
    _mouseleaveResult(){
        $('.layerBox').hide();
    }
    //学生端放弃提交信息
    _abandonBtnClone(){
        this.isCancel = true;
        this._hideAnswerStudentBox();
        $('.themeAdd').show();
        $('.resultValueList').remove();
    }
    //渲染时间列表
    _showTimerList(){
        let themeUl = $('.themeUl'),newLi;
        themeUl.html('');
        $.each(this.timerList,function(key,val){
            if(val == 0){
                newLi = '<li data-val="100000" data-ind="'+key+'" class="active">'+ClassDataProxy.localConfig.nothing+'</li>';
            }else if(val/60 < 1){
                newLi = '<li data-val="'+val+'" data-ind="'+key+'">'+val+ClassDataProxy.localConfig.second+'</li>';
            }else{
                newLi = '<li data-val="'+val+'" data-ind="'+key+'">'+val/60+ClassDataProxy.localConfig.minute+'</li>';
            }
            themeUl.append(newLi);
        })
    }
    //工具类
    _format(str, obj) {
        return str.replace(/\{(\w+)\}/g, function (match, group, index) {
            return obj[group];
        });
    };
    //隐藏答题卡弹框
    _showAnswerAllBox(){
        $('.answerAllBox').show();
    }
    //隐藏答题卡弹框
    _hideAnswerAllBox(){
        $('.answerAllBox').hide();
    }
    //显示答题卡结果弹出框
    _showResultBox(){
        $('.answerAllBox').show();
        $('.resultBox').show();
        $('.themeBox').hide();
    }
    //终止答题卡
    _hideResultBox(){
        $('.answerAllBox').hide();
        $('.themeBox').hide();
        $('.resultBox').hide();
        $('.answerStudentBox').hide();
    }
    //显示学生界面弹出框
    _showAnswerStudentBox(){
        $('.answerAllBox').show();
        $('.themeBox').hide();
        $('.answerStudentBox').show();
    }
    //隐藏学生界面弹出框
    _hideAnswerStudentBox(){
        $('.answerAllBox').hide();
        $('.answerStudentBox').hide();
    }
}

export default AnswerApe;