<template>
    <van-nav-bar title="超商取貨" left-text="返回" left-arrow @click-left="$router.replace('/checkout')" />
    <main class="main-wrap shipping-page">
        <van-collapse v-model="activeNames" accordion>
            <van-radio-group v-model="shippingId">
                <van-collapse-item title="7-ELEVEN" name="1">
                    <div>
                        <div class="logistic-block" v-for="v in myShipping[1]">
                            <div>
                                <van-radio :name="v.store_id" @click="handleChange(v)"
                                    >{{ v.store_name }}<br />{{ v.store_address }}<br />{{ v.store_tel }}</van-radio
                                >
                            </div>
                            <div v-if="shippingId !== v.store_id">
                                <i class="icon-trash" @click="handleDeleteLogistic(v.id)"></i>
                            </div>
                        </div>
                        <van-button plain type="success" block @click="handleGetMap(1)">+新增</van-button>
                    </div>
                </van-collapse-item>
                <van-collapse-item title="全家" name="2">
                    <div>
                        <div class="logistic-block" v-for="v in myShipping[2]">
                            <div>
                                <van-radio :name="v.store_id" @click="handleChange(v)"
                                    >{{ v.store_name }}<br />{{ v.store_address }}<br />{{ v.store_tel }}</van-radio
                                >
                            </div>
                            <div v-if="shippingId !== v.store_id">
                                <i class="icon-trash" @click="handleDeleteLogistic(v.id)"></i>
                            </div>
                        </div>
                        <van-button plain type="success" block @click="handleGetMap(2)">+新增</van-button>
                    </div>
                </van-collapse-item>
                <van-collapse-item title="萊爾富" name="3">
                    <div>
                        <div class="logistic-block" v-for="v in myShipping[3]">
                            <div>
                                <van-radio :name="v.store_id" @click="handleChange(v)"
                                    >{{ v.store_name }}<br />{{ v.store_address }}<br />{{ v.store_tel }}</van-radio
                                >
                            </div>
                            <div v-if="shippingId !== v.store_id">
                                <i class="icon-trash" @click="handleDeleteLogistic(v.id)"></i>
                            </div>
                        </div>
                        <van-button plain type="success" block @click="handleGetMap(3)">+新增</van-button>
                    </div>
                </van-collapse-item>
                <van-collapse-item title="OK Mart" name="4">
                    <div>
                        <div class="logistic-block" v-for="v in myShipping[4]">
                            <div>
                                <van-radio :name="v.store_id" @click="handleChange(v)"
                                    >{{ v.store_name }}<br />{{ v.store_address }}<br />{{ v.store_tel }}</van-radio
                                >
                            </div>
                            <div v-if="shippingId !== v.store_id">
                                <i class="icon-trash" @click="handleDeleteLogistic(v.id)"></i>
                            </div>
                        </div>
                        <van-button plain type="success" block @click="handleGetMap(4)">+新增</van-button>
                    </div>
                </van-collapse-item>
            </van-radio-group>
        </van-collapse>
    </main>
    <div ref="formContainer" :style="{ display: showForm }"></div>
    <footer class="footer-wrap footer-button">
        <!-- <a href="javascript:void(0);" class="font-md">確認</a> -->
    </footer>
</template>

<script setup>
import { ref, watch, onMounted } from "vue";

import { getMap, getMyCvs, deleteLogistic, getShippings } from "@/services/shipping";

import { useOrderStore } from "@/store/Order";
import { showToast } from "vant";
import { useRoute, useRouter } from "vue-router";

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

const showForm = ref("none");
const formContainer = ref();

const activeNames = ref("1");
const shippingId = ref("");

const myShipping = ref([]);

onMounted(async () => {
    let res = await getMyCvs();
    
    if (res.code === 200) {
        shippingId.value = res.data.default.store_id;
        activeNames.value = res.data.default.type;
        myShipping.value = res.data.data;

        orderStore.initShippingData(res.data.default);

        if (route.query.is_return == 1) {
            let res2 = await getShippings();

            //在res2.data中取得shipping_code為cvs的Object
            res2 = res2.data.find((item) => item.shipping_code == "ecpay");


            orderStore.shipping.shipping_code = res2.shipping_code;
            orderStore.shipping.shipping_id = res2.shipping_id;
            orderStore.shipping.support_cod = res2.support_cod;
            orderStore.shipping.shipping_fee = 0;
            router.replace("/checkout");
        }
    }
});

const handleChange = (store) => {
    let res = orderStore.setDefaultStoreID(store);
    if (!res) {
        showToast("操作失敗");
        shippingId.value = oVal;
    }
    router.replace("/checkout");
};

const handleDeleteLogistic = async (id) => {
    let res = await deleteLogistic(id);
    if (res.code === 200) {
        showToast("刪除成功");
        let res = await getMyCvs();
        if (res.code === 200) {
            shippingId.value = res.data.default.store_id;
            activeNames.value = res.data.default.type;
            myShipping.value = res.data.data;
        }
    }
};

const handleGetMap = async (type) => {
    let res = await getMap({ type });
    if (res.code === 200) {
        formContainer.value.innerHTML = res.data;
        if (showForm.value === "none") {
            formContainer.value.querySelector("form").submit();
        }
    }
};
</script>

<style lang="less" scoped>
.van-radio {
    margin: 15px 0;
}

.shipping-page {
    padding-bottom: 50px;
}

.logistic-block {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    div:nth-child(2) {
        i {
            font-size: 20px;
        }
    }
}
</style>
