<template>
    <div class="page">
        <div class="filter">
            <span class="key">时间：</span>
            <picker
                mode="date"
                @change="dateChange($event, 'startDate')"
                :end="filter.endDate || endDate"
                ><input
                    class="value"
                    placeholder="开始日期"
                    :disabled="true"
                    v-model="filter.startDate"
            /></picker>
            <span class="row">至</span>
            <picker
                mode="date"
                @change="dateChange($event, 'endDate')"
                :start="filter.startDate"
                :end="endDate"
                ><input
                    class="value"
                    placeholder="结束日期"
                    :disabled="true"
                    v-model="filter.endDate"
            /></picker>
        </div>
        <div class="card" v-for="(item, index) of listData" :key="index">
            <h1 class="tit">{{ item.orderTime | dateFormat }}</h1>
            <ul class="order-list">
                <li
                    @click="
                        jump({
                            path: '/pages/youxuan/order/detail',
                            query: { id: item.id },
                        })
                    "
                >
                    <div class="info">
                        <div class="num">订单号：{{ item.orderNo }}</div>
                        <div class="status">
                            {{ item.status | orderStatus }}
                        </div>
                    </div>
                    <div class="con">
                        <my-image class="img" :src="item.productImage"></my-image>
                        <div class="main">
                            <div class="line">
                                <div class="name">{{ item.productName }}</div>
                                <div class="money">
                                    合计：<span class="red-text"
                                        >￥{{ item.amount / 100 }}</span
                                    >
                                </div>
                            </div>
                            <!-- <div class="line">
                                <div class="time">
                                    {{ item.orderTime | dateFormat("hh:mm") }}
                                </div>
                                <div class="money">
                                    预估佣金：￥{{
                                        item.estimateComission / 100
                                    }}
                                </div>
                            </div> -->
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="more-text" v-if="dataEnd">- 没有更多数据了 -</div>
    </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 },
    filters: {
        orderStatus(v) {
            return statusEnum[v] || "";
        },
    },
    // 数据
    data() {
        return {
            filter: {
                startDate: "",
                endDate: "",
            },
            pageIndex: 1,
            dataEnd: false,
            listData: [],
            endDate: "",
        };
    },
    onLoad() {
        this.getList();
        this.endDate = this.fn.dateFormat2(new Date());
    },

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

    // 函数
    methods: {
        getList(isPull) {
            uni.showLoading({
                title: "加载中...",
            });
            this.pageIndex = 1;
            this.dataEnd = false;
            let sendData = {
                pageIndex: this.pageIndex++,
            };
            if (this.filter.startDate) {
                sendData.startTime = this.filter.startDate;
            }
            if (this.filter.endDate) {
                sendData.endTime = this.filter.endDate;
            }
            this.api.get("/Supplier/GetOrderList", sendData).then((res) => {
                if (isPull) {
                    uni.stopPullDownRefresh();
                }
                uni.hideLoading();
                this.listData = res.data.data;
                console.log(this.listData);
                if (!this.listData.length) {
                    this.dataEnd = true;
                }
            });
        },
        getMoreList() {
            uni.showLoading({
                title: "加载中...",
            });
            let sendData = {
                pageIndex: this.pageIndex++,
            };
            if (this.filter.startDate) {
                sendData.startTime = this.filter.startDate;
            }
            if (this.filter.endDate) {
                sendData.endTime = this.filter.endDate;
            }
            this.api.get("/Supplier/GetOrderList", sendData).then((res) => {
                uni.hideLoading();
                this.listData = [...this.listData, ...res.data.data];
                if (!res.data.data.length) {
                    this.dataEnd = true;
                }
            });
        },

        dateChange(e, name) {
            this.filter[name] = e.detail.value;
            this.getList();
        },
    },

    // 数据计算
    computed: {},

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

<style lang="scss" scoped>
.card {
    margin: px(40) px(40);
    border: 1px solid #e9e9e9;
    background-color: #fff;
    .tit {
        font-size: px(44);
        font-weight: bold;
        padding: px(30);
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #f1f1f1;
    }
    .more {
        color: #409eff;
        font-size: px(40);
        display: flex;
        align-items: center;
        font-weight: normal;
        .arrow {
            width: px(30);
            height: px(30);
            transform: rotate(180deg);
            /deep/ img {
                width: px(30);
                height: px(30);
            }
        }
    }
}
.filter {
    display: flex;
    align-items: center;
    padding: px(40);
    font-size: px(44);
    background-color: #fff;
    .row {
        padding: 0 px(20);
        flex-shrink: 0;
    }
    .key {
        flex-shrink: 0;
    }
    .value {
        border: 1px solid #f1f1f1;
        height: px(80);
        width: px(200);
        padding: 0 px(10);
        width: 90%;
    }
}
.order-list {
    padding: px(30);
    li {
        padding: px(30) 0;
        & ~ li {
            border-top: 1px solid #e9e9e9;
        }
    }
    .info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .num {
            color: #666;
        }
        .status {
            color: #409eff;
        }
    }

    .con {
        display: flex;
        align-items: stretch;
        justify-content: space-between;
        margin-top: px(30);
        .img {
            width: px(200);
            height: px(200);
            flex-shrink: 0;
            margin-right: px(20);
            background-color: #f9f9f9;
            /deep/ img {
                width: px(200);
                height: px(200);
            }
        }
    }
    .main {
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        padding: px(25) 0;
        .money {
            flex-shrink: 0;
        }
        .name {
            @include omits(2);
        }
        .line {
            display: flex;
            justify-content: space-between;
            & ~ .line {
                margin-top: px(10);
            }
        }
        .red-text {
            color: #ff4b26;
        }
        .time,
        .money {
            font-size: px(40);
            color: #666;
        }
    }
}

.more-text {
    display: flex;
    justify-content: center;
    padding-bottom: px(60);
    font-size: px(34);
    color: #999;
}
</style>