<template>
  <div>
    <CheckoutBtn @showShoppingCart="handleShowShoppingCart" @handleCheckoutBtn="handleShowCheckoutCart" />
    <nut-action-sheet v-model:visible="show">
      <div class="flex flex-col pb-safe max-h-[60vh] min-h-[60vh]">
        <div class="bg-[#F5F5F5] px-[30rpx] py-[18rpx] flex items-center">
          <span class="text-[#666666] text-[30rpx] font-400">已选菜品</span>
          <div class="text-[#333] font-400 text-[30rpx]">
            (含运费&nbsp;
            <span class="text-[#F03B25] text-[30rpx] font-400">¥{{ shippingFee }}</span>
            &nbsp;打包费&nbsp;¥<span class="text-[#F03B25] text-[30rpx] font-400">{{ packingFee }}</span>)
          </div>
          <div class="flex items-center ml-auto">
            <Trash2 :stroke-width="1.5" class="w-[32rpx] h-[32rpx] text-[#ccc]"/>
            <span class="text-[#666] font-400 text-[32rpx]" @click="handleClearCart">清空</span>
          </div>
        </div>

        <Carte :carte="shoppingCartList" />
        <div class="bg-white px-[30rpx] pb-[16rpx]">
          <CheckoutBtn  />
        </div>
      </div>
    </nut-action-sheet>
    <nut-action-sheet v-model:visible="showCheckoutCart">
      <div class="flex flex-col pb-safe max-h-[80vh] min-h-[60vh]">
        <div class="flex items-center w-full px-[30rpx] py-[30rpx] bg-[#F5F5F5]" @click="handleShowChooseLocation">
          <img src="/images/checkout/location.png" alt="location" class="w-[92rpx] h-[92rpx]">

          <div class="flex flex-col ml-[20rpx] flex-auto">
            <p class="text-[36rpx] font-600">{{ defaultAddr?.fullAddress }}</p>
            <div class="flex items-center text-[32rpx] text-[#333] mt-[14rpx]">
              <span class="mr-[20rpx]">{{ defaultAddr?.name }}</span>
              <span>{{ defaultAddr?.phone }}</span>
            </div>
          </div>

          <ChevronRight :stroke-width="1.5" class="w-[60rpx] h-[60rpx] ml-auto"/>
        </div>

        <Carte :carte="shoppingCartList" class="px-[30rpx]"/>
        <div class="mx-[30rpx] border-b-dashed border-b-[#D8D8D8] border-b-[2rpx] mb-[40rpx] mt-[20rpx]"></div>
        <div class="flex flex-col items-center px-[30rpx]">
          <div class="flex items-center justify-between w-full">
            <div class="text-[#3d3d3d] text-[30rpx] font-400">打包费</div>
            <div class="text-[#F03B25] text-[30rpx] font-400">¥{{ packingFee }}</div>
          </div>
          <div class="flex items-center justify-between w-full mt-[20rpx] mb-[40rpx]">
            <div class="text-[#3d3d3d] text-[30rpx] font-400">运费</div>
            <div class="text-[#F03B25] text-[30rpx] font-400">¥{{ shippingFee }}</div>
          </div>
        </div>
        <div class="bg-white px-[30rpx] pb-[16rpx]">
          <CheckoutBtn  @handleCheckoutBtn="toCheckout"/>
        </div>
      </div>
    </nut-action-sheet>
    <ChooseLocation v-model:show="showChooseLocation"  />
  </div>
</template>

<script lang="ts" setup>
  import { packingFee, shippingFee } from "@/composables/useRestaurant";
  import { Trash2, ChevronRight } from "lucide-vue-next";
  import CheckoutBtn from "./checkout-btn.vue";
  import { useShoppingCartStore } from "@/store/shoppingCart";
  import Carte from "./carte.vue";
  import { useUserStore } from "@/store/user";
  import ChooseLocation from "@/components/checkout/chooseLocation.vue";
  import { useRouter } from "vue-router";
import { CartTypeEnum } from "@/types/cart";

  const router = useRouter();
  const userStore = useUserStore();
  const { recvAddrList } = storeToRefs(userStore);
  
  const defaultAddr = computed(() => {
    return recvAddrList.value.find((item:any) => item.isDefault);
  });
  
  const shoppingCartStore = useShoppingCartStore();
  const shoppingCartList = computed(() => {
    return shoppingCartStore.getShoppingCartByRestaurant;
  });

  const show = ref(false);
  const showCheckoutCart = ref(false);
  const handleShowShoppingCart = () => {
    show.value = true;
  };

  const handleShowCheckoutCart = () => {
    showCheckoutCart.value = true;
  };

  const showChooseLocation = ref(false);
  const handleShowChooseLocation = () => {
    showChooseLocation.value = true;
  };

  const toCheckout = () => {
    router.push({ path: "/checkout/payment", query: { type: CartTypeEnum.Restaurant } });
  };

  const handleClearCart = () => {
    shoppingCartStore.clearShoppingCartByType(CartTypeEnum.Restaurant);
  };


</script>

<style scoped lang="scss">

</style>
