<template>
    <div class="unit-main-wrap">
        <div class="unit-content-wrap" v-if="unitInfo != undefined">
            <vuescroll>
                <p class="unit-content-label">自学内容：{{unitInfo.resource.length}}</p>
                <div class="unit-content-detail">
                    <Loading v-show="isLoading"></Loading>
                    <ContentFileList v-show="!isLoading" :resources="unitInfo.resource"></ContentFileList>
                </div>

                <p class="unit-content-label">题目：{{unitInfo.item.length}}</p>
                <div class="unit-content-detail">
                    <EmptyData v-if="unitInfo.length == 0" style="margin-top:120px;"></EmptyData>
                    <Loading v-show="isLoading"></Loading>
                    <QuestionList v-show="!isLoading" :class="isLoading ? '':'animated fadeIn'" :questions="unitInfo.item" style="margin-top:12px;"></QuestionList>
                </div>
            </vuescroll>
        </div>
    </div>
</template>
<script>
    import QuestionList from '@/components/learnactivity/QuestionList.vue'
    import ContentFileList from '@/components/selflearn/ContentFileList.vue'
    export default {
        props: {
            unitInfo: {
                default: () => {
                    return undefined
                },
                type: Object
            }
        },
        watch: {
            unitInfo: {
                handler(o, n) {
                    //this.findQuestionById()
                    //this.findResourceById()
                },
                deep: true
            }
        },
        components: {
            QuestionList, ContentFileList
        },
        data() {
            return {
                isLoading: false
            }
        },
        methods: {
            /**
             * 通过id查询内容信息
             * */
            findResourceById() {
                if (this.unitInfo != undefined) {
                    this.isLoading = true
                    if (!this.unitInfo.requestedR) {
                        this.$api.learnActivity.FindSyllabusResourceById(this.unitInfo.resource).then(
                            res => {
                                if (res.error == null) {
                                    this.unitInfo.resource.length = 0
                                    this.unitInfo.resource = res.result.data
                                    this.unitInfo.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.unitInfo != undefined) {
                    this.isLoading = true
                    if (!this.unitInfo.requestedI) {
                        this.$api.learnActivity.FindQuestionById(this.unitInfo.item).then(
                            res => {
                                if (res.error == null) {
                                    this.unitInfo.item.length = 0
                                    this.$set(this.unitInfo, 'item', res.result.data)
                                    this.unitInfo.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 "./UnitInfo.less";
</style>
<style>
    .unit-content-wrap #loadingBox {
        margin-top: 88px !important;
    }
</style>