<template>
    <div class="page_grades">
    <div  :class="'score_content_s'">
        <div class="content_center">
            <div class="score_upload">
                <div class="upload_item">
                    <div class="item_progress grades_bg_1"></div>
                    <div class="item_text">
                        数据归集
                    </div>
                </div>
                <div class="upload_item">
                    
                    <div class="item_progress grades_bg_2"></div>
                    <div class="item_text">
                        得分核算
                    </div>
                </div>
                <div class="upload_item">
                    
                    <div class="item_progress grades_bg_3"></div>
                    <div class="item_text">
                        维度研判
                    </div>
                </div>
                <div class="upload_item">
                    <div class="item_progress grades_bg_4"> </div>
                    <div class="item_text">
                        结论输出
                    </div>
                </div>
            </div>
            <div class="score_progress">
                <span class="span_title">生成进度：</span>
                <el-progress :percentage="percentage" :stroke-width="34" :color="customColor" :show-text="false"></el-progress>
                <span class="span_progress">{{percentage}}%</span>
            </div>
            <div class="score_button">
                <el-button type="primary" class="button_start"  :loading="isLoading" >{{ReleaseButtonText}}</el-button>
            </div>
            <div class="page_jg_20"></div>
            <div class="page_jg_20"></div>
            <div class="score_message" v-if="isSucess">
                已发布成功，请至分析报告查看最新成绩
            </div>
        </div>
    </div>
</div>
</template>


<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useRoute,useRouter } from 'vue-router';

const percentage = ref(0)
const customColor = ref('')
const isLoading = ref(false)

const ReleaseButtonText = ref('开始生成')
const isSucess = ref(false)


onMounted(async ()=>{
})
</script>



<style lang="scss" scoped>
//成绩汇总页面
.page_grades {
    width: 100%;   
    height: 100%;
    background-color: #fff;

    background-image:url("@/assets/evaluateTeaching/grades_bg.webp");
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size:100% 100%;
    position: relative;
  

    .score_content_s
    {
        width:100%;
        height:100%;
        display: flex;
        justify-content: center;
        align-items: center;
        .content_center
        {
            line-height: 1;
            width: calc(100% - 100px);
            margin: auto;
            .score_progress
            {
                margin-top: 60px;
            }
            .score_button
            {
                margin-top: 40px;
            }
        }
    }

     @media (max-height: 600px) 
    {
        .score_content
        {
            width:100%;
            height:calc(100% - 230px);
            display: flex;
            justify-content: center;
            align-items: center;
            .content_center
            {
                width: calc(100% - 200px);
                margin: auto;
            }

        
        }
    }
    .grades_class_list
    {
        width: 100%;
        // min-height: auto;
        height: auto;
        padding: 20px;
        box-sizing: border-box;
        // display: flex;
        // justify-content: flex-start;
        .list_tab
        {
            width: 100%;
            display: flex;
            justify-content: flex-start;
            gap: 10px;
        }

        .list_content
        {
            width: 100%;
            height: 220px;
            background: rgba(46,100,250,0.08);
            border-radius: 8px 8px 8px 8px;
            border: 1px solid rgba(46,100,250,0.8);
            padding: 20px 20px 10px 20px;
            box-sizing: border-box;
            .all_check
            {
                text-align: left;
              
                display: flex;
                align-items: center;
            }
            .content_height
            {
                width: 100%;
                height: calc(100% - 30px);
                overflow-y: auto;
            }
            .grades_list
            {
                display: flex;
                justify-content: flex-start;
                flex-wrap: wrap;
                margin-top: 16px;

                .el-checkbox-group
                {
                    display: flex;
                    justify-content: flex-start;
                    flex-wrap: wrap;
                    width: 100%;
                    .el-checkbox
                    {
                        width: 8%;
                        min-width: 100px;
                        margin-bottom: 20px;
                        text-align: left;
                    }
                }
            }
        }
        
        @media (max-height: 600px) 
        {
            .list_content
            {
                
                height: 150px !important;
                
            }
        }
    }
    
    .select_exam_content
    {
        color: #333333;
        font-size: 16px;
        font-weight: 500;
        left: 20px;
        top:15px;
        position: absolute;
    }



    /* 小屏幕笔记本的样式 常见分辨率：1366x768 */
    @media (max-height: 600px) 
    {
        .score_upload
        {
            width: 100%;
            margin: auto;
            display:flex;
            justify-content: space-around;
            align-items: center;
            height:auto;
            gap: 38px;
            .upload_item
            {
                width: 25%;
                height: auto;
                .item_title
                {
                    width: 100%;
                    text-align: center;
                }

                .item_progress
                {
                    width: 150px;
                    height: 150px;
                    margin: auto;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    background-size: 100% 100%;
                    background-position: 0 0;
                    background-repeat: no-repeat;
                }

                .item_text
                {
                    width: 100%;
                    // height: 30px;
                    // line-height: 30px;
                    text-align: center;
                    font-weight: 400;
                    font-size: 20px;
                    color: #666666;
                
                }

                .grades_bg_1
                {
                    background-image: url('@/assets/evaluateTeaching/grades_icon1.webp'); 
                }

                .grades_bg_2
                {
                    background-image: url('@/assets/evaluateTeaching/grades_icon2.webp'); 
                }

                .grades_bg_3
                {
                    background-image: url('@/assets/evaluateTeaching/grades_icon3.webp'); 
                }

                .grades_bg_4
                {
                    background-image: url('@/assets/evaluateTeaching/grades_icon4.webp'); 
                }
                
            }


            
        }

        // 成绩汇总进度条
        .score_progress
        {
            width: 100%;
            margin-top: 20px;
            display: flex;
            // justify-content: space-around;
            justify-content: center;
            align-items: center;
            gap: 20px;

            .el-progress
            {
                width: calc(100% - 430px);    

                .el-progress-bar__inner
                {
                    background: linear-gradient( 90deg, #2E64FA 0%, #46B0FC 100%);
                    border-radius: 10px 0px 0px 10px;
                }

                .el-progress-bar__outer
                {
                    background-color: #F3F3F3 !important;
                    border:1px solid #2796FF;

                }
            }

            .span_title
            {
                width: 130px;

                font-weight: 400;
                font-size: 24px;
                color: #666666;
            }

            .span_progress
            {
                width: 100px;

                font-weight: 600;
                font-size: 30px;
                color: #0879FC;

                
            }
        }
        .score_button
        {
            width: 100%;
            height: 60px;
            margin-top: 20px;
            font-size: 14px;
            font-weight: 500;
            display: flex;
            justify-content: center;
            gap: 40px;
            .button_start
            {
                width: 200px;
                height: 42px;
                background: linear-gradient( 90deg, #2E64FA 0%, #46B0FC 100%);
                border-radius: 4px 4px 4px 4px;
                border:none;
                font-weight: 600;
                font-size: 16px;
                color: #FFFFFF;
            }

            //客观题发布
            .object_button
            {
                width: 200px;
                height: 52px;
                border-radius: 4px 4px 4px 4px;
                border: 1px solid #2E64FA;

                font-weight: 500;
                font-size: 16px;
                color: #2E64FA;
            }

            .button_start_disabled
            {
                width: 200px;
                height: 42px;
                background: #F3F3F3;
                border-radius: 4px 4px 4px 4px;
                border:none;
                font-weight: 600;
                font-size: 16px;
                color: #C0C4CC;
            }
            //重新发布
            .score_button_again
            {
                width: 240px;
                height: 42px;
                font-size: 14px;
                font-weight: 500;
            }

            //置灰 不可点击
            .button_disabled
            {
                width: 200px;
                height: 42px;
                // background: linear-gradient( 90deg, #d5e0fe 0%, #f3f3f3 100%);
                background-color: #f3f3f3;
                border-radius: 4px 4px 4px 4px;
                border:none;
                font-weight: 600;
                font-size: 16px;
                color: #c0c4cc;
            }

        
        }

        .score_message
        {
            width: 100%;
            height: 30px;
            line-height: 30px;
            text-align: center;
            font-weight: 400;
            font-size: 14px;
            color: #666666;
        
        }

    }

    /* 屏幕高度在767-到1440之间时 常见分辨率：1600x900, 1920x1080*/
    @media (min-height: 600px) and (max-height: 900px) 
    {
        .score_upload
        {
            width: 100%;
            margin: auto;
            display:flex;
            justify-content: space-around;
            align-items: center;
            height:auto;
            gap: 38px;
            .upload_item
            {
                width: 25%;
                height: auto;
                .item_title
                {
                    width: 100%;
                    text-align: center;
                }

                .item_progress
                {
                    width: 200px;
                    height: 200px;
                    margin: auto;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    background-size: 100% 100%;
                    background-position: 0 0;
                    background-repeat: no-repeat;
                }

                .item_text
                {
                    width: 100%;
                    // height: 30px;
                    // line-height: 30px;
                    text-align: center;
                    font-weight: 400;
                    font-size: 20px;
                    color: #666666;
                
                }

                .grades_bg_1
                {
                    background-image: url('@/assets/evaluateTeaching/grades_icon1.webp'); 
                }

                .grades_bg_2
                {
                    background-image: url('@/assets/evaluateTeaching/grades_icon2.webp'); 
                }

                .grades_bg_3
                {
                    background-image: url('@/assets/evaluateTeaching/grades_icon3.webp'); 
                }

                .grades_bg_4
                {
                    background-image: url('@/assets/evaluateTeaching/grades_icon4.webp'); 
                }
                
            }


            
        }

        // 成绩汇总进度条
        .score_progress
        {
            width: 100%;
            margin-top: 20px;
            display: flex;
            // justify-content: space-around;
            justify-content: center;
            align-items: center;
            gap: 20px;

            .el-progress
            {
                width: calc(100% - 430px);    

                .el-progress-bar__inner
                {
                    background: linear-gradient( 90deg, #2E64FA 0%, #46B0FC 100%);
                    border-radius: 10px 0px 0px 10px;
                }

                .el-progress-bar__outer
                {
                    background-color: #F3F3F3 !important;
                    border:1px solid #2796FF;

                }
            }

            .span_title
            {
                width: 130px;

                font-weight: 400;
                font-size: 24px;
                color: #666666;
            }

            .span_progress
            {
                width: 100px;

                font-weight: 600;
                font-size: 30px;
                color: #0879FC;

                
            }
        }
        .score_button
        {
            width: 100%;
            height: 60px;
            margin-top: 20px;
            font-size: 14px;
            font-weight: 500;
            display: flex;
            justify-content: center;
            gap: 40px;

            .button_start
            {
                width: 200px;
                height: 52px;
                background: linear-gradient( 90deg, #2E64FA 0%, #46B0FC 100%);
                border-radius: 4px 4px 4px 4px;
                border:none;
                font-weight: 600;
                font-size: 16px;
                color: #FFFFFF;
            }

            
            //客观题发布
            .object_button
            {
                width: 200px;
                height: 52px;
                border-radius: 4px 4px 4px 4px;
                border: 1px solid #2E64FA;

                font-weight: 500;
                font-size: 16px;
                color: #2E64FA;
            }
            .button_start_disabled
            {
                width: 200px;
                height: 52px;
                background: #F3F3F3;
                border-radius: 4px 4px 4px 4px;
                border:none;
                font-weight: 600;
                font-size: 16px;
                color: #C0C4CC;
            }
            //重新发布
            .score_button_again
            {
                width: 240px;
                height: 52px;
                font-size: 14px;
                font-weight: 500;
            }

            //置灰 不可点击
            .button_disabled
            {
                width: 200px;
                height: 52px;
                // background: linear-gradient( 90deg, #d5e0fe 0%, #f3f3f3 100%);
                background-color: #f3f3f3;
                border-radius: 4px 4px 4px 4px;
                border:none;
                font-weight: 600;
                font-size: 16px;
                color: #c0c4cc;
            }

        
        }

        .score_message
        {
            width: 100%;
            height: 30px;
            line-height: 30px;
            text-align: center;
            font-weight: 400;
            font-size: 14px;
            color: #666666;
        
        }
    }

    /* 当屏幕高度至少为1440px时应用的样式  常见分辨率：2560x1440*/
    @media screen and (min-height:900px) 
    {
        .score_upload
        {
            width: 100%;
            margin: auto;
            display:flex;
            justify-content: space-around;
            align-items: center;
            height:auto;
            gap: 38px;
            .upload_item
            {
                width: 25%;
                height: auto;
                .item_title
                {
                    width: 100%;
                    text-align: center;
                }

                .item_progress
                {
                    width: 200px;
                    height: 200px;
                    margin: auto;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    background-size: 100% 100%;
                    background-position: 0 0;
                    background-repeat: no-repeat;
                }

                .item_text
                {
                    width: 100%;
                    // height: 30px;
                    // line-height: 30px;
                    text-align: center;
                    font-weight: 400;
                    font-size: 20px;
                    color: #666666;
                
                }

                .grades_bg_1
                {
                    background-image: url('@/assets/evaluateTeaching/grades_icon1.webp'); 
                }

                .grades_bg_2
                {
                    background-image: url('@/assets/evaluateTeaching/grades_icon2.webp'); 
                }

                .grades_bg_3
                {
                    background-image: url('@/assets/evaluateTeaching/grades_icon3.webp'); 
                }

                .grades_bg_4
                {
                    background-image: url('@/assets/evaluateTeaching/grades_icon4.webp'); 
                }
                
            }


            
        }

        // 成绩汇总进度条
        .score_progress
        {
            width: 100%;
            margin-top: 60px;
            display: flex;
            // justify-content: space-around;
            justify-content: center;
            align-items: center;
            gap: 20px;

            .el-progress
            {
                width: calc(100% - 430px);    

                .el-progress-bar__inner
                {
                    background: linear-gradient( 90deg, #2E64FA 0%, #46B0FC 100%);
                    border-radius: 10px 0px 0px 10px;
                }

                .el-progress-bar__outer
                {
                    background-color: #F3F3F3 !important;
                    border:1px solid #2796FF;

                }
            }

            .span_title
            {
                width: 130px;

                font-weight: 400;
                font-size: 24px;
                color: #666666;
            }

            .span_progress
            {
                width: 100px;

                font-weight: 600;
                font-size: 30px;
                color: #0879FC;

                
            }
        }
        .score_button
        {
            width: 100%;
            height: 60px;
            margin-top: 60px;
            font-size: 14px;
            font-weight: 500;
            display: flex;
            justify-content: center;

            gap: 40px;
            .button_start
            {
                width: 200px;
              
                height: 52px;
                background: linear-gradient( 90deg, #2E64FA 0%, #46B0FC 100%);
                border-radius: 4px 4px 4px 4px;
                border:none;
                font-weight: 600;
                font-size: 16px;
                color: #FFFFFF;
            }

            //客观题发布
            .object_button
            {
                width: 200px;
                height: 52px;
                border-radius: 4px 4px 4px 4px;
                border: 1px solid #2E64FA;

                font-weight: 500;
                font-size: 16px;
                color: #2E64FA;
            }

            .button_start_disabled
            {
                width: 200px;
                height: 52px;
                background: #F3F3F3;
                border-radius: 4px 4px 4px 4px;
                border:none;
                font-weight: 600;
                font-size: 16px;
                color: #C0C4CC;
            }
            //重新发布
            .score_button_again
            {
                width: 240px;
                height: 52px;
                font-size: 14px;
                font-weight: 500;
            }

            //置灰 不可点击
            .button_disabled
            {
                width: 200px;
                height: 52px;
                // background: linear-gradient( 90deg, #d5e0fe 0%, #f3f3f3 100%);
                background-color: #f3f3f3;
                border-radius: 4px 4px 4px 4px;
                border:none;
                font-weight: 600;
                font-size: 16px;
                color: #c0c4cc;
            }

        
        }

        .score_message
        {
            width: 100%;
            height: 30px;
            line-height: 30px;
            text-align: center;
            font-weight: 400;
            font-size: 14px;
            color: #666666;
        
        }
    }

}


.page_grades .score_progress .el-progress{
     :deep(.el-progress-bar__outer) {
        background-color: #F3F3F3 !important;
        border: 1px solid #2796FF;
        box-sizing: content-box;

    }
}
</style>