<script setup lang="ts">
import XEClipboard from 'xe-clipboard'

const props = defineProps({
  data: Object
})
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',
      company: 'Dynarex Corp.',
      address: '1975 LINDEN BLVD 3RD FL SUITE # 300 ELMONT',
      phone: '+1 212 5551234'
    },
    {
      title: 'Destination Agent',
      company: '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 '
    }
  ]
})
const convertData = (data: any) => {
  return {
    basicInformation: {
      top: [
        {
          label: 'MAWB/MBL No.',
          content: data.basicInfo['MAWB/MBL No.'] || '--'
        },
        {
          label: 'HAWB/HBL No.',
          content: data.basicInfo['HAWB/HBOL'] || '--'
        },
        {
          label: 'Booking No.',
          content: data.basicInfo.Carrier_Booking_No || '--'
        },
        {
          label: 'PO No.',
          content: data.basicInfo.PO_NO || '--'
        }
      ]
    },
    businessPartners: [
      {
        title: 'Origin Agent',
        company: data.businessPartners.origin.company || '--',
        address: data.businessPartners.origin.address || '--',
        phone: data.businessPartners.origin.phone || '--'
      },
      {
        title: 'Destination Agent',
        company: data.businessPartners.destination.company || '--',
        address: data.businessPartners.destination.address || '--',
        phone: data.businessPartners.destination.phone || '--'
      }
    ],
    packing: [
      {
        label: 'Quantity / Unit',
        content: data.packing['Quantity/Unit'] || '--'
      },
      {
        label: 'G. Weight',
        content: data.packing['G. Weight'] || '--'
      },
      {
        label: 'Ch. Weight',
        content: data.packing['Ch. Weight'] || '--'
      },
      {
        label: 'Volume',
        content: data.packing.Volume || '--'
      }
    ]
  }
}
watch(
  () => props.data,
  (newVal) => {
    if (newVal) {
      allData.value = convertData(newVal)
    }
  },
  { immediate: true, deep: true }
)

const handleCopy = (data: any) => {
  const sanitizedData = data.map((item: string) => {
    return item
      ? item
          .replace(/[\r\n]+/g, ' ')
          .replace(/\s+/g, ' ')
          .trim()
      : ''
  }) // 用空格替换换行符
  const copyText = sanitizedData.join('\n') // 拼接为单行文本
  if (XEClipboard.copy(copyText)) {
    ElMessage.success('Copy success')
  }
}
</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">
          {{ 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 }}
            <el-button class="el-button--text copy-btn">
              <span
                class="font_family icon-icon_clone_b copy-icon"
                @click="handleCopy([item.company, item.address, item.phone])"
              ></span
            ></el-button>
          </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.company
              }}</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: 20px;
    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">
.copy-btn {
  display: inline-flex;
  align-items: center;
  height: 16px !important;
  width: 16px;
  padding: 0 !important;
  color: var(--color-neutral-2);
  & > span {
    display: block;
    height: 16px;
    width: 16px;
  }
  .font_family {
    font-size: 12px !important;
    color: var(--color-neutral-1) !important;
  }
}
</style>
