<template>
    <!-- Header Start -->
    <header class="goods-header">
        <div class="logo-wrap">
            <i class="icon-arrow-left-bold-box icli" @click="$router.go(-1)"></i>
        </div>
        <div class="tab-wrap">
            <van-tabs v-model:active="active">
                <van-tab title="商品"></van-tab>
                <van-tab title="詳情"></van-tab>
                <!-- <van-tab title="評價"></van-tab> -->
            </van-tabs>
        </div>
        <div class="avatar-wrap" @click="$router.push('/cart')">
            <!-- <i class="icon-cart-variant icli"></i> -->
            <van-icon name="cart-o" :badge="cartStore.cartNum" />
        </div>
    </header>
    <!-- Header End -->

    <!-- Main Start -->
    <main class="main-wrap product-page mb-xxl" v-if="active === 0">
        <!-- Banner Section Start -->
        <div class="banner-box product-banner">
            <van-swipe>
                <van-swipe-item v-for="images in goods.goods_gallery" :index="images.img_id">
                    <img class="banner_img" :src="images.img_url" />
                </van-swipe-item>
                <template #indicator="{ active, total }">
                    <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
                </template>
            </van-swipe>
        </div>
        <!-- Banner Section End -->

        <!-- Product Section Section Start -->
        <section class="product-section">
            <div class="name">
                <div class="font-md">
                    {{ goods.goods_name }}
                </div>
                <div class="share">
                    <i class="icon-share"></i>
                </div>
            </div>

            <div class="rating">
                <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    class="feather feather-star"
                >
                    <polygon
                        points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
                    ></polygon>
                </svg>
                <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    class="feather feather-star"
                >
                    <polygon
                        points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
                    ></polygon>
                </svg>
                <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    class="feather feather-star"
                >
                    <polygon
                        points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
                    ></polygon>
                </svg>
                <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    class="feather feather-star"
                >
                    <polygon
                        points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
                    ></polygon>
                </svg>
                <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    class="feather feather-star"
                >
                    <polygon
                        points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
                    ></polygon>
                </svg>
                <span class="font-xs content-color">(150次點擊)</span>
            </div>
            <div class="price">
                <span>${{ goods.shop_price }}</span>
                <del>${{ goods.market_price }}</del>
                <span>{{ discount }}折</span>
            </div>

            <!-- Product Detail Start -->
            <div class="product-detail section-p-t">
                <div class="product-detail-box">
                    <h2 class="title-color">產品介紹</h2>
                    <!-- <p class="content-color font-base" v-html="goods.goods_desc"> -->
                    <!-- </p> -->
                </div>

                <!-- Product Detail Accordian Start -->
                <div class="accordion" id="accordionExample">
                    <!-- Accordion Start -->
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="headingOne">
                            <button
                                class="accordion-button"
                                type="button"
                                data-bs-toggle="collapse"
                                data-bs-target="#collapseOne"
                                aria-expanded="true"
                                aria-controls="collapseOne"
                            >
                                商品詳情
                            </button>
                        </h2>
                        <div
                            id="collapseOne"
                            class="accordion-collapse collapse show"
                            aria-labelledby="headingOne"
                            data-bs-parent="#accordionExample"
                        >
                            <div class="accordion-body">
                                <p class="content-color font-base"></p>
                            </div>
                        </div>
                    </div>
                    <!-- Accordion End -->
                </div>
                <!-- Product Detail Accordian End -->
            </div>
            <!-- Product Detail End -->
        </section>
        <!-- Product Section Section End -->

        <!-- Product Review Section Start -->
        <!-- <section class="product-review pb-0">
            <div class="top-content">
                <h3 class="title-color">用戶評論(15)</h3>
                <a href="javascript:void(0)" data-bs-toggle="offcanvas" data-bs-target="#all-review" class="font-xs">See
                    all</a>
            </div>
            <div class="review-wrap">
                <div class="review-box">
                    <div class="media">
                        <img src="@/assets/images/avatar/avatar.jpg" alt="avatar" />
                        <div class="media-body">
                            <h4 class="font-sm title-color">Andrea Joanne</h4>
                            <div class="rating">
                                <i data-feather="star"></i>
                                <i data-feather="star"></i>
                                <i data-feather="star"></i>
                                <i data-feather="star"></i>
                                <i data-feather="star"></i>
                            </div>
                        </div>
                    </div>
                    <p class="font-sm content-color">It's a really cute skirt! I didn't expect to feel so good in a
                        polyester material. The print is slightly</p>
                </div>
                <div class="review-box">
                    <div class="media">
                        <img src="@/assets/images/avatar/avatar.jpg" alt="avatar" />
                        <div class="media-body">
                            <h4 class="font-sm title-color">Andrea Joanne</h4>
                            <div class="rating">
                                <i data-feather="star"></i>
                                <i data-feather="star"></i>
                                <i data-feather="star"></i>
                                <i data-feather="star"></i>
                                <i data-feather="star"></i>
                            </div>
                        </div>
                    </div>
                    <p class="font-sm content-color">It's a really cute skirt! I didn't expect to feel so good in a
                        polyester material. The print is slightly</p>
                </div>
            </div>
        </section> -->
        <!-- Product Review Section End -->

        <section class="check-delivery-section">
            <div class="service-section">
                <ul>
                    <li class="font-sm content-color">
                        <img src="@/assets/icons/svg/delivery.svg" class="img-fluid" alt="" />
                        滿$200元即可免運
                    </li>
                    <li class="font-sm content-color">
                        <img src="@/assets/icons/svg/payment.svg" class="img-fluid" alt="" />
                        可貨到付款
                    </li>
                    <li class="font-sm content-color">
                        <img src="@/assets/icons/svg/refund.svg" class="img-fluid" alt="" />
                        7日不滿意包退
                    </li>
                </ul>
            </div>
        </section>
    </main>

    <!-- Main End -->

    <!-- Main Start -->
    <main class="main-wrap detail-page mb-xxl" v-if="active == 1">
        <section class="detail-section" v-html="goods.goods_desc"></section>
    </main>
    <!-- Main End -->

    <!-- Main Start -->
    <main class="main-wrap comment-page mb-xxl" v-if="active == 2">
        <section class="comment-section">評論</section>
    </main>
    <!-- Main End -->

    <!-- Footer Start -->
    <footer class="footer-nav">
        <ul class="footer-left">
            <li class="footer-item" @click="$router.push('/home')">
                <div class="icon">
                    <i class="icon-home"></i>
                </div>
                <div class="text">首頁</div>
            </li>
            <li class="footer-item">
                <div class="icon">
                    <i class="icon-chat-dots"></i>
                </div>
                <div class="text">客服</div>
            </li>
            <li class="footer-item">
                <div class="icon">
                    <i class="icon-favorite"></i>
                </div>
                <div class="text">最愛</div>
            </li>
        </ul>
        <ul class="footer-right">
            <li class="add-cart" @click="addToCart(goods.goods_id, 0)">加入購物車</li>
            <li class="buy-now" @click="addToCart(goods.goods_id, 1)">立即購買</li>
        </ul>
    </footer>
    <!-- Footer End -->
</template>

<script setup>
import { ref, onMounted, computed } from "vue";
import { getGoods } from "@/services/goods";
import { useRoute, useRouter } from "vue-router";

import { useCartStore } from "@/store/Cart.js";
import { storeToRefs } from "pinia";

import { showToast } from "vant";
import "vant/es/toast/style";

const route = useRoute();
const router = useRouter();

const cartStore = useCartStore();

const active = ref(0);
const goods = ref({});

onMounted(async () => {
    const id = route.params.id;

    let res = await getGoods(id);
    // console.log(res)
    if (res.code === 200) {
        goods.value = res.data;
    }
});

const discount = computed(() => {
    return Math.ceil((goods.value.shop_price / goods.value.market_price) * 10);
});

const addToCart = async (id, type) => {
    //上傳商品至購物車

    let goods = {
        quick: 1,
        spec: "",
        goods_id: id,
        number: 1,
        parent: 0,
        cardInfo: "",
    };

    let res = await cartStore.addCart(goods);

    if (!res) {
        return showToast("添加失敗！");
    }

    if (type === 0) {
        showToast("添加成功！");
    } else {
        router.push("/cart");
    }

    return;
};
</script>

<style lang="less" scoped>
.goods-header {
    // padding: calc(10px + (15 - 10) * ((100vw - 320px) / (1920 - 320))) 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .logo-wrap {
        padding: 0 15px;
        font-size: 24px;
        line-height: 44px;
        // display: flex;
        // align-items: center;
    }
    .tab-wrap {
        width: 100%;
    }

    .avatar-wrap {
        padding: 0 15px;
        font-size: 24px;
        line-height: 44px;
    }
}

.van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 200px;
    text-align: center;
    background-color: #39a9ed;
}

.custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.1);
}

.banner_img {
    width: 100%;
}

.product-section {
    .name {
        font-weight: 700;
        color: #222;
        line-height: 20px;
        height: 80px;
        // margin-top: -3px;
        display: flex;
        background-color: #f2f2f2;
        padding: 15px;
        margin-left: -15px;
        margin-right: -15px;

        .font-md {
            flex: 1;
            margin-right: 15px;
            border-right: 1px #666 solid;
        }
        .share {
            display: flex;
            align-items: center;
            width: 20px;
            font-size: 18px;
        }
    }
}

.footer-nav {
    max-width: 600px;
    width: 100%;
    height: 50px;
    position: fixed;
    z-index: 100;
    bottom: 0px;
    background: #f8f8f8;
    border-top: 1px solid #eeeeee;
    display: flex;

    .footer-left {
        width: 40%;
        display: flex;
        li {
            // line-height: 50px;
            text-align: center;
            width: 33%;
            border-right: 1px solid #eeeeee;
            .icon {
                height: 30px;
                line-height: 30px;
                color: #666;
                font-size: 24px !important;
            }
            .text {
                height: 20px;
                line-height: 20px;
                color: #666;
                font-size: 14px;
            }
        }
    }

    .footer-right {
        width: 60%;
        font: 15px;
        display: flex;

        .add-cart {
            width: 50%;
            line-height: 50px;
            color: #fff;
            background-color: #0baf9a;
            text-align: center;
        }
        .buy-now {
            width: 50%;
            line-height: 50px;
            color: #fff;
            background-color: #067062;
            text-align: center;
        }
    }
}
</style>
