<template>
    <div class="page_grades">
        <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"  @click="StartRelease" v-if="!isSucess" >{{ReleaseButtonText}}</el-button>
                <el-button type="primary" class="button_start" :loading="isLoading" v-else @click="StartRelease">{{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>
</template>



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

const percentage = ref(50)
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;

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

    .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;
        }
    
    }

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

</style>