<template>
    <!-- Main Start -->
    <van-tabs v-model:active="active">
        <van-tab title="商品"></van-tab>
        <van-tab title="詳情"></van-tab>
        <!-- <van-tab title="評價"></van-tab> -->
    </van-tabs>
    <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">
                    <van-popover placement="left-start" @open="handleOpenPoppver" v-model:show="showPopover">
                        <van-grid square clickable :border="false" column-num="4" style="width: 300px">
                            <van-grid-item @click="handleClickPoppver('qrcode')">
                                <div class="share-icon">
                                    <div>
                                        <img src="@/assets/icons/png/qrcode.png" />
                                    </div>
                                    <div>QRCoce</div>
                                </div>
                            </van-grid-item>
                            <van-grid-item @click="handleClickPoppver('link')">
                                <div class="share-icon">
                                    <div>
                                        <img src="@/assets/icons/png/link.png" />
                                    </div>
                                    <div>分享連結</div>
                                </div>
                            </van-grid-item>
                            <van-grid-item @click="handleClickPoppver('line')">
                                <div class="share-icon">
                                    <div>
                                        <img src="@/assets/icons/png/line.png" />
                                    </div>
                                    <div>Line</div>
                                </div>
                            </van-grid-item>
                            <van-grid-item text="QRCoce" @click="handleClickPoppver('fb')">
                                <div class="share-icon">
                                    <div>
                                        <img src="@/assets/icons/png/Facebook.png" />
                                    </div>
                                    <div>FB</div>
                                </div>
                            </van-grid-item>
                        </van-grid>
                        <template #reference>
                            <i class="icon-share"></i>
                        </template>
                    </van-popover>
                </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">({{goods.click_count}}次點擊)</span>
            </div>
            <div class="price">
                <span>${{ goods.shop_price }}</span>
                <del>${{ goods.market_price }}</del>
                <span>{{ discount }}折</span>
            </div>
            <div class="brief">
                {{ goods.goods_brief }}
            </div>
        </section>
        <!-- Card Data-->
        <card-data v-model="cardData" />
        <div style="margin: 16px">
            <van-button round block type="primary" @click="addToCart(1, 1)"> 立即購買 </van-button>
        </div>
        <!-- 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="" />
                        NFC感應卡片將在三個工作天寄至您的收件地址
                    </li>
                    <!-- <li class="font-sm content-color"><img src="@/assets/icons/svg/payment.svg" class="img-fluid"
                            alt="" />
                        Cash On delivery Available
                    </li>
                    <li class="font-sm content-color"><img src="@/assets/icons/svg/refund.svg" class="img-fluid"
                            alt="" />
                        Easy 21 days returns and exchanges
                    </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 -->
    <!-- 分享二維碼 Start -->
    <van-dialog
        v-model:show="showShareQrcode"
        title="分享二維碼"
        :show-cancel-button="true"
        cancel-button-text="關閉"
        :show-confirm-button="false"
    >
        <div class="qrcode-block">
            <qrcode-vue :value="`https://shop.slash1000.com/m/card?refer=${refer_code}`" size="200" level="M" />
        </div>
    </van-dialog>
    <!-- Main End -->
</template>

<script setup>
import Cookies from "js-cookie";
import QrcodeVue from "qrcode.vue";
import { toClipboard } from '@soerenmartius/vue3-clipboard'

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

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

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

import { addCart } from "@/services/cart";

import CardData from "./compoments/CardData.vue";

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

const cartStore = useCartStore();
const userStore = useUserStore();

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

const cardData = ref({
    cname: "",
    ename: "",
    image: "",
    user_id: Cookies.get("uid") || "",
});

onMounted(async () => {

    let res = await getGoods(1);

    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: cardData.value,
    };

    let res = await cartStore.addCart(goods);

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

    if (type === 0) {
        showToast("添加成功！");
    } else {
        //判斷是否有登入
        if (Cookies.get("uid")) {
            return router.push("/checkout");
        }
        return router.push({
            path: "/login",
            query: {
                redirect: "/checkout",
            },
        });
    }

    return;
};

const goCheckout = async () => {
    //上傳商品至購物車
    let goods = {
        quick: 1,
        spec: "",
        goods_id: 1,
        number: 1,
        parent: 0,
        cardInfo: form.value,
    };
    let res = await addCart(goods);
    if (res.code === 200) {
        //判斷是否有登入
        if (Cookies.get("uid")) {
            return router.push("/checkout");
        }
        return router.push("/login");
    }
    alert("操作錯誤，請重新操作");
    return;
};

//分享連結
const showPopover = ref(false);
const showShareQrcode = ref(false);

const refer_code = computed(() => {
    if (!Cookies.get("uid")) {
        return "";
    }
    return userStore.info.refer_code;
});

const handleOpenPoppver = () => {
    //判斷是否有登入
    if (!Cookies.get("uid")) {
        return showToast("注意！正式會員分享才能獲得獎勵喔，如果您已是正式會員，請先登入！");
    }
};

const handleClickPoppver = (type) => {
    const share_url = "https://shop.slash1000.com/m/card?refer=" + refer_code.value;
    switch (type) {
        case "qrcode":
            showShareQrcode.value = true;
            break;
        case "link":
            toClipboard(share_url);
            showToast("已放入剪貼簿");
            break;
        case "line":
            window.location.href = "https://social-plugins.line.me/lineit/share?url=" + encodeURI(share_url);
            break;
        case "fb":
            window.open("https://www.facebook.com/share.php?u=" + encodeURI(share_url), "_blank");
            break;
        default:
            break;
    }
    showPopover.value = false;
};

const onSelect = (action) => Toast(action.text);
</script>

<style lang="less" scoped>
.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;
        }
    }

    .brief {
        margin: 10px 0;
        font-size: 18px;
    }
}

.share-icon {
    text-align: center;
    div:nth-child(1) {
        img {
            width: 30px;
        }
    }
    // div:child-nth(2){

    // }
}

.qrcode-block {
    text-align: center;
}
</style>
