<script lang="ts" setup>
import { ref } from "vue";
import {
    useLoad,
    useReachBottom,
    showToast,
    navigateTo,
    setStorageSync,
} from "@tarojs/taro";
import Pay from "@/components/Pay.vue";
import { getActiveOrderList, deleteActiveOrder } from "@/api/goods";
import { getOrderStatistics } from "@/api/order";

const tabValue = ref(0);

const isShowPay = ref(false);

const tabsList = ref([
    {
        title: "全部",
        value: 0,
        num: 0,
    },
    {
        title: "待付款",
        value: 1,
        num: 0,
    },
    {
        title: "待使用",
        value: 2,
        num: 0,
    },
    {
        title: "已使用",
        value: 3,
        num: 0,
    },
    {
        title: "已失效",
        value: 4,
        num: 0,
    },
]);

const jfInfo = ref({});

interface OrderList {
    oid: string;
    add_time: string;
    status: number;
    BindGoods: {
        cover: string;
        name: string;
        number: number;
    };
    count: number;
    number: number;
}

const orderList = ref<OrderList[]>([]);

useLoad((options) => {
    console.log(options);
    // tabValue.value = Number(options.type);
    getList();
});

const countInfo = ref<any>({});

const getTj = async () => {
    try {
        const res = await getOrderStatistics({
            type: 1,
        });
        countInfo.value = res.data.data;
        console.log(res);
        tabsList.value[0].num = countInfo.value.A;
        tabsList.value[1].num = countInfo.value.B;
        tabsList.value[2].num = countInfo.value.C;
        tabsList.value[3].num = countInfo.value.D;
        tabsList.value[4].num = countInfo.value.F;
    } catch (error) {
        showToast({
            title: error.msg,
            icon: "none",
        });
    }
};

const getList = async () => {
    try {
        const res = await getActiveOrderList({
            status: tabValue.value,
        });
        console.log(res);
        orderList.value = res.data.data;
    } catch (error) {
        showToast({
            title: error.msg,
            icon: "none",
        });
    }
    getTj();
};

const tabChange = (index: number) => {
    tabValue.value = index;
    getList();
};

useReachBottom(() => {
    console.log("useReachBottom");
});

const openPay = (item: OrderList) => {
    isShowPay.value = true;
    jfInfo.value = item;
};

const errPay = () => {
    isShowPay.value = false;
    showToast({
        title: "支付失败",
        icon: "none",
    });
    jfInfo.value = {};
    getList();
};

// const successPay = (val: boolean) => {
//     isShowPay.value = val;
//     showToast({
//         title: "支付成功",
//         icon: "none",
//     });
//     jfInfo.value = {};
//     getList();
// };

const closePay = () => {
    isShowPay.value = false;
    showToast({
        title: "支付取消",
        icon: "none",
    });
    jfInfo.value = {};
    getList();
};

const toDetail = (item: any) => {
    setStorageSync("item", item);
    navigateTo({
        url: `/pages/users/order_list_detail/index?Id=${item.oid}&type=1`,
    });
};

const delOrder = async (oid: string) => {
    try {
        const res = await deleteActiveOrder({
            oid,
        });
        console.log(res);
        getList();
    } catch (error) {
        showToast({
            title: error.msg,
            icon: "none",
        });
    }
};
</script>

<template>
    <view>
        <view class="topTips">
            <view>
                <view style="font-weight: bold">订单信息</view>
                <view style="font-size: 15px"
                    >总消费(元)：{{ countInfo.Total || 0 }}
                </view>
            </view>
            <image src="../static/user/order_list_top.png" />
        </view>
        <view class="tabs-box">
            <view
                v-for="item in tabsList"
                :key="item.value"
                @click="tabChange(item.value)"
            >
                <view class="text">{{ item.title }}</view>
                <view>{{ item.num }}</view>
                <view
                    class="line"
                    :class="{ lineColor: item.value === tabValue }"
                ></view>
            </view>
        </view>
        <view v-if="orderList.length > 0">
            <view
                class="order-card"
                v-for="(item, index) in orderList"
                :key="index"
            >
                <view class="top">
                    <view>{{
                        item.add_time.slice(0, 19).replace("T", " ")
                    }}</view>
                    <view style="color: red">{{
                        item.status === 0
                            ? "待付款"
                            : item.status === 1
                            ? "待使用"
                            : item.status === 2
                            ? "已使用"
                            : "已失效"
                    }}</view>
                </view>
                <view class="line"></view>
                <view class="center">
                    <view class="top">
                        <image :src="item.BindGoods.cover" />
                        <view class="title">{{ item.BindGoods.name }} </view>
                        <view class="right">
                            <view>{{ item.number }}</view>
                            <!-- <view>x{{ item.count }}</view> -->
                        </view>
                    </view>
                    <!-- <view
                        class="bom"
                        style="text-align: right; font-size: 13px"
                    >
                        共{{ item.count }}件商品,实付(元):
                        <text style="color: red">{{ item.number }}</text>
                    </view> -->
                </view>
                <view class="line"></view>
                <view class="btn">
                    <nut-button
                        v-if="item.status === 0"
                        plain
                        size="small"
                        type="primary"
                        @click="delOrder(item.oid)"
                        >删除订单
                    </nut-button>
                    <nut-button
                        style="margin-left: 5px"
                        size="small"
                        type="primary"
                        @click="toDetail(item)"
                        >查看详情
                    </nut-button>
                    <nut-button
                        style="margin-left: 5px"
                        size="small"
                        type="primary"
                        v-if="item.status === 0"
                        @click="openPay(item)"
                        >立即付款
                    </nut-button>
                </view>
            </view>
        </view>
        <nut-empty v-else description="暂无订单"></nut-empty>
        <pay
            :isShowPay="isShowPay"
            payType="wx"
            @errPay="errPay"
            @closePay="closePay"
            :jfInfo="jfInfo"
        />
    </view>
</template>

<style lang="scss">
.topTips {
    box-sizing: border-box;
    width: 100%;
    background-color: #ff0000;
    color: #ffffff;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    image {
        width: 150px;
        height: 150px;
    }
}

.tabs-box {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: auto;
    background-color: #fff;
    padding: 0 20px;
    text-align: center;

    .text {
        margin: 10px 20px;
        align-items: center;
    }

    .line {
        margin: 0 auto;
        width: 50px;
        height: 5px;
        border-radius: 30px;
        transition: all 0.3s ease-in-out;
    }

    .lineColor {
        background-color: #ff0000;
    }
}

.order-card {
    width: 95%;
    box-sizing: border-box;
    margin: 15px auto;
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;

    .line {
        width: 100%;
        height: 1px;
        background-color: #f5f5f5;
        margin: 10px;
    }

    .top {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .btn {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .center {
        .top {
            display: flex;
            justify-content: space-between;
            // align-items: flex-start;

            image {
                width: 150px;
                height: 150px;
            }

            .title {
                margin-left: 10px;
                display: -webkit-box;
                overflow: hidden;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                text-overflow: ellipsis;
                width: 350px;
            }

            .right {
                margin-left: 10px;
                font-size: 28px;
                text-align: right;
            }
        }
    }
}
</style>
