<template>
    <LeftNav/>
    <div class="margin-5"></div>
    <div class="main-container wrap main-fullScreen">
        <el-row :gutter="20">
            <el-col :span="18">
                <!--筛选项-->
                <div class="filterTable">
                    <div class="filterTitle flexWrap">
                        <div class="flex-item-75">
                            <el-input v-model="state.selectForm.majorName" maxlength="24" show-word-limit
                                style="max-width: 230px;height: 40px;line-height: 40px;" placeholder="请输入专业名称"
                                class="input-with-select" />
                            <el-button :icon="Search" @click="getData"
                                style="border-left: none;height: 40px;line-height: 40px;" />
                        </div>
                    </div>
                    <div class="filterBody">
                        <div class="flexWrap">
                            <div class="flex-item-1">专业层次</div>
                            <div class="flex-item-9 tags">
                                <span class="tag"
                                    :class="state.selectForm.educationalLevel === item.value ? 'tag-active' : ''"
                                    v-for="(item, index) in state.levelList" :key="index"
                                    @click="checkboxLevel(item.value)">
                                    {{ item.label }}
                                </span>
                            </div>
                        </div>
                        <div class="flexWrap">
                            <div class="flex-item-1">专业类型</div>
                            <div class="flex-item-9 tags">
                                <span class="tag" :class="!state.selectForm.majorType ? 'tag-active' : ''"
                                    @click="checkboxMajorType('')">不限</span>
                                <span class="tag" :class="state.selectForm.majorType === item ? 'tag-active' : ''"
                                    v-for="(item, index) in state.majorTypeList" :key="index"
                                    @click="checkboxMajorType(item)">
                                    {{ item }}
                                </span>
                            </div>
                        </div>
                        <div class="border-b"></div>
                        <div class="flexWrap">
                            <span class="clearFilterButton" @click="clearFilter">重置已选</span>
                        </div>
                    </div>
                </div>
                <div class="majorDiv" v-if="state.majorList && state.majorList.length > 0">
                    <div class="item" v-for="(item, index) in state.majorList" :key="index">
                        <div class="flexWrap title">
                            # {{ item.majorTypeName }}
                        </div>
                        <div class="majorList" v-if="item.list">
                            <div class="majorItem border-b" v-for="(major, mi) in item.list" :key="mi"  @click="openMajorDetail(major)">
                                <div class="flexWrap">
                                    <div class="flex-item-9">
                                        <div class="flexWrap majorName">{{ major.majorName }}</div>
                                        <div class="flexWrap">
                                            <el-space spacer="|">
                                                <div>专业代码：{{ major.majorCode }}{{ major.majorCodeChar }}</div>
                                                <div>学制：{{ major.semester ? major.semester + '年' : '--' }}
                                                </div>
                                                <div v-if="state.selectForm.educationalLevel == '1'">
                                                    学位：{{ major.degree || '--' }}
                                                </div>
                                                <div v-if="state.selectForm.educationalLevel == '1'">
                                                    男女比例：{{ major.sexRatio || '--' }}
                                                </div>
                                            </el-space>
                                            
                                        </div>
                                    </div>
                                    <div class="flex-item-1" style="height: 50px;line-height: 50px;">
                                        <div class="" style="margin:0 5px 0 auto">
                                            <el-button type="primary" @click="openMajorDetail(major)">查看</el-button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script lang="ts" setup>
import {h, ref, defineComponent, onMounted, reactive } from 'vue';
import { InfoFilled, Search, Edit } from '@element-plus/icons-vue';
import { ElMessage,ElDivider } from 'element-plus';
import ApiConstant from '@/utils/ApiConstant';
import ImagesConstant from '@/utils/ImagesConstant';
import StaticConstant from '@/utils/StaticConstant';
import axiosInstance from '@/utils/http';
document.title = '查专业|' + import.meta.env.VITE_PROGRAM_TYPE;
const state = reactive({
    selectForm: {
        educationalLevel: '1',//本科/专科
        majorType: '',
        majorName: '',//搜素专业名称
        current: 1,
        pageSize: 10,
    },
    majorList: [] as any,//专业列表
    majorTypeList: [],//专业大类
    levelList: [
        { label: '本科', value: '1' }, { label: '专科', value: '2' },
    ]
})
const spacer = h(ElDivider, { direction: 'vertical' })
onMounted(() => {
    getMajorTypeList()
    getData()
})
//获取专业类型
function getMajorTypeList() {
    axiosInstance({
        url: ApiConstant.Major.majorTypeList,
        method: 'get',
        params: {
            educationalLevel: state.selectForm.educationalLevel
        },
        showLoading: false,//是否显示加载图标
    }).then((response) => {
        return response.data
    }).then((data) => {
        if (!data.success) {
            ElMessage.error(data.message);
        } else {
            state.majorTypeList = data.result
        }
    })
}
//获取专业列表数据
function getData() {
    axiosInstance({
        url: ApiConstant.Major.majorList,
        method: 'get',
        params: {
            majorName: state.selectForm.majorName,
            educationalLevel: state.selectForm.educationalLevel,
            majorType: state.selectForm.majorType
        },
        //showLoading: false,//是否显示加载图标
    }).then((response) => {
        return response.data
    }).then((data) => {
        if (!data.success) {
            ElMessage.error(data.message);
        } else {
            state.majorList = data.result
        }
    })
}

function clearFilter() {
    state.selectForm.educationalLevel = "1"
    state.selectForm.majorType = ''
    state.selectForm.majorName = ''
    getData()
}

//选择专业层次
function checkboxLevel(e: string) {
    if (state.selectForm.educationalLevel !== e) {
        state.selectForm.educationalLevel = e
        state.selectForm.majorType = ''
        getMajorTypeList()
        getData()
    }
}
//选择专业类型
function checkboxMajorType(e: string) {
    if (state.selectForm.majorType !== e) {
        state.selectForm.majorType = e
        getData()
    }
}
//查看专业详情信息
function openMajorDetail(e:any){
    window.open('/major/'+e.majorCode,'_self')
}
</script>

<style scoped lang="scss">
/*筛选表格 start*/
.filterTable {
    border: 1px 1px 0 1px solid #ebeef5;
    border-radius: 5px 5px 5px 0px;

    .filterTitle {

        //筛选表格-标题行
        //搜索框
        .searchSchool {
            float: right;
            margin: 3px 10px 3px 0;
        }
    }

    //筛选表格中心部分
    .filterBody {
        background-color: white;
        border-radius: 0 0 5px 0;
        padding: 15px 15px 0 15px;
        color: $color-black-60;
        border-bottom: 1px solid #ebeef5;

        .tags {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;

            .tag {
                cursor: pointer;
                margin-bottom: 10px;
                margin-right: 15px;
                color: black;
                font-size: 14px;
                padding: 0 7px;
                border-radius: 4px;
                border: 1px solid white;
            }

            .tag-active {
                color: $color-blue-60;
                border: 1px solid $color-blue-60;
                position: relative;
            }
        }

        .clearFilterButton {
            cursor: pointer;
            line-height: 50px;
            color: $color-blue-60;
        }
    }
}

/*筛选表格 end */
/*列表 start*/
.majorDiv {
    .item {
        background-color: white;
        border: 1px solid #ebeef5;
        border-radius: 5px;
        margin: 10px 0;
        padding: 15px;
    }

    .title {
        font-size: 20px;
        font-weight: 600;
    }
}

/*列表 end*/
</style>
