<!--
 * @Author: PoJun
 * @Date: 2023-09-28 10:38:11
 * @LastEditors: PoJun
 * @LastEditTime: 2023-12-26 14:40:11
 * @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"
                @tap="itemClick(item)"
            >
                <uv-avatar :src="getImageUrl(item.image)" size="66" shape="square"></uv-avatar>
                <view class="uv-m-l-24 uv-flex-1">
                    <view class="uv-font-30 uv-weight-700">{{ item.name }}</view>
                    <view class="uv-font-26 uv-m-t-10 uv-info">{{ item.address }}</view>
                    <view class="supplier-list-score uv-font-28 uv-error uv-weight-700">{{ item.mark }}</view>
                </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 { getSuppliersList } 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 getSuppliersList(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();
        },

        itemClick(item) {
            uni.$uv.route({
                url: "/subpkg/home/supplier-detail",
                params: { id: item.id },
            });
        },
        getImageUrl(ids) {
            if (ids && ids.length) {
                return process.env.VUE_APP_BASE_API + `/files/${ids[0]}/show_image`;
            } else {
                return "";
            }
        },
    },
    onLoad() {
        this.getDataList();
    },
    onReady() {
        uni.$on("refreshFlowList", () => {
            this.page.pageNum = 1;
            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;
    },
    destroyed() {
        uni.$off("refreshFlowList");
    },
};
</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;
            display: flex;
            flex-direction: row;
            align-items: center;
            position: relative;
        }
        &-score {
            position: absolute;
            right: 5px;
            top: 5px;
        }
    }
}
</style>
