<template>
    <Split v-model="split1" v-if="orderLearnInfo !== undefined">
        <div slot="left">
            <div class="order-learn-main-label">
                基础信息
            </div>
            <EmptyData v-if="orderLearnInfo == undefined" style="margin-top:150px;"></EmptyData>
            <div class="base-info-wrap" v-else>
                <div class="base-info-item">
                    <span class="base-info-label">
                        名称：
                    </span>
                    <p class="base-info-value">
                        {{orderLearnInfo.name}}
                    </p>
                </div>
                <div class="base-info-item">
                    <span class="base-info-label">
                        学段：
                    </span>
                    <p class="base-info-value">

                        <!--{{orderLearnInfo.periodCode}}-->
                        {{$jsFn.getPeriod($store.state.user.schoolProfile.school_base, orderLearnInfo.periodCode).periodName}}
                    </p>
                </div>
                <div class="base-info-item">
                    <span class="base-info-label">
                        学科：
                    </span>
                    <p class="base-info-value">
                        {{$jsFn.getSubjectName($store.state.user.schoolProfile.school_base, orderLearnInfo.subjectCode)}}
                    </p>
                </div>
                <div class="base-info-item">
                    <span class="base-info-label">
                        创建时间：
                    </span>
                    <p class="base-info-value">
                        2020/04/02
                    </p>
                </div>
                <div class="base-info-item">
                    <p class="base-info-label">
                        描述：
                    </p>
                    <p class="base-info-value">
                        {{orderLearnInfo.introduce}}
                    </p>
                </div>
            </div>
        </div>
        <div slot="right" class="order-learn-content-wrap">
            <div style="height:100%;" class="dark-iview-split">
                <Split v-model="split2">
                    <div slot="left">
                        <div class="order-learn-main-label">
                            学习阶段
                        </div>
                        <EmptyData v-if="orderLearnInfo == undefined"></EmptyData>
                        <div v-else>
                            <div v-for="(item,index) in orderLearnInfo.steps" :key="index" @click="selectStep(index)" :class="currentStepIndex == index ? 'order-learn-step-item order-learn-step-item-active':'order-learn-step-item'">
                                <span>
                                    {{item.name}}
                                </span>
                            </div>
                        </div>
                    </div>
                    <div slot="right" style="padding-left:18px;height:100%;">
                        <div class="order-learn-main-label">
                            自学内容
                        </div>
                        <div style="height:calc(100% - 45px);">
                            <vuescroll>
                                <p class="order-learn-content-label">
                                    内容：{{orderLearnInfo == undefined ? 0 : orderLearnInfo.steps[currentStepIndex].resource.length}}
                                </p>
                                <div style="min-height:220px;">
                                    <Loading v-show="isLoading"></Loading>
                                    <ContentFileList v-show="!isLoading" :class="isLoading ? '':'animated fadeIn'" :resources="orderLearnInfo.steps[currentStepIndex].resource"></ContentFileList>
                                </div>
                                <p class="order-learn-content-label" style="margin-bottom: 15px;">
                                    题目：{{orderLearnInfo == undefined ? 0 : orderLearnInfo.steps[currentStepIndex].item.length}}
                                </p>
                                <div class="unit-content-detail">
                                    <EmptyData v-if="orderLearnInfo == undefined" style="margin-top:120px;"></EmptyData>
                                    <Loading v-show="isLoading"></Loading>
                                    <QuestionList v-show="!isLoading" :class="isLoading ? '':'animated fadeIn'" :questions="orderLearnInfo.steps[currentStepIndex].item" style="margin-top:12px;"></QuestionList>
                                </div>
                            </vuescroll>
                        </div>
                    </div>
                </Split>
            </div>

        </div>
    </Split>
</template>
<script>
    import QuestionList from '@/components/learnactivity/QuestionList.vue'
    import ContentFileList from '@/components/selflearn/ContentFileList.vue'
    
    import Loading from '@/common/Loading.vue'
    export default {
        components: {
            QuestionList, ContentFileList,  Loading
        },
        props: {
            orderLearnInfo: {
                default: () => {
                    return undefined
                },
                type: Object
            }
        },
        watch: {
            orderLearnInfo: {
                handler(o, n) {
                    //this.findQuestionById()
                    //this.findResourceById()
                },
                deep: true
            }
        },
        data() {
            return {
                currentStepIndex: 0,
                split1: 0.2,
                split2: 0.2,
                isLoading: false
            }
        },
        methods: {
            selectStep(index) {
                this.currentStepIndex = index
                //this.findQuestionById()
                //this.findResourceById()
            },
            /**
             * 通过id查询内容信息
             * */
            findResourceById() {
                if (this.orderLearnInfo != undefined) {
                    this.isLoading = true
                    if (!this.orderLearnInfo.steps[this.currentStepIndex].requestedR) {
                        this.$api.learnActivity.FindSyllabusResourceById(this.orderLearnInfo.steps[this.currentStepIndex].resource).then(
                            res => {
                                if (res.error == null) {
                                    this.orderLearnInfo.steps[this.currentStepIndex].resource.length = 0
                                    this.orderLearnInfo.steps[this.currentStepIndex].resource = res.result.data
                                    this.orderLearnInfo.steps[this.currentStepIndex].requestedR = true
                                } else {
                                    this.$Message.error("API ERROR!")
                                }
                                setTimeout(() => {
                                    this.isLoading = false
                                }, 500)
                            },
                            err => {
                                this.$Message.error("API ERROR!")
                                setTimeout(() => {
                                    this.isLoading = false
                                }, 500)
                            }
                        )
                    } else {
                        setTimeout(() => {
                            this.isLoading = false
                        }, 200)
                    }
                }
            },
            /**
             * 通过id查询题目信息
             * */
            findQuestionById() {
                if (this.orderLearnInfo != undefined) {
                    this.isLoading = true
                    if (!this.orderLearnInfo.steps[this.currentStepIndex].requestedI) {
                        this.$api.learnActivity.FindQuestionById(this.orderLearnInfo.steps[this.currentStepIndex].item).then(
                            res => {
                                if (res.error == null) {
                                    this.orderLearnInfo.steps[this.currentStepIndex].item.length = 0
                                    this.$set(this.orderLearnInfo.steps[this.currentStepIndex], 'item', res.result.data)
                                    this.orderLearnInfo.steps[this.currentStepIndex].requestedI = true
                                } else {
                                    this.$Message.error("API ERROR!")
                                    setTimeout(() => {
                                        this.isLoading = false
                                    }, 500)
                                }
                            },
                            err => {
                                this.$Message.error("API ERROR!")
                                setTimeout(() => {
                                    this.isLoading = false
                                }, 500)
                            }
                        )
                    } else {
                        setTimeout(() => {
                            this.isLoading = false
                        }, 200)
                    }
                }
            },
        }
    }
</script>
<style scoped lang="less">
    @import "./OrderLearnInfo.less";
</style>
<style>

</style>