<script lang="ts" setup>
import { dateFormat } from 'src/utils/datetime';

// NOTE: Import stores
import { formatAddress } from 'src/utils/address';

// NOTE  Import Types
import { Branch } from 'src/stores/branch/types';
import { Institution } from 'src/stores/institution/types';

// NOTE: Import Components

defineProps<{
  viewType: 'docOrder' | 'docReceive';
  branch: Branch;
  institution: Institution;
  details: {
    code: string;
    name: string;
    contactName: string;
    contactTel: string;
  };
}>();
</script>

<template>
  <div class="row items-center q-mb-lg">
    <div class="column" style="width: 50%">
      <img src="/logo.png" width="192px" style="object-fit: scale-down" />
    </div>
    <div
      class="column"
      style="text-align: center; width: 50%; font-weight: 800; font-size: 24px"
    >
      {{
        viewType === 'docReceive'
          ? $t('taskOrder.goodReceipt')
          : $t('preview.taskOrder')
      }}
    </div>
  </div>

  <article class="detail-card">
    <section class="detail-customer-info">
      <article>
        <b>
          {{ !!branch.virtual ? '' : $t('general.company') }} {{ branch.name }}
        </b>

        <span v-if="branch.province && branch.district && branch.subDistrict">
          {{
            formatAddress({
              address: branch.address,
              addressEN: branch.addressEN,
              moo: branch.moo,
              mooEN: branch.mooEN,
              soi: branch.soi,
              soiEN: branch.soiEN,
              street: branch.street,
              streetEN: branch.streetEN,
              province: branch.province,
              district: branch.district,
              subDistrict: branch.subDistrict,
            })
          }}
        </span>
        <span>{{ $t('branch.form.taxNo') }} {{ branch.taxNo }}</span>
        <span>{{ $t('taskOrder.telephone') }} {{ branch.telephoneNo }}</span>
        <span>{{ branch.webUrl }}</span>
      </article>
      <article>
        <b>{{ $t('general.agencyAddress') }}</b>
        <span>
          {{
            formatAddress({
              address: institution.address,
              addressEN: institution.addressEN,
              moo: institution.moo || '-',
              mooEN: institution.mooEN || '-',
              soi: institution.soi || '-',
              soiEN: institution.soiEN || '-',
              street: institution.street || '-',
              streetEN: institution.streetEN || '-',
              province: institution.province,
              district: institution.district,
              subDistrict: institution.subDistrict,
            })
          }}
        </span>
      </article>
    </section>
    <section class="detail-quotation-info">
      <div>
        <div>
          {{
            $t('general.itemNo', {
              msg: `   ${viewType === 'docReceive' ? $t('taskOrder.goodReceipt') : $t('preview.taskOrder')}`,
            })
          }}
        </div>
        <div>{{ details.code }}</div>
      </div>
      <div>
        <div>{{ $t('taskOrder.workName') }}</div>
        <div>{{ details.name }}</div>
      </div>
      <div>
        <div>{{ $t('taskOrder.contacts') }}</div>
        <div>{{ details.contactName }} {{ details.contactTel }}</div>
      </div>
    </section>
  </article>
</template>

<style scoped>
.detail-card {
  display: flex;
  gap: 16px;

  & > * {
    flex-grow: 1;
  }

  & > :first-child {
    max-width: 57.5%;
  }
}

.detail-customer-info {
  display: flex;
  flex-direction: column;
  gap: 16px;

  & > * {
    display: flex;
    flex-direction: column;

    & > :first-child {
      color: var(--main);
    }
  }
}

.detail-quotation-info {
  & > * {
    display: flex;

    & > :first-child {
      color: var(--main);
    }

    & > * {
      width: 50%;
    }
  }
}
</style>
