import { ref, Ref, ComputedRef, unref, computed, watch, toRaw } from 'vue';
import type { BasicColumn, BasicTableProps } from '../types/table';
import { cloneDeep } from 'lodash-es';
import { isArray, isBoolean, isFunction } from '@/utils/is';
import { usePermission } from '@/hooks/web/usePermission';
import { ActionItem } from '@/components/Table';
import { renderEditCell } from '../components/editable';
// import { Tooltip } from 'ant-design-vue';
// import { FormOutlined } from '@ant-design/icons-vue';

export function useColumns(propsRef: ComputedRef<BasicTableProps>) {
  const columnsRef = ref(unref(propsRef).columns) as unknown as Ref<BasicColumn[]>;
  let cacheColumns = unref(propsRef).columns.filter((item) => item.type != 'selection');

  const getColumnsRef = computed(() => {
    const columns = cloneDeep(unref(columnsRef));

    handleActionColumn(propsRef, columns);
    if (!columns) return [];
    return columns;
  });

  const { hasPermission } = usePermission();

  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;
  }

  // const renderTooltip = (trigger, content) => {
  //   return h(Tooltip, null, {
  //     title: () => content,
  //     default: () => trigger,
  //   });
  // };

  const getPageColumns = computed(() => {
    const pageColumns = unref(getColumnsRef);
    const columns = cloneDeep(pageColumns);
    return columns
      .filter((column) => {
        return hasPermission(column.auth as string[]) && isIfShow(column);
      })
      .map((column) => {
        column.align = typeof column.align === 'undefined' ? 'center' : column.align;
        //默认 ellipsis 为true
        column.ellipsis = typeof column.ellipsis === 'undefined' ? { tooltip: true } : false;
        const { edit, editRow } = column;
        if (edit || editRow) {
          column.customRender = renderEditCell(column);
          //const title: any = column.title;
          // column.title = () => {
          //   return renderTooltip(
          //     h('span', {}, [
          //       h('span', { style: { 'margin-right': '5px' } }, title),
          //       h(
          //         'span',
          //         {
          //           size: 14,
          //         },
          //         {
          //           default: () => h(FormOutlined),
          //         }
          //       ),
          //     ]),
          //     '该列可编辑'
          //   );
          // };
        }
        return column;
      });
  });

  watch(
    () => unref(propsRef).columns,
    (columns) => {
      columnsRef.value = columns;
      cacheColumns = columns;
    },
  );

  function handleActionColumn(propsRef: ComputedRef<BasicTableProps>, columns) {
    const { actionColumn } = unref(propsRef);
    if (!actionColumn) return;
    const hasIndex = columns.findIndex((item) => item.key === 'action');
    if (hasIndex === -1) {
      columns.push({
        ...(actionColumn as any),
      });
    }
  }

  //设置
  function setColumns(columnList: string[]) {
    const columns: any[] = cloneDeep(columnList);
    if (!isArray(columns)) return;

    if (!columns.length) {
      columnsRef.value = [];
      return;
    }
    columnsRef.value = columns as BasicColumn[];
  }

  //获取
  function getColumns(): BasicColumn[] {
    const columns = toRaw(unref(getColumnsRef));
    return columns;
  }

  //获取原始
  function getCacheColumns(isKey?: boolean): any[] {
    return isKey ? cacheColumns.map((item) => item.key) : cacheColumns;
  }

  //更新原始数据单个字段
  function setCacheColumnsField(key: string | undefined, value: Partial<BasicColumn>) {
    if (!key || !value) {
      return;
    }
    cacheColumns.forEach((item) => {
      if (item.key === key) {
        Object.assign(item, value);
        return;
      }
    });
  }

  return {
    getColumnsRef,
    getCacheColumns,
    setCacheColumnsField,
    setColumns,
    getColumns,
    getPageColumns,
  };
}