<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 == curEvIndex ? 'block-bg-active':'']" v-for="(item,index) in markList" :key="index" @click="selectEvaluation(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">
                        <!-- 数据概览 -->
                        <div class="setting-block"  v-show="curBarIndex == 0">
                            <p class="block-title">{{$t('learnActivity.mark.dataView')}}</p>
                            <div class="setting-content count-content">
                                <div class="count-wrap">
                                    <p class="count-num">13</p>
                                    <p class="count-label">
                                        <Icon type="ios-paper" class="count-icon" size="16" />
                                        {{$t('task.mLabel5')}}
                                    </p>
                                </div>
                                <div class="count-wrap">
                                    <p class="count-num">1</p>
                                    <p class="count-label">
                                        <Icon type="ios-star" class="count-icon" size="16" />
                                        {{$t('task.mLabel2')}}
                                    </p>
                                </div>
                                <div class="count-wrap">
                                    <p class="count-num">2</p>
                                    <p class="count-label">
                                        <Icon type="ios-star-outline" class="count-icon" size="16" />
                                        {{$t('task.mLabel3')}}
                                    </p>
                                </div>
                                <div class="count-wrap to-mark-view">
                                    <p class="count-num">
                                        9
                                    </p>
                                    <p class="count-label">
                                        <Icon custom="iconfont icon-scanning" class="count-icon" size="16" />
                                        {{$t('task.mLabel4')}}
                                    </p>
                                </div>
                            </div>
                        </div>
                        <!-- 按题 批阅进度 -->
                        <div class="setting-block" v-show="curBarIndex == 0">
                            <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' : '300px'}">
                                <vuescroll>
                                    <div class="qu-info-item" v-for="(item,index) in quCount" :key="index">
                                        <span class="qu-index" :style="{color:index < 3 ? '#606060' : '#fff'}">
                                            {{index + 1}}
                                        </span>
                                        <div class="data-wrap">
                                            <p>
                                                <!-- 标准差 -->
                                                <span class="data-item">
                                                    <Icon custom="iconfont icon-formula" class="data-item-icon" size="16" title="标准差" />
                                                    <span class="data-item-value" title="我的">
                                                        5
                                                    </span>
                                                    <span class="total-value" title="集体">
                                                        (8)
                                                    </span>
                                                </span>
                                                <!-- 平均分 -->
                                                <span class="data-item">
                                                    <Icon custom="iconfont icon-avg" class="data-item-icon" size="16" title="平均分" />
                                                    <span class="data-item-value" title="我的">
                                                        5
                                                    </span>
                                                    <span class="total-value" title="集体">
                                                        (5.5)
                                                    </span>
                                                </span>
                                                <!-- 最高分 -->
                                                <span class="data-item">
                                                    <Icon custom="iconfont icon-highest" class="data-item-icon" size="16" title="最高分" />
                                                    <span class="data-item-value" title="我的">
                                                        10
                                                    </span>
                                                    <span class="total-value" title="集体">
                                                        (9)
                                                    </span>
                                                </span>
                                                <!-- 最低分 -->
                                                <span class="data-item">
                                                    <Icon custom="iconfont icon-lowest" class="data-item-icon" size="16" title="最低分" />
                                                    <span class="data-item-value" title="我的">
                                                        0
                                                    </span>
                                                    <span class="total-value" title="集体">
                                                        (1)
                                                    </span>
                                                </span>
                                            </p>

                                            <p>

                                            </p>
                                        </div>
                                        <div class="progress-wrap">
                                            <Progress :percent="index < 3 ? 100 : 25" />
                                            <p v-if="index < 3" class="prog-tips" style="color: #19be6b">
                                                客观题已由系统自动完成评分。
                                            </p>
                                            <p v-else class="prog-tips">
                                                <span>{{$t('task.mLabel2')}}:4</span>
                                                <span>{{$t('task.mLabel3')}}:8</span>
                                            </p>
                                        </div>
                                        <div class="to-mark">
                                            <Button type="primary" shape="circle" :disabled="index < 3" size="small" style="width:120px" @click="toMarkView(0)">
                                                {{$t('task.mark')}}
                                            </Button>
                                        </div>
                                    </div>
                                </vuescroll>
                            </div>
                        </div>
                        <!--按人 学生信息 -->
                        <div class="filter-tab-wrap"  v-show="curBarIndex == 1">
                            <span :class="['filter-tab-item', tabIndex == 0 ? 'filter-tab-item-active':'']" @click="tabIndex = 0">
                                {{$t('task.mLabel3')}}
                            </span>
                            <span :class="['filter-tab-item', tabIndex == 1 ? 'filter-tab-item-active':'']" @click="tabIndex = 1">
                                {{$t('task.mLabel4')}}
                            </span>
                            <span :class="['filter-tab-item', tabIndex == 2 ? 'filter-tab-item-active':'']" @click="tabIndex = 2">
                                {{$t('task.mLabel2')}}
                            </span>
                        </div>
                        <div class="setting-block stu-name-wrap"  v-show="curBarIndex == 1">
                            <div class="setting-content stu-name-content">
                                <div class="stu-wrap">
                                    <div class="stu-list-wrap no-stu-wrap" v-show="tabIndex == 0">
                                        <p class="no-mark-text">
                                            还剩
                                            <span class="no-mark-count">2</span>
                                            人未阅,
                                            <span class="continue-mark" @click="toMarkView(1)">继续阅卷</span>
                                        </p>
                                    </div>
                                    <div class="stu-list-wrap" v-show="tabIndex == 1 || tabIndex == 2">
                                        <span class="stu-name" v-for="(item,index) in names" :key="index" @click="toMarkView(1)">学生{{index}}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 数据统计 平均分、最高分、最低分、标准差 -->
                        <div class="setting-block"  v-show="curBarIndex == 1">
                            <p class="block-title">数据统计</p>
                            <div class="setting-content  data-content dark-iview-table">
                                <DataCompare></DataCompare>
                                <ProgPie></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>
                    <!-- 按人批阅 -->
                    <vuescroll class="mark-info-content">
                    </vuescroll>
                </div>
            </Split>
        </div>
    </div>
</template>
<script>
import DataCompare from '@/view/learnactivity/markpaper/Compare.vue'
import ProgPie from '@/view/learnactivity/markpaper/ProgPie.vue'
export default {
    components: {
        DataCompare, ProgPie
    },
    data() {
        return {
            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: '未处理'
                }, {
                    id: '001',
                    quNo: 5,
                    desc: '模糊，看不清楚',
                    status: '未处理'
                }, {
                    id: '001',
                    quNo: 5,
                    desc: '模糊，看不清楚',
                    status: '未处理'
                }, {
                    id: '001',
                    quNo: 5,
                    desc: '模糊，看不清楚',
                    status: '未处理'
                }, {
                    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: '未处理'
                },
                {
                    id: '001',
                    quNo: 5,
                    myScore: 5,
                    otScore: 10,
                    status: '未处理'
                },
                {
                    id: '001',
                    quNo: 5,
                    myScore: 5,
                    otScore: 10,
                    status: '未处理'
                },
                {
                    id: '001',
                    quNo: 5,
                    myScore: 5,
                    otScore: 10,
                    status: '未处理'
                }
            ],
            tabIndex: 0,
            split1: 0.2,
            curBarIndex: 1,
            markList: [],
            curEvIndex: 0,
            quCount: [],
            fullQuProg: false
        }
    },
    methods: {
        rowClassName(row, index) {
            if (index % 2 == 0) {
                return 'stripe-row'
            } else {
                return ''
            }
        },
        /**
         * mode 0:按题 1：按人
         */
        toMarkView(mode) {
            sessionStorage.setItem('markFrom', this.$route.name)
            this.$router.push({
                name: 'MarkView',
                params: {
                    type: mode,
                    from: this.$route.name
                }
            })
        },
        /**获取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.curEvIndex = sessionStorage.getItem('markIndex') || 0
                    } else {
                        this.$Message.error('API error!')
                    }
                },
                err => {
                    this.$Message.error('API error!')
                }
            )
        },
        selectEvaluation(index) {
            this.curEvIndex = index
            sessionStorage.setItem('markIndex', index)
            // if (this.markList[this.curEvaIndex] && this.markList[this.curEvaIndex].papers.length == 0) {
            //     this.findExamPaper()
            // } else {
            //     this.examDetaiInfo = this.evaListShow[this.curEvaIndex]
            // }
        },
    },
    created() {
        this.findTask()
        this.quCount = Array.from(new Array(13).keys())
        this.curBarIndex = sessionStorage.getItem('markMode') || 0

    },
    computed: {
        names() {
            if (this.tabIndex == 1) {
                return Array.from(new Array(2).keys())
            } else {
                return Array.from(new Array(6).keys())
            }

        }
    }
}
</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>