<!--
 * @Author: PoJun
 * @Date: 2023-09-28 10:38:11
 * @LastEditors: PoJun
 * @LastEditTime: 2024-01-04 16:07:28
 * @Message: 合作记录页
-->
<template>
    <view class="supplier">
        <uv-sticky>
            <view class="supplier-tabs">
                <uv-search shape="round" :showAction="false" @search="doSearch"></uv-search>
            </view>
        </uv-sticky>

        <view v-if="dataList.length" class="supplier-list">
            <view
                class="supplier-list-item"
                hover-class="uv-hover-class"
                v-for="(item, index) in dataList"
                :key="index"
            >
                <view class="uv-font-30 uv-weight-700">{{ item.content }}</view>
                <view class="uv-font-26 uv-m-t-15">{{ item.time }}</view>
            </view>
        </view>
        <!-- 空内容 -->
        <uv-empty v-else mode="list" marginTop="200"></uv-empty>
        <!-- 加载更多 -->
        <uv-load-more v-if="dataList.length >= 10" :status="status" marginTop="20" line />
        <!-- 返回顶部 -->
        <uv-back-top :scroll-top="scrollTop" :iconStyle="iconStyle" :customStyle="customStyle"></uv-back-top>
    </view>
</template>

<script>
import { getSelfRecords } from "@/config/http.js";
export default {
    data() {
        return {
            dataList: [],
            page: {
                pageSize: 10,
                pageNum: 1,
            },
            scrollTop: 0,
            iconStyle: { color: "#fff" },
            customStyle: { background: "#4076F4" },
            status: "loadmore",
            searchKey: "",
        };
    },
    methods: {
        async getDataList() {
            if (!this.vuex_userInfo) {
                uni.hideLoading();
                return;
            }
            if (this.page.pageNum == 1) {
                this.dataList = [];
            }
            this.status = "loading";
            const data = {
                params: {
                    pageSize: this.page.pageSize,
                    pageNum: this.page.pageNum,
                    query: {
                        search: this.searchKey,
                    },
                },
            };
            // 先暂时只管两种.
            const res = await getSelfRecords(data);

            if (this.dataList.length == res.total) {
                this.status = "nomore";
            }
            this.dataList = this.dataList.concat(res.list);
            uni.stopPullDownRefresh();
        },
        doSearch(keyword) {
            this.searchKey = keyword;
            this.page.pageNum = 1;
            this.getDataList();
        },
    },
    onLoad() {
        this.getDataList();
    },
    onReachBottom() {
        if (this.status == "nomore") {
            return;
        }
        this.status = "loading";
        this.page.pageNum = ++this.page.pageNum;
        this.getDataList();
    },
    onPullDownRefresh() {
        uni.$uv.sleep(300).then(() => {
            this.page.pageNum = 1;
            this.getDataList();
        });
    },
    onPageScroll(e) {
        this.scrollTop = e.scrollTop;
    },
};
</script>

<style lang="scss">
page {
    background-color: $uv-bg-color;
}
.supplier {
    &-tabs {
        padding: 0 25rpx 25rpx;
        background-color: #fff;
        box-shadow: 0 0px 12px 0px rgba(0, 0, 0, 0.1);
    }
    &-list {
        padding: 18rpx 18rpx 0;
        &-item {
            padding: 25rpx;
            background-color: #fff;
            border-radius: 10rpx;
            margin-bottom: 18rpx;
        }
    }
}
</style>
