<template>
    <div class="page">
        <div class="empty" v-if="!dataList || dataList.length === 0">
            无数据
        </div>
        <ul class="list" v-if="dataList && dataList.length">
            <li
                class="item"
                v-for="item of dataList"
                :key="item.id"
                @click="goDetail(item)"
            >
                <div class="main">
                    <div class="trade-no">
                        <span class="tag">{{
                            item.status | statusFilter
                        }}</span>
                        {{ item.tradeNo }}
                    </div>
                    <div class="info">
                        共{{
                            item.orderItems ? item.orderItems.length : 0
                        }}件商品

                        <span class="price"
                            >{{ item.payAmount | minuteToRmb2 }}元</span
                        >
                    </div>
                    <div class="time">
                        {{ item.payTime || "" }}
                    </div>
                </div>
                <div class="arrow">
                    <my-image
                        class="img"
                        src="/static/common/arrows_left.png"
                    ></my-image>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
import MyImage from "../../../components/image/index";
let statusEnum = {
    2: "待支付",
    3: "待发货",
    4: "待收货",
    6: "已取消",
    7: "售后中",
    8: "已删除",
    9: "已完成",
    10: "已评价",
    11: "已售后",
    12: "已退款",
    20: "待接单",
    21: "拣货中",
    22: "拣货完成",
    23: "待配送",
    24: "配送中",
    25: "已送达",
    26: "待提货",
    27: "已提货",
    31: "订单已推单",
    32: "订单已被骑手接单",
    33: "骑手已到店",
    34: "骑手已取餐",
    35: "订单完成",
    36: "订单失败",
};
export default {
    name: "",
    components: { MyImage },
    // 数据
    data() {
        return {
            pageIndex: 1,
            pageSize: 20,
            dataList: [],
            dataEnd: false,
        };
    },
    filters: {
        statusFilter(v) {
            return statusEnum[v] || "";
        },
    },

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

        this.getList();

    },
    onReachBottom(){
        this.getMoreList();
    },
    // 函数
    methods: {
        getList() {
            uni.showLoading({
                title: "加载中...",
                mask: true,
            });
            this.pageIndex = 1;
            this.dataEnd = false;
            this.api
                .get("/Order/GetSettleList", {
                    pageIndex: this.pageIndex,
                    pageSize: this.pageSize,
                })
                .then((res) => {
                    uni.hideLoading();
                    this.dataList = res.data.data;
                });
        },
        getMoreList() {
            if (this.dataEnd) {
                return;
            }
            this.pageIndex++;
            this.api
                .get("/Order/GetSettleList", {
                    pageIndex: this.pageIndex,
                    pageSize: this.pageSize,
                })
                .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/detail",
                query: {
                    orderNo: item.tradeNo,
                },
            });
        },
    },

    // 数据计算
    computed: {
        user() {
            return this.$store.state.user.user;
        },
    },

    // 数据监听
    watch: {},
};
</script>

<style lang="scss" scoped>
.page {
    min-height: 100vh;
    background-color: #fff;
}
.list {
    .item {
        padding: px(30) px(35);
        font-size: px(40);
        display: flex;
        justify-content: space-between;
        align-items: center;
        & ~ .item {
            border-top: 1px solid #efefef;
        }
    }
    .trade-no {
        color: #333;
        font-size: px(44);
    }
    .info {
        margin-top: px(15);
        color: #999;
    }
    .price {
        margin-left: px(20);
        display: inline-block;
        color: #0099cb;
    }
    .time {
        font-size: px(36);
        margin-top: px(10);
        color: #999;
    }
    .arrow {
        .img {
            display: block;
            width: px(40);
            height: px(40);
            transform: rotate(180deg);
            /deep/ img {
                width: px(40);
                height: px(40);
            }
        }
    }
}
.empty {
    padding: px(35);
    text-align: center;
    font-size: px(44);
    color: #666;
}
.tag {
    display: inline-block;
    margin-right: px(20);
    font-size: px(36);
    border: 1px solid #f1f1f1;
    padding: px(5) px(10);
    border-radius: px(8);
    color: #1890ff;
    background: #e6f7ff;
    border-color: #91d5ff;
    vertical-align: middle;
}
</style>