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

const filterRef: Ref<HTMLElement | null> = ref(null)
// const containerHeight: any = ref(0)

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

const BookingSearch = ref()
let searchTableQeury: any = {}
const filterData = reactive({
  transportData: [] as Array<string>,
  daterangeData: [] as Array<string>,
  morefiltersData: [] as Array<string>
})
const tagsData: any = ref([])
const handleClose = (tag: any) => {
  emitter.emit('clearTag', tag)
  tagsData.value.splice(tagsData.value.indexOf(tag), 1)
}
// 筛选框查询
const FiltersSeach = (val: any, value: any) => {
  searchTableQeury[val] = value
  BookingTable_ref.value.searchTableData(searchTableQeury)
}
//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()
}
//DateRangeSearch
const DateRangeSearch = (val: any, value: any) => {
  filterData.daterangeData = []
  for (const key in val) {
    let str = `${key}:${val[key]}`
    filterData.daterangeData.push(str)
  }
  for (const key in value) {
    if (key == 'ETD') {
      searchTableQeury.m_etd_start = value[key].data[0]
      searchTableQeury.m_etd_end = value[key].data[1]
    } else if (key == 'ETA') {
      searchTableQeury.f_eta_start = value[key].data[0]
      searchTableQeury.f_eta_end = value[key].data[1]
    } else {
      searchTableQeury.created_time_start = value[key].data[0]
      searchTableQeury.created_time_end = value[key].data[1]
    }
  }
  BookingTable_ref.value.searchTableData(searchTableQeury)
  renderTagsData()
}
//MoreFiltersSearch
const MoreFiltersSearch = (val: any, value: any) => {
  filterData.morefiltersData = []
  for (const key in val) {
    let str = `${key}:${val[key]}`
    filterData.morefiltersData.push(str)
    if (key == 'shippername') {
      searchTableQeury.shipper = value[key]
    } else if (key == 'consigneename') {
      searchTableQeury.consignee = value[key]
    } else if (key == 'Origin Agent') {
      searchTableQeury.origin = value[key]
    } else if (key == 'Destination Agent') {
      searchTableQeury.agent = value[key]
    } else if (key == 'Sales') {
      searchTableQeury.sales_rep = value[key]
    } else if (key == 'origin') {
      searchTableQeury.from_station = val[key]
    } else if (key == 'destination') {
      searchTableQeury['final_desination/final_desination_exp'] = val[key]
    } else if (key == 'Place of Receipt') {
      searchTableQeury.place_of_receipt = val[key]
    } else if (key == 'Port of Loading') {
      searchTableQeury['fport_of_loading/fport_of_loading_exp'] = val[key]
    } else if (key == 'Port of delivery') {
      searchTableQeury['place_of_delivery/place_of_delivery_exp'] = val[key]
    } else if (key == 'vessel') {
      searchTableQeury.vessel = value[key]
    } else if (key == 'voyage') {
      searchTableQeury['f_voyage/m_voyage'] = value[key]
    }
  }
  // for(const key in value)
  BookingTable_ref.value.searchTableData(searchTableQeury)
  renderTagsData()
}
const clearfilters = () => {
  tagsData.value = []
  filterData.transportData = []
  filterData.daterangeData = []
  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')
}
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)
    })
  }
}
// 清除 Transport Tags
const clearTransportTags = () => {
  filterData.transportData = []
}
// 清除 Daterange Tags
const clearDaterangeTags = () => {
  filterData.daterangeData = []
}
// 清除 MoreFilters Tags
const clearMoreFiltersTags = () => {
  filterData.morefiltersData = []
}

const BookingTable_ref = ref()
const TransportListItem = ref()
interface ListItem {
  name: string
  number: number
  type: string
  checked: boolean
}
const TagsList = ref<ListItem[]>([])
const filterTag = ref(['All'])
onMounted(() => {
  setTimeout(() => {
    TransportListItem.value = BookingTable_ref.value.TransportListItem
    TagsList.value = BookingTable_ref.value.TagsList
  }, 1000)
})
const changeTag = (val: any) => {
  searchTableQeury.filterTag = val
  BookingTable_ref.value.searchTableData(searchTableQeury)
  filterTag.value = val
}
// 点击search按钮
const SearchInput = () => {
  searchTableQeury._textSearch = BookingSearch.value
  BookingTable_ref.value.searchTableData(searchTableQeury)
}
</script>

<template>
  <div class="Title">Booking</div>
  <div class="display" ref="filterRef">
    <FilterTags :TagsListItem="TagsList" @changeTag="changeTag"></FilterTags>
    <div class="heaer_top">
      <div class="search">
        <el-input
          placeholder="Search booking No./HBL No./PO No./Carrier Booking No."
          v-model="BookingSearch"
        >
          <template #prefix>
            <span class="iconfont_icon">
              <svg class="iconfont" aria-hidden="true">
                <use xlink:href="#icon-icon_search_b"></use>
              </svg>
            </span>
          </template>
        </el-input>
      </div>
      <TransportMode
        :TransportListItem="TransportListItem"
        @TransportSearch="TransportSearch"
        @clearTransportTags="clearTransportTags"
      ></TransportMode>
      <DateRange
        @DateRangeSearch="DateRangeSearch"
        @clearDaterangeTags="clearDaterangeTags"
      ></DateRange>
      <MoreFilters
        :isShipment="false"
        @MoreFiltersSearch="MoreFiltersSearch"
        @clearMoreFiltersTags="clearMoreFiltersTags"
      ></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
        :disable-transitions="false"
        @close="handleClose(tag)"
        color="#EFEFF0"
      >
        {{ tag }}
      </el-tag>
      <div class="text_button" @click="clearfilters">Clear Filters</div>
    </div>
  </div>
  <BookingTable
    :height="containerHeight"
    :tagsData="tagsData"
    ref="BookingTable_ref"
  ></BookingTable>
</template>

<style lang="scss" scoped>
.Title {
  display: flex;
  height: 68px;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-6);
  font-weight: 700;
  padding-left: 23.32px;
  align-items: center;
}
.display {
  border: 1px solid var(--color-border);
  border-width: 0 0 1px 0;
  padding-left: 23.52px;
}
.heaer_top {
  margin-top: 6.57px;
  margin-bottom: 8px;
  padding-right: 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>
