<template>
  <div class="flex-1 flex justify-end items-center">
    <el-tooltip effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top" v-if="search">
      <el-button circle icon="Search" @click="toggleSearch()" />
    </el-tooltip>
    <el-tooltip effect="dark" content="刷新" placement="top">
      <el-button circle icon="Refresh" @click="handleRefresh()" />
    </el-tooltip>
    <el-tooltip effect="dark" content="列设置" placement="top" v-if="Object.keys(columns).length > 0">
      <el-dropdown class="ml-3" trigger="click" placement="bottom-end" :hide-on-click="false">
        <el-button circle icon="Menu" />
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>
              <el-checkbox :indeterminate="isIndeterminate" v-model="isChecked" @change="toggleCheckAll">
                全部
              </el-checkbox>
            </el-dropdown-item>
            <div class="dropdown-menu-line"></div>
            <template v-for="(item, key) in columns" :key="key">
              <el-dropdown-item>
                <el-checkbox
                  v-model="item.visible"
                  @change="(e: any) => checkboxChange(e as boolean, key)"
                  :label="item.label"
                />
              </el-dropdown-item>
            </template>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-tooltip>
  </div>
</template>

<script setup lang="ts">
// 定义列数据类型
interface Column {
  label: string
  visible?: boolean
}

// 定义组件属性
const props = withDefaults(
  defineProps<{
    showSearch?: boolean
    columns?: Record<string, Column>
    search?: boolean
  }>(),
  {
    showSearch: true,
    columns: () => ({}),
    search: true
  }
)

// 定义组件事件
const emit = defineEmits<{
  (event: 'update:showSearch', value: boolean): void
  (event: 'update:columns', columns: Record<string, Column>): void
  (event: 'refresh'): void
}>()

// 是否全选状态
const isChecked = computed({
  get: (): boolean => {
    if (!props.columns) return false
    return Object.values(props.columns).every((col) => col.visible !== false)
  },
  set: () => {}
})

// 是否半选状态
const isIndeterminate = computed((): boolean => {
  if (!props.columns) return false
  const hasVisible = Object.values(props.columns).some((col) => col.visible !== false)
  return hasVisible && !isChecked.value
})

// 搜索
const toggleSearch = (): void => {
  emit('update:showSearch', !props.showSearch)
}

// 刷新
const handleRefresh = (): void => {
  emit('refresh')
}

// 单勾选
const checkboxChange = (event: boolean, key: string | number): void => {
  const updatedColumns = { ...props.columns }
  if (updatedColumns[key]) {
    updatedColumns[key].visible = event
    emit('update:columns', updatedColumns)
  }
}

// 切换全选/反选
const toggleCheckAll = (): void => {
  if (!props.columns) return
  const updatedColumns = { ...props.columns }
  const newVisibleValue = !isChecked.value
  Object.values(updatedColumns).forEach((col) => {
    col.visible = newVisibleValue
  })
  emit('update:columns', updatedColumns)
}
</script>

<style lang="scss" scoped>
:deep(.el-dropdown-menu__item) {
  padding: 0;

  .el-checkbox {
    width: 100%;
    padding: 0 16px;
  }
}

.dropdown-menu-line {
  width: 90%;
  height: 1px;
  background-color: var(--el-border-color);
  margin: 6px auto;
}
</style>
