<template>
    <NavBar :showIcon="true" backgroundBox="#ffffff" :showTitle="true" :title="title"></NavBar>
    <div class="page">
        <view class="item" v-for="v in list" :key="v.id" @click="jumpToDetail(v)">
            <view class="name-salary flex-between">
                <text class="name">{{ v.positionName }}</text>
                <!-- <text class="salary">6k-12k<text>/月</text></text> -->
                <text class="salary">{{ v.salary }}</text>
            </view>
            <view class="bottom-row">
                <view class="com-name">{{ v.companyName }}</view>
                <!-- <view class="flex-align-center tags">
                    <text v-for="(benefit, index) in v.benefits?.split(',') || []" :key="index">{{ benefit }}</text>
                </view> -->
                <view v-if="v.status == 0" class="state success"> 已投递 </view>
                <view v-if="v.status == 1" class="state success"> 已查看 </view>
                <view v-if="v.status == 2" class="state success"> 已邀约 </view>
                <view v-if="v.status == 3" class="state success"> 已面试 </view>
                <view v-if="v.status == 4" class="state warning"> 很遗憾 </view>
            </view>
        </view>
    </div>
</template>

<script setup>
import { getApplicationListApi, getInterviewListApi } from "@/api/user";
import { reactive, ref } from "vue";
import { getEnumText } from "@/utils/utils.js";
let pageNo = 1;
let type = 1;
const list = reactive([]);
const title = ref("");
onLoad(e => {
    title.value = e.type;
    type = e.type;
    getList();
});
const jumpToDetail = e => {
    uni.navigateTo({
        url: "/pages/user/deliveryFeedback/index?id=" + e.positionId
    });
};
// "code": "0",
// "text": "已投递",
// "code": "1",
// "text": "已查看",
// "code": "2",
// "text": "待面试",
// "code": "3",
// "text": "已面试",
// "code": "4",
// "text": "已拒绝",
const getList = () => {
    // let api = type == "我的投递" ? getApplicationListApi : getInterviewListApi;
    const params = {
        pageNo: pageNo++,
        pageSize: 10,
    }
    if (title.value === "我的面试") {
        params.status = 3 
    }
    getApplicationListApi(params).then(res => {
        list.push(...res.data);
    });
};
</script>

<style lang="scss" scoped>
.page {
    background-color: #ffffff;
}
.item {
    position: relative;
    padding: 16px;
    border-bottom: 8px solid #f3f4f8;
    .name-salary {
        .name {
            font-size: 16px;
            font-weight: 600;
            line-height: 18px;
            color: #1b2026;
        }
        .salary {
            font-size: 18px;
            font-weight: 500;
            line-height: 12px;
            color: #1f86ff;
            text {
                font-size: 14px;
                font-weight: normal;
                line-height: 12px;
            }
        }
    }
    .bottom-row{
        display: flex;
        justify-content: space-between;
        margin-top: 20rpx;
        .com-name {
            margin-top: 8px;
            font-size: 12px;
            font-weight: normal;
            line-height: 18px;
            color: #77818f;
        }
        .tags {
            gap: 7px;
            height: 30rpx;
            margin-top: 10px;
            text {
                padding: 2px 4px;
                font-size: 10px;
                color: #4e5969;
                background: #f2f3f5;
            }
        }
        .state {
            // position: absolute;
            // right: 16px;
            // bottom: 24px;
            padding: 8px 16px;
            font-size: 12px;
            font-weight: 600;
            line-height: 14px;
            &.warning {
                color: #f53f3f;
                background: #ffece8;
            }
            &.success {
                color: #31cbae;
                background: rgb(49 203 174 / 10%);
            }
        }
    }
    
}
</style>
