<template>
    <NavBar :showIcon="true" :showTitle="true" title="记录" backgroundBox="#FFFFFF"></NavBar>
    <view class="problem-page">
        <view class="history-item" v-for="item in list" :key="item.id" @click="goToDetail(item)">
            <view class="item-left">
                <view class="title">{{ item.questionDesc }}</view>
                <view class="time">{{ $formatTimestamp(item.createTime, "YYYY-MM-DD hh:mm") }}</view>
            </view>
            <view
                class="btn"
                :style="{
                    background: item.replyMessage ? '#EAF9F6' : '#E8F2FF',
                    color: item.replyMessage ? '#31CBAE' : '#1F86FF'
                }"
                >{{ item.replyMessage ? "已回复" : "待回复" }}</view
            >
        </view>
        <wd-status-tip v-if="list.length == 0" image="content" tip="暂无内容" />
        <wd-tabbar
            @click="navigateTo"
            custom-style="display: flex;justify-content: center !important;"
            fixed
            placeholder
            safeAreaInsetBottom
        >
            <view class="foot-btn">投诉建议</view>
        </wd-tabbar>
    </view>
</template>

<script setup>
import { feedbackList } from "@/api/user";
const list = ref([]);
const params = ref({
    pageNo: 1,
    pageSize: 10,
    isEnd: false
});
/**
 * 跳转详情
 */
const navigateTo = () => {
    xma.navigateTo({
        url: `/pages/user/feedbackDetails/index`
    });
};
onShow(() => {
    refresh().then(() => {
        feedbackListFn().then(() => {
            xma.stopPullDownRefresh();
        });
    });
});
const feedbackListFn = () => {
    if (params.value.isEnd === true)
        return new Promise(resolve => {
            resolve();
        });
    xma.showLoading({
        title: "加载中...",
        mask: true
    });
    return feedbackList(params.value).then(res => {
        if (res.data.length < params.value.pageSize) {
            params.value.isEnd = true;
        }
        params.value.pageNo += 1;
        list.value = list.value.concat(res.data);
        xma.hideLoading();
    });
};
const goToDetail = item => {
    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();
    });
};
onPullDownRefresh(() => {
    refresh().then(() => {
        feedbackListFn().then(() => {
            xma.stopPullDownRefresh();
        });
    });
});
// 触底加载
onReachBottom(() => {
    feedbackListFn();
});
</script>

<style lang="scss" scoped>
page {
    background: #f3f4f8;
}
.problem-page {
    display: flex;
    flex-direction: column;
    gap: 16rpx;
    width: 750rpx;
    .history-item {
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        width: 100%;
        padding: 32rpx;
        background: #ffffff;
        .item-left {
            display: flex;
            flex-direction: column;
            .title {
                max-width: 400rpx;
                overflow: hidden;
                font-size: 32rpx;
                color: #1b2026;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .time {
                margin-top: 16rpx;
                font-size: 24rpx;
                color: #77818f;
            }
        }
        .btn {
            box-sizing: border-box;
            display: flex;
            flex-shrink: 0;
            align-items: center;
            height: 60rpx;
            padding: 0rpx 32rpx;
            font-size: 24rpx;
        }
    }
    .foot-btn {
        position: fixed;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 622rpx;
        height: 80rpx;
        color: #ffffff;
        background: #1f86ff;
        border-radius: 12rpx;
    }
}
</style>
