<template>
  <div class="flex flex-col">
    <header class="flex items-center justify-between px-[30rpx] pt-[30rpx] pb-[44rpx] border-b-[4rpx] border-dashed border-[#28BEBB]" @click="handleShowActionSheet">
      <img src="/images/checkout/location.png" alt="location" class="w-[92rpx] h-[92rpx]" />
      <div class="flex flex-col ml-[20rpx] mr-[16rpx] flex-auto">
        <div class="text-[36rpx] font-600 mb-[14rpx]">{{ defaultAddress.fullAddress }}</div>
        <div class="flex items-center text-[32rpx] text-[#333] font-400">
          <div class="mr-[20rpx]">{{ defaultAddress.name }}</div>
          <div>{{ defaultAddress.phone }}</div>
        </div>
      </div>
      <ChevronRight class="text-[#666] size-[60rpx]"/>
    </header>

    <ShoppingCart />
    
    <ChooseLocation v-model:show="show"  />
  </div>
</template>

<script lang="ts" setup>
  import { useUserStore } from "@/store/user";
  import { ChevronRight, } from "lucide-vue-next";

  import ShoppingCart from "@/components/shopping-cart/index.vue";
  import ChooseLocation from "@/components/checkout/chooseLocation.vue";

  const userStore = useUserStore();
  const recvAddrList = computed(() => userStore.recvAddrList);
  const defaultAddress = computed(() => {
    const filterList = recvAddrList.value.filter((item) => item.isDefault);
    if (filterList.length > 0) {
      return filterList[0];
    } else {
      return {
        fullAddress: "",
        name: "",
        phone: "",
      };
    }
  });

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


</script>



