<script setup lang="ts">
import emitter from '@/utils/bus'
import AutoSelect from '@/components/AutoSelect'
import SelectAutoSelect from '@/components/SelectAutoSelect'
import SelectTableSelect from '@/components/SelectTableSelect'
import { ref, onMounted, onBeforeMount, computed, watch } from 'vue'
import SelectTable from '@/components/SelectTable/src/SelectTable.vue'

onMounted(() => {
  if (
    sessionStorage.getItem('reportList') != null &&
    sessionStorage.getItem('reportList') != '{}'
  ) {
    const reportlist = JSON.parse(sessionStorage.getItem('reportList') as string) || {}
    const data = JSON.parse(sessionStorage.getItem('tagsList') as string) || {}
    if (
      reportlist._city_name != '' &&
      (reportlist._reportStationType == 'shippr_uncode' ||
        reportlist._reportStationType == 'consignee_uncode')
    ) {
      if (data.title.includes('Origin')) {
        InputForm.value.palces.Origin.push(reportlist._city_name)
        MoreFiltersObj.Origin = reportlist._city_name
        MoreFiltersObj2.Origin = InputForm.value.palces.Origin
      } else {
        InputForm.value.palces.Destination.push(reportlist._city_name)
        MoreFiltersObj.Destination = reportlist._city_name
        MoreFiltersObj2.Destination = InputForm.value.palces.Destination
      }
    }
  }
  defaultMorefilters()
  emitter.on('clearTag', (tag: any) => {
    if (tag.includes('Shippername')) {
      clearname(InputForm.value, 'parties', 'Shippername')
    } else if (tag.includes('Consigneename')) {
      clearname(InputForm.value, 'parties', 'Consigneename')
    } else if (tag.includes('Incoterms')) {
      clearname(InputForm.value, 'General', 'Incoterms')
    } else if (tag.includes('Service')) {
      clearname(InputForm.value, 'General', 'Service')
    } else if (tag.includes('Origin Agent')) {
      AddDateType.value = AddDateType.value.filter((item: any) => item.partyType !== 'Origin Agent')
      delete MoreFiltersObj['Origin Agent']
      selectedPartyTypeoptions.value = selectedPartyTypeoptions.value.filter(
        (item: any) => item !== 'Origin Agent'
      )
    } else if (tag.includes('Destination Agent')) {
      AddDateType.value = AddDateType.value.filter(
        (item: any) => item.partyType !== 'Destination Agent'
      )
      delete MoreFiltersObj['Destination Agent']
      selectedPartyTypeoptions.value = selectedPartyTypeoptions.value.filter(
        (item: any) => item !== 'Destination Agent'
      )
    } else if (tag.includes('Notify Party')) {
      AddDateType.value = AddDateType.value.filter((item: any) => item.partyType !== 'Notify Party')
      delete MoreFiltersObj['Notify Party']
      selectedPartyTypeoptions.value = selectedPartyTypeoptions.value.filter(
        (item: any) => item !== 'Notify Party'
      )
    } else if (tag.includes('Bill to')) {
      AddDateType.value = AddDateType.value.filter((item: any) => item.partyType !== 'Bill to')
      delete MoreFiltersObj['Bill to']
      selectedPartyTypeoptions.value = selectedPartyTypeoptions.value.filter(
        (item: any) => item !== 'Bill to'
      )
    } else if (tag.includes('Destination Operator')) {
      AddDateType.value = AddDateType.value.filter(
        (item: any) => item.partyType !== 'Destination Operator'
      )
      delete MoreFiltersObj['Destination Operator']
      selectedPartyTypeoptions.value = selectedPartyTypeoptions.value.filter(
        (item: any) => item !== 'Destination Operator'
      )
    } else if (tag.includes('Sales')) {
      AddDateType.value = AddDateType.value.filter((item: any) => item.partyType !== 'Sales')
      delete MoreFiltersObj['Sales']
      selectedPartyTypeoptions.value = selectedPartyTypeoptions.value.filter(
        (item: any) => item !== 'Sales'
      )
    } else if (tag.includes('Place of Receipt')) {
      AddDatePlaceType.value = AddDatePlaceType.value.filter(
        (item: any) => item.placesType !== 'Place of Receipt'
      )
      delete MoreFiltersObj['Place of Receipt']
      selectedPlacesTypeoptions.value = selectedPlacesTypeoptions.value.filter(
        (item: any) => item !== 'Place of Receipt'
      )
    } else if (tag.includes('Port of Loading')) {
      AddDatePlaceType.value = AddDatePlaceType.value.filter(
        (item: any) => item.placesType !== 'Port of Loading'
      )
      delete MoreFiltersObj['Port of Loading']
      selectedPlacesTypeoptions.value = selectedPlacesTypeoptions.value.filter(
        (item: any) => item !== 'Port of Loading'
      )
    } else if (tag.includes('Place of delivery')) {
      AddDatePlaceType.value = AddDatePlaceType.value.filter(
        (item: any) => item.placesType !== 'Place of delivery'
      )
      delete MoreFiltersObj['Place of delivery']
      selectedPlacesTypeoptions.value = selectedPlacesTypeoptions.value.filter(
        (item: any) => item !== 'Place of delivery'
      )
    } else if (tag.includes('Place of Discharge')) {
      AddDatePlaceType.value = AddDatePlaceType.value.filter(
        (item: any) => item.placesType !== 'Place of Discharge'
      )
      delete MoreFiltersObj['Place of Discharge']
      selectedPlacesTypeoptions.value = selectedPlacesTypeoptions.value.filter(
        (item: any) => item !== 'Place of Discharge'
      )
    } else if (tag.includes('Origin')) {
      clearname(InputForm.value, 'palces', 'Origin')
    } else if (tag.includes('Destination')) {
      clearname(InputForm.value, 'palces', 'Destination')
    } else if (tag.includes('Vessel')) {
      clearname(InputForm.value, 'transportation', 'Vessel')
    } else if (tag.includes('Voyage')) {
      clearname(InputForm.value, 'transportation', 'Voyage')
    }
  })
  emitter.on('clearMoreFiltersObj', () => {
    clearMoreFiltersObj()
  })
})

onBeforeMount(() => {
  emitter.off('clearTag')
  emitter.off('clearMoreFiltersObj')
})
const MoreFiltersSearchQeury = ref()
const MoreFiltersSearchQeuryTracking = ref()
interface TypeItem {
  partyType: ''
  partyname: []
}
interface PlacesTypeItem {
  placesType: ''
  placesname: []
}
const AddDateType = ref<TypeItem[]>([])
const AddDatePlaceType = ref<PlacesTypeItem[]>([])
const defaultAll = (data: any, val: any, value: any, isShipment: any) => {
  data[val] = isShipment[value]
  MoreFiltersObj[val] = isShipment[value]
  MoreFiltersObj2[val] = isShipment[value]
}
const defaultAddAll = (data: any, val: any, value: any, type: any, isShipment: any) => {
  const obj = {
    partyType: val,
    partyname: isShipment[value]
  }
  const obj2 = {
    placesType: val,
    placesname: isShipment[value]
  }
  let i = 0
  if (type == 'AddDateType') {
    data.push(obj)
    if (data.length) {
      data.forEach((item: any, index: any) => {
        if (item.partyType == val) {
          i = index
        }
      })
    }
    MoreFiltersObj[val] = isShipment[value]
    MoreFiltersObj2[val] = isShipment[value]
    pushSelectedList(i, val)
  } else {
    data.push(obj2)
    if (data.length) {
      data.forEach((item: any, index: any) => {
        if (item.placesType == val) {
          i = index
        }
      })
    }
    MoreFiltersObj[val] = isShipment[value]
    MoreFiltersObj2[val] = isShipment[value]
    pushPlacesSelectedList(i, val)
  }
}
// 初始判断默认条件
const defaultMorefilters = () => {
  if (props.isShipment) {
    if (
      sessionStorage.getItem('clickParams') == null ||
      sessionStorage.getItem('clickParams') == '{}'
    ) {
      if (sessionStorage.getItem('searchTableQeuryTracking') != null) {
        MoreFiltersSearchQeuryTracking.value =
          JSON.parse(sessionStorage.getItem('searchTableQeuryTracking') as string) || {}
        if (MoreFiltersSearchQeuryTracking.value.shipper) {
          defaultAll(
            InputForm.value.parties,
            'Shippername',
            'shipper',
            MoreFiltersSearchQeuryTracking.value
          )
          changeAll(InputForm.value.parties, count.value, PartiesBadge)
          count.value = []
        }
        if (MoreFiltersSearchQeuryTracking.value.consignee) {
          defaultAll(
            InputForm.value.parties,
            'Consigneename',
            'consignee',
            MoreFiltersSearchQeuryTracking.value
          )
          changeAll(InputForm.value.parties, count.value, PartiesBadge)
          count.value = []
        }
        if (MoreFiltersSearchQeuryTracking.value.incoterms) {
          defaultAll(
            InputForm.value.General,
            'Incoterms',
            'incoterms',
            MoreFiltersSearchQeuryTracking.value
          )
          changeAll(InputForm.value.General, countG.value, GeneralBadge)
          countG.value = []
        }
        if (MoreFiltersSearchQeuryTracking.value.service) {
          defaultAll(
            InputForm.value.General,
            'Service',
            'service',
            MoreFiltersSearchQeuryTracking.value
          )
          changeAll(InputForm.value.General, countG.value, GeneralBadge)
          countG.value = []
        }
        if (MoreFiltersSearchQeuryTracking.value['shipper_city/consignee_city']) {
          defaultAll(
            InputForm.value.palces,
            'Origin',
            ['shipper_city/consignee_city'],
            MoreFiltersSearchQeuryTracking.value
          )
          changeAll(InputForm.value.palces, countP.value, PlacesBadge)
          countP.value = []
        }
        if (MoreFiltersSearchQeuryTracking.value.final_desination) {
          defaultAll(
            InputForm.value.palces,
            'Destination',
            'final_desination',
            MoreFiltersSearchQeuryTracking.value
          )
          changeAll(InputForm.value.palces, countP.value, PlacesBadge)
          countP.value = []
        }
        if (MoreFiltersSearchQeuryTracking.value['f_vessel/vessel']) {
          changeAll(InputForm.value.transportation, countT.value, TransportationBadge)
          countT.value = []
          defaultAll(
            InputForm.value.transportation,
            'Vessel',
            ['f_vessel/vessel'],
            MoreFiltersSearchQeuryTracking.value
          )
        }
        if (MoreFiltersSearchQeuryTracking.value['f_voyage/voyage']) {
          changeAll(InputForm.value.transportation, countT.value, TransportationBadge)
          countT.value = []
          defaultAll(
            InputForm.value.transportation,
            'Voyage',
            ['f_voyage/voyage'],
            MoreFiltersSearchQeuryTracking.value
          )
        }
        if (MoreFiltersSearchQeuryTracking.value.origin) {
          defaultAddAll(
            AddDateType.value,
            'Origin Agent',
            'origin',
            'AddDateType',
            MoreFiltersSearchQeuryTracking.value
          )
        }
        if (MoreFiltersSearchQeuryTracking.value.billto) {
          defaultAddAll(
            AddDateType.value,
            'Bill to',
            'billto',
            'AddDateType',
            MoreFiltersSearchQeuryTracking.value
          )
        }
        if (MoreFiltersSearchQeuryTracking.value.dest_op) {
          defaultAddAll(
            AddDateType.value,
            'Destination Operator',
            'dest_op',
            'AddDateType',
            MoreFiltersSearchQeuryTracking.value
          )
        }
        if (MoreFiltersSearchQeuryTracking.value.notify_party) {
          defaultAddAll(
            AddDateType.value,
            'Notify Party',
            'notify_party',
            'AddDateType',
            MoreFiltersSearchQeuryTracking.value
          )
        }
        if (MoreFiltersSearchQeuryTracking.value.agent) {
          defaultAddAll(
            AddDateType.value,
            'Destination Agent',
            'agent',
            'AddDateType',
            MoreFiltersSearchQeuryTracking.value
          )
        }
        if (MoreFiltersSearchQeuryTracking.value.sales_rep) {
          defaultAddAll(
            AddDateType.value,
            'Sales',
            'sales_rep',
            'AddDateType',
            MoreFiltersSearchQeuryTracking.value
          )
        }
        if (MoreFiltersSearchQeuryTracking.value.place_of_receipt_exp) {
          defaultAddAll(
            AddDatePlaceType.value,
            'Place of Receipt',
            'place_of_receipt_exp',
            'AddDatePlaceType',
            MoreFiltersSearchQeuryTracking.value
          )
        }
        if (MoreFiltersSearchQeuryTracking.value['port_of_loading/fport_of_loading_un']) {
          defaultAddAll(
            AddDatePlaceType.value,
            'Port of Loading',
            ['port_of_loading/fport_of_loading_un'],
            'AddDatePlaceType',
            MoreFiltersSearchQeuryTracking.value
          )
        }
        if (MoreFiltersSearchQeuryTracking.value.place_of_delivery_exp) {
          defaultAddAll(
            AddDatePlaceType.value,
            'Place of delivery',
            'place_of_delivery_exp',
            'AddDatePlaceType',
            MoreFiltersSearchQeuryTracking.value
          )
        }
        if (MoreFiltersSearchQeuryTracking.value.port_of_discharge) {
          defaultAddAll(
            AddDatePlaceType.value,
            'Place of Discharge',
            'port_of_discharge',
            'AddDatePlaceType',
            MoreFiltersSearchQeuryTracking.value
          )
        }
        if (AddDateType.value.length) {
          AddDateType.value.forEach((item: any) => {
            if (item.partyType != '' && item.partyname.length != 0) {
              count.value.push(item.partyname)
            }
          })
          changeAll(InputForm.value.parties, count.value, PartiesBadge)
          count.value = []
        } else {
          PartiesBadge.value = ''
        }
        if (AddDatePlaceType.value.length) {
          AddDatePlaceType.value.forEach((item: any) => {
            if (item.placesType != '' && item.placesname.length != 0) {
              count.value.push(item.placesname)
            }
          })
          changeAll(InputForm.value.palces, countP.value, PlacesBadge)
          countP.value = []
        } else {
          PlacesBadge.value = ''
        }
      }
    }
  } else {
    if (sessionStorage.getItem('searchTableQeury') != null) {
      MoreFiltersSearchQeury.value =
        JSON.parse(sessionStorage.getItem('searchTableQeury') as string) || {}
      // changeAll(InputForm.value.General, countG.value, GeneralBadge)
      // countG.value = []
      if (MoreFiltersSearchQeury.value.shipper) {
        defaultAll(InputForm.value.parties, 'Shippername', 'shipper', MoreFiltersSearchQeury.value)
        changeAll(InputForm.value.parties, count.value, PartiesBadge)
        count.value = []
      }
      if (MoreFiltersSearchQeury.value.consignee) {
        defaultAll(
          InputForm.value.parties,
          'Consigneename',
          'consignee',
          MoreFiltersSearchQeury.value
        )
        changeAll(InputForm.value.parties, count.value, PartiesBadge)
        count.value = []
      }
      if (MoreFiltersSearchQeury.value.shipper_city) {
        defaultAll(InputForm.value.palces, 'Origin', 'shipper_city', MoreFiltersSearchQeury.value)
        changeAll(InputForm.value.palces, countP.value, PlacesBadge)
        countP.value = []
      }
      if (MoreFiltersSearchQeury.value.consignee_city) {
        defaultAll(
          InputForm.value.palces,
          'Destination',
          'consignee_city',
          MoreFiltersSearchQeury.value
        )
        changeAll(InputForm.value.palces, countP.value, PlacesBadge)
        countP.value = []
      }
      if (MoreFiltersSearchQeury.value['f_vessel/m_vessel']) {
        changeAll(InputForm.value.transportation, countT.value, TransportationBadge)
        countT.value = []
        defaultAll(
          InputForm.value.transportation,
          'Vessel',
          ['f_vessel/m_vessel'],
          MoreFiltersSearchQeury.value
        )
      }
      if (MoreFiltersSearchQeury.value['f_voyage/m_voyage']) {
        changeAll(InputForm.value.transportation, countT.value, TransportationBadge)
        countT.value = []
        defaultAll(
          InputForm.value.transportation,
          'Voyage',
          ['f_voyage/m_voyage'],
          MoreFiltersSearchQeury.value
        )
      }
      if (MoreFiltersSearchQeury.value.origin) {
        defaultAddAll(
          AddDateType.value,
          'Origin Agent',
          'origin',
          'AddDateType',
          MoreFiltersSearchQeury.value
        )
      }
      if (MoreFiltersSearchQeury.value.agent) {
        defaultAddAll(
          AddDateType.value,
          'Destination Agent',
          'agent',
          'AddDateType',
          MoreFiltersSearchQeury.value
        )
      }
      if (MoreFiltersSearchQeury.value.sales_rep) {
        defaultAddAll(
          AddDateType.value,
          'Sales',
          'sales_rep',
          'AddDateType',
          MoreFiltersSearchQeury.value
        )
      }
      if (MoreFiltersSearchQeury.value['place_of_receipt/place_of_receipt_exp']) {
        defaultAddAll(
          AddDatePlaceType.value,
          'Place of Receipt',
          ['place_of_receipt/place_of_receipt_exp'],
          'AddDatePlaceType',
          MoreFiltersSearchQeury.value
        )
      }
      if (MoreFiltersSearchQeury.value['fport_of_loading_uncode/fport_of_loading_exp']) {
        defaultAddAll(
          AddDatePlaceType.value,
          'Port of Loading',
          ['fport_of_loading_uncode/fport_of_loading_exp'],
          'AddDatePlaceType',
          MoreFiltersSearchQeury.value
        )
      }
      if (MoreFiltersSearchQeury.value['place_of_delivery/place_of_delivery_exp']) {
        defaultAddAll(
          AddDatePlaceType.value,
          'Place of delivery',
          ['place_of_delivery/place_of_delivery_exp'],
          'AddDatePlaceType',
          MoreFiltersSearchQeury.value
        )
      }
      if (AddDateType.value.length) {
        AddDateType.value.forEach((item: any) => {
          if (item.partyType != '' && item.partyname.length != 0) {
            count.value.push(item.partyname)
          }
        })
        changeAll(InputForm.value.parties, count.value, PartiesBadge)
        count.value = []
      } else {
        PartiesBadge.value = ''
      }
      if (AddDatePlaceType.value.length) {
        AddDatePlaceType.value.forEach((item: any) => {
          if (item.placesType != '' && item.placesname.length != 0) {
            count.value.push(item.placesname)
          }
        })
        changeAll(InputForm.value.palces, countP.value, PlacesBadge)
        countP.value = []
      } else {
        PlacesBadge.value = ''
      }
    }
  }
  emit('defaultMorefilters', MoreFiltersObj, MoreFiltersObj2, MoreFiltersSearchQeury.value)
}
const drawer = ref(false)

const props = defineProps({
  isShipment: Boolean,
  searchTableQeury: Object
})
const PartyTypeoptions = computed(() => {
  if (props.isShipment) {
    return [
      {
        value: 'Notify Party',
        label: 'Notify Party'
      },
      {
        value: 'Bill to',
        label: 'Bill to'
      },
      {
        value: 'Origin Agent',
        label: 'Origin Agent'
      },
      {
        value: 'Destination Agent',
        label: 'Destination Agent'
      },
      {
        value: 'Destination Operator',
        label: 'Destination Operator'
      },
      {
        value: 'Sales',
        label: 'Sales'
      }
    ]
  } else {
    return [
      {
        value: 'Origin Agent',
        label: 'Origin Agent'
      },
      {
        value: 'Destination Agent',
        label: 'Destination Agent'
      },
      {
        value: 'Sales',
        label: 'Sales'
      }
    ]
  }
})

const PlaceTypeoptions = computed(() => {
  if (props.isShipment) {
    return [
      {
        value: 'Place of Receipt',
        label: 'Place of Receipt'
      },
      {
        value: 'Port of Loading',
        label: 'Port of Loading'
      },
      {
        value: 'Place of Discharge',
        label: 'Place of Discharge'
      },
      {
        value: 'Place of delivery',
        label: 'Place of delivery'
      }
    ]
  } else {
    return [
      {
        value: 'Place of Receipt',
        label: 'Place of Receipt'
      },
      {
        value: 'Port of Loading',
        label: 'Port of Loading'
      },
      {
        value: 'Place of delivery',
        label: 'Place of delivery'
      }
    ]
  }
})

const partSelectTableSelectRef = ref(null)
const placeSelectTableSelectRef = ref(null)

const selectedPartyTypeoptions = ref()
selectedPartyTypeoptions.value = []

const selectedPlacesTypeoptions = ref()
selectedPlacesTypeoptions.value = []

const selectedPartyTypeIndex = ref()
selectedPartyTypeIndex.value = []

const selectedPlacesTypeIndex = ref()
selectedPlacesTypeIndex.value = []

const InputForm = ref({
  parties: {
    Shippername: [],
    Consigneename: []
  },
  transportation: {
    Vessel: [],
    Voyage: []
  },
  palces: {
    Origin: [],
    Destination: []
  },
  General: {
    Incoterms: '',
    Service: ''
  }
})

const AddType = (item: any) => {
  if (item == 'party') {
    AddDateType.value.push({
      partyType: '',
      partyname: []
    })
  } else if (item == 'place') {
    AddDatePlaceType.value.push({
      placesType: '',
      placesname: []
    })
  }
}
const count = ref()
const countT = ref()
const countP = ref()
const countG = ref()
const PartiesBadge = ref()
const GeneralBadge = ref()
const TransportationBadge = ref()
const PlacesBadge = ref()
count.value = []
countT.value = []
countP.value = []
countG.value = []

const changeAll = (value: any, countTotal: any, BadegTotal: any) => {
  for (let key in value) {
    if (key == 'Incoterms') {
      if (value[key] != 'Please Select Date Range' && value[key] != '') {
        countTotal.push(value[key])
      }
    }
    if (key == 'Service') {
      if (value[key] != 'Please Select Service' && value[key] != '') {
        countTotal.push(value[key])
      }
    }
    if (key != 'Service' && key != 'Incoterms') {
      if (value[key] != '') {
        countTotal.push(value[key])
      }
    }
  }
  if (countTotal.length == 0) {
    BadegTotal.value = ''
  } else {
    BadegTotal.value = countTotal.length
  }
}
// 折叠面板生成badge
const changeCollapse = (val: any) => {
  if (val.indexOf('Parties') == -1) {
    AddDateType.value.forEach((item: any) => {
      if (item.partyType != '' && item.partyname.length != 0) {
        count.value.push(item.partyname)
      }
    })
    changeAll(InputForm.value.parties, count.value, PartiesBadge)
    count.value = []
  } else {
    PartiesBadge.value = ''
  }
  if (val.indexOf('General') == -1) {
    changeAll(InputForm.value.General, countG.value, GeneralBadge)
    countG.value = []
  } else {
    GeneralBadge.value = ''
  }
  if (val.indexOf('Transportation') == -1) {
    changeAll(InputForm.value.transportation, countT.value, TransportationBadge)
    countT.value = []
  } else {
    TransportationBadge.value = ''
  }
  if (val.indexOf('Places') == -1) {
    AddDatePlaceType.value.forEach((item: any) => {
      if (item.placesType != '' && item.placesname.length != 0) {
        countP.value.push(item.placesname)
      }
    })
    changeAll(InputForm.value.palces, countP.value, PlacesBadge)
    countP.value = []
  } else {
    PlacesBadge.value = ''
  }
}
let MoreFiltersObj: any = {}
let MoreFiltersObj2: any = {}
// 赋值
const changeAutoSelect = (Array: any, val: any, value: any, arraykey1: any, arraykey2: any) => {
  if (value == 'InputForm') {
    if (Array) {
      Array[arraykey1][arraykey2] = val.value
      MoreFiltersObj[arraykey2] = val.value.join()
      MoreFiltersObj2[arraykey2] = val.value
      if (val.value.length == 0) {
        delete MoreFiltersObj[arraykey2]
        delete MoreFiltersObj2[arraykey2]
      }
    }
  } else if (value == 'AddDateType') {
    if (Array.length) {
      Array.forEach((item: any) => {
        if (item.partyType == arraykey1) {
          item.partyname = val.value
        }
        MoreFiltersObj[item.partyType] = val.value.join()
        MoreFiltersObj2[item.partyType] = val.value
      })
    }
  }
}
const changeAutoSelectshippername = (val: any) => {
  changeAutoSelect(InputForm.value, val, 'InputForm', 'parties', 'Shippername')
}
const changeAutoSelectconsigneename = (val: any) => {
  changeAutoSelect(InputForm.value, val, 'InputForm', 'parties', 'Consigneename')
}
const changeAutoSelectvessel = (val: any) => {
  changeAutoSelect(InputForm.value, val, 'InputForm', 'transportation', 'Vessel')
}
const changeAutoSelectvoyage = (val: any) => {
  changeAutoSelect(InputForm.value, val, 'InputForm', 'transportation', 'Voyage')
}
const check = (row: any, value: any, key1: any, key2: any) => {
  value[key1][key2] = row
  MoreFiltersObj[key2] = row
  MoreFiltersObj2[key2] = row
}
//选择origin
const checkorigin = (row: any) => {
  if (row) {
    check(row, InputForm.value, 'palces', 'Origin')
  }
}
const checkdestination = (row: any) => {
  if (row) {
    check(row, InputForm.value, 'palces', 'Destination')
  }
}
const delSelect = (i: any, val: any) => {
  delete MoreFiltersObj[val]
  delete MoreFiltersObj2[val]
  if (sessionStorage.getItem('searchTableQeury') != null) {
    if (val == 'Origin Agent') {
      delete MoreFiltersSearchQeury.value.origin
    } else if (val == 'Destination Agent') {
      delete MoreFiltersSearchQeury.value.agent
    } else if (val == 'Sales') {
      delete MoreFiltersSearchQeury.value.sales_rep
    }
  }
  let index = selectedPartyTypeoptions.value.findIndex((item: any) => {
    return item == val
  })
  if (index >= 0) {
    selectedPartyTypeoptions.value.splice(index, 1)
  }
  let j = selectedPartyTypeIndex.value.findIndex((item: any) => {
    return item == i
  })
  if (j >= 0) {
    for (let i = 0; i < selectedPartyTypeIndex.value.length; i++) {
      if (selectedPartyTypeIndex.value[i] > j) {
        selectedPartyTypeIndex.value[i] = selectedPartyTypeIndex.value[i] - 1
      }
    }
    selectedPartyTypeIndex.value.splice(j, 1)
  }
}
const delPlacesSelect = (i: any, val: any) => {
  let index = selectedPlacesTypeoptions.value.findIndex((item: any) => {
    return item == val
  })
  if (index >= 0) {
    selectedPlacesTypeoptions.value.splice(index, 1)
  }
  let j = selectedPlacesTypeIndex.value.findIndex((item: any) => {
    return item == i
  })
  if (j >= 0) {
    for (let i = 0; i < selectedPlacesTypeIndex.value.length; i++) {
      if (selectedPlacesTypeIndex.value[i] > j) {
        selectedPlacesTypeIndex.value[i] = selectedPlacesTypeIndex.value[i] - 1
      }
    }
    selectedPlacesTypeIndex.value.splice(j, 1)
  }
}
const pushSelectedList = (i: any, val: any) => {
  let index = selectedPartyTypeoptions.value.findIndex((item: any) => {
    return item == val
  })
  if (index < 0) {
    if (!selectedPartyTypeIndex.value.includes(i)) {
      selectedPartyTypeoptions.value.push(val)
      selectedPartyTypeIndex.value.push(i)
    } else {
      let j = selectedPartyTypeIndex.value.findIndex((con: any) => {
        return con == i
      })
      selectedPartyTypeoptions.value.splice(i, 1, val)
    }
  }
}

const pushPlacesSelectedList = (i: any, val: any) => {
  let index = selectedPlacesTypeoptions.value.findIndex((item: any) => {
    return item == val
  })
  if (index < 0) {
    if (!selectedPlacesTypeIndex.value.includes(i)) {
      selectedPlacesTypeoptions.value.push(val)
      selectedPlacesTypeIndex.value.push(i)
    } else {
      let j = selectedPlacesTypeIndex.value.findIndex((con: any) => {
        return con == i
      })
      selectedPlacesTypeoptions.value.splice(i, 1, val)
    }
  }
}
const changeAutoSelectAddType = (index: any, val: any) => {
  pushSelectedList(index, val)
}

const changeAutoSelectPlacesAddType = (index: any, val: any) => {
  pushPlacesSelectedList(index, val)
}
const isError = ref()
const changeAutoSelectVal = (val: any, value: any, boolaen: any) => {
  if (boolaen || value == true) {
    isError.value = true
  } else {
    isError.value = false
  }
  MoreFiltersObj = { ...MoreFiltersObj, ...val }
  MoreFiltersObj2 = { ...MoreFiltersObj2, ...value }
  // for (const key in value) {
  //   MoreFiltersObj2[key] = value[key]
  // }
}
// 点击search
const emit = defineEmits(['MoreFiltersSearch', 'clearMoreFiltersTags', 'defaultMorefilters'])
const SearchMore = () => {
  if (AddDatePlaceType.value.length) {
    for (let i = 0; i < AddDatePlaceType.value.length; i++) {
      if (AddDatePlaceType.value[i].placesType != '') {
        if (isError.value || isError.value == undefined) {
          // 传数据给父组件
          emit('MoreFiltersSearch', MoreFiltersObj, MoreFiltersObj2)
          drawer.value = false
        }
      } else {
        emit('MoreFiltersSearch', MoreFiltersObj, MoreFiltersObj2)
        drawer.value = false
      }
    }
  } else if (AddDateType.value.length) {
    for (let i = 0; i < AddDateType.value.length; i++) {
      if (AddDateType.value[i].partyType != '') {
        if (isError.value || isError.value == undefined) {
          // 传数据给父组件
          emit('MoreFiltersSearch', MoreFiltersObj, MoreFiltersObj2)
          drawer.value = false
        }
      } else {
        emit('MoreFiltersSearch', MoreFiltersObj, MoreFiltersObj2)
        drawer.value = false
      }
    }
  } else {
    // 传数据给父组件
    emit('MoreFiltersSearch', MoreFiltersObj, MoreFiltersObj2)
    drawer.value = false
  }
}
// 清除
const clearrest = () => {
  emit('clearMoreFiltersTags')
  InputForm.value = {
    parties: {
      Shippername: [],
      Consigneename: []
    },
    transportation: {
      Vessel: [],
      Voyage: []
    },
    palces: {
      Origin: [],
      Destination: []
    },
    General: {
      Incoterms: 'Please Select Date Range',
      Service: 'Please Select Service'
    }
  }
  AddDateType.value = []
  AddDatePlaceType.value = []
  MoreFiltersObj = {}
  MoreFiltersObj2 = {}
  selectedPartyTypeoptions.value = []
  selectedPlacesTypeoptions.value = []
  IncotermsList.value.forEach((item) => {
    item.checked = false
  })
  SeiviceList.value.forEach((item) => {
    item.checked = false
  })
  IncotermsCheckAll.value = false
  ServiceCheckAll.value = false
}
// 清除name
const clearname = (val: any, key1: any, key2: any) => {
  if (key2 == 'partyType' || key2 == 'partyname') {
    val[key1][key2] = ''
  } else if (key2 == 'Incoterms') {
    val[key1][key2] = 'Please Select Date Range'
  } else if (key2 == 'Service') {
    val[key1][key2] = 'Please Select Service'
  } else {
    val[key1][key2] = []
  }
  delete MoreFiltersObj[key2]
}
// 清除 MoreFiltersObj
const clearMoreFiltersObj = () => {
  MoreFiltersObj = {}
}
const IncotermsCheckAll = ref(false)
const ServiceCheckAll = ref(false)
const IncotermsList = ref()
const SeiviceList = ref()
const IncotermsSearch = (val: any, value: any) => {
  InputForm.value.General.Incoterms = val.data
  MoreFiltersObj[val.title] = val.data
  MoreFiltersObj2[val.title] = value
}
const ServiceSearch = (val: any, value: any) => {
  InputForm.value.General.Service = val.data
  MoreFiltersObj[val.title] = val.data
  MoreFiltersObj2[val.title] = value
}
const clickmorefilters = () => {
  drawer.value = true
  const incotermsList = JSON.parse(sessionStorage.getItem('incotermsList') as string) || {}
  if (incotermsList) {
    IncotermsList.value = incotermsList.IncotermsList
    SeiviceList.value = incotermsList.ServiceList
  }
}
const searchTableQeurytest = ref(props.searchTableQeury)
watch(
  () => props.searchTableQeury,
  (current) => {
    searchTableQeurytest.value = current
  }
)
</script>
<template>
  <div>
    <el-button class="More_Filters el-button--grey" @click="clickmorefilters">
      <span class="iconfont_icon icon_more">
        <svg class="iconfont" aria-hidden="true">
          <use xlink:href="#icon-icon_filter_b"></use>
        </svg>
      </span>
      <div class="Filters_title">More Filters</div>
    </el-button>
    <el-drawer size="400px" title="More Filters" v-model="drawer">
      <el-collapse @change="changeCollapse"
        ><!-- General -->
        <el-collapse-item class="collapse_item" name="General" v-if="props.isShipment">
          <template #title>
            <span class="collapse-title"
              >General <el-badge class="mark" :value="GeneralBadge" type="warning"
            /></span>
          </template>
          <div class="ETD">
            <div class="ETD_title">Incoterms</div>
            <SelectValue
              :checkAll="IncotermsCheckAll"
              title="Incoterms"
              :TransportListItem="IncotermsList"
              @generalSearch="IncotermsSearch"
              :Serval="InputForm.General.Incoterms"
            ></SelectValue>
          </div>
          <div class="ETA">
            <div class="ETD_title">Service</div>
            <SelectValue
              :checkAll="ServiceCheckAll"
              title="Service"
              :TransportListItem="SeiviceList"
              @generalSearch="ServiceSearch"
              :Serval="InputForm.General.Service"
            ></SelectValue>
          </div>
        </el-collapse-item>
        <!-- Parties -->
        <el-collapse-item class="collapse_item" name="Parties">
          <template #title>
            <span class="collapse-title"
              >Parties <el-badge class="mark" :value="PartiesBadge" type="warning"
            /></span>
          </template>
          <div class="ETD">
            <div class="ETD_title">Shipper Name</div>
            <AutoSelect
              ASType="contanct"
              ASSearchFiled="Shipper Name"
              :ASSearchObj="searchTableQeurytest"
              :ASSearchMode="props.isShipment ? 'tracking' : 'booking'"
              @changeAutoSelect="changeAutoSelectshippername"
              :ASValue="InputForm.parties.Shippername"
              ASPlaceholder="Please input shipper name"
            >
            </AutoSelect>
          </div>
          <div class="ETA">
            <div class="ETD_title">Consignee Name</div>
            <AutoSelect
              ASType="contanct"
              ASSearchFiled="Consignee Name"
              :ASSearchObj="searchTableQeurytest"
              :ASSearchMode="props.isShipment ? 'tracking' : 'booking'"
              @changeAutoSelect="changeAutoSelectconsigneename"
              :ASValue="InputForm.parties.Consigneename"
              ASPlaceholder="Please input consignee name"
            >
            </AutoSelect>
          </div>
          <SelectAutoSelect
            ref="partSelectTableSelectRef"
            :AddDateType="AddDateType"
            :ASSearchMode="props.isShipment ? 'tracking' : 'booking'"
            :DateTypeoptions="PartyTypeoptions"
            :ASSearchObj="searchTableQeurytest"
            @changeAutoSelectAddType="changeAutoSelectAddType"
            @changeAutoSelect="changeAutoSelectVal"
            :selectedPartyTypeoptions="selectedPartyTypeoptions"
            @delSelect="delSelect"
            ASPlaceholder="Please input party name"
          >
          </SelectAutoSelect>
          <div
            class="MoreType"
            @click="AddType('party')"
            v-if="AddDateType.length != PartyTypeoptions.length"
          >
            <el-button class="el-button--noborder moretype">+ More Party Type</el-button>
          </div>
        </el-collapse-item>
        <!-- Places -->
        <el-collapse-item class="collapse_item" name="Places">
          <template #title
            ><span class="collapse-title"
              >Places<el-badge class="mark" :value="PlacesBadge" type="warning" /></span
          ></template>
          <div class="ETD">
            <div class="ETD_title">Origin</div>
            <SelectTable
              ASSearchFiled="Origin"
              :ASSearchObj="searchTableQeurytest"
              :ASSearchMode="props.isShipment ? 'tracking' : 'booking'"
              :searchInput="InputForm.palces.Origin"
              @check="checkorigin"
            />
          </div>
          <div class="ETA">
            <div class="ETD_title">Destination</div>
            <SelectTable
              ASSearchFiled="Destination"
              :ASSearchObj="searchTableQeurytest"
              :ASSearchMode="props.isShipment ? 'tracking' : 'booking'"
              :searchInput="InputForm.palces.Destination"
              @check="checkdestination"
            />
          </div>
          <SelectTableSelect
            :TablesearchTableQeury="searchTableQeurytest"
            :TablesearchMode="props.isShipment ? 'tracking' : 'booking'"
            ref="placeSelectTableSelectRef"
            :AddDateType="AddDatePlaceType"
            :DateTypeoptions="PlaceTypeoptions"
            @changeAutoSelectAddType="changeAutoSelectPlacesAddType"
            @changeAutoSelect="changeAutoSelectVal"
            :selectedPartyTypeoptions="selectedPlacesTypeoptions"
            @delSelect="delPlacesSelect"
            ASPlaceholder="Please input places name"
          >
          </SelectTableSelect>
          <!-- More Place Type -->
          <div
            class="MoreType"
            @click="AddType('place')"
            v-if="AddDatePlaceType.length != PlaceTypeoptions.length"
          >
            <el-button class="el-button--noborder moretype">+ More Place Type</el-button>
          </div>
        </el-collapse-item>
        <!-- Transportation -->
        <el-collapse-item class="collapse_item" name="Transportation">
          <template #title
            ><span class="collapse-title"
              >Transportation
              <el-badge class="mark" :value="TransportationBadge" type="warning" /></span
          ></template>
          <div class="ETD">
            <div class="ETD_title">Vessel</div>
            <AutoSelect
              ASType="vessel"
              ASSearchFiled="Vessel"
              :ASSearchObj="searchTableQeurytest"
              :ASSearchMode="props.isShipment ? 'tracking' : 'booking'"
              @changeAutoSelect="changeAutoSelectvessel"
              :ASValue="InputForm.transportation.Vessel"
              ASPlaceholder="Please input vessel name or code"
            >
            </AutoSelect>
          </div>
          <div class="ETA">
            <div class="ETD_title">Voyage/Flight</div>
            <AutoSelect
              ASType="voyage"
              :ASSearchObj="searchTableQeurytest"
              :ASSearchMode="props.isShipment ? 'tracking' : 'booking'"
              ASSearchFiled="Voyage/Flight"
              @changeAutoSelect="changeAutoSelectvoyage"
              :ASValue="InputForm.transportation.Voyage"
              ASPlaceholder="Please input Voyage or flight no."
            ></AutoSelect>
          </div>
        </el-collapse-item>
        <!-- Others -->
        <!-- <el-collapse-item class="collapse_item" name="Others">
          <template #title><span class="collapse-title">Others</span></template>
        </el-collapse-item> -->
      </el-collapse>
      <div class="more_bottom">
        <el-button class="reset" type="default" @click="clearrest">
          <span class="iconfont_icon select_icon">
            <svg class="iconfont" aria-hidden="true">
              <use xlink:href="#icon-icon_reset_b"></use>
            </svg>
          </span>
          Reset
        </el-button>
        <el-button class="reset el-button--dark" style="margin-left: 8px" @click="SearchMore">
          <span class="iconfont_icon select_icon search_icon">
            <svg class="iconfont" aria-hidden="true">
              <use xlink:href="#icon-icon_search_b"></use>
            </svg>
          </span>
          Search
        </el-button>
      </div>
    </el-drawer>
  </div>
</template>

<style lang="scss" scoped>
.icon_more {
  margin-left: 8px;
  margin-right: 0;
}

.icon_delete {
  fill: var(--color-danger);
  cursor: pointer;
}

.More_Filters {
  display: flex;
  align-items: center;
  height: 32px;
  font-size: var(--font-size-3);
  margin-left: 8px;
  width: 116px;
}

.More_Filters:hover {
  .Filters_title {
    color: var(--color-theme);
  }
}

.select_icon {
  margin-right: 8px;
}

.Filters_title {
  margin: 0 8px;
}

:deep(.el-drawer__header) {
  background-color: var(--color-table-header-bg);
  display: flex;
  align-items: center;
  height: 64px;
  padding: 0;
  padding-left: 17.12px;
  margin-bottom: 0;
  color: var(--color-neutral-1);
}

:deep(.el-drawer__title) {
  font-size: var(--font-size-6);
  font-weight: bold;
}

:deep(.el-drawer__close-btn) {
  font-size: var(--font-size-4);
  color: var(--icon-color-black);
  margin-right: 24px;
  padding: 0;
}

:deep(.el-drawer__body) {
  padding: 0;
  position: relative;
}

.collapse-title {
  flex: 1 0 90%;
  order: 1;
  text-align: left;
}

:deep(.el-collapse-item__header) {
  border-bottom: none;
  height: 48px;
  color: var(--icon-color-blac);
  font-size: var(--font-size-4);
  font-weight: bold;
  padding-left: 16px;
}

:deep(.el-collapse-item__wrap) {
  border-bottom: none;
  background-color: var(--more-filters-background-color);
}

.ETD {
  margin: 8px 16px;
}

.ETA {
  margin: 16px 16px;
}

.ETD_title {
  font-size: var(--font-size-2);
  color: var(--color-neutral-2);
}

.Date_Title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.MoreType {
  color: var(--color-accent-2);
  padding: 0 0 16px 16px;
  cursor: pointer;
}

.AddType {
  background-color: var(--addparties-background-color);
  margin: 0 16px 8px 16px;
  padding: 8px;
  border-radius: var(--border-radius-6);
}

.more_bottom {
  display: flex;
  align-items: center;
  bottom: 0;
  height: 64px;
  border-top: 1px solid var(--color-border-top);
  width: 400px;
  padding: 16px;
}

.reset {
  width: 180px;
  display: flex;
  align-items: center;
  height: 40px;
  justify-content: center;
  border: 1px solid var(--color-accent-13);
  border-radius: var(--border-radius-6);
}

.AlertInput :deep(.el-select__wrapper) {
  box-shadow: 0 0 0 0.5px var(--color-danger);
}

:deep(.el-drawer__body) {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow-x: hidden;
}

:deep(.el-overlay) {
  background-color: transparent;
}
:deep(.el-drawer__close-btn) {
  margin-right: 0;
}
.moretype {
  background-color: transparent;
  padding: 0 4px;
  height: 24px;
}
</style>
