<template>
    <!-- 未做多语言 -->
    <div class="task-container">
        <div class="task-content dark-iview-split">
            <Split v-model="split1">
                <!-- 阅卷任务列表 -->
                <div class="ev-list" slot="left">
                    <div class="ev-list-header">
                        <span>
                            {{$t('task.markTask')}}
                        </span>
                    </div>
                    <vuescroll class="ev-list-content">
                        <div :class="['ev-item','block-bg',index == curTaskIndex ? 'block-bg-active':'']" v-for="(item,index) in markList" :key="index" @click="selectTask(index)">
                            <p class="ev-name">
                                <span>{{item.name}}</span>
                                <span class="mark-status-tag">{{$t('task.markStatus1')}}</span>
                            </p>
                            <p class="ev-info">
                                <Icon type="md-time" style="margin-right:5px;" size="16" />
                                <span>{{$t('learnActivity.mgtScEv.endTime')}}{{dateFormat(item.endTime)}}</span>
                            </p>
                            <p class="ev-info">
                                <Icon type="ios-cube" style="margin-right:5px;" size="14" />
                                <span>批阅科目：{{item.subjectName}}</span>
                            </p>
                        </div>
                        <EmptyData v-show="markList.length == 0" textContent="暂无阅卷任务" style="margin-top:80px"></EmptyData>
                    </vuescroll>
                </div>
                <!-- 阅卷信息 -->
                <div slot="right" class="ev-mark-info">
                    <div class="ev-mark-header">
                        <span :class="curBarIndex == 1 ? 'task-bar-item line-bottom-active line-bottom':'task-bar-item line-bottom'" @click="selectBar(1)">
                            {{$t('task.markMode2')}}
                        </span>
                        <span :class="curBarIndex == 0 ? 'task-bar-item line-bottom-active line-bottom':'task-bar-item line-bottom'" @click="selectBar(0)">
                            {{$t('task.markMode1')}}
                        </span>
                    </div>
                    <vuescroll class="mark-info-content">
                        <StuProg v-show="curBarIndex == 1" @getStuId="toByStuView" :stusData="markData ? markData.attr : []"  :total="markList[curTaskIndex] ? markList[curTaskIndex].count : 1"></StuProg>
                        <!-- 按题 批阅进度 -->
                        <div class="setting-block" v-show="curBarIndex == 0" style="margin-top:15px">
                            <p class="block-title">
                                {{$t('task.markProg')}}
                                <Icon type="ios-arrow-down" :class="['show-full-icon', fullQuProg ? 'full-qu-prog' : '']" @click="fullQuProg = !fullQuProg" />
                            </p>
                            <div class="setting-content" :style="{height: fullQuProg ? 'fit-content' : '420px'}">
                                <vuescroll>
                                    <!-- 按题阅卷题目进度条 -->
                                    <QuProg :paperData="fullPaper" :stusData="markData ? markData.attr : []" :total="markList[curTaskIndex] ? markList[curTaskIndex].count : 1" @getQuIndex="toByQuView"></QuProg>
                                </vuescroll>
                            </div>
                        </div>
                        <!-- 数据统计 平均分、最高分、最低分、标准差 -->
                        <div class="setting-block">
                            <p class="block-title">数据统计</p>
                            <div class="setting-content  data-content dark-iview-table">
                                <DataCompare></DataCompare>
                                <ProgPie :count="[marked.length,marking.length,unmarked]"></ProgPie>
                            </div>
                        </div>

                        <!-- 异常 暂时隐藏-->
                        <!-- <div class="setting-block">
                            <p class="block-title">异常卷</p>
                            <div class="setting-content dark-iview-table my-stripe-table">
                                <Table :row-class-name="rowClassName" :columns="columns1" :data="data1"></Table>
                            </div>
                        </div> -->
                        <!-- 仲裁 暂时隐藏-->
                        <!-- <div class="setting-block">
                            <p class="block-title">仲裁卷</p>
                            <div class="setting-content dark-iview-table my-stripe-table">
                                <Table :row-class-name="rowClassName" :columns="columns2" :data="data2"></Table>
                            </div>
                        </div> -->
                    </vuescroll>
                </div>
            </Split>
        </div>
    </div>
</template>
<script>
import DataCompare from './mark/Compare.vue'
import ProgPie from './mark/ProgPie.vue'
import QuProg from './mark/QuProg.vue'
import StuProg from './mark/StuProg.vue'
export default {
    components: {
        DataCompare, ProgPie, QuProg, StuProg
    },
    data() {
        return {
            objectiveQu: ['single', 'multiple', 'judge'],
            columns1: [
                {
                    title: '学号',
                    key: 'id',
                    align: 'center',
                    width: 120
                },
                {
                    title: '题号',
                    key: 'quNo',
                    align: 'center',
                    // width:70
                },
                {
                    title: '异常说明',
                    key: 'desc',
                    align: 'center',
                    // width:180
                },
                {
                    title: '状态',
                    key: 'status',
                    align: 'center',
                    width: 120
                }
            ],
            data1: [
                {
                    id: '001',
                    quNo: 5,
                    desc: '模糊，看不清楚',
                    status: '未处理'
                }
            ],
            columns2: [
                {
                    title: '学号',
                    key: 'id',
                    align: 'center',
                    width: 120
                },
                {
                    title: '题号',
                    key: 'quNo',
                    align: 'center',
                    // width:70
                },
                {
                    title: '我的评分',
                    key: 'myScore',
                    align: 'center',
                    // width:180
                },
                {
                    title: '其他老师评分',
                    key: 'otScore',
                    align: 'center',
                    // width:180
                },
                {
                    title: '状态',
                    key: 'status',
                    align: 'center',
                    width: 120
                }
            ],
            data2: [
                {
                    id: '001',
                    quNo: 5,
                    myScore: 5,
                    otScore: 10,
                    status: '未处理'
                }
            ],
            tabIndex: 0,
            split1: 0.2,
            curBarIndex: 1,
            markList: [],
            curTaskIndex: 0,
            fullQuProg: false,
            markData: undefined,
            fullPaper: {
                item: []
            }
        }
    },
    methods: {
        /**
         * index 题目index 必传
         * childIndex 小题index 非必传 
         */
        getScoreIndex(index, childIndex) {
            let realIndex = 0
            this.fullPaper.item.forEach((item, itemIndex) => {
                if (itemIndex <= index) {
                    //综合题
                    if (item.children.length) {
                        item.children.forEach((childItem, cIndex) => {
                            if (itemIndex < index) {
                                realIndex++
                            } else if (cIndex <= childIndex) {
                                realIndex++
                            }
                        })
                    }
                    else {
                        realIndex++
                    }
                }
            })
            return --realIndex
        },
        rowClassName(row, index) {
            if (index % 2 == 0) {
                return 'stripe-row'
            } else {
                return ''
            }
        },
        /**
         * 按人阅卷
         */
        async toByStuView(stuId) {
            sessionStorage.setItem('markFrom', this.$route.name)
            let sas = this.$store.state.user.schoolProfile.blob_sas //目前只有校本评测安排阅卷任务
            let blobUrl = JSON.parse(decodeURIComponent(localStorage.school_profile, "utf-8")).blob_uri //目前只有校本评测安排阅卷任务

            let answer, score, sId
            if (stuId) {
                let stuInfo = this.markData.attr.find(item => {
                    return item.stuId == stuId
                })
                answer = stuInfo.info.ans ? JSON.parse(await this.$tools.getFile(`${blobUrl}/exam/${stuInfo.info.ans}?${sas}`)) : []
                score = stuInfo.info.score
                sId = stuId
            } else {
                let resData = await this.getNextStu()
                answer = resData.ans.ans ? JSON.parse(await this.$tools.getFile(`${blobUrl}/exam/${resData.ans.ans}?${sas}`)) : []
                score = resData.ans.score
                sId = resData.stuId
            }
            this.$router.push({
                name: 'ByStu',
                params: {
                    from: this.$route.name,
                    task: this.markList[this.curTaskIndex],
                    stuId: sId,
                    fullPaper: this.fullPaper,
                    stusData:this.markData.attr,
                    answer,
                    score
                }
            })
        },
        /**
        * 按题阅卷
        * quIndex 必传
        * childIndex 非必传
        */
        async toByQuView(data) {
            let {quIndex, childIndex} = data
            sessionStorage.setItem('markFrom', this.$route.name)
            let sas = this.$store.state.user.schoolProfile.blob_sas //目前只有校本评测安排阅卷任务
            let blobUrl = JSON.parse(decodeURIComponent(localStorage.school_profile, "utf-8")).blob_uri //目前只有校本评测安排阅卷任务
            // 获取学生作答数据
            this.markData.attr.forEach(async item => {
                this.$set(item.info, 'answer', item.info.ans ? JSON.parse(await this.$tools.getFile(`${blobUrl}/exam/${item.info.ans}?${sas}`)) : [])
            })
            this.$router.push({
                name: 'ByQu',
                params: {
                    from: this.$route.name,
                    task: this.markList[this.curTaskIndex], //阅卷任务数据
                    stusInfo: this.markData.attr, //已阅和进行中的学生数据
                    paperData: this.fullPaper, //试卷数据
                    quIndex,
                    childIndex
                }
            })
        },
        /**
         * 批阅下个学生
         * @param stuId 如果传了stuid则会获取对应学生的数据，否则随机获取一个学生
         */
        getNextStu(stuId) {
            let requestData = {
                code: this.markList[this.curTaskIndex].ecode.replace('Exam-', ''),
                id: this.markList[this.curTaskIndex].id,
                subjectId: this.markList[this.curTaskIndex].subject,
                count: this.markList[this.curTaskIndex].count,
                tmdId: this.$store.state.userInfo.TEAMModelId,
                stuId
            }
            return this.$api.mark.FindNextStu(requestData)
        },
        /**获取type对应的label */
        getTypeLabel(code) {
            for (let item of this.$GLOBAL.EV_TYPE()) {
                if (item.value == code) {
                    return item.label
                }
            }
        },
        dateFormat(timestamp) {
            var date = new Date(timestamp)
            var Y = date.getFullYear() + '-'
            var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
            var D = date.getDate() + ' '
            return Y + M + D;
        },
        selectBar(index) {
            this.curBarIndex = index
            sessionStorage.setItem('markMode', index)
        },
        //查询阅卷任务
        findTask() {
            let requestData = {
                code: this.$store.state.userInfo.TEAMModelId
            }
            this.$api.mark.FindTask(requestData).then(
                res => {
                    if (!res.error) {
                        this.markList = res.tasks
                        this.curTaskIndex = sessionStorage.getItem('markIndex') || 0
                        if (this.markList.length > 0) this.findTaskData()
                    } else {
                        this.$Message.error('API error!')
                    }
                },
                err => {
                    this.$Message.error('API error!')
                }
            )
        },
        //查询当前阅卷任务数据
        findTaskData() {
            let requestData = {
                code: this.markList[this.curTaskIndex].ecode.replace('Exam-', ''),
                id: this.markList[this.curTaskIndex].id,
                subjectId: this.markList[this.curTaskIndex].subject,
                tmdId: this.$store.state.userInfo.TEAMModelId
            }
            this.$api.mark.FindTeaData(requestData).then(
                async res => {
                    if (!res.error) {
                        this.markData = res
                        //获取试卷详细数据
                        //获取试卷完整信息
                        this.fullPaper = await this.$evTools.getFullPaper({
                            blob: this.markData.paper
                        }, 'school')
                    }
                },
                err => {
                    console.log(err)
                }
            )
        },
        selectTask(index) {
            this.curTaskIndex = index
            sessionStorage.setItem('markIndex', index)
            this.findTaskData()
        },

    },
    created() {
        this.findTask()
        this.curBarIndex = sessionStorage.getItem('markMode') || 0

    },
    computed: {
        //当前阅卷任务未阅数量
        unmarked() {
            if (this.markList.length > 0) {
                let total = this.markList[this.curTaskIndex].count
                let marked = this.markData ? this.markData.attr.length : 0
                return total - marked
            } else {
                return 0
            }
        },
        //当前阅卷任务已阅学生信息
        marked() {
            if (this.markData && this.markData.attr) {
                return this.markData.attr.filter(item => {
                    return item.info.score.indexOf(-1) == -1
                })
            } else {
                return []
            }
        },
        //当前阅卷任务进行中学生信息
        marking() {
            if (this.markData && this.markData.attr) {
                return this.markData.attr.filter(item => {
                    return item.info.score.indexOf(-1) !== -1
                })
            } else {
                return []
            }
        },
    }
}
</script>
<style scoped lang="less">
@import "./index.less";
</style>
<style lang="less">
.stripe-row {
    background: #0000001a;
}
.my-stripe-table .ivu-table td,
.my-stripe-table .ivu-table tr th {
    border-color: transparent !important;
}
</style>