<template>
    <div class="filter">
        <div class="menu">
            <p v-for="v in menuList" :class="{ active: v.active }" :key="v.name" @click="onClickMenu(v)">{{ v.name }}</p>
        </div>
        <div class="content">
            <!-- 学历要求 -->
            <div class="filter-item education">
                <p class="title">学历要求</p>
                <div class="filter-select">
                    <div
                        class="select-item"
                        :class="{ active: v.active }"
                        @click="onClickEducation(v)"
                        v-for="(v, i) in educationList"
                        :key="i"
                    >
                        {{ v.text }}
                    </div>
                </div>
            </div>
            <!-- 年龄要求 -->
            <div class="filter-item age">
                <p class="title" style="margin-bottom: 0">年龄要求</p>
                <wd-slider
                    v-model="age"
                    hide-min-max
                    inactive-color="rgba(31, 134, 255,0.3)"
                    active-color="rgba(31, 134, 255,1)"
                />
            </div>
            <!-- 性别要求 -->
            <div class="filter-item gender">
                <p class="title">性别要求</p>
                <div class="filter-select">
                    <div
                        class="select-item"
                        :class="{ active: v.active }"
                        @click="onClickGender(v)"
                        v-for="(v, i) in genderList"
                        :key="i"
                    >
                        {{ v.text }}
                    </div>
                </div>
            </div>
            <!-- 工作年限要求 -->
            <div class="filter-item workYear">
                <p class="title">工作年限要求</p>
                <div class="filter-select">
                    <div
                        class="select-item"
                        :class="{ active: v.active }"
                        @click="onClickWorkYear(v)"
                        v-for="(v, i) in workYearList"
                        :key="i"
                    >
                        {{ v.text }}
                    </div>
                </div>
            </div>
            <!-- 专业要求 -->
            <div class="filter-item major">
                <p class="title">专业要求</p>
                <div class="filter-select">
                    <div
                        class="select-item"
                        :class="{ active: v.active }"
                        @click="onClickMajor(v)"
                        v-for="(v, i) in dictJobTypeList"
                        :key="i"
                    >
                        {{ v.name }}
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom-wrap">
            <button class="cancel" @click="onCancel">取消</button>
            <button class="confirm" @click="onConfirm">确认</button>
        </div>
    </div>
</template>

<script setup>
import { getEumData } from "@/utils/utils";
import { dictJobTypeApi } from "@/api/common";
// 导航
const menuList = ref([]);
const onClickMenu = data => {
    menuList.value.forEach(v => (v.active = false));
    data.active = true;
    document.querySelector(".filter").querySelector(`.${data.className}`).scrollIntoView();
};
// 学历
const educationList = ref([]);
const onClickEducation = v => {
    educationList.value.forEach(v => (v.active = false));
    v.active = true;
};
// 年龄
const age = ref([0, 100]);
// 性别
const genderList = ref([]);
const onClickGender = v => {
    genderList.value.forEach(v => (v.active = false));
    v.active = true;
};
// 工作年限
const workYearList = ref([]);
const onClickWorkYear = v => {
    workYearList.value.forEach(v => (v.active = false));
    v.active = true;
};
// 专业
const dictJobTypeList = ref([]);
const onClickMajor = v => {
    dictJobTypeList.value.forEach(v => (v.active = false));
    v.active = true;
};
// 初始化数据
const initData = async () => {
    uni.showLoading({
        title: "加载中...",
        mask: true
    });
    /* 初始化菜单 */
    menuList.value = [
        { active: true, name: "学历", className: "education" },
        { active: false, name: "年龄", className: "age" },
        { active: false, name: "性别", className: "gender" },
        { active: false, name: "工作年限", className: "workYear" },
        { active: false, name: "专业", className: "major" }
    ];
    /* 初始化数据 */
    educationList.value = await getEumData("EnumEducationRequirement");
    genderList.value = await getEumData("EnumGenderRequirement");
    workYearList.value = [
        {
            text: "不限",
            min: null,
            max: null
        },
        {
            text: "1年",
            min: 0,
            max: 1
        },
        {
            text: "2~3年",
            min: 2,
            max: 3
        },
        {
            text: "4~5年",
            min: 4,
            max: 5
        },
        {
            text: "5~10年",
            min: 5,
            max: 10
        },
        {
            text: "10年以上",
            min: 10,
            max: null
        }
    ];
    const dictJobType = await dictJobTypeApi({});
    dictJobTypeList.value = dictJobType.data;
    // uni.hideLoading();
};
initData();
/* 
    接受两个方法
    1. 确认 接收数据
    2. 取消
*/
const emit = defineEmits(["confirm", "cancel"]);
// 2. 取消
const onCancel = () => {
    emit("cancel");
};
// 1. 确认 接收数据
const onConfirm = () => {
    console.log(
        educationList.value.find(v => v.active),
        genderList.value.find(v => v.active),
        workYearList.value.find(v => v.active),
        dictJobTypeList.value.find(v => v.active)
    );
    emit("confirm");
};
</script>

<style lang="scss" scoped>
.filter {
    position: absolute;
    inset: 0;
    z-index: 66666666;
    display: flex;
    background-color: #ffffff;
    .menu {
        width: 200rpx;
        height: 100%;
        background-color: #e8f2ff;
        p {
            padding: 32rpx 24rpx;
            font-size: 32rpx;
            color: #1b2026;
        }
        .active {
            padding-left: 16rpx;
            color: #1f86ff;
            background-color: #ffffff;
            border-left: 8rpx solid #1f86ff;
        }
    }
    .content {
        flex: 1;
        padding: 32rpx;
        padding-bottom: 80rpx;
        overflow-y: auto;
        .filter-item {
            margin-bottom: 66rpx;
            .title {
                margin-bottom: 24rpx;
                font-size: 24rpx;
                font-weight: 600;
                line-height: 36rpx;
                color: #1b2026;
            }
            .filter-select {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 16rpx 22rpx;
                .select-item {
                    box-sizing: border-box;
                    height: 60rpx;
                    font-size: 24rpx;
                    line-height: 60rpx;
                    color: #1b2026;
                    text-align: center;
                    background: #f0f4fa;
                    border: 2rpx solid #f0f4fa;
                    border-radius: 8rpx;
                }
                .active {
                    color: #1f86ff;
                    border-color: #1f86ff;
                }
            }
            :deep(.wd-slider) {
                height: auto;
                padding-top: 36rpx;
                .wd-slider__bar-wrapper {
                    margin: 12rpx;
                    background: red;
                }
                .wd-slider__button-wrapper {
                    top: 50%;
                    width: 20rpx;
                    .wd-slider__button {
                        width: 20rpx;
                        height: 20rpx;
                        background: #1f86ff;
                        border: 0;
                        box-shadow: none;
                    }
                    .wd-slider__label {
                        bottom: 16rpx;
                        left: 50%;
                        width: auto;
                        color: #1f86ff;
                        background-color: transparent;
                        transform: translateX(-50%);
                    }
                }
            }
        }
    }
    .bottom-wrap {
        position: absolute;
        bottom: 0;
        left: 0;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        width: 100%;
        padding: 16rpx 64rpx;
        background-color: #ffffff;
        button {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 294rpx;
            height: 80rpx;
            margin: 0;
            border: 0;
        }
        .cancel {
            color: #1f86ff;
            background: #e8f2ff;
        }
        .confirm {
            color: #ffffff;
            background: #1f86ff;
        }
    }
}
</style>
