<!--
 * @Author: PoJun
 * @Date: 2023-09-28 10:38:11
 * @LastEditors: PoJun
 * @LastEditTime: 2024-01-03 16:39:19
 * @Message: 待办、已办
-->
<template>
    <view class="flow">
        <uv-sticky>
            <view class="flow-tabs">
                <uv-search shape="round" :showAction="false" @search="doSearch"></uv-search>
                <uv-tabs :list="tabList" :scrollable="false" @change="tabChange" :current="currentIndex"></uv-tabs>
            </view>
        </uv-sticky>

        <block v-if="dataList.length">
            <view class="flow-list">
                <ItemInfo
                    v-for="(item, index) in dataList"
                    :key="index"
                    :item="item"
                    :tab="tabList[currentIndex]"
                ></ItemInfo>
            </view>
        </block>
        <!-- 空内容 -->
        <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 ItemInfo from "./item.vue";
import { getWaitdoList, getDoneList } from "@/config/http.js";

export default {
    components: { ItemInfo },
    data() {
        return {
            dataList: [],
            page: {
                pageSize: 10,
                pageNum: 1,
            },
            scrollTop: 0,
            iconStyle: { color: "#fff" },
            customStyle: { background: "#4076F4" },
            currentIndex: 0,
            status: "loadmore",
            searchKey: "",
            tabList: [
                {
                    name: "待处理",
                    type: "todo",
                },
                {
                    name: "已处理",
                    type: "done",
                },
            ],
        };
    },
    methods: {
        tabChange({ index }) {
            this.currentIndex = index;
            this.page.pageNum = 1;
            this.getDataList();
        },
        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,
                    search: this.searchKey,
                    excludeToken: this.currentIndex == 1 ? "Start" : "",
                    token: this.currentIndex == 2 ? "Start" : "",
                },
            };
            // 先暂时只管两种.
            const res = this.currentIndex == 0 ? await getWaitdoList(data) : await getDoneList(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(e) {
        this.currentIndex = e?.index;
        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;
}
.flow {
    &-tabs {
        padding: 0 25rpx;
        background-color: #fff;
        box-shadow: 0 0px 12px 0px rgba(0, 0, 0, 0.1);
    }
    &-list {
        padding: 18rpx 18rpx 0;
    }
}
</style>
