<template>
    <div class="page">
        <!-- <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.jobApplication.status == 4">
            <view class="t1">不合适</view>
            <view class="t2">抱歉！经公司慎重考虑，很遗憾你不适合该职位感谢你的投递！</view>
            <view class="shadow"></view>
        </view>
        <view class="card success" v-if="postionData.jobApplication.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.jobName }}</text>
                <view>{{ postionData.minSalary / 1000 }}k-{{ postionData.maxSalary / 1000 }}k/<text>/月</text></view>
            </view>
            <view class="com-name">{{ postionData.companyName }}</view>
            <view class="tags">
                <text class="item" v-for="v in postionData.benefits.split(',')" :key="v">{{ v }}</text>
            </view>
        </view>
        <view class="pos-detail">
            {{ jobDesc }}
        </view>
        <view class="steps-wrap">
            <steps :data="postionData.jobApplication"></steps>
        </view>
    </div>
</template>

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

<style lang="scss" scoped>
.page {
    box-sizing: border-box;
    padding-top: 48rpx;
    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;
    }
}
.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>
