<script setup lang="ts">
import FilterTags from '@/components/FliterTags'
import emitter from '@/utils/bus'
import TransportMode from '@/components/TransportMode'
import TrackingTable from './components/TrackingTable'
import DateRange from '@/components/DateRange'
import MoreFilters from '@/components/MoreFilters'
import { ref, reactive, onMounted } from 'vue'
import { useCalculatingHeight } from '@/hooks/calculatingHeight'
import { useHeaderSearch } from '@/stores/modules/headerSearch'

const headerSearch = useHeaderSearch()

const filterRef: Ref<HTMLElement | null> = ref(null)

const containerHeight = useCalculatingHeight(document.documentElement, 246, [filterRef])

const TrackingSearch = ref()
const tableLoadingTableData = ref(false)
let searchTableQeuryTracking: any = {}
const filterData = reactive({
  filtersTagData: [] as Array<string>,
  transportData: [] as Array<string>,
  daterangeData: [] as Array<string>,
  morefiltersData: [] as Array<string>,
  dashboardData: [] as Array<string>
})
const tagsData: any = ref([])
const handleClose = (tag: any) => {
  emitter.emit('clearTag', tag)
  tagsData.value.splice(tagsData.value.indexOf(tag), 1)
  if (
    sessionStorage.getItem('reportList') != null ||
    sessionStorage.getItem('reportList') != '{}'
  ) {
    const reportlist = JSON.parse(sessionStorage.getItem('reportList') as string) || {}
    let data = JSON.parse(sessionStorage.getItem('tagsList') as string) || {}
    if (tag.includes('Transport')) {
      delete reportlist.transport_mode
    } else if (tag.includes('Day') || tag.includes('CO2e')) {
      delete reportlist._reportRef
      delete reportlist._reportType
      delete reportlist._reportRefe_date
      delete reportlist._reportRefb_date
      delete reportlist._reportStationType
      delete reportlist._reportDataType
      delete reportlist._reportStationType
      filterData.dashboardData = []
      data = {}
    } else if (tag.includes('ETD')) {
      filterData.daterangeData.forEach((item: any, index: any) => {
        if (item.includes('ETD')) {
          filterData.daterangeData.splice(index, 1)
        }
      })
      delete reportlist.etd_start
      delete reportlist.etd_end
    } else if (tag.includes('ETA')) {
      filterData.daterangeData.forEach((item: any, index: any) => {
        if (item.includes('ETA')) {
          filterData.daterangeData.splice(index, 1)
        }
      })
      delete reportlist.eta_start
      delete reportlist.eta_end
    } else if (tag.includes('Origin')) {
      delete reportlist.shipper_city
      delete reportlist._city_name
      filterData.dashboardData = []
    } else if (tag.includes('Destination')) {
      delete reportlist.consignee_city
    }
    sessionStorage.setItem('reportList', JSON.stringify(reportlist))
    sessionStorage.setItem('tagsList', JSON.stringify(data))
  }
  if (tag.includes('Transport')) {
    delete searchTableQeuryTracking.transport_mode
  } else if (tag.includes('Day') || tag.includes('CO2e')) {
    delete searchTableQeuryTracking._reportRef
    delete searchTableQeuryTracking._reportType
    delete searchTableQeuryTracking._reportRefe_date
    delete searchTableQeuryTracking._reportRefb_date
    delete searchTableQeuryTracking._reportStationType
    delete searchTableQeuryTracking._reportDataType
    delete searchTableQeuryTracking._reportStationType
    filterData.dashboardData = []
  } else if (tag.includes('ETD')) {
    filterData.daterangeData.forEach((item: any, index: any) => {
      if (item.includes('ETD')) {
        filterData.daterangeData.splice(index, 1)
      }
    })
    delete searchTableQeuryTracking.etd_start
    delete searchTableQeuryTracking.etd_end
  } else if (tag.includes('ETA')) {
    filterData.daterangeData.forEach((item: any, index: any) => {
      if (item.includes('ETA')) {
        filterData.daterangeData.splice(index, 1)
      }
    })
    delete searchTableQeuryTracking.eta_start
    delete searchTableQeuryTracking.eta_end
  } else if (tag.includes('Creation')) {
    delete searchTableQeuryTracking.created_time_start
    delete searchTableQeuryTracking.created_time_end
  } else if (tag.includes('Shippername')) {
    delete searchTableQeuryTracking.shipper
  } else if (tag.includes('Consigneename')) {
    delete searchTableQeuryTracking.consignee
  } else if (tag.includes('Service')) {
    delete searchTableQeuryTracking.service
  } else if (tag.includes('Incoterms')) {
    delete searchTableQeuryTracking.incoterms
  } else if (tag.includes('Notify Party')) {
    delete searchTableQeuryTracking.notify_party
  } else if (tag.includes('Bill to')) {
    delete searchTableQeuryTracking.billto
  } else if (tag.includes('Origin Agent')) {
    delete searchTableQeuryTracking.origin
  } else if (tag.includes('Destination Agent')) {
    delete searchTableQeuryTracking.agent
  } else if (tag.includes('Destination Operator')) {
    delete searchTableQeuryTracking.dest_op
  } else if (tag.includes('Sales')) {
    delete searchTableQeuryTracking.sales_rep
  } else if (tag.includes('Origin')) {
    delete searchTableQeuryTracking.shipper_city
    delete searchTableQeuryTracking._city_name
    filterData.dashboardData = []
  } else if (tag.includes('Destination')) {
    delete searchTableQeuryTracking.consignee_city
  } else if (tag.includes('Place of Receipt')) {
    delete searchTableQeuryTracking.place_of_receipt_exp
  } else if (tag.includes('Port of Loading')) {
    delete searchTableQeuryTracking.port_of_loading
  } else if (tag.includes('Place of delivery')) {
    delete searchTableQeuryTracking.place_of_delivery_exp
  } else if (tag.includes('Place of Discharge')) {
    delete searchTableQeuryTracking.port_of_discharge
  } else if (tag.includes('Vessel')) {
    delete searchTableQeuryTracking['f_vessel/vessel']
  } else if (tag.includes('Voyage')) {
    delete searchTableQeuryTracking['f_voyage/voyage']
  }
  sessionStorage.setItem('searchTableQeuryTracking', JSON.stringify(searchTableQeuryTracking))
  Gettrackingdata()
}
// 筛选框查询
const FiltersSeach = (val: any, value: any) => {
  searchTableQeuryTracking[val] = value
  sessionStorage.setItem('searchTableQeuryTracking', JSON.stringify(searchTableQeuryTracking))
  Gettrackingdata()
}
//TransportSearch
const TransportSearch = (val: any) => {
  filterData.transportData = []
  if (val.data) {
    let str = `${val.title}:${val.data}`
    filterData.transportData.push(str)
  }
  FiltersSeach('transport_mode', val.data)
  renderTagsData()
}
// defaultTransport
const defaultTransport = (val: any, value: any) => {
  filterData.transportData = []
  if (val.data) {
    let str = `${val.title}:${val.data}`
    filterData.transportData.push(str)
  }
  if (sessionStorage.getItem('searchTableQeuryTracking') == null) {
    if (
      sessionStorage.getItem('clickParams') === null ||
      sessionStorage.getItem('clickParams') === '{}'
    ) {
      searchTableQeuryTracking.transport_mode = val.data
    }
  } else {
    searchTableQeuryTracking = value
  }
}
//defaultDate
const defaultDate = (val: any, value: any, data: any) => {
  filterData.daterangeData = []
  if (Object.keys(val).length) {
    for (const key in val) {
      let str = `${key}:${val[key]}`
      filterData.daterangeData.push(str)
    }
  }
  if (sessionStorage.getItem('searchTableQeuryTracking') == null) {
    if (
      sessionStorage.getItem('clickParams') === null ||
      sessionStorage.getItem('clickParams') === '{}'
    ) {
      if (Object.keys(value).length == 0) {
        delete searchTableQeuryTracking.etd_start
        delete searchTableQeuryTracking.etd_end
      }
      for (const key in value) {
        searchTableQeuryTracking.etd_start = value[key].data[0]
        searchTableQeuryTracking.etd_end = value[key].data[1]
      }
      const trackingData = JSON.parse(localStorage.getItem('searchData'))
      if (trackingData) {
        // 根据顶部搜索框的搜索结果赋值
        initDataByHeaderSearch()
      } else {
        Gettrackingdata()
      }
    }
    // else {
    //   for (const key in value) {
    //     searchTableQeuryTracking.etd_start = value[key].data[0]
    //     searchTableQeuryTracking.etd_end = value[key].data[1]
    //   }
    // }
  } else {
    searchTableQeuryTracking = data
    if (searchTableQeuryTracking._textSearch) {
      TrackingSearch.value = searchTableQeuryTracking._textSearch
    }
    Gettrackingdata()
  }
  renderTagsData()
}
//DateRangeSearch
const DateRangeSearch = (val: any, value: any) => {
  filterData.daterangeData = []
  if (Object.keys(val).length) {
    for (const key in val) {
      let str = `${key}:${val[key]}`
      filterData.daterangeData.push(str)
    }
  }
  if (Object.keys(value).length == 0) {
    delete searchTableQeuryTracking.etd_start
    delete searchTableQeuryTracking.etd_end
    delete searchTableQeuryTracking.eta_start
    delete searchTableQeuryTracking.eta_end
    delete searchTableQeuryTracking.created_time_start
    delete searchTableQeuryTracking.created_time_end
  }
  for (const key in value) {
    if (key == 'ETD') {
      searchTableQeuryTracking.etd_start = value[key].data[0]
      searchTableQeuryTracking.etd_end = value[key].data[1]
    } else if (key == 'ETA') {
      searchTableQeuryTracking.eta_start = value[key].data[0]
      searchTableQeuryTracking.eta_end = value[key].data[1]
    } else {
      searchTableQeuryTracking.created_time_start = value[key].data[0]
      searchTableQeuryTracking.created_time_end = value[key].data[1]
    }
  }
  sessionStorage.setItem('searchTableQeuryTracking', JSON.stringify(searchTableQeuryTracking))
  Gettrackingdata()
  renderTagsData()
}
//MoreFiltersSearch
const MoreFiltersSearch = (val: any, value: any) => {
  filterData.morefiltersData = []
  if (Object.keys(value).length == 0) {
    delete searchTableQeuryTracking.shipper
    delete searchTableQeuryTracking.consignee
    delete searchTableQeuryTracking.service
    delete searchTableQeuryTracking.incoterms
    delete searchTableQeuryTracking.notify_party
    delete searchTableQeuryTracking.billto
    delete searchTableQeuryTracking.origin
    delete searchTableQeuryTracking.agent
    delete searchTableQeuryTracking.sales_rep
    delete searchTableQeuryTracking.dest_op
    delete searchTableQeuryTracking.consignee_city
    delete searchTableQeuryTracking.place_of_receipt_exp
    delete searchTableQeuryTracking.place_of_delivery_exp
    delete searchTableQeuryTracking.port_of_discharge
    delete searchTableQeuryTracking.shipper_city
    delete searchTableQeuryTracking['port_of_loading/fport_of_loading_un']
    delete searchTableQeuryTracking['f_vessel/vessel']
    delete searchTableQeuryTracking['f_voyage/voyage']
  }
  for (const key in val) {
    let str = `${key}:${val[key]}`
    filterData.morefiltersData.push(str)
    if (key == 'Shippername') {
      searchTableQeuryTracking.shipper = value[key]
    } else if (key == 'Consigneename') {
      searchTableQeuryTracking.consignee = value[key]
    } else if (key == 'Service') {
      searchTableQeuryTracking.service = value[key]
    } else if (key == 'Incoterms') {
      searchTableQeuryTracking.incoterms = value[key]
    } else if (key == 'Notify Party') {
      searchTableQeuryTracking.notify_party = value[key]
    } else if (key == 'Bill to') {
      searchTableQeuryTracking.billto = value[key]
    } else if (key == 'Origin Agent') {
      searchTableQeuryTracking.origin = value[key]
    } else if (key == 'Destination Agent') {
      searchTableQeuryTracking.agent = value[key]
    } else if (key == 'Destination Operator') {
      searchTableQeuryTracking.dest_op = value[key]
    } else if (key == 'Sales') {
      searchTableQeuryTracking.sales_rep = value[key]
    } else if (key == 'Destination') {
      searchTableQeuryTracking.consignee_city = value[key]
    } else if (key == 'Place of Receipt') {
      searchTableQeuryTracking.place_of_receipt_exp = value[key]
    } else if (key == 'Origin') {
      searchTableQeuryTracking.shipper_city = value[key]
    } else if (key == 'Port of Loading') {
      searchTableQeuryTracking['port_of_loading/fport_of_loading_un'] = value[key]
    } else if (key == 'Place of delivery') {
      searchTableQeuryTracking.place_of_delivery_exp = value[key]
    } else if (key == 'Port of Discharge') {
      searchTableQeuryTracking.port_of_discharge = value[key]
    } else if (key == 'Vessel') {
      searchTableQeuryTracking['f_vessel/vessel'] = value[key]
    } else if (key == 'Voyage') {
      searchTableQeuryTracking['f_voyage/voyage'] = value[key]
    }
  }
  sessionStorage.setItem('searchTableQeuryTracking', JSON.stringify(searchTableQeuryTracking))
  Gettrackingdata()
  renderTagsData()
}
const defaultMorefilters = (val: any, value: any, data: any) => {
  filterData.morefiltersData = []
  for (const key in val) {
    let str = `${key}:${val[key]}`
    filterData.morefiltersData.push(str)
    for (const key in val) {
      if (key == 'Shippername') {
        searchTableQeuryTracking.shipper = value[key]
      } else if (key == 'Consigneename') {
        searchTableQeuryTracking.consignee = value[key]
      } else if (key == 'Service') {
        searchTableQeuryTracking.service = value[key]
      } else if (key == 'Incoterms') {
        searchTableQeuryTracking.incoterms = value[key]
      } else if (key == 'Notify Party') {
        searchTableQeuryTracking.notify_party = value[key]
      } else if (key == 'Bill to') {
        searchTableQeuryTracking.billto = value[key]
      } else if (key == 'Destination Operator') {
        searchTableQeuryTracking.dest_op = value[key]
      } else if (key == 'Origin Agent') {
        searchTableQeuryTracking.origin = value[key]
      } else if (key == 'Destination Agent') {
        searchTableQeuryTracking.agent = value[key]
      } else if (key == 'Sales') {
        searchTableQeuryTracking.sales_rep = value[key]
      } else if (key == 'Origin') {
        searchTableQeuryTracking.shipper_city = value[key]
      } else if (key == 'Destination') {
        searchTableQeuryTracking.consignee_city = value[key]
      } else if (key == 'Place of Receipt') {
        searchTableQeuryTracking.place_of_receipt_exp = value[key]
      } else if (key == 'Port of Loading') {
        searchTableQeuryTracking.port_of_loading = value[key]
      } else if (key == 'Place of delivery') {
        searchTableQeuryTracking.place_of_delivery_exp = value[key]
      } else if (key == 'Place of Discharge') {
        searchTableQeuryTracking.port_of_discharge = value[key]
      } else if (key == 'Vessel') {
        searchTableQeuryTracking['f_vessel/vessel'] = value[key]
      } else if (key == 'Voyage') {
        searchTableQeuryTracking['f_voyage/voyage'] = value[key]
      }
    }
    if (sessionStorage.getItem('searchTableQeuryTracking') != null) {
      searchTableQeuryTracking = data
    }
  }
}
const clearfilters = () => {
  TrackingSearch.value = ''
  filterData.filtersTagData = []
  tagsData.value = []
  let str = 'Shipment status: All'
  filterData.filtersTagData.push(str)
  filterData.transportData = []
  filterData.daterangeData = []
  filterData.morefiltersData = []
  filterData.dashboardData = []
  emitter.emit('clearTag', 'Shipment status')
  emitter.emit('clearTag', 'Transport Mode')
  emitter.emit('clearTag', 'ETD')
  emitter.emit('clearTag', 'ETA')
  emitter.emit('clearTag', 'Creation Time')
  emitter.emit('clearTag', 'Shippername')
  emitter.emit('clearTag', 'Consigneename')
  emitter.emit('clearTag', 'Service')
  emitter.emit('clearTag', 'Incoterms')
  emitter.emit('clearTag', 'Notify Party')
  emitter.emit('clearTag', 'Bill to')
  emitter.emit('clearTag', 'Origin Agent')
  emitter.emit('clearTag', 'Destination Agent')
  emitter.emit('clearTag', 'Destination Operator')
  emitter.emit('clearTag', 'Sales')
  emitter.emit('clearTag', 'Origin')
  emitter.emit('clearTag', 'Destination')
  emitter.emit('clearTag', 'Place of Receipt')
  emitter.emit('clearTag', 'Port of Loading')
  emitter.emit('clearTag', 'Place of delivery')
  emitter.emit('clearTag', 'Port of Discharge')
  emitter.emit('clearTag', 'Vessel')
  emitter.emit('clearTag', 'Voyage')
  searchTableQeuryTracking = {}
  searchTableQeuryTracking.filterTag = ['All']
  sessionStorage.setItem('searchTableQeuryTracking', JSON.stringify(searchTableQeuryTracking))
  if (
    sessionStorage.getItem('reportList') != null ||
    sessionStorage.getItem('reportList') != '{}'
  ) {
    let reportlist = JSON.parse(sessionStorage.getItem('reportList') as string) || {}
    let data = JSON.parse(sessionStorage.getItem('tagsList') as string) || {}
    reportlist = {}
    data = {}
    sessionStorage.setItem('reportList', JSON.stringify(reportlist))
    sessionStorage.setItem('tagsList', JSON.stringify(data))
  } else {
    searchTableQeuryTracking.filterTag = ['All']
  }
  Gettrackingdata()
  renderTagsData()
}
const renderTagsData = () => {
  tagsData.value = []
  if (filterData.transportData.length) {
    tagsData.value.push(filterData.transportData[0])
  }
  if (filterData.daterangeData.length) {
    filterData.daterangeData.forEach((item) => {
      tagsData.value.push(item)
    })
  }
  if (filterData.morefiltersData.length) {
    filterData.morefiltersData.forEach((item) => {
      tagsData.value.push(item)
    })
  }
  if (filterData.dashboardData.length) {
    filterData.dashboardData.forEach((item) => {
      tagsData.value.push(item)
    })
  }
  if (filterData.filtersTagData.length) {
    filterData.filtersTagData.forEach((item) => {
      tagsData.value.push(item)
    })
  }
}
// 清除 Transport Tags
const clearTransportTags = () => {
  filterData.transportData = []
}
// 清除 Daterange Tags
const clearDaterangeTags = () => {
  filterData.daterangeData = []
}
// 清除 MoreFilters Tags
const clearMoreFiltersTags = () => {
  filterData.morefiltersData = []
}

const initDataByHeaderSearch = () => {
  const data = JSON.parse(localStorage.getItem('searchData'))
  if (data) {
    // 更新搜索框的值
    TrackingSearch.value = data.searchValue
    // 更新表格数据
    TrackingTable_ref.value.getSharedTableData()
    // 更新tagsList和TransportList
    TransportListItem.value = data.trackingData.TransportList
    TagsList.value = data.trackingData.tagsList
    let obj = {
      IncotermsList: data.trackingData.IncotermsList,
      ServiceList: data.trackingData.ServiceList
    }
    sessionStorage.setItem('incotermsList', JSON.stringify(obj))
    headerSearch.clearSearchData()
    tagsData.value = []
    filterData.transportData = []
    filterData.daterangeData = []
    filterData.morefiltersData = []
    filterData.dashboardData = []
    filterData.filtersTagData = []
    let str = 'Shipment status: All'
    filterData.filtersTagData.push(str)
    searchTableQeuryTracking = {}
    sessionStorage.removeItem('searchTableQeuryTracking')
    searchTableQeuryTracking._textSearch = TrackingSearch.value
    searchTableQeuryTracking.filterTag = ['All']
    sessionStorage.setItem('searchTableQeuryTracking', JSON.stringify(searchTableQeuryTracking))
    setTimeout(() => {
      emitter.emit('clearTag', 'Shipment status')
      emitter.emit('clearTag', 'Transport Mode')
      emitter.emit('clearTag', 'ETD')
      emitter.emit('clearTag', 'ETA')
      emitter.emit('clearTag', 'Creation Time')
      emitter.emit('clearTag', 'Shippername')
      emitter.emit('clearTag', 'Consigneename')
      emitter.emit('clearTag', 'Service')
      emitter.emit('clearTag', 'Incoterms')
      emitter.emit('clearTag', 'Notify Party')
      emitter.emit('clearTag', 'Bill to')
      emitter.emit('clearTag', 'Origin Agent')
      emitter.emit('clearTag', 'Destination Agent')
      emitter.emit('clearTag', 'Destination Operator')
      emitter.emit('clearTag', 'Sales')
      emitter.emit('clearTag', 'Origin')
      emitter.emit('clearTag', 'Destination')
      emitter.emit('clearTag', 'Place of Receipt')
      emitter.emit('clearTag', 'Port of Loading')
      emitter.emit('clearTag', 'Place of delivery')
      emitter.emit('clearTag', 'Port of Discharge')
      emitter.emit('clearTag', 'Vessel')
      emitter.emit('clearTag', 'Voyage')
    }, 2000)
    renderTagsData()
  }
}

// 从 store 中获取数据并绑定到输入框
const headerSearchdData = computed(() => headerSearch.searchValue)
// 监听顶部搜索结果的变化
watch(
  () => headerSearchdData.value,
  (newData) => {
    if (newData) {
      initDataByHeaderSearch()
    }
  }
)

const TrackingTable_ref = ref()
const TransportListItem = ref()
interface ListItem {
  name: string
  number: number
  type: string
  checked: boolean
}
const TagsList = ref<ListItem[]>([])
const filterTag = ref(['All'])
const isShowAlertIcon = ref(false)
const Gettrackingdata = () => {
  tableLoadingTableData.value = true
  TrackingTable_ref.value.getLoadingData(tableLoadingTableData.value)
  $api
    .getTrackingTableData({
      cp: TrackingTable_ref.value.pageInfo.pageNo,
      ps: TrackingTable_ref.value.pageInfo.pageSize,
      rc: -1,
      other_filed: '',
      ...searchTableQeuryTracking
    })
    .then((res: any) => {
      if (res.code === 200) {
        TransportListItem.value = res.data.TransportList
        TagsList.value = res.data.tagsList
        let obj = {
          IncotermsList: res.data.IncotermsList,
          ServiceList: res.data.ServiceList
        }
        let taglist: any = []
        if (Object.keys(filterData.filtersTagData).length == 0) {
          TagsList.value.forEach((item: any) => {
            if (item.checked == true) {
              taglist.push(item.name)
            }
          })
          let str = 'Shipment status: ' + taglist.toString()
          filterData.filtersTagData.push(str)
          filterData.filtersTagData.forEach((item) => {
            tagsData.value.push(item)
          })
        }
        sessionStorage.setItem('incotermsList', JSON.stringify(obj))
        sessionStorage.setItem('TrackingData', JSON.stringify(res.data))
        TrackingTable_ref.value.searchTableData(searchTableQeuryTracking)
        // 查询没结果的话显示icon
        if (TrackingSearch.value != '' && TrackingSearch.value != undefined) {
          if (res.data.searchData.length == 0) {
            isShowAlertIcon.value = true
          }
        } else {
          isShowAlertIcon.value = false
        }
      }
    })
}
onMounted(() => {
  if (
    sessionStorage.getItem('clickParams') != null &&
    sessionStorage.getItem('clickParams') != '{}'
  ) {
    if (sessionStorage.getItem('searchTableQeuryTracking') != null) {
      searchTableQeuryTracking = {}
    }
    const data = JSON.parse(sessionStorage.getItem('tagsList') as string) || {}
    const reportlist = JSON.parse(sessionStorage.getItem('reportList') as string) || {}
    for (const key in reportlist) {
      searchTableQeuryTracking[key] = reportlist[key]
    }
    if (reportlist._city_name == '' || reportlist._city_name == undefined) {
      if (Object.keys(data).length != 0) {
        let str = `${data.title}:${data.name}`
        filterData.dashboardData.push(str)
      }
    }
    sessionStorage.setItem('searchTableQeuryTracking', JSON.stringify(searchTableQeuryTracking))
    Gettrackingdata()
  }
  renderTagsData()
})
const changeTag = (val: any, boolean: any) => {
  filterData.filtersTagData = []
  searchTableQeuryTracking.filterTag = val
  let str = 'Shipment status: ' + val
  filterData.filtersTagData.push(str)
  filterTag.value = val
  sessionStorage.setItem('searchTableQeuryTracking', JSON.stringify(searchTableQeuryTracking))
  if (boolean) {
    Gettrackingdata()
  }
  renderTagsData()
}
// 点击search按钮
const SearchInput = () => {
  searchTableQeuryTracking._textSearch = TrackingSearch.value
  sessionStorage.setItem('searchTableQeuryTracking', JSON.stringify(searchTableQeuryTracking))
  Gettrackingdata()
}
</script>

<template>
  <div class="Title">Tracking</div>
  <div class="display" ref="filterRef">
    <FilterTags :TagsListItem="TagsList" @changeTag="changeTag"></FilterTags>
    <div class="heaer_top">
      <div class="search">
        <el-input
          placeholder="Enter Booking/HBL/PO/Container/Carrier Booking No. "
          v-model="TrackingSearch"
        >
          <template #prefix>
            <span class="iconfont_icon">
              <svg class="iconfont" aria-hidden="true">
                <use xlink:href="#icon-icon_search_b"></use>
              </svg>
            </span>
          </template>
          <template #suffix>
            <el-tooltip
              v-if="isShowAlertIcon"
              :offset="6"
              popper-class="ShowAlerIcon"
              effect="dark"
              content="We support the following references number to find bookings:· Booking No./HAWB No./MAWB No./PO No./Carrier Booking No./Contract No./File No./Quote No."
              placement="bottom"
            >
              <span class="iconfont_icon iconfont_icon_tip">
                <svg class="iconfont" aria-hidden="true">
                  <use xlink:href="#icon-icon_info_b"></use>
                </svg>
              </span>
            </el-tooltip>
          </template>
        </el-input>
      </div>
      <TransportMode
        :isShipment="true"
        :TransportListItem="TransportListItem"
        @TransportSearch="TransportSearch"
        @defaultTransport="defaultTransport"
        @clearTransportTags="clearTransportTags"
      ></TransportMode>
      <DateRange
        :isShipment="true"
        @DateRangeSearch="DateRangeSearch"
        @clearDaterangeTags="clearDaterangeTags"
        @defaultDate="defaultDate"
      ></DateRange>
      <MoreFilters
        :isShipment="true"
        :searchTableQeury="searchTableQeuryTracking"
        @MoreFiltersSearch="MoreFiltersSearch"
        @clearMoreFiltersTags="clearMoreFiltersTags"
        @defaultMorefilters="defaultMorefilters"
      ></MoreFilters>
      <el-button class="el-button--dark" style="margin-left: 8px" @click="SearchInput"
        >Search</el-button
      >
    </div>
    <!-- 筛选项 -->
    <div class="filtersTag" v-if="tagsData.length">
      <el-tag
        :key="tag"
        class="tag"
        v-for="tag in tagsData"
        :closable="!tag.includes('Shipment')"
        :disable-transitions="false"
        @close="handleClose(tag)"
        color="#EFEFF0"
      >
        <el-tooltip
          class="box-item"
          effect="dark"
          :content="tag"
          placement="top"
          v-if="tag.length > 39"
        >
          {{ tag.length > 39 ? tag.substr(0, 39) + '...' : tag }}
        </el-tooltip>
        <div v-else>{{ tag }}</div>
      </el-tag>
      <div class="text_button" @click="clearfilters">Clear Filters</div>
    </div>
  </div>
  <TrackingTable
    :height="containerHeight"
    :tagsData="tagsData"
    ref="TrackingTable_ref"
  ></TrackingTable>
</template>

<style lang="scss" scoped>
.Title {
  display: flex;
  height: 68px;
  border: 1px solid var(--color-border);
  border-width: 1px 0 1px 0;
  font-size: var(--font-size-6);
  font-weight: 700;
  padding: 0 24px;
  align-items: center;
}
.display {
  border: 1px solid var(--color-border);
  border-width: 0 0 1px 0;
  padding: 0 24px;
}
.heaer_top {
  margin-top: 6.57px;
  margin-bottom: 8px;
  display: flex;
}
.search {
  width: 400px;
  height: 32px;
}
.filtersTag {
  margin-bottom: 8.7px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.tag {
  border-color: #efeff0;
  border-radius: var(--border-radius-22);
  margin: 0 8px 8px 0;
  color: var(--color-neutral-1);
  font-weight: 600;
  font-size: var(--font-size-2);
}
@media only screen and (min-width: 1280px) {
  .search {
    width: 480px;
  }
}
@media only screen and (min-width: 1440px) {
  .search {
    width: 740px;
  }
}
</style>
