<script setup lang="ts">
import dayjs from 'dayjs'
import { transportationMode } from '@/components/TransportationMode'
import { useOverflow } from '@/hooks/useOverflow'

const props = defineProps({
  data: Object
})
const routes: any = ref([
  {
    serialNumber: 'Leg 1',
    mode: 'Sea',
    origin: 'ShenzhenShw',
    destination: 'ShenzhenS',
    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: 'ValeShenzhenShweShenzhenShweShenzhenShweShenzhenShwenciaenz',
    destination: 'ShenzhenShweShenzhenShweShenzhenShweShenzhenShwe',
    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) => {
  if (!date) {
    return '--'
  } else {
    return date.length > 12
      ? dayjs(date).format('MMM-DD-YYYY hh:mm A')
      : dayjs(date).format('MMM-DD-YYYY')
  }
}

const basicOriginRef = ref()
const basicDestinationRef = ref()
const detailOriginRef = ref()
const detailDestinationRef = ref()

const { isOverflow: isBasicOriginOverflow } = useOverflow(basicOriginRef, props)
const { isOverflow: isBasicDestinationOverflow } = useOverflow(basicDestinationRef, props)
const { isOverflow: isDetailOriginOverflow } = useOverflow(detailOriginRef, props)
const { isOverflow: isDetailDestinationOverflow } = useOverflow(detailDestinationRef, props)
</script>

<template>
  <div class="routes-view">
    <div class="title">Total number of legs: {{ routes.length }}</div>
    <div class="routes">
      <div
        class="route-item"
        @click="item.isCollapse = !item.isCollapse"
        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" :class="[`icon-${transportationMode?.[item.mode]}`]"></span>
            {{ item.mode_label }}
          </div>
          <div class="place border-right">
            <div class="origin">
              <div class="title">Origin</div>
              <div class="content">
                <el-tooltip v-if="isBasicOriginOverflow?.[index]" placement="top">
                  <template #content>{{ item.origin || '--' }}</template>
                  <span ref="basicOriginRef" class="single-line-ellipsis">{{
                    item.origin || '--'
                  }}</span>
                </el-tooltip>
                <span v-else ref="basicOriginRef" class="single-line-ellipsis">{{
                  item.origin || '--'
                }}</span>

                <div class="line_container">
                  <hr color="#000000" />
                  <div class="right-icon"></div>
                </div>
              </div>
            </div>
            <div class="destination" ref="">
              <div class="title">Destination</div>
              <el-tooltip v-if="isBasicDestinationOverflow?.[index]" placement="top">
                <template #content>{{ item.destination || '--' }}</template>
                <span ref="basicDestinationRef" class="content single-line-ellipsis">{{
                  item.destination || '--'
                }}</span>
              </el-tooltip>
              <span v-else ref="basicDestinationRef" class="content single-line-ellipsis">{{
                item.destination || '--'
              }}</span>
            </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
              :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>

                <el-tooltip v-if="isDetailOriginOverflow?.[index]" placement="top">
                  <template #content>{{ item.origin || '--' }}</template>
                  <span ref="detailOriginRef" class="label origin-label single-line-ellipsis">{{
                    item.origin || '--'
                  }}</span>
                </el-tooltip>
                <span
                  v-else
                  ref="detailOriginRef"
                  class="label origin-label single-line-ellipsis"
                  >{{ 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>

                <el-tooltip v-if="isDetailDestinationOverflow?.[index]" placement="top">
                  <template #content>{{ item.destination || '--' }}</template>
                  <span ref="detailDestinationRef" class="label single-line-ellipsis">{{
                    item.destination || '--'
                  }}</span>
                </el-tooltip>
                <span v-else ref="detailDestinationRef" class="label single-line-ellipsis">{{
                  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;
  cursor: pointer;
  &:hover {
    background-color: #fef8f3;
    .serial-number {
      background-color: #f6f2ee;
    }
  }
  .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 {
    max-width: 40%;
    margin-left: 16px;
    & > .content {
      width: 100%;
      margin-top: 8px;
      padding-top: 2px;
      font-size: 18px;
      font-weight: 700;
    }
  }
  .place {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0 16px;
    overflow: hidden;

    .title {
      margin-top: 2px;
    }
    .origin {
      width: calc(60% - 16px);
    }
  }
  .origin {
    .content {
      position: relative;
      display: flex;
      align-items: center;
      width: 100%;
      margin-top: 8px;
      font-size: 18px;
      font-weight: 700;
      color: var(--color-neutral-1);
      white-space: nowrap;
    }
  }

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

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

  .etd,
  .eta {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 16px;
  }
  .etd {
    min-width: 180px;
  }
  .eta {
    min-width: 220px;
  }
  .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 {
    flex: 1;
    margin-left: 8px;
  }
  .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: -2px;
    right: 0px;
    width: 10px;
    height: 12px;
  }
  .date-info {
    flex: 1;
    max-width: calc(100% - (100% - 165px) / 3);
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 8px;
    padding-right: 16px;
    background-color: var(--color-header-bg);
    border-radius: 6px;

    .origin {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      overflow: hidden;
      .label {
        margin-top: 1px;
      }
    }

    .destination {
      flex-shrink: 0; /* 防止右边的子盒子缩小 */
      flex-basis: auto; /* 根据内容决定初始宽度 */
      max-width: 40%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .label {
        width: calc(100% - 40px);
        margin-top: 1px;
      }
    }

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

      .label {
        display: inline-block;
        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: calc((100% - 165px) / 3);
    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;
  min-width: 26px;
  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;
}

.single-line-ellipsis {
  height: 18px;
  display: inline-block; /* 或者根据需要使用 inline-block */
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
}
</style>
