<script setup lang="ts">
import { ref, watch, computed } from 'vue'
import type { DropdownInstance } from 'element-plus'

interface ListItem {
  name: string
  checked: boolean
}
interface Props {
  TransportListItem: ListItem[]
  title: String
  Serval: String
  checkAll: boolean
}
const props = withDefaults(defineProps<Props>(), {
  checkAll: false
})
const TransportList = ref(props.TransportListItem)
const Title = ref(props.title)
const Serval = ref(props.Serval)
const checkAll = ref(props.checkAll)
watch(
  () => props.TransportListItem,
  (current) => {
    TransportList.value = current
  }
)
watch(
  () => props.Serval,
  (current) => {
    Serval.value = current
  }
)
watch(
  () => props.checkAll,
  (current) => {
    checkAll.value = current
  }
)

const dropdown1 = ref<DropdownInstance>()
let checkedCount: any[] = []

const handleCheckAllChange = (val: any) => {
  checkedCount = []
  TransportList.value.forEach((item: any) => {
    if (val) {
      item.checked = true
      checkedCount.push(item.name)
    } else {
      item.checked = false
      checkedCount = []
    }
  })
}
const handleCheckedTransportChange = (value: any, checked: any, index: any) => {
  if (checked) {
    checkedCount.push(value)
    const map = new Map()
    checkedCount.forEach((item) => map.set(item, true))
    checkedCount = [...map.keys()]
  } else {
    if (checkedCount.length == 1) {
      checkedCount.splice(0, 1)
    } else {
      checkedCount.splice(index, 1)
    }
  }
  checkAll.value = checkedCount.length === TransportList.value.length
}

// 清除选中
const clearList = () => {
  checkAll.value = false
  TransportList.value.forEach((item: any) => {
    item.checked = false
  })
  changedata.value = ''
  checkedCount = []
}
const emit = defineEmits(['generalSearch'])
const changedata = ref()
const changedata2 = ref()
//点击搜索
const TransportSearch = (visible: any) => {
  if (checkedCount.length == TransportList.value.length) {
    changedata.value = 'All'
    changedata2.value = 'All'
  } else {
    changedata.value = checkedCount.join(', ')
    changedata2.value = checkedCount
  }
  const TransportData = {
    title: Title.value,
    data: changedata.value
  }
  Serval.value = changedata.value
  emit('generalSearch', TransportData, changedata2.value)
  if (!dropdown1.value) return
  if (visible) {
    dropdown1.value.handleClose()
  } else {
    dropdown1.value.handleOpen()
  }
  checkedCount = []
}
const seeall = ref(false)
const clickSeeAll = () => {
  seeall.value = !seeall.value
}
</script>
<template>
  <div class="select" :class="{ isDisabled: TransportList.length == 0 }">
    <el-dropdown
      ref="dropdown1"
      trigger="click"
      :hide-on-click="false"
      :disabled="TransportList.length == 0"
    >
      <div class="el-dropdown-link">
        <div
          v-if="
            props.title == 'Incoterms' && (Serval == 'Please Select Date Range' || Serval == '')
          "
          class="select_title"
        >
          Please Select Date Range
        </div>
        <div
          v-else-if="
            props.title == 'Service' && (Serval == 'Please Select Service' || Serval == '')
          "
          class="select_title"
        >
          Please Select Service
        </div>
        <div v-else class="select_title_2">{{ Serval }}</div>
        <span class="iconfont_icon">
          <svg class="iconfont" aria-hidden="true">
            <use xlink:href="#icon-icon_dropdown_b"></use>
          </svg>
        </span>
      </div>
      <template #dropdown>
        <div class="dropdownwidth">
          <div class="title">{{ Title }}</div>
          <el-dropdown-menu>
            <el-dropdown-item>
              <el-checkbox v-model="checkAll" class="checkbox" @change="handleCheckAllChange">
                <div class="checkbox_title">Select All</div>
              </el-checkbox>
            </el-dropdown-item>
            <el-divider></el-divider>
            <div class="inval" :class="{ seeall: seeall }">
              <el-dropdown-item v-for="(item, index) in TransportList" :key="index">
                <el-checkbox
                  :value="item.name"
                  v-model="item.checked"
                  class="checkbox"
                  @change="handleCheckedTransportChange(item.name, item.checked, index)"
                >
                  <div class="checkbox_title">
                    {{ item.name }}
                  </div>
                </el-checkbox>
              </el-dropdown-item>
            </div>
            <div class="See_all" @click="clickSeeAll">
              <span class="iconfont_icon iconfont_icon_text" :class="{ transformTotal: seeall }">
                <svg class="iconfont" aria-hidden="true">
                  <use xlink:href="#icon-icon_dropdown__line_b"></use>
                </svg>
              </span>
              See All
            </div>
            <div class="transport_bottom">
              <div>
                <el-button class="clear" type="default" @click="clearList">Reset</el-button>
              </div>
              <div>
                <el-button class="search el-button--dark" @click="TransportSearch">OK</el-button>
              </div>
            </div>
          </el-dropdown-menu>
        </div>
      </template>
    </el-dropdown>
  </div>
</template>
<style lang="scss" scoped>
.iconfont_icon {
  margin-right: 8px;
}
.iconfont_select {
  width: 17px;
  height: 17px;
}
.select {
  cursor: pointer;
  width: 368px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: white;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-6);
}
.select:hover {
  border: 1px solid var(--color-theme);
}
.el-dropdown-link {
  width: 360px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.select_title {
  font-size: var(--font-size-3);
  font-weight: 400;
  margin-left: 8.53px;
  color: var(--color-neutral-3);
}
.select_title_2 {
  font-size: var(--font-size-3);
  font-weight: 400;
  margin-left: 8.53px;
  color: var(--color-neutral-1);
}
.title {
  font-weight: 700;
  font-size: var(--font-size-5);
  background-color: var(--color-header-bg);
  height: 48px;
  display: flex;
  align-items: center;
  padding-left: 16px;
}
.checkbox {
  width: 216px;
  font-weight: 400;
  font-size: var(--font-size-3);
  padding: 0 12px;
  height: 40px;
}
:deep(.el-popper__arrow, .el-popper__arrow:before) {
  height: 0;
  width: 0;
}
:deep(.el-checkbox__label) {
  width: 176px;
  padding-left: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.checkbox_title {
  color: var(--color-neutral-1);
}
.checkbox_number {
  color: var(--color-neutral-3);
}
.transport_bottom {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 48px;
  border-top: 1px solid var(--color-border);
  margin-top: 5px;
  font-weight: 400;
  font-size: var(--font-size-3);
}
.clear {
  width: 81px;
  height: 32px;
  margin-right: 7.82px;
}
.search {
  width: 86px;
  height: 32px;
  margin-right: 16px;
}
.search:hover {
  color: var(--color-theme);
}
:deep(.el-dropdown-menu__item:hover) {
  background-color: var(--border-hover-color);
  border-radius: var(--border-radius-6);
  border-color: var(--border-hover-color);
}
:deep(.el-dropdown-menu__item) {
  padding: 0;
  margin: 10px 16px;
}
:deep(.el-dropdown-menu__item:not(.is-disabled):focus) {
  background-color: var(--border-hover-color);
  border-radius: var(--border-radius-6);
  border-color: var(--border-hover-color);
}
.dropdownwidth {
  width: 360px;
}
.el-divider--horizontal {
  margin: 8px 0;
  border-top-color: var(--color-border);
}
.See_all {
  width: 60px;
  height: 24px;
  border-radius: 3px;
  color: var(--color-theme);
  margin: 0 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.See_all:hover {
  background-color: var(--color-btn-default-bg-hover);
}
.iconfont_icon_text {
  margin-right: 2px;
  fill: var(--color-theme);
}
.transformTotal {
  transform: rotate(-180deg);
}
.inval {
  max-height: 100px;
  overflow-y: clip;
}
.seeall {
  max-height: 426px;
  overflow: scroll;
}
.isDisabled {
  background-color: #f5f7fa;
  color: #a8abb2;
  cursor: not-allowed;
  box-shadow: none !important;
}
.isDisabled:hover {
  border-color: var(--color-border);
}
</style>
