<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()

const allData: any = ref({
  basicInformation: {
    top: [
      {
        label: 'MAWB/MBL No.',
        content: 'B83131200164'
      },
      {
        label: 'HAWB/HBL No.',
        content: 'ADSZXA600324',
        type: 'link'
      },
      {
        label: 'Booking No.',
        content: 'NAM1766636'
      },
      {
        label: 'PO No.',
        content: '258904-3'
      }
    ]
  },
  businessPartners: [
    {
      title: 'Origin Agent',
      conpany: 'Dynarex Corp.',
      address: '1975 LINDEN BLVD 3RD FL SUITE # 300 ELMONT',
      phone: '+1 212 5551234'
    },
    {
      title: 'Destination Agent',
      conpany: 'Dynarex Corp.',
      address: '1975 LINDEN BLVD 3RD FL SUITE # 300 ELMONT',
      phone: '+1 212 5551234'
    }
  ],
  packing: [
    {
      label: 'Quantity / Unit',
      content: 'ADSZXA600324'
    },
    {
      label: 'G. Weight',
      content: 'ADSZXA600324'
    },
    {
      label: 'Ch. Weight',
      content: 'ADSZXA600324'
    },
    {
      label: 'Volume',
      content: 'ADSZXA600324'
    }
  ],
  marksAndDescription: [
    {
      label: 'Marks',
      content: 'TO: ABC COMPANY, NEW YORK, USA / PACKAGES 1/50 / FRAGILE'
    },
    {
      label: 'Description',
      content:
        '50 CARTONS OF CERAMIC VASES, GROSS WEIGHT 1000KG, NET WEIGHT 950KG, MADE IN CHINAERAMIC VASES, GROSS WEIGHT 1000KG,50 CARTONS OF CERAMIC VASES, GROSS WEIGHT 1000KG, NET WEIGHT 950KG, MADE IN CHINA 50 CARTONS OF CERAMIC VASES, GROSS WEIGHT 1000KG, NET WEIGHT 950KG, MADE IN CHINAERAMIC VASES, GROSS WEIGHT 1000KG,50 CARTONS OF CERAMIC VASES, GROSS WEIGHT 1000KG, NET WEIGHT 950KG, MADE IN CHINA 50 CARTONS OF CERAMIC VASES, GROSS WEIGHT 1000KG, NET WEIGHT 950KG, MADE IN CHINAERAMIC VASES, GROSS WEIGHT 1000KG,50 CARTONS OF CERAMIC VASES, GROSS WEIGHT 1000KG, NET WEIGHT 950KG, MADE IN CHINA 50 CARTONS OF CERAMIC VASES, GROSS WEIGHT 1000KG, NET WEIGHT 950KG, MADE IN CHINAERAMIC VASES, GROSS WEIGHT 1000KG,50 CARTONS OF CERAMIC VASES, GROSS WEIGHT 1000KG, NET WEIGHT 950KG, MADE '
    }
  ]
})

// 跳转到shipment页面
const handLink = (id: string) => {
  router.push({ path: '/tracking', query: { id } })
}
</script>

<template>
  <div class="basic-information">
    <div class="left-section">
      <div v-for="item in allData.basicInformation.top" :key="item.label" class="data-item">
        <div class="title">
          <span>{{ item.label }}</span>
        </div>
        <div class="content" @click="handLink(item.content)">
          {{ item.content }}
        </div>
      </div>

      <div v-for="item in allData.basicInformation.bottom" :key="item.label" class="data-item">
        <div class="title">{{ item.label }}</div>
        <div class="content">{{ item.content }}</div>
      </div>
    </div>
    <div class="right-section">
      <div class="business-partner">
        <div class="item" v-for="item in allData.businessPartners" :key="item.title">
          <div class="title">{{ item.title }}</div>
          <div class="content">
            <div class="info">
              <span class="font_family icon-icon_company_b"></span>
              <span style="color: var(--color-neutral-1); font-weight: 600">{{
                item.conpany
              }}</span>
            </div>
            <div class="info">
              <span style="margin-left: -2px" class="font_family icon-icon_location_b"></span>
              <span>{{ item.address }}</span>
            </div>
            <div class="info">
              <span class="font_family icon-icon_phone_b"></span>
              <span>{{ item.phone }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="packing">
        <div class="header">Packing</div>
        <div class="content">
          <div class="data-item" v-for="item in allData.packing" :key="item.label">
            <div class="title">{{ item.label }}</div>
            <div class="content">{{ item.content }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.basic-information {
  display: flex;
  padding-left: 16px;

  .left-section {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 334px;
    padding: 16px 16px 16px 0;
    border-right: 1px solid var(--color-border);
    .data-item {
      &:has(.ref-no-content) {
        gap: 0px;
      }
      .link {
        color: var(--color-theme);
        cursor: pointer;
      }
      .ref-no-content {
        display: flex;
        justify-content: space-between;
        width: 100%;
        padding: 0 4px;
        line-height: 24px;
        &:hover {
          background-color: var(--border-hover-color);
          border-radius: 6px;
        }
        .icon-icon_delete_b {
          font-size: 14px;
          transform: scale(1.2);
          color: var(--color-neutral-1);
          cursor: pointer;
        }
      }
    }

    :deep(.el-divider--horizontal) {
      margin: 0px;
    }
  }
}

.left-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 334px;
  padding: 10px 16px 8px 0;
  border-right: 1px solid var(--color-border);

  :deep(.el-divider--horizontal) {
    margin: 0px;
  }
}

.right-section {
  flex: 1;
}

.business-partner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: 10px 16px 0;

  .item {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;

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

    & > .content {
      display: flex;
      flex-direction: column;
      gap: 8px;
      height: 100%;
      padding: 8px;
      background-color: var(--color-header-bg);
      border-radius: 6px;

      .info {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 4px;
        .font_family {
          margin-top: 0;
          font-size: 16px;
          color: var(--color-neutral-1);
        }
        span {
          margin-top: 2px;
          color: var(--color-neutral-2);
        }
      }
    }
  }
}

.packing,
.marks-and-description {
  margin-top: 16px;
  border-top: 1px solid var(--color-border);

  & > .header {
    height: 48px;
    padding: 0 16px;
    background-color: var(--color-header-bg);
    line-height: 48px;
    font-size: 18px;
    font-weight: 700;
  }

  .ellipsis-3-lines {
    // display: -webkit-box;
    // -webkit-box-orient: vertical;
    // -webkit-line-clamp: 3;
    // overflow: hidden;

    // /* 其他样式 */
    // line-height: 1.5em;
    // position: relative;

    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    &:after {
      content: '...';
      position: absolute;
      bottom: 0;
      right: 0;
      padding-right: 90px;
      padding-left: 17px;
      background: linear-gradient(to right, transparent, rgb(255, 255, 250) 17px, white 40px);
    }
  }
}

.packing {
  & > .content {
    display: flex;
    padding: 16px;
    & > .data-item {
      flex: 1;
    }
  }
}

.marks-and-description {
  & > .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 16px;
  }

  & > .data-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;

    & > .data-item {
      flex: 1;
    }
  }
  .description-info {
    line-height: 21px;
    .description-see-all {
      position: absolute;
      top: 40px;
      right: 26px;
    }
  }
}
</style>
<style lang="scss">
div.el-popper.marks-popover {
  border-radius: 12px;
  overflow: hidden;
  .el-popover__title {
    height: 48px;
    padding-left: 16px;
    background-color: var(--color-header-bg);
    line-height: 48px;
    font-size: 18px;
    font-weight: 700;
  }
  .description-info {
    padding: 0px 16px 16px;
    font-weight: 500;
  }
}
</style>
