DeliverySelector

<template>
  <div class="cart-delivery__section delivery">
    <div
      :class="['delivery__header delivery-title', { 'delivery-title--unavailable': !delivery.available }]"
      @click="handleToggleSection"
    >
      <span class="delivery-title__text">{{ delivery.name }}</span>
      <template v-if="delivery.available">
        <span v-if="delivery.minPrice === 0" class="delivery-title__price delivery-title__price--green">
          Бесплатно
        </span>
        <span v-else class="delivery-title__price">
          От {{ delivery.minPrice }}&nbsp;{{ cartV3Store.data?.prices.symbol }}
        </span>
        <span :class="['delivery-title__button', { 'delivery-title__button--open': isOpen }]">
          <Icon i="chevron-down-gray" />
        </span>
      </template>
      <span v-else class="delivery-title__message">
        {{ delivery.message }}
      </span>
    </div>

    <ul v-if="delivery.items?.length" v-show="isOpen" class="delivery__list">
      <DeliveryItem
        v-for="(item, index) in delivery.items"
        :key="index"
        :item="item"
        :is-advantageous="delivery.isAdvantageous"
      />
    </ul>
  </div>
</template>

<script setup lang="ts">
import type { DeliveryType } from "~/types/cartV3/DeliveryType";
import { useCartV3Store } from "~/stores/cartsV3";
import DeliveryItem from "~/components/cart/v3/delivery/DeliveryItem.vue";
const cartV3Store = useCartV3Store();
const props = defineProps<{ delivery: DeliveryType }>();

//определяем есть ли выбранная доставка
const hasSelectedDelivery = !!props.delivery.items?.find((d) => d.code === cartV3Store.data?.options.delivery);

// раскрываем если в списке выбранная доставка или самый выгодны вариант
const isOpen = ref(hasSelectedDelivery || (props.delivery.isAdvantageous && !cartV3Store.data?.options?.delivery));

const handleToggleSection = () => {
  isOpen.value = !isOpen.value;
};
</script>