<script lang="ts" setup>
import { useRouter } from 'vue-router'
import dayjs from 'dayjs'
import { formatTimezoneByUTCorGMT } from '@/utils/tools'

const router = useRouter()
interface RecentItem {
  Title: string
  name: string
  bookingNumber: string
  IsSubscribe: boolean
  shipperName: string
  consigneeName: string
  startStation: string
  ETD: string
  endStation: string
  ETA: string
  type: string
  Arrived: string
  Time: string
  timezone: string
  act_time: string
}
interface Props {
  RecentStatusList: RecentItem[]
}
const props = withDefaults(defineProps<Props>(), {})
const RouteToDetail = (val: any) => {
  router.push({
    path: '/tracking/detail',
    query: {
      a: val.a,
      _schemas: val._schemas
    }
  })
}
</script>
<template>
  <div class="recent_route" v-for="(item, index) in props.RecentStatusList" :key="index">
    <div class="recent_header">
      <!-- 头部 -->
      <div class="recent-header-left">
        <div>
          <span class="iconfont_icon">
            <svg class="iconfont iconfont_route" aria-hidden="true">
              <use xlink:href="#icon-icon_ocean_b"></use>
            </svg>
          </span>
        </div>
        <div class="recent-title" @click="RouteToDetail(item)">{{ item.Title }}</div>
        <div class="recent-name">{{ item.name }}</div>
        <div class="recent-booking">
          Booking No.:
          <span>{{ item.bookingNumber }}</span>
        </div>
      </div>
      <!-- <div class="recent-header-right">
        <el-button
          class="recent_button"
          @click="item.IsSubscribe = !item.IsSubscribe"
          :class="item.IsSubscribe ? 'IsSubscribe' : ''"
        >
          <span v-if="item.IsSubscribe" class="iconfont_icon">
            <svg class="iconfont" aria-hidden="true">
              <use xlink:href="#icon-icon_marked_b"></use>
            </svg>
          </span>
          <span v-else class="iconfont_icon">
            <svg class="iconfont" aria-hidden="true">
              <use xlink:href="#icon-icon_unmark_b"></use>
            </svg>
          </span>
          <span class="Subscribe">Subscribe</span>
        </el-button>
      </div> -->
    </div>
    <div class="recent_content">
      <!-- 左 -->
      <div class="recent-content-left">
        <div class="left_title">
          Shipper: <span class="left_text">{{ item.shipperName }}</span>
        </div>
        <div class="left_title">
          Consignee: <span class="left_text">{{ item.consigneeName }}</span>
        </div>
      </div>
      <!-- 中 -->
      <div class="recent-content-middle">
        <div class="startStation">
          <div class="startStation_title">
            <span class="iconfont_icon">
              <svg class="iconfont" aria-hidden="true">
                <use xlink:href="#icon-icon_location_fill_b"></use>
              </svg>
            </span>
            {{ item.startStation }}
          </div>
          <div class="startStation_time">ETD: {{ item.ETD }}</div>
        </div>
        <div class="StationIcon">
          <div>
            <span class="iconfont_icon">
              <svg class="iconfont" aria-hidden="true">
                <use xlink:href="#icon-icon_path_b"></use>
              </svg>
            </span>
          </div>
          <div style="height: 21px"></div>
        </div>
        <div class="startStation">
          <div class="startStation_title">
            <span class="iconfont_icon">
              <svg class="iconfont" aria-hidden="true">
                <use xlink:href="#icon-icon_location_fill_b"></use>
              </svg>
            </span>
            {{ item.endStation }}
          </div>
          <div class="startStation_time">ETA: {{ item.ETA }}</div>
        </div>
      </div>
      <!-- 右 -->
      <div class="recent-content-right">
        <VTag :type="item.type" style="margin-bottom: 4px">{{ item.type }}</VTag>
        <div class="right_text">{{ item.Arrived }}</div>
        <div class="startStation_time" v-if="item.Time != null">
          {{ formatTimezoneByUTCorGMT(item.Time, item.timezone) }}&nbsp;&nbsp;{{ item.timezone }}
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.recent_route {
  border-radius: var(--border-radius-12);
  border: 1px solid var(--color-border-2);
  margin: 8px;
}
.recent_header {
  background-color: var(--color-header-bg);
  border-radius: var(--border-radius-12) var(--border-radius-12) 0 0;
  border-bottom: 1px solid var(--color-border-2);
  display: flex;
  padding: 12px 16px;
  justify-content: space-between;
}
.recent-header-left,
.recent_content {
  display: flex;
  align-items: center;
}
.recent_content {
  height: 76px;
}
.iconfont_route {
  width: 24px;
  height: 24px;
}
.iconfont {
  vertical-align: -2px;
}
.recent-title {
  color: var(--tag-info-text-color);
  font-weight: 700;
  font-size: var(--font-size-5);
  margin: 0 4px 0 8px;
  cursor: pointer;
}
.recent-title:hover {
  color: var(--color-theme);
}
.recent-name {
  border: 1px solid var(--color-border-2);
  border-radius: 3px;
  background-color: rgba(43, 47, 54, 0.05);
  padding: 4px;
  margin-right: 8px;
}
.recent-booking {
  color: var(--tag-info-text-color);
  font-size: var(--font-size-3);
  font-weight: 400;
}
.recent_button {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  fill: var(--color-theme);
  .Subscribe {
    color: var(--color-theme);
  }
  &:hover {
    border: 1px solid var(--color-btn-main-plain-bg-hover);
    background-color: var(--color-btn-main-plain-bg-hover);
    fill: var(--color-theme);
    .Subscribe {
      color: var(--color-theme);
    }
  }
}
.IsSubscribe {
  border: 1px solid var(--color-theme);
  background-color: var(--color-theme);
  fill: white;
  .Subscribe {
    color: white;
  }
}
.recent-content-left {
  border-right: 1px solid var(--color-border-2);
  padding-left: 16px;
  width: 37%;
  height: 76px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  font-size: var(--font-size-3);
  line-height: 21px;
}
.recent-content-middle {
  border-right: 1px solid var(--color-border-2);
  padding-left: 8px;
  width: 37%;
  height: 76px;
  display: flex;
}
.left_title {
  color: var(--dashboard-text-color);
}
.startStation {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 21px;
}
.startStation_title {
  font-weight: 700;
  font-size: var(--font-size-3);
}
.startStation_time {
  font-size: var(--font-size-2);
  color: var(--dashboard-text-color);
}
.recent-content-right {
  width: 24%;
  padding-left: 8px;
  line-height: 16px;
}
.StationIcon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 40px;
}
.right_text {
  font-size: var(--font-size-2);
}
</style>
