<template>
    <div class="page">
        <NavBar :showIcon="true" :showTitle="true" title="投递反馈" backgroundBox="#ffffff"></NavBar>
        <!-- <view v-if="v.status == 2" class="state success"> 待面试 </view>
        <view v-if="v.status == 4" class="state warning"> 已拒绝 </view> -->
        <view class="card" v-if="postionData.application?.status == 4">
            <view class="t1">很遗憾</view>
            <view class="t2">您没有得到本岗位的面试邀约，感谢您的投递!</view>
            <view class="shadow"></view>
        </view>
        <view class="card success" v-if="postionData.application?.status == 2">
            <view class="t1">面试邀约</view>
            <view class="t2">恭喜您获得本岗位的面试邀约，注意保持电话畅通或可以主动联系我们</view>
            <view class="shadow"></view>
        </view>
        <view class="pos-card">
            <view class="pos-name flex-between">
                <text class="name">{{ postionData.position.name }}</text>
                <view v-if="postionData.position.minSalary>0">{{ postionData.position.minSalary<1000?postionData.position.minSalary:postionData.position.minSalary / 1000 +'k'}}-{{ postionData.position.maxSalary<1000?postionData.position.maxSalary:postionData.position.maxSalary / 1000 +'k' }}<text>/{{ postionData.company }}</text></view>
                <view v-else class="salary2">面议</view>
            </view>
            <view class="com-name">{{ postionData.position.companyName }}</view>
            <view class="tags">
                <text class="item" v-for="v in postionData.position.benefits?.split(',') || []" :key="v">{{ v }}</text>
            </view>
        </view>
        <view class="pos-detail">
            {{ postionData.position.positionDesc }}
        </view>

        <template v-if="postionData.application?.status == 2">
            <div class="interview-info">
                <div>
                    <p class="label">面试时间</p>
                    <p>{{ dayjs(postionData.application.interviewTime).format("YYYY-MM-DD HH:mm") }}</p>
                </div>
                <div>
                    <p class="label">面试地点</p>
                    <p>{{ postionData.application.interviewLocation}}</p>
                </div>
                <div>
                    <p class="label">联系电话</p>
                    <p>{{ postionData.application.contactPerson }}</p>
                </div>
                <div>
                    <p class="label">联系人</p>
                    <p>{{ postionData.application.contactPhone }}</p>
                </div>
            </div>
        </template>

        <view class="steps-wrap">
            <steps :data="postionData.application"></steps>
        </view>
    </div>
</template>

<script setup>
import steps from "@/components/steps/index.vue";
import { reactive, ref } from "vue";
import { getJobDetailApi } from "@/api/postion";
import { getEnumText} from "@/utils/utils";
import dayjs from "dayjs";
const postionData = ref({});
onLoad(({ id }) => {
    getJobDetailApi(id).then(async res => {
        console.log(res);
        postionData.value = res.data;
        postionData.value.company = await getEnumText("EnumSettlementType", res.data.position.settlementType)
        
    });
});
</script>

<style lang="scss" scoped>
.page {
    box-sizing: border-box;
    background-color: #ffffff;
}
.card {
    position: relative;
    box-sizing: border-box;
    width: 686rpx;
    height: 236rpx;
    padding-top: 32rpx;
    margin: 0 auto;
    text-align: center;
    background: linear-gradient(180deg, #f05a25 0%, #ff0000 100%), linear-gradient(180deg, #f05a25 0%, #ff0000 100%),
        linear-gradient(180deg, #f05a25 0%, #ff0000 100%);
    border-radius: 12rpx;
    .t1 {
        font-size: 36rpx;
        font-weight: 600;
        line-height: 48rpx;
        color: #ffffff;
    }
    .t2 {
        margin-top: 20rpx;
        font-size: 28rpx;
        font-weight: 600;
        line-height: 52rpx;
        color: #ffffff;
    }
    .shadow {
        position: absolute;
        top: 40rpx;
        left: 38rpx;
        z-index: -1;
        width: 592rpx;
        height: 200rpx;
        background: rgb(200 0 0 / 78%);
        filter: blur(36rpx);
        border-radius: 12rpx;
        opacity: 1;
    }
}
.interview-info {
    display: flex;
    flex-direction: column;
    gap: 32rpx;
    padding: 0 32rpx;
    margin-top: 100rpx;
    div {
        display: flex;
        p {
            font-size: 28rpx;
            font-weight: normal;
            color: #1b2026;
        }
        .label {
            width: 180rpx;
            font-size: 24rpx;
            font-weight: 500;
            color: #77818f;
        }
    }
}
.success {
    background: linear-gradient(180deg, #1fc9ff 0%, #1f86ff 100%), linear-gradient(180deg, #f05a25 0%, #ff0000 100%),
        linear-gradient(180deg, #f05a25 0%, #ff0000 100%);
}
.pos-card {
    padding: 0 32rpx;
    margin-top: 60rpx;
    .pos-name {
        .name {
            font-size: 32rpx;
            font-weight: 600;
            line-height: 36rpx;
            color: #1b2026;
        }
        view {
            font-family: DIN;
            font-size: 36rpx;
            font-weight: 500;
            line-height: 24rpx;
            color: #1f86ff;
            text {
                font-size: 28rpx;
                font-weight: normal;
                line-height: 24rpx;
                color: #1f86ff;
                text-align: center;
            }
        }
    }
    .com-name {
        margin: 16rpx 0;
        font-size: 24rpx;
        font-weight: normal;
        line-height: 36rpx;
        color: #1b2026;
    }
    .tags {
        display: flex;
        gap: 20rpx;
        align-items: center;
        .item {
            padding: 4rpx 8rpx;
            font-size: 20rpx;
            font-weight: normal;
            line-height: 28rpx;
            color: #4e5969;
            background: #f2f3f5;
        }
    }
}
.pos-detail {
    padding: 0 32rpx;
    margin-top: 64rpx;
    font-size: 24rpx;
    font-weight: normal;
    line-height: 36rpx;
    letter-spacing: 0rpx;
}
.steps-wrap {
    position: fixed;
    bottom: 40rpx;
    border-top: 2rpx solid rgb(31 35 41 / 15%);
}
</style>
