<template>
    <view style="height: 100%; padding-bottom: 40px">
        <NavBar :showIcon="false" backgroundBox="#ffffff" :showTitle="true" title="消息"></NavBar>
        <div class="message-list">
            <scroll-view :scroll-y="true" @scrolltolower="getList">
                <view class="system">
                    <view class="item flex-between" v-for="(v, i) in list" :key="i" @tap="toDetail(v)">
                        <img src="@/static/image/user/default-avatar.png" alt="" />
                        <view class="content">
                            <view class="name-date flex-between">
                                <text class="name">{{ v.title || "" }}</text>
                                <text class="date">2024-06-21 12:30</text>
                            </view>
                            <view class="message flex-between">
                                <text>{{ v.content }}</text>
                                <view class="flex-align-center">
                                    <text class="link">立即前往</text>
                                    <view class="arrow"></view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
                <!-- 暂无消息通知-->
                <view class="nothing" v-if="!list.length">
                    <view class="nothing-text">暂无消息通知</view>
                </view>
            </scroll-view>
        </div>
    </view>
</template>

<script setup>
import { getMessagePageList } from "@/api/message";
import { ref } from "vue";
import { getEnumText } from "@/utils/utils";
import _ from "lodash";
const list = ref([]);
let pageNo = 1;
onShow(() => {
    resetData().then(res => {
        getList();
    });
});

// 重置数据
const resetData = () => {
    return new Promise(resolve => {
        pageNo = 1;
        list.value = [];
        resolve();
    });
};
const getList = () => {
    getMessagePageList({
        pageNo: pageNo,
        pageSize: 10
    }).then(res => {
        res.data.forEach(async v => {
            v.typeText = await getEnumText("EnumMessageType", v.type);
        });
        console.log(res.data);
        list.value = _.concat(list.value, res.data);
    });
};

const toDetail = data => {
    if (data.type == 1) {
        uni.navigateTo({
            url: `/pages/user/deliveryFeedback/index?id=${data.targetId}`
        }); 
    } else {
        uni.navigateTo({
            url: `/pages/user/feedbackDetails/index?id=${data.targetId}`
        });  
    }
};
onReachBottom(() => {
    pageNo++;
    getList();
});
</script>

<style lang="scss" scoped>
.message-list {
    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%;
        }
    }
}
.container {
    flex-grow: 1;
    height: 1rpx;
    background-color: #aa0f00;
}
scroll-view {
    flex-grow: 1;
    height: 200rpx;
    background-color: #ffffff;
    .feedback {
        .item {
            position: relative;
            padding: 32rpx;
            padding-left: 80rpx;
            &:not(:first-child) {
                border-top: 16rpx solid #f3f4f8;
            }
            &.new::after {
                position: absolute;
                top: 50%;
                left: 32rpx;
                display: block;
                width: 24rpx;
                height: 24rpx;
                content: "";
                background-color: #f05a25;
                border-radius: 50%;
                transform: translate(0, -50%);
            }
            .job-name {
                .name {
                    font-size: 32rpx;
                    font-weight: 600;
                    line-height: 36rpx;
                    color: #1b2026;
                }
                .salary {
                    font-size: 36rpx;
                    font-weight: 500;
                    line-height: 24rpx;
                    color: #1f86ff;
                    text {
                        font-size: 28rpx;
                        font-weight: normal;
                        line-height: 24rpx;
                        color: #1f86ff;
                    }
                }
            }
            .com-name {
                margin-top: 16rpx;
                font-size: 24rpx;
                font-weight: normal;
                line-height: 36rpx;
                color: #77818f;
                letter-spacing: 0rpx;
            }
            .hr {
                margin-top: 18rpx;
                font-size: 24rpx;
                line-height: 36rpx;
                color: #77818f;
                .hr-name {
                    margin-right: 34rpx;
                    img {
                        width: 36rpx;
                        height: 36rpx;
                        border-radius: 50%;
                    }
                }
            }
            .state {
                position: absolute;
                right: 28rpx;
                bottom: 32rpx;
                padding: 16rpx 32rpx;
                font-size: 24rpx;
                font-weight: 600;
                line-height: 28rpx;
                color: #f53f3f;
                background: #ffece8;
            }
        }
    }
    .system {
        .item {
            padding: 32rpx;
            border-bottom: 16rpx solid #f3f4f8;
            img {
                width: 86rpx;
                height: 86rpx;
                border-radius: 50%;
            }
            .content {
                flex: 1;
                margin-left: 24rpx;
                .name-date {
                    .name {
                        font-size: 28rpx;
                        font-weight: 600;
                        line-height: 42rpx;
                        color: #1b2026;
                        text-align: center;
                    }
                    .date {
                        font-size: 24rpx;
                        font-weight: 500;
                        line-height: 36rpx;
                        color: #77818f;
                    }
                }
                .message {
                    margin-top: 14rpx;
                    font-size: 24rpx;
                    font-weight: normal;
                    line-height: 36rpx;
                    color: #1b2026;
                    .link {
                        font-size: 24rpx;
                        font-weight: 500;
                        line-height: 36rpx;
                        color: #1f86ff;
                    }
                    .arrow {
                        border-color: #1f86ff;
                    }
                }
            }
        }
    }
    .nothing {
        width: 100%;
        text-align: center;
        .nothing-text {
            display: inline-block;
            margin-top: 80rpx;
            font-size: 28rpx;
            font-weight: 400;
            line-height: 68rpx;
            color: rgb(128 128 128 / 100%);
        }
    }
}
</style>
