DPOST

<template>
  <section>
    <!-- 출발지 -->
    <SenderQuick
      :disableStatus="props.disableStatus"
      :quickAllowed="quickAllowed"
      :activeTab="activeTab"
      @cancelNewOrder="emits('cancelNewOrder', $event)"
      @updateOriginAddress="isChangedOriginAddress = $event"
    />
    <!-- 도착지 -->
    <ReceiverQuick
      :disableStatus="props.disableStatus"
      :activeTab="activeTab"
    />
    <!-- 물품정보 -->
    <ItemQuick
      v-if="props.receptionTimes!.length"
      :disableStatus="props.disableStatus"
      :receptionTimes="props.receptionTimes"
      :activeTab="activeTab"
    />
    <OutboundPolicy
      v-if="isMobile"
      id="policy"
      outboundType="quick"
      :status="getCurrentOrder.orderInfomation.policyItem"
      :disableStatus="props.disableStatus"
      @update="emits('updateItemPolicy', $event)"
      @openPolicy="emits('openPolicy')"
    />
    <!-- 물품전달방법 -->
    <ItemDeliveryMethod
      :isPickupServiceAvailable="props.isPickupServiceAvailable"
      :isChangedOriginAddress="isChangedOriginAddress"
      :pickupServiceTimes="props.pickupServiceTimes"
      :isNotAllowedTime="props.disableStatus"
      :isValidateFailRequired="isValidateDeliveryMethod()"
      @updateDeliveryMethod="updateCustomerDropOffMethod"
      @updatePickupReserveTime="updateOnsitePickupRequestedAt"
      @updatePickupComment="updateOnsitePickupClientComment"
    />
  </section>
</template>

<script lang="ts" setup>
import { onMounted, PropType, watch, computed, ref, onUnmounted } from 'vue';
import SenderQuick from './quick/Sender.vue';
import ReceiverQuick from './quick/Receiver.vue';
import ItemQuick from './quick/Item.vue';
import ItemDeliveryMethod from './quick/ItemDeliveryMethodQuick.vue';
import OutboundPolicy from '@/components/ui/outbound/OutboundPolicy.vue';
import useQuick from '@/lib/outbound/useQuick';
import PQueue from 'p-queue';
import { useStore } from 'vuex';

const props = defineProps({
  disableStatus: { type: Boolean, required: true },
  quickAllowed: {
    type: Object as PropType<{ center: Boolean; anywhere: Boolean }>,
  },
  receptionTimes: {
    type: Array as PropType<api.center.serviceState.timeType[]>,
  },
  activeTab: { type: String },
  pickupServiceTimes: {
    type: Array as PropType<api.center.serviceState.timeType[]>,
  },
  isPickupServiceAvailable: { type: Boolean, required: true },
});
const isMobile = ref<boolean>(window.innerWidth <= 540);
const emits = defineEmits(['cancelNewOrder', 'openPolicy', 'updateItemPolicy', 'updateDeliveryMethod']);
const {
  updateOrderInfomation,
  quickItem,
  quickFreightItem,
  quickOrderInfomation,
  chargeFee,
  chargeFreightFee,
  getCurrentOrder,
} = useQuick();
const store = useStore();
const isChangedOriginAddress = ref<boolean>(false);
/**
 * 퀵 요금을 계산합니다.
 */
const calculateQuickFee = () => {
  const queue = new PQueue({ concurrency: 1 });
  const weight = computed(() => quickItem.value.weight);
  const isRoundTrip = computed(() => quickOrderInfomation.value.isRoundTrip);
  const reservedPickupTime = computed(() => quickOrderInfomation.value.pickupTime);
  const isReserved = computed(() => quickOrderInfomation.value.isReserved);
  const isExpressQuick = computed(() => quickOrderInfomation.value.isExpressQuick);
  const freightCategory = computed(() => quickFreightItem.value.freightCategory);
  const freightType = computed(() => quickFreightItem.value.freightType);
  const loadPosition = computed(() => quickFreightItem.value.loadPosition);
  const loadMethod = computed(() => quickFreightItem.value.loadMethod);
  const unloadPosition = computed(() => quickFreightItem.value.unloadPosition);
  const unloadMethod = computed(() => quickFreightItem.value.unloadMethod);

  watch(
    [
      weight,
      isRoundTrip,
      reservedPickupTime,
      isReserved,
      isExpressQuick,
      freightCategory,
      freightType,
      loadPosition,
      loadMethod,
      unloadPosition,
      unloadMethod,
    ],
    async () => {
      queue.clear();
      // 요금 초기화 후 계산을 시작합니다.
      await queue.add(async () => {
        props.activeTab === 'bike' ? await chargeFee() : await chargeFreightFee();
      });
    }
  );
};
const handleResize = () => {
  isMobile.value = window.innerWidth <= 540;
};

const isValidateDeliveryMethod = () => {
  return store.getters['outboundQuick/getValidateInfo']().customerDropOffMethod;
};
const updateCustomerDropOffMethod = (method: outbound.itemDeliveryMethod) => {
  updateOrderInfomation('customerDropOffMethod', method);
  emits('updateDeliveryMethod', method);
};
const updateOnsitePickupRequestedAt = (reserveDateTime: string) => {
  updateOrderInfomation('onsitePickupRequestedAt', reserveDateTime);
};
const updateOnsitePickupClientComment = (comment: string) => {
  updateOrderInfomation('onsitePickupClientComment', comment);
};

onMounted(() => {
  calculateQuickFee(); // 퀵 요금계산 watch
  window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
});
</script>