<template>
  <div class="report-container">
    <div class="report-header">{{ report.supplier.name }}</div>
    <div class="report-chart">
      <report-chart></report-chart>
    </div>

    <collapsible-box :is-collapsable="false" variant="border" title="Overview" size="m" :stretch-content="true">
      <div class="report-content-container--2-col">

        <div class="report-content-row">
          <div>MEK B</div>
          <div class="report-content-data-cell">{{ report.risk.mek_b.total.toFixed(2) }}</div>
        </div>

        <div class="report-content-row">
          <div>Opportunity scenario</div>
          <div class="report-content-data-cell">{{ report.risk.opportunity_scenario.total.toFixed(2) }}</div>
        </div>

        <div class="report-content-row">
          <div>Risk scenario</div>
          <div class="report-content-data-cell">{{ report.risk.risk_scenario.total.toFixed(2) }}</div>
        </div>


      </div>
    </collapsible-box>

    <collapsible-box :is-collapsable="false" variant="border" title="Weighted cost breakdown" size="m"
                     :stretch-content="true">
      <div class="report-content-container--3-col">

        <div class="report-content-row">
          <div></div>
          <div class="report-content-data-header-cell">total [&euro;]</div>
          <div class="report-content-data-header-cell">share [%]</div>
        </div>

        <div class="report-content-row">
          <div>MEK A</div>
          <div class="report-content-data-cell">{{ report.costs.mek_a.total.toFixed(2) }}</div>
          <div class="report-content-data-cell">{{ (report.costs.mek_a.percentage * 100).toFixed(2) }}</div>
        </div>

        <div class="report-content-row">
          <div>FCA fee</div>
          <div class="report-content-data-cell">{{ report.costs.fca_fees.total.toFixed(2) }}</div>
          <div class="report-content-data-cell">{{ (report.costs.fca_fees.percentage * 100).toFixed(2) }}</div>
        </div>

        <div class="report-content-row">
          <div>Pre carriage</div>
          <div class="report-content-data-cell">{{ report.costs.pre_run.total.toFixed(2) }}</div>
          <div class="report-content-data-cell">{{ (report.costs.pre_run.percentage * 100).toFixed(2) }}</div>
        </div>

        <div class="report-content-row">
          <div>Main run</div>
          <div class="report-content-data-cell">{{ report.costs.main_run.total.toFixed(2) }}</div>
          <div class="report-content-data-cell">{{ (report.costs.main_run.percentage * 100).toFixed(2) }}</div>
        </div>

        <div class="report-content-row">
          <div>Post carriage</div>
          <div class="report-content-data-cell">{{ report.costs.post_run.total.toFixed(2) }}</div>
          <div class="report-content-data-cell">{{ (report.costs.post_run.percentage * 100).toFixed(2) }}</div>
        </div>

        <div class="report-content-row">
          <div>Custom duty</div>
          <div class="report-content-data-cell">{{ report.costs.custom.total.toFixed(2) }}</div>
          <div class="report-content-data-cell">{{ (report.costs.custom.percentage * 100).toFixed(2) }}</div>
        </div>

        <div class="report-content-row">
          <div>Repackaging</div>
          <div class="report-content-data-cell">{{ report.costs.repacking.total.toFixed(2) }}</div>
          <div class="report-content-data-cell">{{ (report.costs.repacking.percentage * 100).toFixed(2) }}</div>
        </div>

        <div class="report-content-row">
          <div>Handling</div>
          <div class="report-content-data-cell">{{ report.costs.handling.total.toFixed(2) }}</div>
          <div class="report-content-data-cell">{{ (report.costs.handling.percentage * 100).toFixed(2) }}</div>
        </div>

        <div class="report-content-row">
          <div>Space cost</div>
          <div class="report-content-data-cell">{{ report.costs.storage.total.toFixed(2) }}</div>
          <div class="report-content-data-cell">{{ (report.costs.storage.percentage * 100).toFixed(2) }}</div>
        </div>

        <div class="report-content-row">
          <div>Capital cost</div>
          <div class="report-content-data-cell">{{ report.costs.capital.total.toFixed(2) }}</div>
          <div class="report-content-data-cell">{{ (report.costs.capital.percentage * 100).toFixed(2) }}</div>
        </div>

        <div class="report-content-row">
          <div>Disposal cost</div>
          <div class="report-content-data-cell">{{ report.costs.disposal.total.toFixed(2) }}</div>
          <div class="report-content-data-cell">{{ (report.costs.disposal.percentage * 100).toFixed(2) }}</div>
        </div>

      </div>
    </collapsible-box>


    <collapsible-box class="report-content-container" variant="border" :title="premise.destination.name"
                     :key="premise.id" :stretch-content="true" v-for="premise in report.premises">
      <div>
        <report-route :sections="premise.sections" :destination="premise.destination" ></report-route>

        <div class="report-sub-header">Premisses</div>

        <div class="report-content-container--2-col">

          <div class="report-content-row">
            <div>Annual Quantity</div>
            <div class="report-content-data-cell">{{ premise.annual_quantity }}</div>
          </div>

          <div class="report-content-row">
            <div>HS code</div>
            <div class="report-content-data-cell">{{ premise.hs_code }}</div>
          </div>

          <div class="report-content-row">
            <div>Tariff rate</div>
            <div class="report-content-data-cell">{{ (premise.tariff_rate * 100).toFixed(2) }}%</div>
          </div>

          <div class="report-content-row">
            <div>Oversea share</div>
            <div class="report-content-data-cell">{{ (premise.oversea_share * 100).toFixed(2) }}%</div>
          </div>

          <div class="report-content-row" v-if="premise.air_freight_share">
            <div>Airfreight share</div>
            <div class="report-content-data-cell">{{ (premise.air_freight_share * 100).toFixed(2) }}%</div>
          </div>

          <div class="report-content-row">
            <div>Transit time</div>
            <div class="report-content-data-cell">{{ premise.transport_time }}</div>
          </div>

        </div>

        <div class="report-sub-header">Packaging</div>

        <div class="report-content-container--2-col">

          <div class="report-content-row">
            <div>HU dimensions [{{ premise.dimension_unit }}]</div>
            <div class="report-content-data-cell">{{ toFixedDimension(premise.length, premise.dimension_unit) }} x {{ toFixedDimension(premise.width, premise.dimension_unit) }} x {{ toFixedDimension(premise.height, premise.dimension_unit) }} </div>
          </div>

          <div class="report-content-row">
            <div>HU weight [{{ premise.weight_unit }}]</div>
            <div class="report-content-data-cell">{{ toFixedWeight(premise.weight, premise.weight_unit) }} </div>
          </div>

          <div class="report-content-row">
            <div>HU unit count</div>
            <div class="report-content-data-cell">{{ premise.hu_unit_count }} </div>
          </div>

          <div class="report-content-row">
            <div>Mixable HU</div>
            <div class="report-content-data-cell">{{ premise.mixed ? 'yes' : 'no' }} </div>
          </div>

          <div class="report-content-row">
            <div>Stacking factor</div>
            <div class="report-content-data-cell">{{ premise.layer }} </div>
          </div>

          <div class="report-content-row">
            <div>Container unit count</div>
            <div class="report-content-data-cell">{{ premise.unit_count * premise.hu_unit_count }} </div>
          </div>

          <div class="report-content-row">
            <div>Container type</div>
            <div class="report-content-data-cell">{{ premise.container_type }} </div>
          </div>

          <div class="report-content-row">
            <div>Limiting factor</div>
            <div class="report-content-data-cell">{{ premise.weight_exceeded ? 'weight' : 'volume' }} </div>
          </div>




        </div>


      </div>
    </collapsible-box>
  </div>
</template>

<script>

import ReportChart from "@/components/UI/ReportChart.vue";
import Box from "@/components/UI/Box.vue";
import CollapsibleBox from "@/components/UI/CollapsibleBox.vue";
import ReportRoute from "@/components/UI/ReportRoute.vue";

export default {
  name: "Report",
  components: {ReportRoute, CollapsibleBox, Box, ReportChart},
  computed: {},
  props: {
    report: {
      type: Object,
      required: true
    }
  },
  methods: {
    toFixedDimension(value, unit) {
      if(unit === 'm') {
        return value.toFixed(4);
      } else if(unit === 'cm') {
        return value.toFixed(2);
      } else if(unit === 'mm') {
        return value.toFixed();
      }
    },
    toFixedWeight(value, unit) {
      if (unit === 'kg') {
        return value.toFixed(2);
      } else if (unit === 'g') {
        return value.toFixed(4);
      } else if (unit === 't') {
        return value.toFixed();
      }
    }
  }
}
</script>

<style scoped>

.report-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.report-content-data-cell {
  text-align: right;
}

.report-content-data-header-cell {
  text-align: right;
  color: #001D33;
}

.report-content-container--2-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1.6rem 0;
  font-size: 1.2rem;
  width: 100%;
}

.report-content-container--3-col {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 1rem;
  margin-top: 1.6rem;
  font-size: 1.2rem;
}

.report-content-row {
  display: contents;
  color: #6B869C;
}

.report-header {
  font-size: 1.6rem;
  font-weight: 500;
  color: #001D33;
}

.report-sub-header {
  font-size: 1.4rem;
  font-weight: 500;
  color: #001D33;
  margin-top: 1.6rem;
}

</style>