<template>
    <NavBar :showIcon="true" backgroundBox="#ffffff" :showTitle="true" title="记录"></NavBar>
    <div class="record">
        <div class="list-container">
            <template v-for="item in feedbackListData" :key="item.id">
                <div class="div-content">
                    <div class="company-name">
                        {{ item.id }}
                    </div>
                    <div class="div-state-await" @click="tofeedBackRecord(item.id)">
                        {{ item.status }}
                    </div>
                    <div class="div-time">
                        {{ days(parseInt(item.createTime)).format("YYYY-MM-DD HH:mm") }}
                        <!-- {{ item.createTime }} -->
                    </div>
                </div>
            </template>
        </div>

        <div class="content-line"></div>
        <div class="button-feedback" @click="tofeedBackWait">投诉建议</div>
    </div>
</template>

<script setup>
import { getFeedbackList } from "@/api/common";
import { onReady } from "@dcloudio/uni-app";
import axios from "axios";
import dayjs from "dayjs";
import { ref } from "vue";

const pageNo = ref("1"); //初始页码
const pageSize = ref("10"); //每页数量
const days = dayjs;
let feedbackListData = ref([]);

const postListData = () => {
    // feedbackListData = res.feedbackListData;
    getFeedbackList({ pageNo: 1, pageSize: 50000 })
        .then(res => {
            feedbackListData.value = res.data;
            emit("");
        })
        .catch(res => {});
};

onShow(() => {
    postListData();
});
console.log("feedbackListData:", feedbackListData);
const tofeedBackRecord = id => {
    console.log("", id);
    uni.navigateTo({
        url: "/pages/user/feedBack/feedBackReplied/feedBackReplied?id=" + id
    });
};
const tofeedBackWait = url => {
    uni.navigateTo({
        url: "/pages/user/feedBack/feedBackWait/feedBackWiat"
    });
};
</script>

<style lang="scss" scoped>
page {
    height: 100%;
    background-color: #ffffff;
}
.record {
    width: 750rpx;
    height: 90%;
    overflow: scroll;
}
.list-container {
    width: 750rpx;
    height: 100%;
}
.div-content {
    width: 750rpx;
    height: 116rpx;
    margin-top: 16rpx;
    border-bottom: solid 16rpx #f3f4f8;
}
.company-name {
    margin-top: 32rpx;
    margin-left: 32rpx;
    font-size: 32rpx;
    font-weight: 600;
    line-height: 36rpx;
    color: #1b2026;
}
.div-time {
    margin-top: -20rpx;
    margin-left: 32rpx;
    font-size: 24rpx;
    font-weight: normal;
    color: #77818f;
}
.div-state-finish {
    width: 136rpx;
    height: 60rpx;
    margin-top: -20rpx;
    margin-left: 582rpx;
    font-size: 24rpx;
    font-weight: 600;
    line-height: 60rpx;
    color: #31cbaee6;
    text-align: center;
    background: rgb(49 203 174 / 10%);
}
.div-state-await {
    width: 136rpx;
    height: 60rpx;
    margin-top: -20rpx;
    margin-left: 582rpx;
    font-size: 24rpx;
    font-weight: 600;
    line-height: 60rpx;
    color: #1f86ff;
    text-align: center;
    background: #1f86ff10;
}
.button-feedback {
    position: fixed;
    top: 92%;
    left: 65rpx;
    width: 622rpx;
    height: 80rpx;
    font-size: 30rpx;
    font-weight: 600;
    line-height: 80rpx;
    color: #ffffff;
    text-align: center;
    background: #1f86ff;
    border-radius: 12rpx;
}
.content-line {
    position: fixed;
    top: 90%;
    left: 0rpx;
    width: 750rpx;
    height: 1rpx;
    background: rgb(31 35 41 / 15%);
}
</style>
