<template>
    <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">
                    <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>
        </scroll-view>
    </div>
</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;
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);
    });
};
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;
                        color: #1f86ff;
                        white-space: nowrap;
                    }
                    .arrow {
                        border-color: #1f86ff;
                    }
                }
            }
        }
    }
}
</style>
