<template>
    <div class="arb-container">
        <div class="arb-header">
            <span :class="curBarIndex == 1 ? 'bar-item line-bottom-active line-bottom':'bar-item line-bottom'" @click="selectBar(1)">
                未处理
            </span>
            <span :class="curBarIndex == 0 ? 'bar-item line-bottom-active line-bottom':'bar-item line-bottom'" @click="selectBar(0)">
                已处理
            </span>
            <Tooltip class="score-tips" theme="light" max-width="200" content="误差控制值：双评差值的最大允许值称为误差控制值。误差控制值大于题目满分的1/6系统自动设置为仲裁卷。">
                <span style="color:#ff9900;">
                    误差控制值
                    <Icon type="ios-help-circle-outline" />
                </span>
            </Tooltip>
        </div>
        <div class="arb-content">
            <vuescroll>
                <div class="arb-paper-item" v-for="(item,index) in arr" :key="index">
                    <p class="qu-info-wrap">
                        <span class="qu-info-label">题目：</span>
                        <span class="qu-info-value">5-5</span>
                    </p>
                    <div style="flex:1">
                        <p>
                            <span class="score-info-label">分数1：</span>
                            <span class="score-info-value">5</span>
                            <span class="score-info-label">分数2：</span>
                            <span class="score-info-value">15</span>
                            <span class="score-info-label">配分：</span>
                            <span class="score-info-value">20</span>
                            <span class="score-info-label">
                                <Icon type="md-time" />
                                2021-09-01
                            </span>
                        </p>
                    </div>
                    <div style="width:100px">
                        <Button type="primary" shape="circle" size="small" long @click="toArb(index)">仲裁</Button>
                    </div>
                </div>
            </vuescroll>
            <!-- <div class="not-started-box"></div> -->
            <!-- <EmptyData textContent="阅卷老师正在阅卷中，请等阅卷结束后再处理仲裁卷。"></EmptyData> -->
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            curBarIndex: 0,
            arr:[0,0,0,0,0,0,0,0,0,0,0]
        }
    },
    created() {

    },
    methods: {
        toArb(index){
            this.$router.push({
                name:'ArbView'
            })
        },
        selectBar(index) {
            this.curBarIndex = index
        }
    }
}
</script>
<style scoped lang="less">
// .not-started-box{
//     width: 300px;
//     height: 400px;
//     background: #2b2a2f;
//     margin: 120px auto;
// }
.score-tips {
    float: right;
    margin-right: 30px;
    cursor: pointer;
}
.qu-info-wrap {
    width: 150px;
    text-align: center;
}
.score-info-label {
    color: #a5a5a5;
    font-size: 14px;
}
.score-info-value {
    color: white;
    font-size: 16px;
    margin-right: 30px;
}
.qu-info-label {
    color: white;
    font-size: 12px;
}
.qu-info-value {
    color: white;
    font-size: 20px;
    margin-right: 30px;
}
.arb-container {
    width: 100%;
    height: 100%;
    padding-left: 10px;
}
.arb-header {
    width: 100%;
    height: 45px;
    line-height: 45px;
    border-bottom: 1px solid #606060;
    .bar-item {
        display: inline-block;
        cursor: pointer;
    }
}
.arb-content {
    width: 100%;
    height: ~"calc(100% - 45px)";
}
.arb-paper-item {
    width: ~"calc(100% - 15px)";
    margin: 6px 5px 6px 0px;
    border: 1px solid #363636;
    background: #2b2a2f;
    padding: 15px;
    display: flex;
    align-items: center;
    border-radius: 0px;
    &:hover{
        background: #383838;
    }
}
</style>