<template>
    <LeftNav />
    <div class="main-container wrap main-fullScreen">
        <div class="filterBody">
            <div class="flexWrap">
                <div class="flex-item-1">省份</div>
                <div class="flex-item-9 tags">
                    <div class="" style="color: black;">{{ state.scoreInfo.province }}</div>
                </div>
            </div>
            <div class="flexWrap">
                <div class="flex-item-1">文理分科</div>
                <div class="flex-item-9 tags">
                    <div class="" style="color: black;">{{ state.scoreInfo.cognitioPolyclinic==='文科'?'历史组':'物理组' }}</div>
                </div>
            </div>
            <div class="flexWrap">
                <div class="flex-item-1">专业类别</div>
                <div class="flex-item-9 tags" v-if="state.vipInfo.vipLevel>=9">
                    <el-select
                    v-model="state.selectForm.professionalCategory" placeholder="Select"
                    style="width: 150px"
                    >
                    <el-option
                        v-for="item in state.professionalCategoryList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                    </el-select>
                </div>
                <div class="flex-item-9 tags" v-else>
                    <div class="" style="color: black;">{{ state.scoreInfo.professionalCategory }}</div>
                </div>
            </div>
            <div class="flexWrap">
                <div class="flex-item-1">批次</div>
                <div class="flex-item-9 tags" v-if="state.vipInfo.vipLevel>=9">
                    <el-select
                    v-model="state.selectForm.batch" placeholder="Select"
                    style="width: 150px"
                    >
                    <el-option
                        v-for="item in state.batchArray"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                    </el-select>
                </div>
                <div class="flex-item-9 tags" v-else>
                    <div class="" style="color: black;">{{ state.scoreInfo.batch }}</div>
                </div>
            </div>
            <div class="flexWrap">
                <div class="flex-item-1">文化分数</div>
                <div class="flex-item-15 tags">
                    <el-input v-model="state.selectForm.culturalScore" :min="0" :max="600"
                        @input="filterCulturalScoreInput" />
                </div>
                <div class="flex-item-1">统考分数</div>
                <div class="flex-item-15 tags">
                    <el-input v-model="state.selectForm.professionalScore" :min="0" :max="300"
                        @input="filterProfessionalScoreInput" />
                </div>
                <div class="flex-item-2 tags">
                    <el-button type="primary" :icon="Search" @click="getList">查询</el-button>
                </div>
            </div>
        </div>
        <div class="tableData">
            <el-table :data="state.dataList" height="250" style="width: 100%">
                <el-table-column prop="rulesEnrollProbability" label="类型" width="180" align="center"/>
                <el-table-column prop="probabilityOperator" label="录取规则" width="180" align="center"/>
                <el-table-column prop="score" label="综合分" align="center"/>
                <el-table-column label="操作" align="center">
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click="handleClick(scope.row)">
                            <span>查看院校
                                <span class="ml-5 mr-5">{{ scope.row.schoolNum }}</span>所
                            </span>
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script setup lang="ts">
import { inject, onMounted, reactive } from 'vue';
import LeftNav from "@/components/LeftNav.vue";
import { getSystemName, isNull } from '@/utils/tool';
import { getScore } from '@/axios/api';
import { Search } from '@element-plus/icons-vue';
import ApiConstant from '@/utils/ApiConstant';
import axiosInstance from '@/utils/http';
import { useRouter } from 'vue-router';
import StaticConstant from '@/utils/StaticConstant';
//首先在setup中定义
const router = useRouter();
document.title = '轻松算投档|' + getSystemName()

const state = reactive({
    dataList: [] as any,
    flag: true,
    selectForm: {
        batch:'',//批次
        culturalScore: '',//文化分
        professionalScore: '',//统考分
        professionalCategory:'',
    },
    //批次
    batchArray: [{label: '本科批', value: '本科'}, {label: '高职高专批', value: '高职高专'}],
    batchIndex: 0,
    scoreInfo: {} as any,
    professionalCategoryList:StaticConstant.professionalCategoryList,//专业类型列表
    vipInfo:{
        vipLevel:0,
    } as any,
})
const openEditScore = inject('openEditScore') as Function;
onMounted(() => {
    if (getScoreInfo()) {
        //vip判断
        let vipInfo = localStorage.getItem('vipInfo') as any
        if(vipInfo){
            vipInfo = JSON.parse(vipInfo);
            state.vipInfo.vipLevel = vipInfo.vipLevel
        }
    }
})
//获取成绩
function getScoreInfo() {
    //判断登录
    if (ifLogin()) {
        //从浏览器数据中取出成绩信息
        let scoreInfoStr = localStorage.getItem('scoreInfo') as string
        if (isNull(scoreInfoStr)) {
            //如果取出来的成绩为空，则请求一次成绩接口
            getScore()
            //如果取出来之后还是没有成绩
            scoreInfoStr = localStorage.getItem('scoreInfo') as string
            if (isNull(scoreInfoStr)) {
                //提示用户更改自己的成绩
                return oepnEditScoreInfo()
            }
        } else {
            state.scoreInfo = JSON.parse(scoreInfoStr)
            state.selectForm.batch = state.scoreInfo.batch
            state.selectForm.culturalScore = state.scoreInfo.culturalScore
            state.selectForm.professionalScore = state.scoreInfo.professionalScore
            state.selectForm.professionalCategory = state.scoreInfo.professionalCategory
        }
        return true
    }
    return false
}
//判断登录状态
function ifLogin() {
    let token = window.localStorage.getItem('X-Access-Token');
    const openLogin = inject('openLogin') as Function;
    if (!token && typeof openLogin === 'function') {
        openLogin(); // 调用提供的打开登录方法
        return false
    }
    return true
}
//打开更改成绩界面
function oepnEditScoreInfo() {
    if (typeof openEditScore === 'function') {
        openEditScore(); // 调用提供的打开更改成绩弹框
        return false
    }
    return true
}
function filterCulturalScoreInput(value: number | string) {
    if (typeof value === 'string') {
        state.selectForm.culturalScore = value.replace(/\D/g, ''); // 过滤掉非数字字符
    }
}
function filterProfessionalScoreInput(value: number | string) {
    if (typeof value === 'string') {
        state.selectForm.professionalScore = value.replace(/\D/g, ''); // 过滤掉非数字字符
    }
}
function getList() {
    console.log(state.selectForm.batch)
    axiosInstance({
        url: ApiConstant.Score.calculateInvestment,
        method: 'get',
        params: {
            province: state.scoreInfo.province,
            culturalScore: state.selectForm.culturalScore,//文化分
            professionalScore: state.selectForm.professionalScore,//统考分
            category: state.scoreInfo.cognitioPolyclinic,//this.categoryArray[this.categoryIndex].name
            professionalCategory: state.selectForm.professionalCategory,
            batch: state.selectForm.batch
        },
        //showLoading: false,//是否显示加载图标
    }).then((response: AxiosResponse) => {
        return response?.data
    }).then((data) => {
        if (data.success) {
            console.log(data)
            if (data.result && data.result.length > 0) {
                state.dataList = data.result
            } else {
                state.dataList = null
            }
        }
    }).catch((error: any) => {
        console.log(error);
    }).finally(() => {
        state.flag = false
    });
}
function handleClick(e:any){
    //router.push({name:'fillVolunteer2',params:{rulesEnrollProbability:e.rulesEnrollProbability}})
    router.push({
        path:'/fillVolunteer',
        query:{rulesEnrollProbability:e.rulesEnrollProbability}
    })
}
</script>
<style scoped lang="scss">
root {
    width: 100%;
}

:deep(.el-input) {
    width: 150px;
}

:deep(.el-input__inner) {
    font-size: 20px;
}

.tableData{
    background-color: white;
    padding: 20px;
}
</style>