<template>
    <div class="manual-paper-container">
        <vuescroll>
            <div class="manual-filter-wrap">
                <Row style="width:100%;">
                    <Col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" v-show="!source && $store.state.userInfo.hasSchool">
                    <div class="manual-filter-item">
                        <span class="manual-filter-label">{{$t('learnActivity.manual.source')}}</span>
                        <RadioGroup v-model="scope" style="display:inline-block;" @on-change="checkFirst">
                            <Radio :label="$store.state.userInfo.TEAMModelId">{{$t('learnActivity.manual.sourceP')}}</Radio>
                            <Radio :label="$store.state.userInfo.schoolCode">{{$t('learnActivity.manual.sourceS')}}</Radio>
                        </RadioGroup>
                    </div>
                    </Col>
                    <Col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" v-if="routeScope == 'private'" v-show="scope == $store.state.userInfo.schoolCode">
                    <div class="manual-filter-item">
                        <span class="manual-filter-label">{{$t('learnActivity.manual.pdLabel')}}</span>
                        <RadioGroup v-model="searchPeriod" style="display:inline-block;" @on-change="checkFirst">
                            <Radio :label="item.id" v-for="(item,index) in schoolBase.period" :key="index">{{item.name}}</Radio>
                        </RadioGroup>
                    </div>
                    </Col>
                    <Col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" v-if="routeScope == 'private'" v-show="scope == $store.state.userInfo.schoolCode">
                    <div class="manual-filter-item">
                        <span class="manual-filter-label">{{$t('learnActivity.manual.subjectLabel')}}</span>
                        <RadioGroup v-model="subjectId" style="display:inline-block;" @on-change="checkFirst">
                            <Radio :label="item.id" v-for="(item,index) in subjectList" :key="index">{{item.name}}</Radio>
                        </RadioGroup>
                    </div>
                    </Col>
                    <Col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" v-if="routeScope == 'private'" v-show="scope == $store.state.userInfo.schoolCode">
                    <div class="manual-filter-item">
                        <span class="manual-filter-label">{{$t('learnActivity.manual.gradeLabel')}}</span>
                        <RadioGroup v-model="gradesObj" style="display:inline-block;" @on-change="checkFirst">
                            <Radio :label="item.id" v-for="(item,index) in gradeList" :key="index">{{item.name}}</Radio>
                        </RadioGroup>
                    </div>
                    </Col>
                </Row>
            </div>
            <div>
                <Loading :top="100" v-show="isLoading"></Loading>
                <div class="paper-item" v-for="(item,index) in paperList" :key="index">
                    <div class="paper-item-name">
                        <span>{{(index + 1) + '.  ' + item.name}}</span>
                    </div>
                    <div class="paper-item-info">
                        <span class="info-item" v-show="scope == $store.state.userInfo.schoolCode">
                            {{$t('learnActivity.manual.fitPd')}}
                            <span class="info-bold">{{$jsFn.getPeriod(schoolBase.period,item.periodId).name}}</span>
                        </span>
                        <span class="info-item" v-show="scope == $store.state.userInfo.schoolCode">
                            {{$t('learnActivity.manual.fitSubject')}}
                            <span class="info-bold">{{item.subjectName}}</span>
                        </span>
                        <span class="info-item">
                            {{$t('learnActivity.manual.quCount')}}
                            <span class="info-bold">{{ item.scoring.length > 0 ? item.scoring.length : 0 }}</span>
                        </span>
                        <span class="info-item">
                            {{$t('learnActivity.manual.useCount')}}
                            <span class="info-bold">{{item.useCount}}</span>
                        </span>
                    </div>

                    <span v-if="item.id == selectedId" style="margin-left:20px;display:block;" class="paper-item-tools">
                        <Icon custom="iconfont icon-choose" style="margin-right:5px;" :title="$t('learnActivity.manual.stdPaper')" />
                    </span>
                    <div v-else class="paper-item-tools">
                        <span @click.stop="choosePaper(index)">
                            <Icon custom="iconfont icon-choose" style="margin-right:5px;" />
                            {{$t('learnActivity.manual.stPaper')}}
                        </span>
                        <span @click.stop="previewTestPaper(index)" style="margin-left:20px;">
                            <Icon type="md-eye" style="margin-right:5px;" />
                            {{$t('learnActivity.manual.previewPaper')}}
                        </span>

                    </div>
                </div>
                <EmptyData v-if="paperList.length == 0" style="margin-top:100px;" :textContent="$t('learnActivity.manual.noPaper')"></EmptyData>
            </div>
            <!-- 暂未处理分页逻辑，后面需要完善 -->
            <!-- <div class="page-wrap">
                <Page :current.sync="currentPage" :total="paperList.length" show-total :page-size="pageSize" size="small" show-sizer @on-change="getCurrentPageData" />
            </div> -->
        </vuescroll>
        <Modal v-model="previewStatus" :title="$t('learnActivity.manual.previewPaper')" width="1100">
            <Loading v-if="paperLoading" :top="350"></Loading>
            <TestPaper :paper="previewPaper" isExamPaper></TestPaper>
        </Modal>
    </div>
</template>
<script>
import TestPaper from '@/view/evaluation/index/TestPaper.vue'
export default {
    components: {
        TestPaper
    },
    props: {
        selectedId: {
            type: String,
            default: ''
        },
        periodId: {
            type: String,
            default: ''
        },
        subjectId: {
            type: String,
            defualt: ''
        },
        gradesObj: {
            type: Array,
            defualt: []
        },
        //设置试卷来源校本/个人试卷库，如果设置了则不会有调整试卷来源的功能，如果没有设置则可以手动挑选试卷来源
        source: {
            type: String,
            default: '' //tmid或schoolId
        }
    },
    data() {
        return {
            searchPeriod: '',
            schoolBase: {
                period: []
            },
            paperLoading: false,
            previewStatus: false,
            previewPaper: {
                name: this.$t('learnActivity.manual.noPaper1'),
                score: 0,
                item: []
            },
            isLoading: false,
            pageSize: 10,
            currentPage: 1,
            dataLoading: false,
            paperList: [],
            scope: '',
            allPaper: {
                private: undefined,
                school: undefined
            },
            routeScope: ''
        }
    },
    methods: {
        /**挑选试卷 */
        choosePaper(index) {
            let simplePaper = this.paperList[index]
            //确认导入后再获取完整试卷信息
            //let fullPaper = await this.$evTools.getFullPaper(this.paperList[index])
            //this.$emit('selectPaper', simplePaper, fullPaper)
            this.$emit('selectPaper', simplePaper)
        },
        /**
         * 预览试卷
         * @param index
         */
        async previewTestPaper(index) {
            this.previewPaper = {}
            this.paperLoading = true
            this.previewStatus = true
            try {
                this.previewPaper = await this.$evTools.getFullPaper(this.paperList[index])
                setTimeout(() => {
                    this.paperLoading = false
                }, 400)
            } catch (e) {
                setTimeout(() => {
                    this.paperLoading = false
                }, 400)
            }
        },
        getCurrentPageData() {
            this.getPaperList()
        },
        checkFirst() {
            let scope = this.scope == this.$store.state.userInfo.TEAMModelId ? 'private' : 'school'
            this.getPaperList()
            // if (!this.allPaper[scope]) {
            //     this.getPaperList()
            // } else {
            //     if (scope == 'school') {
            //         this.paperList = this.allPaper[scope].filter(item => {
            //             return item.subjectId == this.subjectId
            //         })
            //     } else {
            //         this.paperList = this.allPaper[scope]
            //     }
            // }

        },
        /** 获取试卷列表 */
        getPaperList() {
            if (this.scope) {
                this.isLoading = true
                let scope = this.scope == this.$store.state.userInfo.TEAMModelId ? 'private' : 'school'
                let params = {
                    '@DESC': 'createTime',
                    'code': this.scope,
                    "scope": scope,
                    //'gradeIds[*]': scope == 'school' ? this.gradeIds : [],
                    'gradeIds[*]': [],
                    'periodId': scope == 'school' ? this.searchPeriod : [],
                    'subjectId': [],
                }
                this.$api.learnActivity.FindExamPaper(params).then(res => {
                    this.allPaper[scope] = res.papers
                    if (this.subjectId && scope == 'school') {
                        this.paperList = this.allPaper[scope].filter(item => {
                            return item.subjectId == this.subjectId
                        })
                    } else {
                        this.paperList = res.papers
                    }
                }).finally(() => {
                    setTimeout(() => {
                        this.isLoading = false
                    }, 500)
                })
            }
        },
    },
    created() {
        this.routeScope = this.$route.name == 'createPrivEva' ? 'private' : 'school'
        this.$store.dispatch('user/getSchoolProfile').then(
            res => {
                if (res.school_base) {
                    this.schoolBase = res.school_base
                    if (this.routeScope == 'private' && this.schoolBase.period.length) {
                        this.searchPeriod = this.schoolBase.period[0].id
                    }
                }

            }
        ).finally(() => {
            this.getPaperList()
        })
    },
    computed: {
        gradeIds() {
            if (this.gradesObj) {
                return this.gradesObj.map(item => {
                    return item.id
                })
            } else {
                return []
            }
        },
        subjectList() {
            let res = this.schoolBase.period.find((item) => {
                return item.id == this.searchPeriod
            })
            if (res) {
                return res.subjects
            } else {
                return []
            }
        },
        gradeList() {
            let res = this.schoolBase.period.find((item) => {
                return item.id == this.searchPeriod
            })
            if (res) {
                return res.grades
            } else {
                return []
            }
        }
    },
    watch: {
        periodId: {
            handler() {
                this.searchPeriod = this.periodId
                this.getPaperList()
            },
            immediate: true
        },
        subjectId: {
            handler() {
                this.checkFirst()
            }
        },
        source: {
            handler(n, o) {
                if (this.source) {
                    this.scope = this.source
                } else {
                    this.scope = this.$route.name == 'createPrivEva' ? this.$store.state.userInfo.TEAMModelId : this.$store.state.userInfo.schoolCode
                }
            },
            immediate: true
        }

    }
}
</script>
<style scoped lang="less">
@import "./ManualPaper.less";
</style>
<style>
</style>