<script setup lang="ts">
import { useRouter } from 'vue-router'
const router = useRouter()
const inputVModel = ref('')

const handleSearchNo = () => {
  router.push(`/public-tracking/detail?searchNo=${inputVModel.value}`)
  console.log('search no')
}
</script>

<template>
  <div class="public-tracking-search">
    <div class="search-info">
      <div class="title">Tracking</div>
      <el-input
        class="search-input"
        v-model="inputVModel"
        placeholder="Search a reference number to see shipment details"
      >
        <template #append>
          <span @click="handleSearchNo" class="font_family icon-icon_search_b"></span>
        </template>
      </el-input>
      <div class="empty">
        <VEmpty>
          <template #default>
            <div class="suggestion-info">
              <p>We support the following references number to find shipment:</p>
              <p>
                · Tracking No./Booking No./HAWB No./MAWB No./PO No./Quote No./Invoice No./Container
                No.
              </p>
            </div>
          </template>
        </VEmpty>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.public-tracking-search {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background: url(./image/bg.png) no-repeat center center;
  background-size: cover;
  z-index: 1;
  height: 100%;
}

.public-tracking-search::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.85); /* 半透明白色背景层 */
  z-index: -1; /* 将伪元素放置在背景图片的下方 */
}

.search-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  & > .title {
    margin-bottom: 24px;
    font-size: 40px;
    color: var(--color-theme);
  }
  .search-input {
    width: 480px;
    height: 40px;
    :deep(.el-input__wrapper) {
      border-radius: 6px 0 0 6px;
      background-color: var(--color-table-header-bg);
    }
    :deep(.el-input-group__append) {
      padding: 0 12px;
      background-color: black;
      border: 1px solid black;
      border-radius: 0 6px 6px 0;
      box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
      span {
        color: white;
      }
    }
  }
  .empty {
    width: 480px;
    height: 315px;
    padding: 16px;
    background-color: white;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    .suggestion-info {
      & > p {
        color: var(--color-neutral-1);
      }
    }
  }
}
</style>
