<template>
  <div :class="[prefixCls, getAlign]">
    <template v-for="(action, index) in getActions" :key="`${index}-${action.label}`">
      <XTextButton type="primary" v-if="!action.popConfirm" v-bind="action" />
      <el-popconfirm v-bind="action" :title="action.text" v-else>
        <template #reference>
          <XTextButton type="primary" :title="action.title" />
        </template>
      </el-popconfirm>

      <el-divider
        direction="vertical"
        class="action-divider"
        v-if="divider && index < getActions.length - 1"
      />
    </template>
    <el-dropdown :hide-on-click="false" v-if="dropDownActions && dropDownActions.length > 0" class="custom-drop">
      <XTextButton type="primary" title="更多" postIcon="ep:arrow-down" />

      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item v-for="action in getDropdownList" :key="action.label">
            <XTextButton type="primary" v-if="!action.popConfirm" v-bind="action" />
            <el-popconfirm v-bind="action" :title="action.text" v-else>
              <template #reference>
                <XTextButton type="primary" :title="action.title" />
              </template>
            </el-popconfirm>
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>
<script lang="ts" setup>
import { useDesign } from '@/hooks/web/useDesign'
import { ACTION_COLUMN_FLAG } from '@/components/Table/src/const'
import { useTableContext } from '../hooks/useTableContext'
import { ActionItem } from '../src/props'
import { isBoolean, isFunction, isString, isArray } from '@/utils/is'
// 尝试使用相对路径导入
import { checkPermi } from '@/utils/permission'

defineOptions({ name: 'TableAction' })

const props = withDefaults(
  defineProps<{
    actions: ActionItem[] | null
    dropDownActions?: ActionItem[] | null
    divider?: boolean
  }>(),
  {
    actions: null,
    dropDownActions: null,
    divider: true
  }
)

const { getPrefixCls } = useDesign()

const prefixCls = getPrefixCls('table-action')

let table: any = {}

table = useTableContext()

function isIfShow(action: ActionItem): boolean {
  const ifShow = action.ifShow

  let isIfShow = true

  if (isBoolean(ifShow)) {
    isIfShow = ifShow
  }
  if (isFunction(ifShow)) {
    isIfShow = ifShow(action)
  }
  return isIfShow
}

//获取action
const getActions = computed(() => {
  return (toRaw(props.actions) || [])
    .filter((item) => {
      return (
        isIfShow(item) &&
        checkPermi(item.auth ? (isArray(item.auth) ? item.auth : [item.auth]) : [''])
      )
    })
    .map((action) => {
      const { popConfirm } = action
      return {
        ...action,
        title: action.label,
        ...(popConfirm || {}),
        onConfirm: popConfirm?.confirm,
        onCancel: popConfirm?.cancel,
        enable: !!popConfirm
      }
    })
})

//获取下拉action
const getDropdownList = computed(() => {
  return (toRaw(props.dropDownActions) || [])
    .filter((item) => {
      return (
        isIfShow(item) &&
        checkPermi(item.auth ? (isArray(item.auth) ? item.auth : [item.auth]) : [''])
      )
    })
    .map((action) => {
      const { label, popConfirm } = action
      return {
        ...action,
        title: action.label,
        ...popConfirm,
        onConfirm: popConfirm?.confirm,
        onCancel: popConfirm?.cancel
      }
    })
})


const getAlign = computed(() => {
  const columns = (table as any)?.getColumns?.() || []
  const actionColumn = columns.find((item: any) => item.filed === ACTION_COLUMN_FLAG)
  return actionColumn?.align ?? 'center'
})
</script>
<style lang="scss" scoped>
$prefix-cls: #{$namespace}-table-action;
.#{$prefix-cls} {
  display: flex;
  align-items: center;

  .action-divider {
    display: table;
  }
  .el-divider {
    margin: 0 3px;
  }
  &.left {
    justify-content: flex-start;
  }

  &.center {
    justify-content: center;
  }

  &.right {
    justify-content: flex-end;
  }
}

.custom-drop{
  :deep(.el-button--primary){
    &:focus-visible{
      outline: none;
    }
  } 
}
</style>
