<template>
    <div class="container">
        <div class="stroke_container">
            <div class="local-exam">
                <text class="project_title">现场考试</text>
                <div class="code-btn-wrap">
                    <wxc-button :btnStyle="codeBtn" :textStyle="codeTextStyle" text="输入考试码" @wxcButtonClicked="codeBtnClicked"></wxc-button>
                </div>
            </div>
            <div class="history-wrap">
                <div class="history-header">
                    <text class="project_title his_label">考试记录</text>
                    <div class="course_see_more"  @click="seeMoreHistory" v-if="livesExamContent.localHistoryList.length > 5">
                        <text class="see_more">更多</text>
                        <image class="see_more_img" src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/eagle_plan/arrow_right_gray%403x.png"></image>
                    </div>
                </div>
                <local-exam-history :showHeaderH="false" :localHistoryList="livesExamContent.localHistoryList" :examId="11"></local-exam-history>
            </div>
        </div>
        <wxc-loading :show="isShow"></wxc-loading>

        <wxc-dialog confirm-text="重新输入"
                    cancel-text="取消"
                    :show="showReInputTip"
                    @wxcDialogCancelBtnClicked="hideReInput"
                    @wxcDialogConfirmBtnClicked="reInputConfirm">
            <text slot="content" class="content-subtext">考试码不正确</text>
        </wxc-dialog>

        <wxc-dialog confirm-text="我知道了"
                    :show="showExamNotStartTip"
                    main-btn-color="#35cbca"
                    :single="true"
                    @wxcDialogConfirmBtnClicked="notStartConfirm">
            <text slot="content" class="content-subtext">考试未开始</text>
        </wxc-dialog>

        <wxc-dialog confirm-text="我知道了"
                    :show="showExamFinishedTip"
                    main-btn-color="#35cbca"
                    :single="true"
                    @wxcDialogConfirmBtnClicked="finishedConfirm">
            <text slot="content" class="content-subtext">考试已结束</text>
        </wxc-dialog>

        <!--height="342"-->
        <wxc-mask height="642"
                  width="750"
                  border-radius="0"
                  duration="200"
                  mask-bg-color="transparent"
                  :has-animation="true"
                  :has-overlay="true"
                  :show-close="false"
                  :show="showCodeInputDialog">
            <div class="code-content">
                <div class="code-title-wrap">
                    <image class="code-img" src="https://pica-pro.oss-cn-shanghai.aliyuncs.com/eagle_plan/close%403x.png" @click="showCodeInputDialog=false"></image>
                    <text class="code-title">请输入考试码</text>
                </div>
                <div class="code-input-wrap">
                    <input type="text" class="code-input" :class="[code1.length > 0 ? 'code-active': '']" v-model="code1" maxlength="1" @input="codeChange(code1, 'code2')" ref="code1"/>
                    <input type="text" class="code-input" :class="[code2.length > 0 ? 'code-active': '']" v-model="code2" maxlength="1" @input="codeChange(code2, 'code3')" ref="code2"/>
                    <input type="text" class="code-input" :class="[code3.length > 0 ? 'code-active': '']" v-model="code3" maxlength="1" @input="codeChange(code3, 'code4')" ref="code3"/>
                    <input type="text" class="code-input" :class="[code4.length > 0 ? 'code-active': '']" v-model="code4" maxlength="1" @input="codeChange(code4, 'code5')" ref="code4"/>
                    <input type="text" class="code-input" :class="[code5.length > 0 ? 'code-active': '']" v-model="code5" maxlength="1" @input="codeChange(code5, 'code6')" ref="code5"/>
                    <input type="text" class="code-input" :class="[code6.length > 0 ? 'code-active': '']" v-model="code6" maxlength="1" @input="codeChange(code6, '')" ref="code6"/>
                </div>
            </div>
        </wxc-mask>
    </div>
</template>

<script>
    import { Utils, WxcButton, WxcMask } from 'weex-ui'
    import WxcDialog from '../components/wxc-dialog'
    import picaCommon from '../util/picaCommon'
    import WxcLoading from '../components/wxc-loading'
    import localExamHistory from '../components/stroke/localExamHistory'
    let modal = weex.requireModule('modal')
    let configurationModule = weex.requireModule('configurationModule')
    let globalEvent = weex.requireModule('globalEvent')
    export default {
        components: {WxcDialog, Utils, WxcLoading, WxcButton, WxcMask, localExamHistory},
        props:['livesExamContent'],
        data(){
            return{
                showExamFinishedTip: false,
                showReInputTip: false,
                showExamNotStartTip: false,
                code1: '',
                code2: '',
                code3: '',
                code4: '',
                code5: '',
                code6: '',
                showCodeInputDialog: false,
                showHeaderH: true,
                showHeader:false,
                y:0,
                projectName: '',                    //项目名称
                isShow: false,
                isIOS: true,
                codeBtn: {
                    height: '90px',
                    backgroundColor: 'rgba(106, 159, 233, 0.1)',
                    borderRadius: '100px',
                    width: '600px'
                },
                codeTextStyle: {
                    color: 'rgb(106, 159, 233)',
                    fontSize: '32px'
                }
            }
        },
        created () {
            this.projectId = this.getUrlSearch(weex.config.bundleUrl, 'id') || 1

            this.isIOS = Utils.env.isIOS()

            // this.init()
        },
        mounted(){

        },
        computed: {

        },
        methods: {
            finishedConfirm() {
                this.showExamFinishedTip = false
            },
            hideReInput() {
                this.showReInputTip = false
            },
            reInputConfirm() {
                this.hideReInput()
                this.showCodeInputDialog = true
                this.$nextTick(()=> {
                    this.$refs['code1'].focus()
                })
            },
            notStartConfirm() {
                this.showExamNotStartTip = false
            },
            clearCode() {
                this.code1 = ''
                this.code2 = ''
                this.code3 = ''
                this.code4 = ''
                this.code5 = ''
                this.code6 = ''
            },
            checkCodeInputFinished() {
                var code
                if(this.code1 && this.code2 && this.code3 && this.code4 && this.code5 && this.code6) {
                    code = '' + this.code1 + this.code2 + this.code3 + this.code4 + this.code5 + this.code6
                    this.clearCode()
                    this.showCodeInputDialog = false
                    this.isShow = true
                    //考试id
//					private Integer examId;
//考试结果标志1表示考试进行中5表示考试未开始10表示考试了已经结束15表示查询不到考试（考试码不正确）20考试被管理员删除（隐藏）
//					private Integer resultFlag;
//考试开始时间
//					protected Date startDate;
//考试结束时间
//					protected Date endDate;
                    this.GET('app/exam/lives/check',{examCode: code}, (res) => {
                        this.isShow = false
                        var result = res.data.checkResult,
                            flag = result.resultFlag
                        if(flag == 1) {
                            this.$router.push({
                                path:'/exam_result',query:{examId: result.examId, origin: 'start', examType: 'local', endDate: result.endDate}
                            })
                        } else if(flag == 5) {
                            this.showExamNotStartTip = true
                        } else if(flag == 10 || flag == 20) {
                            this.showExamFinishedTip = true
                        } else if(flag == 15) {
                            this.showReInputTip = true
                        }
                    })
                }
            },
            codeChange(val, nextInput) {
                if(val && nextInput) {
                    this.$refs[nextInput].focus()
                }
                this.checkCodeInputFinished()
            },
            seeMoreHistory() {
                this.$router.push({
                    path:'/local_exam_history',query:{examId: this.examId}
                })
            },
            codeBtnClicked() {
                this.showCodeInputDialog = true
                this.$nextTick(()=> {
                    this.$refs['code1'].focus()
                })
            },

           /* getLength(str, num){
                if (str.length > num){
                    str = str.substr(0, num) + "..."
                }
                return str
            },*/
           /* init(){
                this.getTop()
            },*/
            /*getTop(){
                this.isShow = true
                let _self = this
                this.GET('contents/projects/top',{id:this.projectId},function (res) {
                    console.log('top',res)
//                    modal.alert({
//                        message: "top:" + JSON.stringify(res)
//                    })
                    if (res && res.data){
//                        _self.infoMsg = res.data.intro
//                        _self.info.message = _self.infoMsg
                        _self.infoLists = res.data.texts       //简介（文案）组件
                        _self.sliderLists = res.data.carousels   //轮播图组件
                        _self.projectName = res.data.projectName  //项目名称
                        _self.projectName = _self.getLength(_self.projectName, 8);
                    }else{
                        modal.toast({
                            message: '网络异常，请稍后再试',
                            duration: 1.0
                        })
                    }

                    _self.getBottom()
                })
            },
            getBottom(){
                let _self = this
                this.GET('contents/projects/bottom',{id:this.projectId},function (res) {
                    console.log('bottom',res)
//                    modal.alert({
//                        message: "bottom:" + JSON.stringify(res)
//                    })
                    if (res && res.data){
                        _self.courseLists = res.data.courses //[0].courseModuleList
                        if (_self.courseLists && _self.courseLists.length){
                            _self.courseLists.sort(function(a,b){
                                return a.seq_no - b.seq_no
                            })
                        }
                        _self.courseLists = _self.courseLists.concat([])
                    }else {
                        modal.toast({
                            message: '网络异常，请稍后再试',
                            duration: 1.0
                        })
                    }

                    _self.getMiddle()
                })
            },
            getMiddle(){
                let _self = this
                this.GET('contents/projects/middle',{id: this.projectId},function (res) {
                    console.log("middle",res)
//                    modal.alert({
//                        message: "middle:" + JSON.stringify(res)
//                    })
                    _self.isShow = false
                    if (res && res.data){
                        _self.examLists = res.data.moduleTypeExams

                        if (_self.examLists && _self.examLists.length){

                            _self.examLists.sort(function(a,b){
                                return a.seq_no - b.seq_no
                            })
                            _self.examLists.forEach(function (item) {
                                item.allLists = item.examModuleList
                                if (item.courseList){
                                    let arr = item.courseList
                                    arr.forEach(function (course) {
                                        let exam_id = course.exam_id
                                        for (let k =0; k < item.allLists.length; k++){
                                            if (exam_id == item.allLists[k].exam_id){
                                                item.allLists.splice(k, 0, course);
                                                break;
                                            }
                                        }
                                    })
                                }
                            })
                            _self.examLists = _self.examLists.concat([])
                        }else {
                            _self.examLists = []
                        }

                        _self.getOrder()
                    }else{
                        modal.toast({
                            message: '网络异常，请稍后再试',
                            duration: 1.0
                        })
                    }
                })
            },
            getOrder(){
                let _self = this
                this.GET('contents/projects/'+ this.projectId,{},function (res) {
                    console.log('order',res)
//                    modal.alert({
//                        message: "order:" + JSON.stringify(res)
//                    })
                    if (res && res.data){
                        //组件type
                        // module_type：1、轮播图组件 5、文案组件 10、考试组件 15、关联课程组件 20、链接组件 25、现场考试组件
                        _self.orderList = res.data.projectList
                        if (res.data.respCode != 200){
                            modal.toast({
                                message: res.data.respMsg,
                                duration: 1.0
                            })
                            return
                        }
                        let arr = [{slot:'type_1'},{slot:'type_2'},{slot:'type_3'},{slot:'type_4'},{slot:'type_5'}]
//                        arr.map(function (item) {
//                            _self.slots.push(item)
//                        })
                        _self.slots.length = _self.orderList.length
                        // debugger
                        for(let i = 0; i < _self.orderList.length; i++){
                            let number = _self.orderList[i].module_type
                            switch (number){
                                case 1:
                                    _self.slots[i] = arr[0];
                                    break;
                                case 5:
                                    _self.slots[i] = arr[1];
                                    break;
                                case 10:
                                    _self.slots[i] = arr[2];
                                    break;
                                case 15:
                                    _self.slots[i] = arr[3];
                                    break;
                                case 25:
                                    _self.slots[i] = arr[4];
                                    break;
                            }
                        }
                        // debugger
                        _self.slots = _self.slots.concat([])
                        _self.infoLists.forEach(function (item) {
                            _self.allComponentLists.push(item)
                        })
                        _self.sliderLists.forEach(function (item) {
                            _self.allComponentLists.push(item)
                        })
                        _self.courseLists.forEach(function (item) {
                            _self.allComponentLists.push(item)
                        })
                        _self.examLists.forEach(function (item) {
                            _self.allComponentLists.push(item)
                        })
                        _self.allComponentLists.sort(function (a,b) {
                            return a.seq_no - b.seq_no
                        })
                        _self.allComponentLists = _self.allComponentLists.concat([])//Object.assign([],)
                    }else{
                        modal.toast({
                            message: '网络异常，请稍后再试',
                            duration: 1.0
                        })
                    }
                })
            },*/
            taggleSlot(){
                if(this.slot =='title'){
                    this.slot ='content'
                }else{
                    this.slot =='title'
                }
            },
            scroll(event){
                let y = parseInt(event.contentOffset.y)
                if(y < -50){//去认证被遮住
                    this.showHeader = true
                }else{
                    this.showHeader = false
                }
            },
            openDialog () {
                this.show = true;
            },
            goBack(){
                configurationModule.goBack()
            },
            wxcDialogCancelBtnClicked () {
                //此处必须设置，组件为无状态组件，自己管理
                // this.show = false;
                this.taggleSlot()
            },
            wxcDialogConfirmBtnClicked () {
                //此处必须设置，组件为无状态组件，自己管理

                //this.show = false;
            },
            wxcDialogNoPromptClicked (e) {
                //此处必须设置，组件为无状态组件，自己管理
                this.isChecked = e.isChecked;
            }
            /*getLocalExamResults(){
                let para = {
                    examId: this.$route.query.examId,
                    pageNo: 1,
                    pageSize: 5
                }
                /!* if(this.$route.query.examType === 'local') {
                     url = 'app/exam/lives/results'
                 }*!/
                this.GET('app/exam/lives/results', para, res => {
                    // this.showLoading = false
                    let data = res.data
                    console.log(data)
                    /!*if(data.respCode === 200) {
                        // this.isInitFinished = true
                        this.localHistoryList = this.format(data.examRecordList)
                    } else {
                        this.toast({
                            message: data.respMsg
                        })
                    }*!/
                })
            }*/
//            clickJ(){
//                this.$refs["mainCp"].map( function (item) {
//                    if (item.$el.attrs.type == "type_3"){
//                        console.log("cc:",item)
//                    }
//                })
//                console.log("cc:",this.$refs["mainCp"])
//            },
//            clickShareImage(){
//                configurationModule.shareProject()
//            },
        },

    }

</script>


<style scoped>
    .content-subtext {
        font-size:34px;
        color:rgba(102,102,102,1);
        line-height:50px;
        text-align: center;
    }
    .code-input-wrap {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        height: 244px;
        background-color: white;
    }
    .code-input {
        width:90px;
        height:90px;
        background:rgba(255,255,255,1);
        border-radius:4px;
        border-width:1px;
        border-style:solid;
        border-color:rgba(204,204,204,1);
        margin-right: 10px;
        font-size: 50px;
        color:rgba(51,51,51,1);
        line-height:50px;
        text-align: center;
    }
    .code-active {
        border-color:rgba(65,183,167,1);
    }
    .code-input:focus {
        border-color:rgba(58,172,156,1);
    }
    .code-title-wrap {
        padding: 20px 20px 30px 20px;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        border-bottom-width:1px;
        border-bottom-style:solid;
        border-bottom-color:rgba(240,240,240,1);
        background-color: white;
    }
    .code-img {
        width: 50px;
        height: 50px;
        position: absolute;
        left: 20px;
    }
    .code-title {
        font-size:35px;
        color:rgba(51,51,51,1);
        /*line-height:30px;*/
    }

    .history-header {
        flex-direction:row;
        width:750px;
        justify-content:space-between;
        padding-top:30px;
        padding-left:30px;
        padding-right:30px;
    }
    .course_see_more{
        flex-direction:row;
        height: 48px;
        line-height: 48px;
        justify-content: center;
        align-items: center;
    }
    .see_more{
        font-size:28px;
        color:#999999;
        padding-right: 6px;
    }
    .see_more_img{
        width:30px;
        height:30px;
    }
    .history-wrap {
        background-color: rgb(255, 255, 255);
        /*padding: 30px 0 30px 30px;*/
        /*margin-top: 20px;*/
        border-top-width: 1px;
        border-top-style: solid;
        border-top-color: rgb(240, 240, 240);
        padding-bottom: 40px;
    }
    .local-exam {
        background-color: rgb(255, 255, 255);
        padding: 30px;
        margin-top: 20px;
    }
    .code-btn-wrap {
        padding-top: 40px;
        /*padding-left: 10px;*/
        /*padding-right: 40px;*/
        justify-content: center;
        align-items: center;
    }
    .project_title{
        font-size:36px;
        color:#333333;
        font-weight:700;
    }
    .his_label {
        color:#999999;
        font-weight: 500;
    }
    .stroke_container{
        background-color:#f5f5f5;
    }
    .stroke_header_statusBar{
        position: fixed;
        left: 0;
        top: 0;
        width: 750px;
        height: 44px;
        align-items: flex-end;
        padding-left:0px;
        padding-right:0px;
        padding-bottom:0px;
        flex-direction:row;
        justify-content: space-between;
    }
    .background-fff{
        background-color: #ffffff;
    }
    .background-999{
        background-color: #999999;
    }
    .stroke_header{
        position:fixed;
        left:0px;
        top: 44px;
        width:750px;
        height: 106px;
        align-items: flex-end;
        padding-left:30px;
        padding-right:30px;
        padding-bottom:30px;
        flex-direction:row;
        justify-content: space-between;
    }
    .stroke_header_white{
        background-color:#ffffff;
    }
    .stroke_header_left{
        flex-direction:row;
        align-items: center;
    }
    .stroke_header_title{
        position:absolute;
        left:0;
        bottom:30px;
        width:750px;
        text-align:center;
        height: 50px;
        font-size:36px;
        color:#333333;
    }
    .go_back{
        width:50px;
        height:50px;
    }
    .home_page{
        font-size:32px;
        color:#333333;
    }
    /*.share_image{*/
    /*position: absolute;*/
    /*width: 50px;*/
    /*height: 50px;*/
    /*right: 16px;*/
    /*bottom:35px;*/
    /*}*/
</style>
