<template>
    <div class="page">
        <view class="tabs">
            <text @tap="changeActiveTab('求职推荐')" :class="activeTab == '求职推荐' ? 'active' : ''">求职推荐</text>
            <text @tap="changeActiveTab('职位管理')" :class="activeTab == '职位管理' ? 'active' : ''">职位管理</text>
        </view>
        <view class="wrap">
            <view class="recommend" v-if="activeTab == '求职推荐'">
                <view class="filter flex-between">
                    <view class="filter-opstion">
                        <view class="t1">按以下职位推荐</view>
                        <wd-picker
                            :columns="jobListColumns"
                            label="单列选项"
                            value-key="jobType"
                            label-key="jobTypeText"
                            v-model="getApplicationListParams.jobType"
                            @confirm="handleConfirm"
                            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" scroll-y="{{true}}">
                    <div class="other-view" v-if="showOtherFilter" @click="showOtherFilter = false">
                        <div class="wrapper" @click.stop>
                            <div class="other-view-item">
                                <p class="label">工作年限</p>
                                <wd-slider v-model="workExperienceValue" />
                            </div>
                            <div class="other-view-item">
                                <p class="label">学历要求</p>
                                <div class="select-list">
                                    <p
                                        class="select-item"
                                        :class="{ active: v.code == activeEducation }"
                                        @click="activeEducation = v.code"
                                        v-for="v in EnumEducationRequirement"
                                    >
                                        {{ v.text }}
                                    </p>
                                </div>
                            </div>
                            <div class="other-view-item">
                                <p class="label">年龄要求</p>
                                <wd-slider v-model="ageValue" />
                            </div>
                            <div class="other-view-item button-wrap">
                                <div class="reset" @click="resetFilter">重置</div>
                                <div class="confirm" @click="confirmFilter">完成</div>
                            </div>
                        </div>
                    </div>

                    <view class="item" v-for="v in applicationList" :key="v.applicationId">
                        <jobSeekersCard :data="v" />
                    </view>
                    <wd-status-tip v-if="!applicationList.length" image="content" tip="暂无内容" />
                </scroll-view>
            </view>
            <view class="management" v-if="activeTab == '职位管理'">
                <view class="filter flex-between">
                    <!-- <view class="item" :class="{ active: activeTopFilter == '' }" @click="filterJobList('')">全部职位</view> -->
                    <view
                        class="item"
                        :class="{ active: activeTopFilter === v.code }"
                        v-for="v in topFilter"
                        :key="v.code"
                        @click="filterJobList(v.code)"
                        >{{ v.text }}</view
                    >
                </view>
                <view class="release-postion" @tap="releasePostion"> 发布 </view>
                <scroll-view class="management-list" :scroll-y="true">
                    <view class="item" v-for="(v, i) in jobList" :key="i">
                        <view class="flex-between">
                            <view class="info">
                                <view class="name">{{ v.jobName }}</view>
                                <view class="other"> {{ v.cityName }}｜{{ v.workModeText }}｜{{ v.jobTypeText }} </view>
                            </view>
                            <view class="state" :class="`style${v.status}`"> {{ v.statusText }} </view>
                        </view>
                        <view class="data flex-between">
                            <view bind:tap="jumpDeliveryManagement" @click="jumpDeliveryManagement(v.id, '0')">
                                <view class="t1">{{ v.pendingNum || 0 }}</view>
                                <view class="t2">新投递</view>
                            </view>
                            <view bind:tap="jumpDeliveryManagement" @click="jumpDeliveryManagement(v.id, '2')">
                                <view class="t1">{{ v.interviewNum || 0 }}</view>
                                <view class="t2">待面试</view>
                            </view>
                            <view bind:tap="jumpDeliveryManagement" @click="jumpDeliveryManagement(v.id, '')">
                                <view class="t1">{{ v.totalNum || 0 }}</view>
                                <view class="t2">总投递</view>
                            </view>
                        </view>
                        <view class="btn-list flex-between">
                            <view class="flex-center">
                                <image src="@/static/image/icon/cancelUpload.png" mode="" />
                                取消置顶
                            </view>
                            <view class="flex-center">
                                <image src="@/static/image/icon/refresh.png" mode="" />
                                刷新
                            </view>
                            <view class="flex-center" @click="switchJobStatus(v.id, v.status)">
                                <image :class="{ rotate: v.status != 3 }" src="@/static/image/icon/download.png" mode="" />
                                {{ v.status == 3 ? "下线" : "上线" }}
                            </view>
                            <view class="flex-center" @click="editJob(v)">
                                <image src="@/static/image/icon/edit.png" mode="" />
                                编辑
                            </view>
                        </view>
                    </view>
                    <wd-status-tip v-if="!jobList.length" image="content" tip="暂无内容" />
                </scroll-view>
            </view>
        </view>
    </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,
    getResumeRecommendListApi,
    getListStatisticsApi,
    jobReleaseApi,
    jobOfflineApi,
    getJobByIdApi
} from "@/api/postion";
import { getTreeListApi } from "@/api/common";
import { getEumData, getEnumText } from "@/utils/utils";
import { useAsync } from "@/hooks/useAsync";
import _ from "lodash";
import { useReleasePostionStore } from "./releasePostion/store";
const { setForm, setFormDataKey } = useReleasePostionStore();
/* tab */
const activeTab = ref("求职推荐");
const changeActiveTab = tab => {
    activeTab.value = tab;
};

/* 获取职位列表 */
const jobListColumns = ref([]);
const jobTypeText = ref("");
const handleConfirm = ({ selectedItems }) => {
    jobTypeText.value = selectedItems.jobTypeText;
    getResumeRecommendList();
};
getJobListApi().then(res => {
    if (res.code == 200) {
        jobListColumns.value = res.data;
        console.log(res.data[0].jobType);

        // 初始化选择器
        getApplicationListParams.value.jobType = res.data[0].jobType;
        jobTypeText.value = res.data[0].jobTypeText;
        // 获取推荐列表
        getResumeRecommendList();
    }
});
/* 获取推荐 */
const applicationList = ref([]);
const getApplicationListParams = ref({
    jobType: "",
    provinceCode: "",
    cityCode: "",
    districtCode: "",
    minWorkYear: "",
    maxWorkYear: "",
    education: "",
    minAge: "",
    maxAge: "",
    pageNo: 1,
    pageSize: 10
});
const getResumeRecommendList = () => {
    getResumeRecommendListApi(getApplicationListParams.value).then(res => {
        console.log("resresresres", res);
    });
};
// 城市筛选
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 || "";
    getApplicationListParams.value.pageNo = 1;
    getApplicationListParams.value.pageSize = 10;
    getResumeRecommendList();
};
// 显示其他筛选
const showOtherFilter = ref(false);
// 年龄
const ageValue = ref([0, 100]);
// 年龄
const workExperienceValue = ref([0, 100]);
// 学历
const EnumEducationRequirement = ref([]);
const activeEducation = ref("0");
const getEnumEducationRequirement = async () => {
    EnumEducationRequirement.value = await getEumData("EnumEducationRequirement");
};
getEnumEducationRequirement();

// 重置筛选
const resetFilter = () => {
    ageValue.value = [0, 100];
    workExperienceValue.value = [0, 100];
    activeEducation.value = "0";
};
//完成筛选
const confirmFilter = () => {
    getApplicationListParams.value.minAge = ageValue.value[0];
    getApplicationListParams.value.maxAge = ageValue.value[1];
    getApplicationListParams.value.maxWorkYear = workExperienceValue.value[0];
    getApplicationListParams.value.minWorkYear = workExperienceValue.value[1];
    getApplicationListParams.value.education = activeEducation.value;
    getApplicationListParams.value.pageNo = 1;
    getApplicationListParams.value.pageSize = 10;
    // 获取推荐列表
    getResumeRecommendList();
    showOtherFilter.value = false;
};
/* 跳转到发布职位 */
const releasePostion = () => {
    uni.navigateTo({
        url: "/pages/recommend/releasePostion/step1"
    });
};

/* 获取职位管理 */
const topFilter = ref([]);
const activeTopFilter = ref("");
const jobList = ref([]);
const filterJobList = code => {
    activeTopFilter.value = code;
    getJobList(code);
};
const getTopFilter = async () => {
    const data = await getEumData("EnumJobStatus");
    data.unshift({
        code: "",
        text: "全部"
    });
    topFilter.value = data;
};
const getJobList = (status = "") => {
    getListStatisticsApi({ status }).then(res => {
        console.log("resresres", res);
        res.data.forEach(v => {
            const { data: workModeText } = useAsync(getEnumText("EnumWorkMode", v.workMode));
            const { data: statusText } = useAsync(getEnumText("EnumJobStatus", v.status));
            v.workModeText = workModeText;
            v.statusText = statusText;
        });
        jobList.value = res.data;
    });
};
getTopFilter();
getJobList();
/* 职位上下线 */
const switchJobStatus = async (id, status) => {
    let res = null;
    if (status == 3) {
        res = await jobOfflineApi(id);
    } else if (status == 4 || status == 1) {
        res = await jobReleaseApi(id);
    } else {
        uni.showToast({
            title: "该状态不能操作",
            icon: "none"
        });
    }
    if (res && res.code === 200) {
        uni.showToast({
            title: "操作成功",
            icon: "none"
        });
    } else {
        uni.showToast({
            title: res.message,
            icon: "none"
        });
    }
};

/* 跳转职位管理 */
const jumpDeliveryManagement = (jobId, status) => {
    uni.navigateTo({
        url: `/pages/recommend/deliveryManagement/index?jobId=${jobId}&status=${status}`
    });
};
/* 编辑职位 */
const editJob = ({ id, status }) => {
    if (status == 3) {
        uni.showToast({
            title: "该职位已上线，不能编辑",
            icon: "none"
        });
        return;
    }
    getJobByIdApi(id).then(res => {
        const {
            workMode,
            jobName,
            jobType,
            jobTypeText,
            jobDesc,
            negotiableSalary,
            settlementType,
            minSalary,
            maxSalary,
            benefits,
            identityRequirement,
            educationRequirement,
            minAgeRequirement,
            maxAgeRequirement,
            recruitmentNumber,
            accommodation,
            provinceCode,
            cityCode,
            districtCode,
            town,
            street,
            address,
            locationLongitude,
            locationLatitude,
            contactPerson,
            contactPhone
        } = res.data;
        setForm({
            workMode,
            jobName,
            jobType,
            jobTypeText,
            jobDesc,
            negotiableSalary,
            settlementType,
            minSalary,
            maxSalary,
            benefits,
            identityRequirement,
            educationRequirement,
            minAgeRequirement,
            maxAgeRequirement,
            recruitmentNumber,
            accommodation,
            provinceCode,
            cityCode,
            districtCode,
            town,
            street,
            address,
            locationLongitude,
            locationLatitude,
            contactPerson,
            contactPhone
        });
        setFormDataKey("id", id);
        uni.navigateTo({
            url: `/pages/recommend/releasePostion/step1?id=${id}`
        });
    });
};
</script>

<style lang="scss" scoped>
.page {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.tabs {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 14rpx;
    background-color: #ffffff;
    text {
        width: 280rpx;
        height: 80rpx;
        font-size: 36rpx;
        line-height: 80rpx;
        color: #1b2026;
        text-align: center;
        &.active {
            position: relative;
            font-size: 36rpx;
            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;
    height: 200rpx;
    .recommend {
        position: relative;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        .filter {
            position: relative;
            padding: 0 32rpx 0 44rpx;
            .filter-opstion {
                max-width: 230rpx;
                :deep(.wd-picker__field) {
                    display: flex;
                    align-items: center;
                }
                .t1 {
                    font-size: 24rpx;
                    font-weight: normal;
                    line-height: 36rpx;
                    color: #77818f;
                }
                .t2 {
                    flex-grow: 1;
                    width: 100rpx;
                    overflow: hidden;
                    font-size: 32rpx;
                    font-weight: 600;
                    line-height: 48rpx;
                    color: #1b2026;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    .arrow {
                        width: 0;
                        height: 0;
                        margin-left: 20rpx;
                        border-color: #c9cdd4;
                        border-width: 8rpx;
                        transform: rotateZ(45deg) translateY(-4rpx);
                    }
                }
            }
            .filter-other {
                gap: 16rpx;
                .item {
                    display: flex;
                    align-items: flex-end;
                    padding: 12rpx 18rpx;
                    font-size: 24rpx;
                    font-weight: normal;
                    line-height: 24rpx;
                    color: #1f86ff;
                    background: rgb(31 134 255 / 10%);
                    .arrow {
                        width: 0;
                        height: 0;
                        margin-left: 4rpx;
                        border-color: #1f86ff;
                        border-width: 4rpx;
                        transform: rotateZ(0deg);
                    }
                }
            }
        }
        .other-view {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 11;
            width: 100%;
            height: 100%;
            background-color: #00000066;
            .wrapper {
                padding: 1rpx 40rpx;
                background-color: #ffffff;
                .other-view-item {
                    margin-top: 24rpx;
                    label {
                        font-size: 24rpx;
                        color: #1b2026;
                    }
                    .select-list {
                        display: flex;
                        flex-wrap: wrap;
                        gap: 24rpx;
                        margin-top: 24rpx;
                        .select-item {
                            padding: 12rpx 28rpx;
                            font-size: 24rpx;
                            color: #a3a7b3;
                            border: 2rpx solid #e1e2e6;
                            border-radius: 8rpx;
                            &.active {
                                color: #1f86ff;
                                background: rgb(31 134 255 / 10%);
                                border: 0;
                            }
                        }
                    }
                    :deep(.wd-slider) {
                        height: 36rpx;
                        padding-top: 36rpx;
                        .wd-slider__button-wrapper {
                            width: 30rpx;
                            height: 30rpx;
                            .wd-slider__button {
                                width: 30rpx;
                                height: 30rpx;
                            }
                            .wd-slider__label {
                                bottom: 36rpx;
                                width: 30rpx;
                                font-size: 20rpx;
                            }
                        }
                        .wd-slider__bar-wrapper {
                            margin: 0 40rpx;
                        }
                    }
                }
                .button-wrap {
                    display: flex;
                    gap: 24rpx;
                    justify-content: flex-end;
                    padding: 32rpx 0;
                    div {
                        padding: 10rpx 24rpx;
                        font-size: 28rpx;
                        color: #1f86ff;
                        border-radius: 8rpx;
                    }
                    .reset {
                        color: #ffffff;
                        background: #1f86ff;
                    }
                    .confirm {
                        color: #1f86ff;
                        border: 2rpx solid #1f86ff;
                    }
                }
            }
        }
        .recommend-list {
            flex-grow: 1;
            height: 200rpx;
            .item {
                padding: 16rpx 32rpx;
                border-bottom: 16rpx solid #f3f4f8;
            }
            .wd-status-tip {
                padding-top: 280rpx;
            }
        }
    }
    .management {
        position: relative;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        .filter {
            padding: 20rpx 32rpx;
            font-size: 28rpx;
            line-height: 44rpx;
            color: #77818f;
            text-align: center;
            border-bottom: 16rpx solid #f3f4f8;
            .item.active {
                position: relative;
                font-weight: 500;
                color: #1f86ff;
                &::after {
                    position: absolute;
                    bottom: -20rpx;
                    left: 50%;
                    display: block;
                    width: 48rpx;
                    height: 4rpx;
                    content: "";
                    background-color: #1f86ff;
                    transform: translateX(-50%);
                }
            }
        }
        .release-postion {
            position: absolute;
            right: 22rpx;
            bottom: 12rpx;
            z-index: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 112rpx;
            height: 112rpx;
            font-size: 24rpx;
            font-weight: 500;
            line-height: 28rpx;
            color: #eaf4ff;
            background: linear-gradient(180deg, #3570ff -3%, #29a5ff 100%);
            border-radius: 50%;
            opacity: 1;
            image {
                width: 32rpx;
                height: 36rpx;
                margin-bottom: 6rpx;
            }
        }
        .management-list {
            flex-grow: 1;
            height: 200rpx;
            .item {
                padding: 32rpx;
                padding-bottom: 0;
                border-bottom: 16rpx solid #f3f4f8;
                .info {
                    .name {
                        font-size: 32rpx;
                        font-weight: 500;
                        color: #1b2026;
                    }
                    .other {
                        font-size: 24rpx;
                        font-weight: normal;
                        line-height: 36rpx;
                        color: #77818f;
                    }
                }
                .state {
                    padding: 8rpx 16rpx;
                    font-size: 20rpx;
                    font-weight: 500;
                    line-height: 28rpx;
                    color: #1f86ff;
                    background: rgb(31 134 255 / 10%);
                    border-radius: 4rpx;
                    &.style1 {
                        color: #18c69c;
                        background: rgb(31 255 80 / 10%);
                    }
                    &.style2 {
                        color: #f05a25;
                        background: rgb(240 90 37 / 10%);
                    }
                }
                .data {
                    padding: 16rpx 0;
                    border-bottom: 2rpx solid rgb(31 35 41 / 15%);
                    & > view {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        width: 214rpx;
                        height: 120rpx;
                        text-align: center;
                        background: #1f86ff10;
                        border-radius: 8rpx;
                        .t1 {
                            font-size: 48rpx;
                            font-weight: bold;
                            line-height: 36rpx;
                            color: #1f86ff;
                        }
                        .t2 {
                            font-size: 24rpx;
                            line-height: 36rpx;
                            color: #77818f;
                        }
                    }
                }
                .btn-list {
                    margin: 12rpx 0;
                    .rotate {
                        transform: rotateZ(180deg);
                    }
                    image {
                        width: 28rpx;
                        height: 28rpx;
                    }
                    view {
                        flex: 1;
                        font-size: 24rpx;
                        font-weight: normal;
                        line-height: 36rpx;
                        color: #77818f;
                        &:not(:first-child) {
                            border-left: 2rpx solid #77818f;
                        }
                    }
                }
            }
            .wd-status-tip {
                padding-top: 280rpx;
            }
        }
    }
}
</style>
