<template>
    <!-- Header Start -->
    <header class="header">
        <div class="logo-wrap">
            <i class="icon-arrow-left-bold-box icli" @click="$router.go(-1)"></i>
            <h1 class="title-color font-md">
                購物車
                <span class="font-sm content-color">({{ cartStore.cartNum }} 樣商品)</span>
            </h1>
        </div>
        <div class="avatar-wrap" @click="$router.push('/home')">
            <i class="icon-home icli"></i>
        </div>
    </header>

    <!-- Header End -->

    <!-- Main Start -->
    <main class="main-wrap payment-page cart-page mb-xxl">
        <template v-if="cartStore.cartNum > 0">
            <!-- Cart Item Section Start  -->
            <div class="cart-item-wrap pt-0">
                <div
                    class="swipe-to-show"
                    :class="{ active: activeItem == item.rec_id }"
                    v-for="item in items"
                    :key="item.rec_id"
                    v-swipeleft="(event) => handleSwipeLeft(event, item)"
                    v-swiperight="(event) => handleSwipeRight(event, item)"
                >
                    <div class="product-list media">
                        <a href="javascript:void(0);">
                            <img :src="img_url + item.goods_thumb" alt="offer" />
                        </a>
                        <div class="media-body">
                            <a href="javascript:void(0)" class="font-md"> {{ item.goods_name }} </a>
                            <!-- <span class="content-color font-xs">年費</span> -->
                            <span class="price-color font-md">${{ item.goods_price }}</span>
                            <div class="plus-minus" v-if="item.buymax != 1">
                                <i class="icon-minus" @click="changeItemNum(item, -1)"></i>
                                <input
                                    type="number"
                                    v-model="item.goods_number"
                                    @blur="changeInputNum(item, item.goods_number)"
                                />
                                <i
                                    class="icon-add"
                                    @click="changeItemNum(item, 1)"
                                    v-if="item.buymax == 0 || item.goods_number < item.buymax"
                                ></i>
                            </div>
                        </div>
                    </div>
                    <div
                        class="delete-button"
                        data-bs-toggle="offcanvas"
                        data-bs-target="#confirmation"
                        aria-controls="confirmation"
                        @click="handleDeleteItem(item.rec_id)"
                    >
                        <i class="icon-trash icli"></i>
                    </div>
                </div>
            </div>
            <!-- Cart Item Section End  -->

            <!-- Order Detail Start -->
            <section class="order-detail">
                <!-- Product Detail  Start -->
                <div>金額小計:</div>
                <div>${{ detail.total }}</div>
                <!-- Product Detail  End -->
            </section>
            <!-- Order Detail End -->
        </template>
        <template v-else>
            <div class="nocart-content">
                <div><i class="icon-cart"></i></div>
                <div>購物車還是空的</div>
            </div>
        </template>
    </main>
    <!-- Main End -->

    <!-- Footer Start -->
    <footer class="footer-wrap footer-button">
        <a href="javascript:void(0)" class="font-md" v-if="cartStore.cartNum > 0" @click="goCheckOut">去結帳</a>
        <router-link to="/category" class="font-md" v-else>馬上逛逛</router-link>
    </footer>
    <!-- Footer End -->
</template>

<script setup>
import _ from "lodash";
import { ref, computed } from "vue";
import { showToast, showConfirmDialog } from "vant";
import { useCartStore } from "@/store/Cart";
import { storeToRefs } from "pinia";

import { checkLogin } from "@/services/auth";
import router from "@/router";
import Cookies from "js-cookie";

const img_url = import.meta.env.VITE_APP_IMG_URL

const cartStore = useCartStore();

const { cartItems: items } = storeToRefs(cartStore);

const activeItem = ref(0);

const handleSwipeLeft = (event, item) => {
    activeItem.value = item.rec_id;
};

const handleSwipeRight = (event, item) => {
    activeItem.value = 0;
};

const handleDeleteItem = async (id) => {
    cartStore.delCart(id);
};

const changeItemNum = (item, num) => {
    if (item.goods_number + num <= 0) {
        cartStore.delCart(item.rec_id);
    } else {
        cartStore.updateCart(item, item.goods_number + num);
    }
};

const changeInputNum = (item, num) => {
    if (num <= 0) {
        cartStore.delCart(item.rec_id);
    } else {
        cartStore.updateCart(item, num);
    }
};

// 計算訂單詳細
const detail = computed(() => {
    let sum = items.value.reduce((accumulator, value) => {
        return accumulator + value.goods_price * value.goods_number;
    }, 0);

    let discount = 0;

    let shipping = 0;

    let total = sum - discount + shipping;

    return { sum, discount, shipping, total };
});

const goCheckOut = async () => {
            //判斷是否有登入
            if (Cookies.get('uid')) {
            return router.push('/checkout')
        }
        return router.push({
            path: '/login',
            query: {
                redirect: '/checkout'
            }
        })

    // if (Cookies.get("token")) {
    //     router.push("/checkout");
    // } else {
    //     showConfirmDialog({
    //         title: "是否先登入會員",
    //         message: "您目前尚未登入會員，是否先登入會員",
    //         confirmButtonText: "登入會員",
    //         cancelButtonText: "暱名購買",
    //     })
    //         .then(() => {
    //             router.push("/login");
    //         })
    //         .catch(() => {
    //             router.push("/checkout");
    //         });
    // }
};
</script>

<style lang="less" scoped>
.cart-item-wrap {
    margin-bottom: 20px;
}
.delete-button {
    i {
        font-size: 20px;
        color: #ffffff;
    }
}

.plus-minus {
    font-size: 20px;
}

.price-color {
    color: red;
}

.nocart-content {
    text-align: center;
    color: #666;
    div:nth-child(1) {
        i {
            font-size: 200px;
            color: #666;
        }
    }
    div:nth-child(2) {
        font-size: 18px;
        height: 40px;
    }
}

.order-detail {
    display: flex;

    div:nth-child(1) {
        width: 100px;
    }
    div:nth-child(2) {
        flex: 1;
    }
}
</style>
