<script setup lang="ts">
import { getResult } from '@/utils'
import { PropsType, ToolbarConfigType } from '@/components/AToolbar/type'
import { CheckedInfo } from 'element-plus/es/components/tree-v2/src/types'
import { useUserStore } from '@/stores/modules/user'

const props = withDefaults(defineProps<PropsType>(), {
  showQuery: true
})

const columnRef = ref()

const emits = defineEmits(['update:showQuery'])

const columnList = props.columnConfig
  .filter((item) => getResult(item.if ?? true))
  .filter((item) => hasPermissions(item.permissions))
  .filter((item) => !item.handleConfig)
  .map((item) => {
    return { label: item.label }
  })

// 显隐列初始默认隐藏列
onMounted(() => {
  columnList.forEach((item) => {
    if (props.columnMap.get(item.label as string)) {
      columnRef.value.setChecked(item.label, true, false)
    }
  })
})

// 获取操作按钮显示icon
function getIcon(config: ToolbarConfigType) {
  if (config.common) {
    switch (config.common) {
      case 'search':
        return 'search'
      case 'reset':
        return 'refresh'
      case 'add':
        return 'documentAdd'
      case 'delete':
        return 'delete'
    }
  }
  return config.icon
}

// 获取操作按钮显示文本
function getText(config: ToolbarConfigType) {
  if (config.common) {
    switch (config.common) {
      case 'search':
        return '搜索'
      case 'reset':
        return '重置'
      case 'add':
        return '新增'
      case 'delete':
        return '删除'
    }
  }
  return config.text
}

// 获取操作按钮样式
function getType(config: ToolbarConfigType) {
  if (config.common) {
    switch (config.common) {
      case 'search':
        return 'primary'
      case 'reset':
        return 'warning'
      case 'add':
        return 'success'
      case 'delete':
        return 'danger'
    }
  }
  return config.type
}

// 更改数据列的显示和隐藏
function columnChange(obj: any, checkedInfo: CheckedInfo) {
  columnList.forEach((item) => {
    const visible = checkedInfo.checkedKeys.includes(item.label as string)
    columnRef.value.setChecked(item.label, visible, false)
    props.columnMap.set(item.label as string, visible)
  })
}

// 切换搜索
function toggleQuery() {
  emits('update:showQuery', !props.showQuery)
}

// 是否有权限
function hasPermissions(value?: string | string[] | undefined) {
  if (value === undefined) return true

  const userStore = useUserStore()
  if (userStore.superAdmin) return true

  const permissions = userStore.permissions
  if (value instanceof Array && value.length) {
    const hasPermission = value.every((item) => permissions.includes(item))
    if (!hasPermission) return false
  } else {
    if (!permissions.includes(value as string)) return false
  }
  return true
}
</script>

<template>
  <div class="container">
    <div class="left">
      <template v-for="(item, index) in config" :key="index">
        <el-button
          v-if="getResult(item?.if ?? true)"
          v-permissions="item.permissions"
          plain
          :disabled="getResult(item.disabled ?? false)"
          :key="index"
          :type="getType(item)"
          :icon="getIcon(item)"
          @click="item.click?.()"
        >
          {{ getText(item) }}
        </el-button>
      </template>
    </div>

    <div class="right">
      <el-row :gutter="10" style="position: absolute; bottom: 0">
        <el-col :span="12">
          <el-tooltip
            class="item"
            effect="dark"
            :content="showQuery ? '隐藏搜索条件' : '显示搜索条件'"
            placement="top"
          >
            <el-button circle icon="Search" @click="toggleQuery()" />
          </el-tooltip>
        </el-col>
        <el-col :span="12">
          <el-tooltip class="item" effect="dark" content="显示/隐藏列" placement="top">
            <div class="show-btn">
              <el-popover placement="bottom" trigger="click">
                <div class="tree-header">显示/隐藏列</div>
                <el-tree
                  ref="columnRef"
                  :data="columnList"
                  show-checkbox
                  @check="columnChange"
                  node-key="label"
                />
                <template #reference>
                  <el-button circle icon="Menu" />
                </template>
              </el-popover>
            </div>
          </el-tooltip>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<style scoped lang="scss">
.container {
  display: flex;
}

.left {
  flex: 1;
  line-height: 2.3;
}

.right {
  display: flex;
  justify-content: flex-end;
  line-height: 2.3;
  position: relative;
  width: 100px;
}

.tree-header {
  width: 100%;
  line-height: 24px;
  text-align: center;
}
</style>
