<template>
    <div
        class="page"
        :class="{
            page_red: theme === 1,
        }"
    >
        <ul class="tab">
            <li
                class="tab__item"
                :class="{ 'tab__item--active': tab === index }"
                v-for="(item, index) in list"
                :key="index"
                @click="setTab(index)"
            >
                <div class="tab__text">{{ item.title }}</div>
                <div class="tab__num" v-if="item.num > 0">{{ item.num }}</div>
            </li>
        </ul>
        <div class="page__content">
            <swiper class="page__swiper" :current="tab" @change="swiperChange">
                <swiper-item v-for="(item, index) in list" :key="index">
                    <scroll-view
                        class="page__scroll"
                        :scroll-y="true"
                        @scrolltolower="getMoreList"
                    >
                        <ul class="order">
                            <li
                                class="order__item"
                                v-for="(value, key) in list[tab].list"
                                :key="key"
                                @click="jumpDetail(value)"
                            >
                                <div class="order__top">
                                    <div
                                        class="caption"
                                        @click="
                                            jump({
                                                isTabBer: true,
                                                path: '/pages/index/index',
                                            })
                                        "
                                    >
                                        <i
                                            class="iconfont iconshangdian caption__iocn"
                                        ></i>
                                        <div class="caption__title">
                                            {{ value.storeInfo.name }}
                                        </div>
                                        <i
                                            class="iconfont iconarrow caption__arrows"
                                        ></i>
                                    </div>
                                    <div class="order__status">
                                        {{ value.orderStatus }}
                                    </div>
                                </div>
                                <ul class="goods">
                                    <div
                                        class="goods__item"
                                        v-for="(val, k) in value.itemOrders"
                                        :key="k"
                                    >
                                        <div class="goods__left">
                                            <my-image
                                                class="goods__img"
                                                :src="val.imgUrl"
                                            ></my-image>
                                            <div class="goods__info">
                                                <div class="goods__title">
                                                    {{ val.title || "" }}
                                                </div>
                                                <div class="goods__spec">
                                                    {{ val.skuName || "" }}
                                                </div>
                                            </div>
                                        </div>
                                        <div class="goods__right">
                                            <div class="goods__price">
                                                {{
                                                    "¥" + (val.price || "0.00")
                                                }}
                                            </div>
                                            <div class="goods__num">
                                                {{ "X" + (val.number || "0") }}
                                            </div>
                                            <div class="goods__refund" v-if="val.status !==6">
                                                {{
                                                    afterSaleStatus[
                                                        val.afterSaleStatus
                                                    ] || ""
                                                }}
                                            </div>
                                            <div class="goods__refund">
                                                {{
                                                    statusEnum[
                                                        val.status
                                                    ] || ""
                                                }}
                                            </div>
                                        </div>
                                    </div>
                                </ul>
                                <div
                                    class="order__describe no-padd"
                                    v-if="value.deliveryFee && value.shopOrderPriceRemark==='送货上门'"
                                >
                                    <span class="order__text"
                                        >配送费：{{
                                            "¥" + (value.deliveryFee || "0.00")
                                        }}</span
                                    >
                                </div>
                                <div
                                    class="order__describe no-padd"
                                    v-if="value.packageFee"
                                >
                                    <span class="order__text">
                                        打包费：{{
                                            "¥" + (value.packageFee || "0.00")
                                        }}</span
                                    >
                                </div>
                                <div class="order__describe">
                                    <span class="order__text">{{
                                        "共" + value.totalCount + "件商品"
                                    }}</span>
                                    <span class="order__text">{{
                                        "合计:¥" + value.buyerPayAmount
                                    }}</span>
                                    <!-- <span class="order__text">{{
                                        "(" + value.shopOrderPriceRemark + ")"
                                    }}</span> -->
                                </div>
                                <div
                                    v-if="value.status !== '3'"
                                    class="order__bottom"
                                >
                                    <div
                                        v-if="value.status === 2"
                                        class="order__btn"
                                        @click.stop="cancel(value, key)"
                                    >
                                        取消订单
                                    </div>
                                    <div
                                        v-if="value.status === 2"
                                        class="order__btn pay-btn"
                                        @click.stop="pay(value)"
                                    >
                                        支付
                                    </div>
                                    <!-- <div v-if="value.status === 6 || value.status === 9" class="order__btn" @click.stop="remove(value, key)">删除订单</div> -->
                                    <!-- <div v-if="value.status === 4 ||  value.status === 9" class="order__btn" @click.stop="jumpExpress(value)">查看物流</div> -->
                                    <div
                                        v-if="value.status === 4"
                                        class="order__btn"
                                        @click.stop="receive(value, key)"
                                    >
                                        确认收货
                                    </div>
                                </div>
                            </li>
                        </ul>
                        <div class="null" v-if="loading && !item.list.length">
                            <img
                                class="null__img"
                                src="/static/common/order_null.jpg"
                                alt=""
                            />
                            <div class="null__title">还没有相关订单哦</div>
                            <div class="null__sub-title">
                                可以去逛逛看有哪些想买的
                            </div>
                        </div>
                    </scroll-view>
                </swiper-item>
            </swiper>
        </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 },
    // 数据
    data() {
        return {
            tab: 0,
            list: [
                {
                    title: "全部",
                    status: "0",
                    num: 0,
                    page: 1,
                    list: [],
                },
                {
                    title: "待支付",
                    status: "2",
                    num: 0,
                    page: 1,
                    list: [],
                },
                {
                    title: "拣货中",
                    status: "21",
                    num: 0,
                    page: 1,
                    list: [],
                },
                {
                    title: "配送中",
                    status: "24",
                    num: 0,
                    page: 1,
                    list: [],
                },
                {
                    title: "待提/收货",
                    status: "26",
                    num: 0,
                    page: 1,
                    list: [],
                },
                {
                    title: "已完成",
                    status: "9",
                    num: 0,
                    page: 1,
                    list: [],
                },
                {
                    title: "售后",
                    status: "7",
                    num: 0,
                    page: 1,
                    list: [],
                },
            ],
            afterSaleStatus: {
                1: "退款审核中",
                2: "等待商家退款",
                3: "退款完成",
                4: "退款取消",
                5: "退货审核中",
                6: "退货取消",
                7: "退货完成",
                8: "等待买家退货",
                9: "等待商家确认收货",
                10: "已拒绝",
            },
            loading: false, // 是否加载完成
            statusEnum:statusEnum
        };
    },

    onLoad() {
        const self = this;

        if (!self.loading) {
            uni.showLoading({
                title: "加载中...",
            });
        }

        self.tab = self.$mp.query.index ? Number(self.$mp.query.index) : 0;
    },

    onShow() {
        const self = this;

        let tabList = this.$store.state.common.orderTabList;
        console.log(tabList)
        if (tabList && tabList.length) {
            for (let item of tabList) {
                item.num = 0;
                item.title = item.name;
                item.page = 1;
                item.list = [];
            }
            this.list = tabList;
        }
        self.getList();
    },

    // 函数
    methods: {
        // 切换导航
        setTab(index) {
            const self = this;

            self.tab = index;
        },

        // swiper切换处理
        swiperChange(val) {
            const self = this;
            self.tab = val.target.current;
            self.getList();
        },

        // 获取订单列表
        getList() {
            const self = this;

            self.list[self.tab].page = 1;

            self.api
                .get("/Order/GetList", {
                    status: self.list[self.tab].status,
                    pageIndex: self.list[self.tab].page,
                    pageSize: 20,
                })
                .then((res) => {
                    let data = JSON.parse(res.data);

                    if (data.orderList.length) {
                        self.list[self.tab].page++;
                    }

                    self.list[1].num = data.countInfo.unpaidOrderCount
                    self.list[2].num = data.countInfo.waitShippedOrderCount
                    self.list[3].num = data.countInfo.inDeliveryOrderCount
                    self.list[4].num = data.countInfo.waitReceivedOrderCount
                    self.list[self.tab].list = data.orderList;
                    self.list = [...self.list];
                    self.loading = true;
                    uni.hideLoading();
                });
        },

        // 获取更多内容
        getMoreList() {
            const self = this;

            self.api
                .get("/Order/GetList", {
                    status: self.list[self.tab].status,
                    pageIndex: self.list[self.tab].page,
                    pageSize: 20,
                })
                .then((res) => {
                    let data = JSON.parse(res.data);

                    if (data.orderList.length) {
                        self.list[self.tab].page++;
                    }
                    self.list[1].num = data.countInfo.unpaidOrderCount
                    self.list[2].num = data.countInfo.waitShippedOrderCount
                    self.list[3].num = data.countInfo.inDeliveryOrderCount
                    self.list[4].num = data.countInfo.waitReceivedOrderCount
                    self.list[self.tab].list = self.list[self.tab].list.concat(
                        data.orderList
                    );
                });
        },

        // 跳转到详情
        jumpDetail(val) {
            const self = this;

            self.router.push({
                path: "/pages/order/detail",
                query: {
                    orderId: val.shopOrderId,
                },
            });
        },

        // 跳转到物流信息
        jumpExpress(val) {
            const self = this;

            self.router.push({
                path: "/pages/order/express",
                query: {
                    orderId: val.shopOrderId,
                },
            });
        },

        // 取消订单
        cancel(val, key) {
            const self = this;

            self.fn
                .showModal({
                    title: "取消订单",
                    content: "这么好的宝贝，确定不要了？",
                })
                .then((res) => {
                    if (res.confirm) {
                        self.api
                            .post(
                                "/Order/Cancel",
                                {
                                    orderId: val.shopOrderId,
                                    reason: "",
                                },
                                {
                                    repeat: true,
                                }
                            )
                            .then(() => {
                                if (self.tab !== 0 && self.tab !== 4) {
                                    self.list[self.tab].num--;
                                }
                                for (let item of self.list[self.tab].list) {
                                    if (item.shopOrderId === val.shopOrderId) {
                                        item.status = 6;
                                    }
                                }
                                self.list[self.tab].list.splice(key, 1);
                                self.list = [...self.list];
                                self.fn.showToast("订单取消成功");
                            });
                    }
                });
        },

        // 支付
        pay(val) {
            const self = this;

            self.fn.pay(val.shopOrderId, val.buyerPayAmount);
        },

        // 确认收货处理
        receive(val, key) {
            const self = this;

            self.fn
                .showModal({
                    title: "确认收货",
                    content: "请你收到货物后再点击“确认”，否则可能钱货两空！",
                })
                .then((res) => {
                    if (res.confirm) {
                        self.api
                            .post(
                                "/Order/SignOff",
                                {
                                    orderId: val.shopOrderId,
                                },
                                {
                                    repeat: true,
                                }
                            )
                            .then(() => {
                                if (self.tab !== 0 && self.tab !== 4) {
                                    self.list[self.tab].num--;
                                }
                                self.list[self.tab].list.splice(key, 1);
                                self.list = [...self.list];
                            });
                    }
                });
        },

        // 删除订单
        remove(val, key) {
            const self = this;

            self.fn
                .showModal({
                    title: "删除订单",
                    content: "确定删除订单？",
                })
                .then((res) => {
                    if (res.confirm) {
                        self.api
                            .delete(
                                "/Order/Delete",
                                {
                                    orderId: val.shopOrderId,
                                },
                                {
                                    repeat: true,
                                }
                            )
                            .then(() => {
                                if (self.tab !== 0 && self.tab !== 4) {
                                    self.list[self.tab].num--;
                                }
                                self.list[self.tab].list.splice(key, 1);
                                self.list = [...self.list];
                                self.fn.showToast("删除成功");
                            });
                    }
                });
        },
    },

    // 数据计算
    computed: {
        // 判断主题  1:红色  2：绿色
        theme() {
            return this.$store.state.common.theme;
        },
        curList() {
            return this.list[this.tab].list;
        },
    },

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

<style>
page {
    height: 100%;
}
</style>

<style lang="scss" scoped>
.page {
    display: flex;
    flex-direction: column;
    height: 100%;

    &__content {
        flex: 1;
        position: relative;
    }

    &__swiper {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
    }

    &__scroll {
        height: 100%;
    }
}

.tab {
    display: flex;
    // justify-content: space-around;
    align-items: center;
    width: 100%;
    height: px(145);
    background-color: #fff;
    overflow: auto;
    padding: 0 px(20);
    &__item {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        // flex: 1;
        height: 100%;
        flex-shrink: 0;
        white-space: nowrap;
        padding: 0 px(25);
        flex-shrink: 0;
        &--active:before {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            z-index: 1;
            width: 100%;
            height: px(6);
            background-color: #27a34f;
        }
    }

    &__text {
        font-size: px(42);
        color: #333;
    }

    &__num {
        position: absolute;
        top: px(30);
        right: px(30);
        z-index: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        min-width: px(42);
        height: px(42);
        transform: translateX(50%);
        padding: 0 px(15);
        font-size: px(30);
        color: #fff;
        border-radius: px(21);
        background-color: #27a34f;
    }
}

.order {
    padding-top: px(30);

    &__item {
        margin-top: px(30);
        background-color: #fff;

        &:first-child {
            margin-top: 0;
        }
    }

    &__top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: px(100);
        padding: 0 px(45);
    }

    &__status {
        font-size: px(36);
        color: #333;

    }

    &__describe {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding: px(30) px(45);
    }

    &__text {
        font-size: px(34);
        color: #333;
    }

    &__bottom {
        display: flex;
        justify-content: flex-end;
        padding: px(15) px(45);
    }

    &__btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: px(210);
        height: px(70);
        margin-left: px(15);
        font-size: px(36);
        color: #666;
        border-radius: px(35);
        border: solid px(2) #ddd;

        &:last-child {
            color: #27a34f;
            border-color: #27a34f;
        }
    }
}

.goods {
    &__item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: px(235);
        padding: 0 px(45);
        margin-top: px(10);
        border-top: solid px(3) #ececec;
        background-color: #fcfcfc;

        &:first-child {
            margin-top: 0;
        }
    }

    &__left {
        display: flex;
        flex: 1;
    }

    &__img /deep/ img {
        width: px(170);
        height: px(170);
        border-radius: px(10);
    }

    &__info {
        flex: 1;
        margin-left: px(30);
    }

    &__title {
        @include omits(2);
        font-size: px(36);
        color: #333;
    }

    &__spec {
        @include omits(1);
        margin-top: px(30);
        font-size: px(36);
        color: #999;
    }

    &__right {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        width: px(300);
    }

    &__price {
        font-size: px(36);
        color: #333;
    }

    &__num {
        margin-top: px(20);
        font-size: px(36);
        color: #999;
    }

    &__refund {
        margin-top: px(20);
        font-size: px(36);
        color: #f78819;
    }
}

.caption {
    display: flex;
    align-items: center;

    &__icon {
        margin-top: px(5);
        font-size: px(44);
        color: #333;
    }

    &__title {
        margin-left: px(30);
        font-size: px(36);
        color: #333;
    }

    &__arrows {
        margin: px(5) 0 0 px(20);
        font-size: px(44);
        color: #333;
    }
}

.null {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: px(145);

    &__img {
        width: px(739);
        height: px(371);
    }

    &__title {
        margin-top: px(20);
        font-size: px(42);
        color: #666;
    }

    &__sub-title {
        margin-top: px(20);
        font-size: px(42);
        color: #999;
    }
}
.no-padd {
    padding-top: 0;
    padding-bottom: 0;
}

.page_red {
    .order__btn:last-child {
        color: #27a34f;
        border-color: #27a34f;
    }
    .tab__item--active:before {
        background-color: #27a34f;
    }
}
.pay-btn{
        color: #27a34f !important;
        border-color: #27a34f !important;
}
</style>