<template>
    <div>
        <el-table :data="state.tableData" style="width: 100%" height="500">
            <el-table-column label="志愿表名称" width="230" align="center">
                <template #default="scope">
                    <div class="top-align flexWrap">
                        <span class="font-size-16 fw-6 black1 main-container">{{ scope.row.volunteer.volunteerName }}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="成绩信息" align="center">
                <template #default="scope">
                    <div class="top-align">
                        <div class="flexWrap">
                            <div class="main-container">
                                <span>{{ scope.row.scoreInfo.professionalCategory }}/{{ scope.row.scoreInfo.cognitioPolyclinic }}</span>
                                <span v-if="scope.row.scoreInfo.professionalCategoryChildren">/{{ scope.row.scoreInfo.professionalCategoryChildren }}</span>
                            </div>
                        </div>
                        <div class="mt-5 flexWrap">
                        <div class="main-container">
                            <span>文化分·{{ scope.row.scoreInfo.culturalScore }}&nbsp;統考分·{{ scope.row.scoreInfo.professionalScore }}</span>
                        </div>
                    </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="创建时间" width="180" align="center">
                <template #default="scope">
                    <div class="top-align flexWrap">
                        <div class="main-container">
                            <span>{{ scope.row.volunteer.createTime }}</span>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="志愿表状态" width="180" align="center">
                <template #default="scope">
                    <div class="top-align flexWrap">
                        <div class="main-container">
                            <el-tag v-if="scope.row.volunteer.state==='1'">当前</el-tag>
                            <el-tag v-else type="info">否</el-tag>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="180" align="center">
                <template #default="scope">
                    <div class="top-align flexWrap">
                        <div class="main-container" v-if="scope.row.volunteer.state!=='1'">
                            <el-popconfirm 
                                confirm-button-text="确定"
                                cancel-button-text="取消"
                                :icon="InfoFilled"
                                icon-color="#626AEF"
                                title="确定使用该志愿吗?"
                                @confirm="switchVolunteer(scope.row.volunteer.id)"
                            >
                                <template #reference>
                                    <el-button size="small">使用</el-button>
                                </template>
                            </el-popconfirm>

                            <el-popconfirm 
                                confirm-button-text="确定"
                                cancel-button-text="取消"
                                :icon="InfoFilled"
                                icon-color="#626AEF"
                                title="确定删除该次志愿吗?"
                                @confirm="deleteVolunteer(scope.row.volunteer.id)"
                            >
                                <template #reference>
                                    <el-button size="small" type="danger" align="center">删除</el-button>
                                </template>
                            </el-popconfirm>
                            
                        </div>
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <!-- <el-button @click="returnClick">回调事件</el-button> -->
</template>
<script lang="ts" setup>
import bus from "@/store/eventBus";
import { onMounted, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import ApiConstant from '@/utils/ApiConstant';
import StaticConstant from '@/utils/StaticConstant';
import {InfoFilled,Search,Edit} from '@element-plus/icons-vue';
import { getScore } from "@/axios/api";
import axiosInstance from '@/utils/http';
const state = reactive({
    tableData: [] as any
})
onMounted(() => {
    getVolunteerList()
})
function getVolunteerList() {
    axiosInstance({
        url: ApiConstant.Score.scoreList,
        method: 'get',
        params: {},
        // showLoading: false,//是否显示加载图标
    }).then((response) => {
        return response.data
    }).then((data) => {
        if (!data.success) {
            ElMessage.error(data.message);
            return false
        }
        state.tableData = data.result
    }).catch((error: any) => {
        console.log(error);
    }).finally(() => {
    });
}

//切换志愿表
function switchVolunteer(volunteerId:string) {
    axiosInstance({
        url: ApiConstant.Volunteer.switchVolunteer,
        method: 'post',
        data: {id: volunteerId},
        // showLoading: false,//是否显示加载图标
    }).then((response) => {
        return response.data
    }).then((data) => {
        if (!data.success) {
            ElMessage.error(data.message);
            return false
        }
        getScore()
        //切换成功，刷新成绩
        ElMessage.success("操作成功");
        //刷新页面
        setTimeout(function(){
           window.location.reload()
        }, 800);
    }).catch((error: any) => {
        console.log(error);
    }).finally(() => {
    });
}
//删除志愿表
function deleteVolunteer(volunteerId:string){
    axiosInstance({
        url: ApiConstant.Volunteer.volunteerDelete,
        method: 'delete',
        params: {id: volunteerId},
        // showLoading: false,//是否显示加载图标
    }).then((response) => {
        return response.data
    }).then((data) => {
        if (!data.success) {
            ElMessage.error(data.message);
            return false
        }
        //切换成功，刷新成绩
        ElMessage.success("操作成功");
        //刷新数据
        getVolunteerList()
    }).catch((error: any) => {
        console.log(error);
    }).finally(() => {
    });
}

function returnClick() {
    bus.emit("closeOtherVolunteerChange" as any, sessionStorage.getItem("cityName"));//发送
}
</script>
<style lang="scss" scoped>
:deep(.cell) {
    padding: 10px 15px;
}

:deep(.el-table__body) {
    .cell {
        min-height: 0 !important;
        padding: 0;
    }

    .el-table__cell {
        padding: 0;
    }
}

:deep(.el-table) {
    thead {
        color: black;
        th {
            font-weight: 500;
        }
    }
    th.el-table__cell {
        background-color: #edeff7;
    }
}

.top-align {
    padding: 10px 15px;
    vertical-align: top;
    /* 设置内容顶部对齐 */
}
</style>