<template>
    <div class="page">
        <NavBar :showIcon="false" :showTitle="true" title="推荐"></NavBar>
        <view class="tabs" :style="{ top: contentHeight }">
            <text @tap="changeActiveTab('求职推荐')" :class="activeTab == '求职推荐' ? 'active' : ''">求职推荐</text>
            <text @tap="changeActiveTab('个人投递')" :class="activeTab == '个人投递' ? 'active' : ''">个人投递</text>
        </view>
        <view class="wrap">
            <view class="recommend">
                <!-- 筛选 -->
                <view class="filter flex-between" v-show="activeTab == '求职推荐'">
                    <view class="filter-opstion">
                        <view class="t1">按以下职位推荐</view>
                        <wd-picker
                            :columns="jobListColumns"
                            value-key="id"
                            label-key="name"
                            v-model="getResumeRecommendListParams.positionId"
                            @confirm="positionConfirm"
                            use-default-slot
                        >
                            <view class="t2">{{ jobTypeText || "全部" }}</view>
                            <view class="arrow"></view>
                        </wd-picker>
                    </view>
                    <view class="filter-other flex-between">
                        <wd-col-picker
                            label="选择地址"
                            v-model="valueCity"
                            :columns="columnsCity"
                            :column-change="columnChangeCity"
                            @confirm="handleConfirmCity"
                            label-key="name"
                            value-key="code"
                            use-default-slot
                        >
                            <view class="item">{{ cityText }} <view class="arrow"></view> </view>
                        </wd-col-picker>
                        <!-- <view class="item">默认排序<view class="arrow"></view> </view> -->
                        <view class="item" @click="showOtherFilter = true">筛选<view class="arrow"></view> </view>
                    </view>
                </view>
                <scroll-view
                    class="recommend-list"
                    :refresher-triggered="refresherEnabled"
                    @refresherrefresh="fresherrefresh"
                    refresher-enabled="true"
                    scroll-y="true"
                    @scrolltolower="getResumeRecommendList"
                >
                    <view class="item" v-for="(v, i) in applicationList" :key="v.userId + v.positionId + v.id">
                        <jobSeekersCard :data="v" :type="'application'" />
                    </view>
                    <wd-status-tip v-if="!applicationList || !applicationList.length" image="content" tip="暂无内容" />
                </scroll-view>
            </view>
        </view>
        <!-- 筛选弹窗 -->
        <Filter v-show="showOtherFilter" @confirm="filterConfirm" @cancel="showOtherFilter = false" />
    </div>
</template>
<script setup>
/*"code": "0",
"text": "待审核",
"code": "1",
"text": "审核通过",
"code": "2",
"text": "审核不通过",
"code": "3",
"text": "上线",
"code": "4",
"text": "下线", */
import { ref } from "vue";
import jobSeekersCard from "@/components/jobSeekersCard/index.vue";
import { getJobListApi, getApplicationListApi, getRecommendedResumeListApi, getPositionListApi } from "@/api/postion";
import { getTreeListApi } from "@/api/common";
import { getLoginUserApi } from "@/api/user";
import { getEumData, getEnumText } from "@/utils/utils";
import { useAsync } from "@/hooks/useAsync";
import _ from "lodash";
import Filter from "@/components/filter/index.vue";
/* tab */
const contentHeight = ref("50px");
const activeTab = ref("求职推荐");
const changeActiveTab = tab => {
    activeTab.value = tab;
    resetParams();
    getResumeRecommendList();
    /* getTopFilter();
    getJobListApiFn(); */
};
let refresherEnabled = ref(true);
/* 获取职位列表 */
const jobListColumns = ref([]);
const positionConfirm = ({ selectedItems }) => {
    jobTypeText.value = selectedItems.name;
    resetPageParams();
    getResumeRecommendListParams.value.recommend = true
    getResumeRecommendList();
};
function getJobListApiFn() {
    getPositionListApi({ status: 3 }).then(res => {
        if (res.code == 200) {
            jobListColumns.value = res.data;
        }
    });
}
getJobListApiFn();
const jobTypeText = ref("");
function fresherrefresh() {
    refresherEnabled.value = true;
    refresh().then(() => {
        getResumeRecommendList();
    });
}
// 数据列表
const applicationList = ref([]);
/* 投递接口参数 */
const getApplicationListParams = ref({
    jobType: "",
    provinceCode: "",
    cityCode: "",
    districtCode: "",
    minWorkYear: "",
    maxWorkYear: "",
    education: "",
    minAge: "",
    maxAge: "",
    pageNo: 1,
    pageSize: 10
});
/* 获取推荐简历列表接口参数 */
const getResumeRecommendListParams = ref({
    recommend: true,
    positionId: "",
    sex: "",
    jobType: "",
    provinceCode: "",
    cityCode: "",
    districtCode: "",
    education: "",
    minAge: "",
    maxAge: "",
    minWorkAge: "",
    maxWorkAge: "",
    pageNo: 1,
    pageSize: 10
});
const isEnd = ref(false);

const resetParams = () => {
    isEnd.value = false;
    applicationList.value = [];
    getApplicationListParams.value = {
        jobType: "",
        provinceCode: "",
        cityCode: "",
        districtCode: "",
        minWorkYear: "",
        maxWorkYear: "",
        education: "",
        minAge: "",
        maxAge: "",
        pageNo: 1,
        pageSize: 10
    };
    getResumeRecommendListParams.value = {
        recommend: true,
        positionId: "",
        sex: "",
        jobType: "",
        provinceCode: "",
        cityCode: "",
        districtCode: "",
        education: "",
        minAge: "",
        maxAge: "",
        minWorkAge: "",
        maxWorkAge: "",
        pageNo: 1,
        pageSize: 10
    };
};
const resetPageParams = () => {
    applicationList.value = [];
    isEnd.value = false;
    getResumeRecommendListParams.value.pageNo = 1;
    getApplicationListParams.value.pageNo = 1;
};
const refresh = () => {
    return new Promise((resolve, reject) => {
        resetPageParams();
        resolve();
    });
};
// 获取数据
const getResumeRecommendList = () => {
    if (isEnd.value === true)
        return new Promise(resolve => {
            resolve();
        });
    xma.showLoading({
        title: "加载中...",
        mask: true
    });
    // 获取推荐简历
    if (activeTab.value === "求职推荐") {
        return getRecommendedResumeListApi(getResumeRecommendListParams.value).then(res => {
            xma.hideLoading();
            refresherEnabled.value = false;
            if (!res.data) {
                res.data = [];
            }
            if (res.data.length < getResumeRecommendListParams.value.pageSize) {
                isEnd.value = true;
            }
            getResumeRecommendListParams.value.pageNo += 1;
            applicationList.value = applicationList.value.concat(res.data);

            // applicationList.value = res.data || [];
        });
    } else {
        // 获取已投递
        return getApplicationListApi(getApplicationListParams.value).then(res => {
            xma.hideLoading();
            refresherEnabled.value = false;
            if (!res.data) {
                res.data = [];
            }
            if (res.data.length < getApplicationListParams.value.pageSize) {
                isEnd.value = true;
            }
            getApplicationListParams.value.pageNo += 1;
            applicationList.value = applicationList.value.concat(res.data);
        });
    }
};
onShow(() => {
    resetPageParams();
    getResumeRecommendList();
    getUserInfo();
});
// 城市筛选
const valueCity = ref([]);
const cityText = ref("全部");
const columnsCity = ref([]);
const getColumnsCity = () => {
    getTreeListApi().then(res => {
        // 给说有子选项都添加全部
        res.data.forEach(v => {
            v.children.unshift({
                code: "",
                name: "全部"
            });
            v.children.forEach(vv => {
                if (vv.children?.length) {
                    vv.children.unshift({
                        code: "",
                        name: "全部"
                    });
                }
            });
        });
        res.data.unshift({
            code: "",
            name: "全部"
        });
        columnsCity.value.push(res.data);
    });
};
const columnChangeCity = ({ resolve, selectedItem, finish }) => {
    if (selectedItem.children?.length) {
        resolve(selectedItem.children);
    } else {
        finish();
    }
};
getColumnsCity();

const handleConfirmCity = ({ value, selectedItems }) => {
    const textIndex = _.compact(value).length - 1;
    if (textIndex === -1) {
        cityText.value = "全部";
    } else {
        cityText.value = selectedItems[textIndex].name;
    }
    const [provinceCode, cityCode, districtCode] = value;

    getApplicationListParams.value.provinceCode = provinceCode || "";
    getApplicationListParams.value.cityCode = cityCode || "";
    getApplicationListParams.value.districtCode = districtCode || "";

    getResumeRecommendListParams.value.recommend = false;
    getResumeRecommendListParams.value.provinceCode = provinceCode || "";
    getResumeRecommendListParams.value.cityCode = cityCode || "";
    getResumeRecommendListParams.value.districtCode = districtCode || "";

    resetPageParams();
    getResumeRecommendList();
};
// 显示其他筛选
const showOtherFilter = ref(false);
const filterConfirm = data => {
    Object.keys(data).forEach(key => {
        getResumeRecommendListParams.value[key] = data[key];
    });

    getResumeRecommendListParams.value.recommend = false;
    showOtherFilter.value = false;
    resetPageParams();
    getResumeRecommendList();
};
/* 获取用户信息 */
const getUserInfo = async () => {
    const userRes = await getLoginUserApi();
    if (!userRes.data) {
        xma.navigateTo({
            url: `/pages/user/businessLicense/fillIn?steps=1`
        });
    } else {
        if (userRes.data.status == 0) {
            xma.navigateTo({
                url: `/pages/user/businessLicense/fillIn?steps=3`
            });
        }
    }
};
onLoad(() => {
    xma.xh.getSystemInfo({
        success(res) {
            // console.log('设备信息', res); // 设备信息
        }
    });
    xma.xh.getMenuButtonBoundingClientRect({
        success(res) {
            contentHeight.value = (res.top + res.bottom) / 2 + 25 + "px";
        }
    });
});
</script>

<style lang="scss" scoped>
.page {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.tabs {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 7px;
    background-color: #ffffff;
    text {
        width: 140px;
        height: 40px;
        font-size: 18px;
        line-height: 40px;
        color: #1b2026;
        text-align: center;
        &.active {
            position: relative;
            font-size: 18px;
            font-weight: 600;
            background-image: url("https://lygsh-image.wjzpgz.com/community/communityActiveTab.png");
            background-repeat: no-repeat;
            background-position: 50% 100%;
            background-size: 20% 20%;
        }
    }
}
.wrap {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    .recommend {
        position: relative;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        .filter {
            position: relative;
            padding: 0 16px 0 22px;
            .filter-opstion {
                max-width: 115px;
                :deep(.wd-picker__field) {
                    display: flex;
                    align-items: center;
                }
                .t1 {
                    font-size: 12px;
                    font-weight: normal;
                    line-height: 18px;
                    color: #77818f;
                }
                .t2 {
                    flex-grow: 1;
                    width: 50px;
                    overflow: hidden;
                    font-size: 16px;
                    font-weight: 600;
                    line-height: 24px;
                    color: #1b2026;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    .arrow {
                        width: 0;
                        height: 0;
                        margin-left: 10px;
                        border-color: #c9cdd4;
                        border-width: 4px;
                        transform: rotateZ(45deg) translateY(-2px);
                    }
                }
            }
            .filter-other {
                gap: 8px;
                .item {
                    display: flex;
                    align-items: flex-end;
                    padding: 6px 9px;
                    font-size: 12px;
                    font-weight: normal;
                    line-height: 12px;
                    color: #1f86ff;
                    background: rgb(31 134 255 / 10%);
                    .arrow {
                        width: 0;
                        height: 0;
                        margin-left: 2px;
                        border-color: #1f86ff;
                        border-width: 2px;
                        transform: rotateZ(0deg);
                    }
                }
            }
        }
        .other-view {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 11;
            width: 100%;
            height: 100%;
            background-color: #00000066;
            .wrapper {
                padding: 0.5px 20px;
                background-color: #ffffff;
                .other-view-item {
                    margin-top: 12px;
                    label {
                        font-size: 12px;
                        color: #1b2026;
                    }
                    .select-list {
                        display: flex;
                        flex-wrap: wrap;
                        gap: 12px;
                        margin-top: 12px;
                        .select-item {
                            padding: 6px 14px;
                            font-size: 12px;
                            color: #a3a7b3;
                            border: 1px solid #e1e2e6;
                            border-radius: 4px;
                            &.active {
                                color: #1f86ff;
                                background: rgb(31 134 255 / 10%);
                                border: 0;
                            }
                        }
                    }
                    :deep(.wd-slider) {
                        height: 18px;
                        padding-top: 18px;
                        .wd-slider__button-wrapper {
                            width: 15px;
                            height: 15px;
                            .wd-slider__button {
                                width: 15px;
                                height: 15px;
                            }
                            .wd-slider__label {
                                bottom: 18px;
                                width: 15px;
                                font-size: 10px;
                            }
                        }
                        .wd-slider__bar-wrapper {
                            margin: 0 20px;
                        }
                    }
                }
                .button-wrap {
                    display: flex;
                    gap: 12px;
                    justify-content: flex-end;
                    padding: 16px 0;
                    div {
                        padding: 5px 12px;
                        font-size: 14px;
                        color: #1f86ff;
                        border-radius: 4px;
                    }
                    .reset {
                        color: #ffffff;
                        background: #1f86ff;
                    }
                    .confirm {
                        color: #1f86ff;
                        border: 1px solid #1f86ff;
                    }
                }
            }
        }
        .recommend-list {
            flex-grow: 1;
            height: 100px;
            .item {
                padding: 8px 16px;
                border-bottom: 8px solid #f3f4f8;
            }
            .wd-status-tip {
                padding-top: 140px;
            }
        }
    }
}
</style>
