<template>
    <view class="content">
        <!-- tabs -->
        <u-sticky>
            <u-tabs class="tabs" :list="tabs" :scrollable="false" :current="index" lineColor="#34CE98" @click="onTabs"
                sticky />
        </u-sticky>
        <block v-if="array.length >= 1">
            <!-- 订单列表 -->
            <oct-order v-for="(item, arrayIndex) in array" :key="arrayIndex" :order-info="item" @onBtn="onType" />
            <!-- 加载更多 -->
            <view class="pages-load">
                <u-loadmore :status="status" />
            </view>
        </block>
        <block v-else>
            <view class="vertical order-null">
                <u-empty mode="order" icon="http://cdn.uviewui.com/uview/empty/order.png" text="暂无相关订单"
                    textColor="#999" />
            </view>
        </block>
    </view>
</template>

<script>
    import {
        orders,
        del,
        cancel,
        sign
    } from '@/apis/interfaces/order'
    import eventBus from '../../utils/eventBus.js';
    export default {
        data() {
            return {
                status: "loading",
                tabs: [{
                        name: "全部",
                        type: "",
                    },
                    {
                        name: "待付款",
                        type: "unpay",
                    },
                    {
                        name: "待发货",
                        type: "paid",
                    },
                    {
                        name: "待收货",
                        type: "delivered",
                    },
                    {
                        name: " 已签收",
                        type: "signed",
                    },
                ],
                index: '0',
                array: [],
                page: 1
            };
        },
        onShow() {
            if (this.$store.getters.getRefresh == 1) {
                this.$store.commit('setRefresh', 0)
                this.array = []
                this.page = 1
                this.getOrder()
            }
        },
        mounted() {
            this.index = this.$Route.query.index
            this.getOrder()
            eventBus.$on('paySuccess', function(data) {
                let index = this.array.findIndex((item) => item.no === data);
                if (this.index == '0') {
                    this.array[index].stateText = '待发货'
                    this.array[index].cans = {
                        "cancel": false,
                        "pay": false,
                        "sign": false,
                        "refund": true,
                        "user_deliver": false,
                        "logistic_show": false,
                        "refund_money": true
                    }
                } else {
                    this.array.splice(index, 1);
                }

            }.bind(this));

            eventBus.$on('applyRefundMoney', (data)=> {
                let index = this.array.findIndex((item) => item.no === data);
                this.array.splice(index, 1);
            });
        },
        methods: {
            getOrder() {
                orders({
                    state: this.tabs[this.index].type,
                    page: this.page
                }).then(res => {
                    if (res.page.current === 1) {
                        this.array = []
                    }
                    let ordersArr = res.data.map(val => {
                        return {
                            no: val.order_no,
                            cover: val.items[0].sku.cover,
                            name: val.items[0].sku.goods_name,
                            price: val.total,
                            sum: val.items[0].qty,
                            stateText: val.state,
                            cans: val.can,
                            shop: val.shop,
                            goods_id:val.items[0].sku.goods_id
                        }
                    })
                    this.array = this.array.concat(ordersArr)
                    this.status = res.page.has_more ? 'loadmore' : 'nomore'
                })
            },
            onTabs(e) {
                this.page = 1
                this.index = e.index
                this.getOrder()
            },

            onType(e) {
                let orderNo = e.order.no;
                let shopId = e.order.shop.shop_id;
                let goodsId = e.order.goods_id;
                
                let onFount;

                switch (e.type) {
                    case 'delete':
                        onFount = del(orderNo);
                    break;
                    case 'cancel':
                        uni.showModal({
                            title: '温馨提示',
                            content: '是否确认取消该订单',
                            confirmText: '确认取消',
                            confirmColor: "#34CE98",
                            cancelText: '再想想',
                            cancelColor: "#666666",
                            success: (res) => {
                                if (res.confirm) {
                                    cancel(orderNo).then(res => {
                                        console.log(res)
                                        let orderIndex = this.array.findIndex(val => val.no === e
                                            .order.no)
                                        console.log(this.index, typeof this.index, orderIndex);
                                        if (this.index == '0') {
                                            this.array[orderIndex].stateText = "已取消";
                                            this.array[orderIndex].cans = {
                                                "cancel": false,
                                                "pay": false,
                                                "sign": false,
                                                "refund": false,
                                                "user_deliver": false,
                                                "logistic_show": false,
                                                "refund_money": false
                                            };
                                        } else {
                                            this.array.splice(orderIndex, 1);
                                        }
                                        return;
                                    }).catch(err => {
                                        uni.showToast({
                                            title: err.message,
                                            icon: 'none'
                                        })
                                    })
                                }
                            }
                        });
                        break;
                    case 'logistic':
                        this.$Router.push({
                            name: 'OrderLogistics',
                            params: {
                                orderNo: orderNo,
                            },
                        });
                        break;
                    case 'pay':
                        this.$Router.push({
                            name: 'Pay',
                            params: {
                                orderNo: orderNo,
                                price: e.order.price,
                                oepnType: 'order',
                                coins: e.order.coins
                            }
                        });
                        break;
                    case 'sign':
                        uni.showModal({
                            title: '温馨提示',
                            content: '是否确认收到货物并签收该订单',
                            confirmText: '确认签收',
                            confirmColor: "#34CE98",
                            cancelText: '再想想',
                            cancelColor: "#666666",
                            success: (res) => {
                                if (res.confirm) {
                                    sign(orderNo).then(res => {
                                        console.log(res)
                                        let orderIndex = this.array.findIndex(val => val.no === e
                                            .order.no)
                                        console.log(this.index, typeof this.index, orderIndex);
                                        if (this.index == '0') {
                                            this.array[orderIndex].stateText = "已签收";
                                            this.array[orderIndex].cans = {
                                                "cancel": false,
                                                "pay": false,
                                                "sign": false,
                                                "refund": true,
                                                "user_deliver": false,
                                                "logistic_show": true,
                                                "refund_money": false
                                            };
                                        } else {
                                            this.array.splice(orderIndex, 1);
                                        }
                                        return;
                                    }).catch(err => {
                                        uni.showToast({
                                            title: err.message,
                                            icon: 'none'
                                        })
                                    })
                                }
                            }
                        });
                        break;
                    case 'refundMoney':
                        this.$Router.push({
                            name: "RefundMoney",
                            params: {
                                id: orderNo
                            }
                        })
                    break; 
                    case 'refund' :
                        this.$Router.push({
                            name: "AfterSale",
                            params: {
                                id: orderNo
                            }
                        })
                    break;
                    case 'shopsDetail':
                        this.$Router.push({ name: 'ShopDetail', params: {ShopId: shopId}})
                    break;
                    case 'goodsDetail':
                        this.$Router.push({ name: 'StoreGoods', params: {id: goodsId}})
                    break;
                }
                if (!onFount) return
                onFount.then(res => {
                    let orderIndex = this.array.findIndex(val => val.no === e.order.no)
                    if (e.type === 'delete' || e.type === 'sign') {
                        this.array.splice(orderIndex, 1)
                        return;
                    }
                    if (e.type === 'cancel') {
                        this.array.splice(orderIndex, 1, {
                            no: res.order_no,
                            cover: res.items[0].sku.cover,
                            name: res.items[0].sku.goods_name,
                            price: res.items[0].price,
                            sum: res.items[0].qty,
                            stateText: res.state,
                            cans: res.can
                        });


                        return;
                    }
                }).catch(err => {
                    uni.showToast({
                        title: err.message,
                        icon: 'none'
                    })
                })
            }
        },
        onReachBottom() {
            if (this.status === 'loadmore') {
                this.page += 1
                this.status = 'loading'
                this.getOrder()
            }
        }
    }
</script>

<style lang="scss">
    .content {
        background: $window-color;
        min-height: 100vh;
    }

    .tabs {
        background: white;
    }

    // 数据列表空
    .order-null {
        height: 80vh;
    }

    // 加载分页
    .pages-load {
        padding-bottom: $padding;
    }

</style>
