<template>
    <NavBar :showIcon="true" :showTitle="true" title="职位管理" backgroundBox="#FFFFFF"></NavBar>
    <view class="management">
        <view class="filter flex-between">
            <view
                class="item"
                :class="{ active: activeTopFilter === v.code }"
                v-for="v in topFilter"
                :key="v.code"
                @click="filterJobList(v.code)"
                >{{ v.text }}</view
            >
        </view>
        <scroll-view
            class="management-list"
            :scroll-y="true"
            :refresher-triggered="refresherEnabled"
            @refresherrefresh="onRefresherrefresh"
            refresher-enabled
        >
            <view class="item" v-for="(v, i) in jobList" :key="i">
                <view class="flex-between">
                    <view class="info">
                        <view class="name">{{ v.name }}</view>
                        <view class="other"> {{ v.cityName }}｜{{ v.workModeText }}｜{{ v.jobTypeName }} </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" @click="jobOffuntopApiFn(v)" v-if="v.top == 1">
                        <image src="@/static/image/icon/cancelUpload.png" mode="" />
                        取消置顶
                    </view>
                    <view class="flex-center" @click="jobOfftopApiFn(v)" v-else>
                        <image class="top" src="@/static/image/icon/top.png" mode="" />
                        置顶
                    </view>
                    <view class="flex-center" @click="switchJobStatus(v)">
                        <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>
</template>

<script setup>
import { getListStatisticsApi, jobReleaseApi, jobOfflineApi, getJobByIdApi, jobOfftopApi, jobOffuntopApi } from "@/api/postion";
import { useReleasePostionStore } from "@/pages/recommend/releasePostion/store";
import { getEumData, getEnumText } from "@/utils/utils";
import { ref } from "vue";
import { useAsync } from "@/hooks/useAsync";
import _ from "lodash";
const pinias = useReleasePostionStore();

const topFilter = ref([]);
const activeTopFilter = ref("");
const jobList = ref([]);
const filterJobList = code => {
    activeTopFilter.value = code;
    getJobList(code);
};
const getTopFilter = async () => {
    const data = await getEumData("EnumPositionStatus");
    data.unshift({
        code: "",
        text: "全部"
    });
    topFilter.value = data;
};
const getJobList = (status = "") => {
    xma.showLoading({
        title: "加载中..."
    });
    getListStatisticsApi({ status }).then(res => {
        xma.hideLoading();
        res.data.forEach(v => {
            const { data: workModeText } = useAsync(getEnumText("EnumWorkMode", v.workMode));
            const { data: statusText } = useAsync(getEnumText("EnumPositionStatus", v.status));
            v.workModeText = workModeText;
            v.statusText = statusText;
        });
        jobList.value = [...res.data];
        refresherEnabled.value = false;
    });
};
onLoad(() => {
    xma.xh.getSystemInfo({
        success(res) {
            // console.log('设备信息', res); // 设备信息
        }
    });
    xma.xh.getMenuButtonBoundingClientRect({
        success(res) {
            contentHeight.value = (res.top + res.bottom) / 2 + 25 + "px";
        }
    });
});
onShow(() => {
    getTopFilter();
    getJobList();
});

/* 职位上下线 */
const switchJobStatus = async v => {
    let res = null;
    if (v.status == 3) {
        res = await jobOfflineApi(v.id);
        if (res.code === 200) v.status = 4;
    } else if (v.status == 4 || v.status == 1) {
        res = await jobReleaseApi(v.id);
        if (res.code === 200) v.status = 3;
    } else {
        uni.showToast({
            title: "该状态不能操作",
            icon: "none"
        });
    }
    if (res && res.code === 200) {
        v.statusText = await getEnumText("EnumPositionStatus", v.status);
        uni.showToast({
            title: "操作成功",
            icon: "none"
        });
        // getJobList();
    } 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;
        pinias.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
        }); */
        pinias.formData = res.data;

        pinias.setFormDataKey("id", id);
        uni.navigateTo({
            url: `/pages/recommend/releasePostion/step1?id=${id}`
        });
    });
};
/* 置顶 */
function jobOfftopApiFn(v) {
    jobOfftopApi(v.id).then(res => {
        if (res.code == 200) {
            getJobList(activeTopFilter.value);
        }
    });
}
function jobOffuntopApiFn(v) {
    jobOffuntopApi(v.id).then(res => {
        if (res.code == 200) {
            getJobList(activeTopFilter.value);
        }
    });
}

/* 下拉刷新 */
const refresherEnabled = ref(false);
const onRefresherrefresh = e => {
    console.log(e);
    refresherEnabled.value = true;
    getJobList(activeTopFilter.value);
};
</script>

<style lang="scss" scoped>
.management {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    .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%);
            }
        }
    }
    .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;
                }
                .top {
                    width: 20rpx;
                    height: 20rpx;
                    margin-right: 3rpx;
                }
                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>
