<template>
    <div class="page shop-cart-page" :class="{ page_red: theme === 1 }">
        <div class="page__top">
            <div class="search">
                <i class="iconfont icontubiao- search__icon"></i>
                <input
                    class="search__text"
                    v-model="searchVal"
                    @confirm="search()"
                    type="text"
                    placeholder="搜索牌号"
                />
                <i
                    class="iconfont iconclose_icon search__icon remove-icon"
                    @click="closeSearchVal"
                ></i>
            </div>
        </div>
        <div class="page__content">
            <ul class="list">
                <li class="item" v-for="item of dataList" :key="item._id" @click="goDetail(item)">
                    <div class="box">
                        {{item.suspendNo}}
                    </div>
                </li>
      
            </ul>
        </div>
    </div>
</template>

<script>
import MyImage from "../../../components/image/index";
export default {
    name: "",
    filters: {},
    components: {
        MyImage,
    },
    // 数据
    data() {
        return {
            searchVal: "",
            dataList: [],
            pageIndex: 1,
            pageSize: 20,
        };
    },

    onLoad() {
    },

    async onShow() {
        this.getList();},

    onPullDownRefresh() {
        this.getList();
    },
    onReachBottom() {
        this.getMoreList();
    },

    // 函数
    methods: {
        getList() {
            uni.showLoading({
                title: "加载中...",
                mask: true,
            });
            this.pageIndex = 1;
            this.dataEnd = false;
            let sendData = {
                pageIndex: this.pageIndex,
                pageSize: this.pageSize,
            };
            if (this.searchVal) {
                sendData.suspendNo = this.searchVal;
            }
            this.api.get("/Order/GetOrderSuspendList", sendData).then((res) => {
                uni.hideLoading();
                this.dataList = res.data.data;
            });
        },
        getMoreList() {
            if (this.dataEnd) {
                return;
            }
            this.pageIndex++;
            let sendData = {
                pageIndex: this.pageIndex,
                pageSize: this.pageSize,
            };
            if (this.searchVal) {
                sendData.suspendNo = this.searchVal;
            }
            this.api.get("/Order/GetOrderSuspendList", sendData).then((res) => {
                if (res.data.data.length === 0) {
                    this.dataEnd = true;
                } else {
                    this.dataList = [...this.dataList, ...res.data.data];
                }
            });
        },

        goDetail(item) {
            this.router.push({
                path: "/pages/manage/cashier/cache-detail",
                query: {
                    suspendNo:item.suspendNo
                },
            });
        },

        // 搜索
        search() {
            if (this.searchVal) {
                this.getList();
            }
        },
        closeSearchVal() {
            this.searchVal = "";
            this.getList();
        },
    },

    // 数据计算
    computed: {
        user() {
            return this.$store.state.user.user;
        },
    },
    // 数据监听
    watch: {},
};
</script>



<style lang="scss" scoped>
.page {
    &__top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: px(145);
        padding: 0 px(50);
        background-color: #fff;
        // box-shadow: 0 px(-5) px(10) #333;
    }
}
.search {
    display: flex;
    align-items: center;
    width: 100%;
    height: px(86);
    padding: 0 px(35);
    background-color: #f8f8f8;
    border-radius: px(43);

    &__icon {
        margin-top: px(10);
        font-size: px(60);
        color: #999;
    }

    &__text {
        margin-left: px(15);
        font-size: px(36);
        color: #999;
        width: 100%;
    }
}
.list {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 0 px(35);
    margin-top: px(30);
    .item {
        width: 33.333333%;
        margin-top: px(30);
    }
    .box{
        width: px(300);
        height: px(100);
        margin: 0 auto;;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #fff;
        border-radius: px(8);
    }
}
</style>