<script setup lang="ts">
import dayjs from 'dayjs'
const props = defineProps({
  data: Object
})
const routes: any = ref([
  {
    serialNumber: 'Leg 1',
    mode: 'Sea',
    origin: 'ShenzhenShwe',
    destination: 'Valenciaenzq',
    etd: 'Jun-08-2024 12:00 AM',
    atd: 'Jun-10-2024 12:00 AM',
    eta: 'Jun-14-2024 12:00 AM',
    ata: 'Jun-16-2024 12:00 AM',
    vessel: 'MSC ALLEGRA',
    voyageNo: 'FJ428W',
    isCollapse: false
  },
  {
    serialNumber: 'Leg 2',
    mode: 'Sea',
    origin: 'Valenciaenz',
    destination: 'New York',
    etd: 'Jun-15-2024 12:00 AM',
    atd: 'Jun-17-2024 12:00 AM',
    eta: 'Jun-21-2024 12:00 AM',
    ata: 'Jun-23-2024 12:00 AM',
    vessel: 'MSC ALLEGRA',
    voyageNo: 'FJ428W',
    isCollapse: false
  }
])

watch(
  () => props.data,
  (newVal) => {
    if (newVal) {
      routes.value = newVal.routes
    } else {
      routes.value = []
    }
  },
  {
    immediate: true,
    deep: true
  }
)

const formatDate = (date: string) => {
  return date ? dayjs(date).format('MMM-DD-YYYY HH:mm A') : '--'
}
</script>

<template>
  <div class="routes-view">
    <div class="title">Total number of legs: {{ routes.length }}</div>
    <div class="routes">
      <div class="route-item" v-for="(item, index) in routes" :key="item.serialNumber">
        <div class="basic-info">
          <div class="serial-number border-right">Leg {{ index + 1 }}</div>
          <div class="mode border-right">
            <span class="font_family icon-icon_ocean_b"></span>
            {{ item.mode }}
          </div>
          <div class="place border-right">
            <div class="origin">
              <div class="title">Origin</div>
              <div class="content">
                <span>{{ item.origin }}</span>
                <div class="line_container">
                  <hr color="#000000" />
                  <div class="right-icon"></div>
                </div>
              </div>
            </div>
            <div class="destination">
              <div class="title">Destination</div>
              <div class="content">{{ item.destination }}</div>
            </div>
          </div>
          <div class="etd border-right">
            <div class="title">ETD</div>
            <div class="content">{{ formatDate(item.etd) }}</div>
          </div>
          <div class="eta">
            <div class="title">ETA</div>
            <div class="content">{{ formatDate(item.eta) }}</div>
            <span
              @click="item.isCollapse = !item.isCollapse"
              :class="{ collapse: item.isCollapse }"
              class="font_family icon-icon_dropdown_b"
            ></span>
          </div>
        </div>
        <div class="detail-info" v-if="item.isCollapse">
          <div class="date-info">
            <div class="origin">
              <div class="place">
                <span style="font-size: 24px" class="font_family icon-icon_location_fill_b"></span>
                <span class="label">{{ item.origin }}</span>
                <div class="line_container">
                  <hr color="#000000" />
                  <div class="right-icon"></div>
                </div>
              </div>
              <div class="etd">
                <span class="font_family icon-icon_date_b"></span>
                <span>ETD: </span>
                <span class="value">{{ formatDate(item.etd) }}</span>
              </div>
              <div class="atd">
                <span class="font_family icon-icon_date_b"></span>
                <span>ATD: </span>
                <span class="value">{{ formatDate(item.atd) }}</span>
              </div>
            </div>
            <div class="destination">
              <div class="place">
                <span style="font-size: 24px" class="font_family icon-icon_location_fill_b"></span>
                <span class="label">{{ item.destination }}</span>
              </div>
              <div class="eta">
                <span class="font_family icon-icon_date_b"></span>
                <span>ETA: </span>
                <span class="value">{{ formatDate(item.eta) }}</span>
              </div>
              <div class="ata">
                <span class="font_family icon-icon_date_b"></span>
                <span>ATA: </span>
                <span class="value">{{ formatDate(item.ata) }}</span>
              </div>
            </div>
          </div>
          <div class="transport-info">
            <div class="item">
              <div class="title">Vessel</div>
              <div class="content">{{ item.vessel }}</div>
            </div>
            <div class="item">
              <div class="title">Voyage No.</div>
              <div class="content">{{ item.voyageNo }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.routes-view {
  padding: 16px;

  & > .title {
    margin-bottom: 16px;
    font-weight: 700;
  }
}

.route-item {
  border: 1px solid var(--color-border);
  border-radius: 6px;

  & + .route-item {
    margin-top: 8px;
  }
}

.basic-info {
  display: flex;
  height: 80px;

  .serial-number {
    width: 80px;
    background: var(--color-header-bg);
    font-weight: 700;
    line-height: 80px;
    text-align: center;
  }

  .mode {
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: flex-end;
    width: 80px;
    padding-bottom: 8px;
    font-weight: 700;

    .font_family {
      font-size: 40px;
    }
  }
  .origin {
    flex: 1;
  }

  .destination {
    flex-basis: 100px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 16px;
  }
  .place {
    flex: 1 1 140px;
    display: flex;
    align-items: center;
    padding: 0 16px;

    .title {
      margin-top: 2px;
    }

    .content {
      position: relative;
      display: flex;
      align-items: center;
      margin-top: 8px;
      font-size: 18px;
      font-weight: 700;
      color: var(--color-neutral-1);
      white-space: nowrap;
    }
  }

  div.eta {
    flex-basis: 80px;
    position: relative;

    & > .font_family {
      position: absolute;
      right: 20px;
      font-size: 20px;
      transition: all 0.3s;
      transform: rotate(0deg);
    }

    .collapse {
      transform: rotate(180deg);
    }
  }

  .etd,
  .eta {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 16px;
  }

  .place,
  .etd,
  .eta {
    .title {
      font-size: 12px;
      color: var(--color-neutral-2);
    }

    .content {
      font-weight: 700;
    }
  }
}

.detail-info {
  display: flex;
  gap: 8px;
  padding: 8px;
  border-top: 1px solid var(--color-border);

  .line_container hr {
    border-color: #484c52;
    border-top: none;
  }

  .line_container .right-icon {
    border-top: 1px solid #484c52;

    border-radius: 0 1px 1px 0;
    top: -4px;
    right: 0px;
    width: 10px;
    height: 12px;
  }
}

.date-info {
  flex: 1;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 8px 12px;
  background-color: var(--color-header-bg);
  border-radius: 6px;

  .origin {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .destination {
    flex-basis: 200px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 16px;
  }

  .place {
    display: flex;
    align-items: center;
    gap: 8px;

    .label {
      font-size: 18px;
      font-weight: 700;
    }

    .content {
      position: relative;
      display: flex;
      align-items: center;
      margin-top: 8px;
      font-size: 18px;
      font-weight: 700;
      color: var(--color-neutral-1);
    }
  }

  .etd,
  .eta,
  .atd,
  .ata {
    display: flex;
    align-items: center;
    margin-left: 5px;
    font-size: 12px;
    line-height: 16px;
    color: var(--color-neutral-2);

    .font_family {
      margin-right: 12px;
    }

    .value {
      margin-left: 4px;
      font-weight: 700;
    }
  }
}

.transport-info {
  width: 288px;
  padding: 8px 16px;
  background-color: var(--color-header-bg);
  border-radius: 6px;

  .item {
    .title {
      margin-bottom: 4px;
      font-size: 12px;
      color: var(--color-neutral-2);
    }

    .content {
      font-weight: 700;
    }

    & + .item {
      margin-top: 16px;
    }
  }
}

.border-right {
  border-right: 1px solid var(--color-border);
}

.line_container {
  flex: 1;
  position: relative;
  margin-left: 16px;
}

.line_container hr {
  width: 100%;
  min-width: 16px;
  border-radius: 0 2px 6px 0;
}

.line_container .right-icon {
  position: absolute;
  top: -3px;
  right: 0px;
  width: 10px;
  height: 11px;
  border-top: 2px solid #000000;
  transform: rotate(30deg);
  border-radius: 0 1px 0 0;
}
</style>
