<template>
    <view class="main">
        <view class="mainTop" :style="{ height: menu.bottom + 'px', paddingTop: menu.top + 'px' }">
            <image class="backIcon" src="https://eshangtech.com/caiyunyiImg/backIcon.png" @click="handleBack" />

            <view class="searchBox">
                <image class="searchIcon" src="/static/images/home/searchIcon.svg" />
                <input class="searchText" placeholder="搜索我的订单" confirm-type="search" v-model="searchText"
                    :auto-focus="true" @confirm="handleSearchOrder" />
            </view>
        </view>

        <!-- 订单列表 -->
        <scroll-view :scroll-y="true" class="orderListBox" :style="{ height: `calc(100vh - ${menu.bottom}px)` }"
            @scrolltolower="handleScrollTolower">
            <view class="orderItem" v-for="(item, index) in orderList" :key="index" @click="goEvaluate(item)">
                <view class="orderItemTop">
                    <view class="orderItemTopLeft">
                        <!-- <image class="orderItemIcon" src="https://eshangtech.com/caiyunyiImg/storeIcon.png" /> -->

                        <view class="orderItemLabel">订单编号：{{ item.OrderCode || "" }}</view>
                    </view>
                    <view class="orderItemTopRight">
                        <view class="statusBox">{{ fieldObj && item.OrderState && fieldObj[item.OrderState] ?
                            fieldObj[item.OrderState]: "-" }}</view>
                    </view>
                </view>

                <view class="orderItemCenter"
                    v-for="(subItem, subIndex) in item.DetailList.slice(0, item.isShowMore ? item.DetailList.length : 5)"
                    :key="subIndex" @click.stop="handleGoShopDetail(item, subIndex)">
                    <view class="orderItemCenterLeft">
                        <image class="orderItemShopImg"
                            :src="subItem.ImageUrl ? subItem.ImageUrl : 'https://eshangtech.com/ShopICO/no-picture.png'" />
                    </view>
                    <view class="orderItemCenterRight">
                        <view class="orderItemCenterRightLeft">
                            <view class="orderItemRightLeftLabel">{{ subItem.GoodsName || "" }}</view>
                            <view class="orderItemRightLeftSpecifications"></view>
                        </view>
                        <view class="orderItemCenterRightRight">
                            <view class="unitPrice">¥{{ subItem.AveragePrice || '-' }}</view>
                            <view class="orderItemQuantity">x{{ subItem.OrderCount || '-' }}</view>
                        </view>
                    </view>
                </view>

                <div v-if="item.DetailList.length > 5" class="is_more" @click.stop="handleClickShowMoreShop(item)">
                    <img :src="item.isShowMore
                        ? '/static/images/home/up_arrow.png'
                        : '/static/images/home/down_arrow.png'
                        " alt="" class="arrow_icon" />
                    共{{ item.DetailList.length }}个品项
                </div>

                <!-- 实付款 -->
                <view class="orderItemMoneyBox">
                    <span class="orderItemUnit">实付款：</span>
                    <span class="orderItemMoney">¥{{ item.PayAmount || "" }}</span>
                </view>

                <view class="orderItemBottom">
                    <view class="orderItemBottomLeft">
                        <view class="orderItemBottomLeftMore" v-if="false">更多</view>
                    </view>
                    <view class="orderItemBottomRight">
                        <view class="orderItemBottomRightEvaluate"
                            v-if="item.SALEBILL_STATE > 3000 && item.SALEBILL_STATE <= 5000">
                            评价
                        </view>
                        <view class="orderItemBottomRightBuyAgain" v-if="item.SALEBILL_STATE === 1005"
                            @click.stop="goEvaluate(item)">
                            去付款</view>
                        <view class="orderItemBottomRightBuyAgain" v-if="item.SALEBILL_STATE === 2010"
                            @click.stop="handleConfirmReceipt(item)">确认收货</view>
                        <!-- <view class="orderItemBottomRightBuyAgain" @click.stop="handleGoStore">再次购买</view> -->
                    </view>
                </view>
            </view>
            <view class="inBottom" v-if="pageMsg.isOver">
                <text class="bottomText">我是有底线的</text>
            </view>
        </scroll-view>
    </view>
</template>

<script>
import { mapGetters } from "vuex";
export default {
    data() {
        return {
            searchText: "",
            orderList: [],
            menu: {},
            pageMsg: {
                pageIndex: 1,
                pageSize: 10,
                isOver: false,
            },
            fieldObj: {},// 枚举
        }
    },
    computed: {
        ...mapGetters({
            user: "user",
        }),
    },
    onLoad(query) {
        this.menu = uni.getMenuButtonBoundingClientRect();
        // 获取枚举数据
        this.handleGetField()
    },
    methods: {
        async handleSearchOrder(type) {
            if (type === 'more') {

            } else {
                this.pageMsg = {
                    pageIndex: 1,
                    pageSize: 10,
                    isOver: false,
                }
                this.orderList = []
            }

            await this.handleGetOrder()
        },
        // 查询订单  
        async handleGetOrder() {
            uni.showLoading({
                title: "正在加载...",
                mask: true,
            });
            const req = {
                SearchParameter: {
                    MEMBERSHIP_IDS: this.user.MEMBERSHIP_ID,
                    PROVINCE_CODE: this.user.PROVINCE_CODE,
                    WECHATAPP_APPID: "wxee018fb96955552a",
                    SearchKeyValue: this.searchText,
                },
                PageIndex: this.pageMsg.pageIndex,
                pageSize: this.pageMsg.pageSize,
                type: 'encryption'
            }
            console.log('reqreqreq', req);

            const data = await this.$api.$zzyLocalPost(
                "/OnlineOrder/GetOrderList",
                req
            );
            console.log('查询订单数据', data);

            let oldOrderList = [];
            if (this.orderList && this.orderList.length > 0) {
                oldOrderList = JSON.parse(JSON.stringify(this.orderList));
            }
            console.log("oldOrderList", oldOrderList);
            // 手动添加待付款、待发货、待收货
            let list = data.Result_Data ? data.Result_Data.List : [];
            let resList = [];
            if (list && list.length > 0) {
                if (this.currentTab === 5) {
                    list.forEach((item) => {
                        if (
                            item.SALEBILL_STATE >= 3000 &&
                            item.SALEBILL_STATE !== 8999 &&
                            item.SALEBILL_STATE !== 9000 &&
                            item.SALEBILL_STATE !== 9999
                        ) {
                            resList.push(item);
                        }
                    });
                } else {
                    list.forEach((item) => {
                        resList.push(item);
                    });
                }
            }
            if (resList && resList.length < 10) {
                this.pageMsg.isOver = true;
            }
            this.orderList = oldOrderList.concat(resList);
            uni.hideLoading();
        },
        // 滚动到底部 加载更多
        handleScrollTolower() {
            if (!this.pageMsg.isOver) {
                this.pageMsg.pageIndex = this.pageMsg.pageIndex + 1;
                this.handleSearchOrder('more');
            }
        },
        // 返回上个页面
        handleBack() {
            uni.navigateBack({
                delta: 1,
            });
        },
        // 订单详情
        goEvaluate(item) {
            uni.navigateTo({
                url:
                    "/pages/order/orderdetail/index?sellchildid=" +
                    (item.OrderChildId || "") +
                    "&orderInternal=" +
                    item.OrderId +
                    "&orderStatus=" +
                    item.OrderState +
                    "&SUPPLIER_NAME=" +
                    item.SUPPLIER_NAME,
            });
        },
        handleGoShopDetail(item, index) {
            let obj = item.DetailList[index]
            uni.navigateTo({
                url: `/pages/shopPages/shopDetail/index?id=${obj.GoodsId}`,
            });
        },
        async handleGetField() {
            let obj = {
                "1010": "待发货",
                "2010": "待收货",
                "3000": "已收货",
                "8000": "退款申请中",
                "8010": "商品退货中",
                "8020": "退款处理中",
                "8900": "订单已退款",
                "8999": "退款已关闭",
                "9000": "订单已关闭",
                "9999": "订单已撤销",
            }
            this.fieldObj = obj
        }
    }
}
</script>

<style lang="less" scoped>
.main {
    width: 100vw;
    height: 100vh;

    .mainTop {
        width: 100%;
        box-sizing: border-box;
        padding: 0 24rpx;
        display: flex;
        align-items: center;

        .backIcon {
            width: 38rpx;
            height: 38rpx;
        }

        .searchBox {
            width: calc(100% - 52rpx - 24rpx - 200rpx);
            height: 100%;
            margin-left: 24rpx;
            background-color: #ececec;
            border-radius: 48rpx;
            box-sizing: border-box;
            padding: 20rpx 32rpx;
            display: flex;
            align-items: center;

            .searchIcon {
                width: 24rpx;
                height: 24rpx;
                margin-right: 20rpx;
            }

            .searchText {
                font-family: PingFang-SC, PingFang-SC;
                font-weight: 400;
                font-size: 28rpx;
                color: #000;
                line-height: 40rpx;
                text-align: left;
                font-style: normal;
                text-transform: none;
            }
        }
    }


    .orderListBox {
        width: 100%;
        box-sizing: border-box;
        margin-top: 20px;

        .orderItem {
            width: 100%;
            box-sizing: border-box;
            padding: 22rpx 32rpx;
            background-color: #fff;
            margin-bottom: 24rpx;

            .orderItemTop {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .orderItemTopLeft {
                    width: 100%;
                    display: flex;
                    align-items: center;

                    .orderItemIcon {
                        width: 36rpx;
                        height: 36rpx;
                        margin-right: 16rpx;
                    }

                    .orderItemLabel {
                        display: inline-block;
                        width: calc(100% - 52rpx);
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 600;
                        font-size: 28rpx;
                        color: #333333;
                        line-height: 34rpx;
                        text-align: left;
                        font-style: normal;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }

                .orderItemTopRight {
                    width: 30%;

                    .statusBox {
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        font-size: 28rpx;
                        color: #F83D3D;
                        line-height: 40rpx;
                        text-align: right;
                        font-style: normal;
                        text-transform: none;
                    }
                }
            }

            .orderItemCenter {
                width: 100%;
                margin-top: 22rpx;
                display: flex;
                align-items: center;
                margin-bottom: 16rpx;

                .orderItemCenterLeft {
                    width: 192rpx;
                    height: 192rpx;
                    margin-right: 12rpx;

                    .orderItemShopImg {
                        width: 100%;
                        height: 100%;
                    }
                }

                .orderItemCenterRight {
                    width: calc(100% - 192rpx - 12rpx);
                    height: 192rpx;
                    display: flex;

                    .orderItemCenterRightLeft {
                        width: calc(100% - 180rpx);

                        .orderItemRightLeftLabel {
                            font-family: PingFangSC, PingFang SC;
                            font-weight: 400;
                            font-size: 28rpx;
                            color: #333333;
                            text-align: left;
                            font-style: normal;
                            text-transform: none;
                            display: -webkit-box;
                            -webkit-line-clamp: 2;
                            -webkit-box-orient: vertical;
                            overflow: hidden;
                        }

                        .orderItemRightLeftSpecifications {
                            font-family: AppleSystemUIFont;
                            font-size: 24rpx;
                            color: #999999;
                            line-height: 30rpx;
                            text-align: left;
                            font-style: normal;
                            text-transform: none;
                            margin-top: 14rpx;
                        }
                    }

                    .orderItemCenterRightRight {
                        width: 180rpx;
                        display: flex;
                        flex-direction: column;
                        align-items: flex-end;

                        .unitPrice {
                            font-family: AppleSystemUIFont;
                            font-size: 28rpx;
                            color: #333333;
                            line-height: 34rpx;
                            text-align: left;
                            font-style: normal;
                            text-transform: none;
                        }

                        .orderItemQuantity {
                            font-family: AppleSystemUIFont;
                            font-size: 28rpx;
                            color: #999999;
                            line-height: 34rpx;
                            text-align: left;
                            font-style: normal;
                            text-transform: none;
                            margin-top: 10rpx;
                        }
                    }
                }
            }

            .is_more {
                width: 400rpx;
                height: 40rpx;
                margin: auto;
                text-align: center;
                //display: flex;
                //flex-direction: row;
                //align-items: center;
                color: #9fa3a8;
                font-size: 28rpx;

                .arrow_icon {
                    width: 26rpx;
                    height: 16rpx;
                    margin-right: 16rpx;
                }
            }

            .orderItemMoneyBox {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: flex-end;

                .orderItemUnit {
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    font-size: 28rpx;
                    color: #333333;
                    line-height: 40rpx;
                    text-align: left;
                    font-style: normal;
                    text-transform: none;
                }

                .orderItemMoney {
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    font-size: 28rpx;
                    color: #333333;
                    line-height: 40rpx;
                    text-align: left;
                    font-style: normal;
                    text-transform: none;
                }
            }

            .orderItemBottom {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-top: 32rpx;

                .orderItemBottomLeft {
                    .orderItemBottomLeftMore {
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        font-size: 28rpx;
                        color: #333333;
                        line-height: 40rpx;
                        text-align: left;
                        font-style: normal;
                        text-transform: none;
                    }
                }

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

                    .orderItemBottomRightEvaluate {
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        font-size: 28rpx;
                        color: #333333;
                        line-height: 40rpx;
                        text-align: left;
                        font-style: normal;
                        text-transform: none;
                        padding: 4rpx 26rpx;
                        background: #F2F5F6;
                        border-radius: 4rpx;
                        margin-right: 34rpx;
                    }

                    .orderItemBottomRightBuyAgain {
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        font-size: 28rpx;
                        color: #E84D38;
                        line-height: 40rpx;
                        text-align: left;
                        font-style: normal;
                        text-transform: none;
                        padding: 4rpx 26rpx;
                        background: #F2F5F6;
                        border-radius: 4rpx;
                    }
                }
            }
        }

        .inBottom {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;

            .bottomText {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 26rpx;
                color: #d0d0d0;
                line-height: 40rpx;
                text-align: justify;
                font-style: normal;
                position: relative;
                padding: 6rpx 0;
            }

            .bottomText::after {
                content: "";
                width: 30vw;
                height: 2rpx;
                background: #e0e0e0;
                position: absolute;
                left: -32vw;
                top: 50%;
            }

            .bottomText::before {
                content: "";
                width: 30vw;
                height: 2rpx;
                background: #e0e0e0;
                position: absolute;
                right: -32vw;
                top: 50%;
            }
        }
    }
}
</style>