<template>
    <div class="message-list">
        <NavBar :showIcon="false" :showTitle="true" title="消息"></NavBar>
        <scroll-view :scroll-y="true" @scrolltolower="getList">
            <view class="system">
                <view class="item flex-between" v-for="v in list" :key="v.id" @click="goToDetail(v)">
                    <div class="img-wrap">
                        <img v-if="v.iconUrl" :src="v.iconUrl" alt="" />
                    </div>
                    <view class="content">
                        <view class="name-date flex-between">
                            <text class="name">{{ v.title || "" }}</text>
                            <text class="date">{{ dayjs(v.createTime).format("YYYY-MM-DD HH:mm") }}</text>
                        </view>
                        <view class="message flex-between">
                            <text>{{ v.content }}</text>
                            <view class="flex-align-center">
                                <text class="link" v-if="[2, 3, 4, 7].includes(v.type)">立即前往></text>
                            </view>
                        </view>
                    </view>
                </view>
                <wd-status-tip v-if="list.length == 0" image="../.././static/image/enmpty-dt.png" tip="暂无消息" />
            </view>
        </scroll-view>
    </div>
</template>

<script setup>
import { getMessagePageList } from "@/api/message";
import { ref } from "vue";
import { getEnumText, getEumData } from "@/utils/utils";
import _ from "lodash";
import dayjs from "dayjs";
const list = ref([]);
const iconUrlObj = reactive({
    3: new URL("@/static/image/icon/message3.png", import.meta.url).href,
    4: new URL("@/static/image/icon/message4.png", import.meta.url).href,
    5: new URL("@/static/image/icon/message5.png", import.meta.url).href,
    6: new URL("@/static/image/icon/message6.png", import.meta.url).href,
    7: new URL("@/static/image/icon/message7.png", import.meta.url).href,
    8: new URL("@/static/image/icon/message8.png", import.meta.url).href,
    default: new URL("@/static/image/icon/message-default.png", import.meta.url).href
});
const params = ref({
    pageNo: 1,
    pageSize: 10,
    isEnd: false
});
const goToDetail = item => {
    if ([3, 4, 7].includes(item.type)) {
        xma.navigateTo({
            url: `/pages/user/myCompany/licenseInfo?id=${item.id}`
        });
    } else if (item.type == 2) {
        xma.navigateTo({
            url: `/pages/user/feedbackDetails/index?id=${item.id}`
        });
    }
};

const refresh = () => {
    return new Promise((resolve, reject) => {
        list.value = [];
        params.value.pageNo = 1;
        params.value.isEnd = false;
        resolve();
    });
};

const getList = () => {
    if (params.value.isEnd === true)
        return new Promise(resolve => {
            resolve();
        });
    xma.showLoading({
        title: "加载中...",
        mask: true
    });
    return getMessagePageList(params.value).then(res => {
        if (res.data.length < params.value.pageSize) {
            params.value.isEnd = true;
        }
        res.data.forEach(async v => {
            v.iconUrl = iconUrlObj[v.type] || iconUrlObj.default;
            v.typeText = await getEnumText("EnumMessageType", v.type);
        });
        params.value.pageNo += 1;
        list.value = list.value.concat(res.data);
        xma.hideLoading();
    });
};
onPullDownRefresh(() => {
    refresh().then(() => {
        getList().then(() => {
            xma.stopPullDownRefresh();
        });
    });
});
// 触底加载
onReachBottom(() => {
    getList();
});
getList();
</script>

<style lang="scss" scoped>
.message-list {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-bottom: 98rpx;
}
.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 {
            align-items: flex-start;
            padding: 32rpx;
            border-bottom: 16rpx solid #f3f4f8;
            .img-wrap {
                img {
                    width: 36rpx;
                    height: 36rpx;
                    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>
