/*
 * @Author: wfl
 * @LastEditors: wfl
 * @description:
 * @updateInfo:
 * @Date: 2022-08-03 17:15:24
 * @LastEditTime: 2022-10-24 14:59:37
 */

import { useMenuSetting } from '@/global/hooks/setting/useMenuSetting';
import { useDesign } from '@/global/hooks/web/useDesign';
import { Button, Dropdown, Menu, MenuItem } from 'ant-design-vue';
import { computed, CSSProperties, defineComponent, nextTick, PropType, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import './contentHeader.less';

type TEmit = 'Search' | 'Export' | 'Import' | 'Refresh' | 'LineHeight' | 'Setting';

enum ELineHeight {
  default = '较高',
  middle = '正常',
  small = '较低',
}

const contentHeader = defineComponent({
  props: {
    // 标题
    title: {
      type: String as PropType<string>,
      default: '',
    },
    // 图标按钮列表
    iconList: {
      type: Array as PropType<string[]>,
      default: () => ['export', 'import', 'lineHeight', 'setting', 'refresh'],
    },
    border: {
      type: Boolean,
      default: false,
    },
    titleStyle: {
      type: Object as PropType<CSSProperties>,
      default: () => {},
    },
  },
  emits: ['Search', 'Export', 'Import', 'Refresh', 'LineHeight', 'Setting'],
  setup(props, { slots, emit }) {
    const { t } = useI18n();
    const { prefixCls, prefixVar } = useDesign('content-main');
    const { getContentPadding, getContentMargin, getContentRadius } = useMenuSetting();

    const mainStyle = computed(() => {
      return `padding: ${isHeader.value ? '15px' : '8px'} ${getContentPadding.value}px; margin: ${
        getContentMargin.value
      }px;border-radius: ${getContentRadius.value}px;height: ${contentHeight.value}px`;
    });

    const isHeader = computed(() => {
      return !props.title && (!props?.iconList || !props?.iconList?.length);
    });

    const getIconBtn = (icon: string, title: string, event: TEmit) => {
      return (
        <Button onClick={() => emit(event)}>
          {{
            icon: () => <i class={`ik ${icon}`} title={title} />,
            default: () => t(title),
          }}
        </Button>
      );
    };

    const lineHeight = ref('middle');
    const handChangeHeight = (h: keyof typeof ELineHeight) => {
      lineHeight.value = h;
    };

    const getDropdownBtn = (icon: string, title: string, event: TEmit) => {
      return (
        <Dropdown>
          {{
            overlay: () => {
              return (
                <Menu selectedKeys={[lineHeight.value]}>
                  <MenuItem key="default" onClick={() => handChangeHeight('default')}>
                    {ELineHeight.default}
                  </MenuItem>
                  <MenuItem key="middle" onClick={() => handChangeHeight('middle')}>
                    {ELineHeight.middle}
                  </MenuItem>
                  <MenuItem key="small" onClick={() => handChangeHeight('small')}>
                    {ELineHeight.small}
                  </MenuItem>
                </Menu>
              );
            },
            default: () => getIconBtn(icon, t(title), event),
          }}
        </Dropdown>
      );
    };

    const tableHeight = ref(0);
    const contentHeight = ref(0);

    const getTableHeight = async () => {
      await nextTick();
      // 搜索栏
      const height =
        document.getElementById(`${prefixVar}-content-search`)?.getBoundingClientRect().height || 0;
      const serH = height ? height + getContentMargin.value * 2 : getContentMargin.value; // 15 margin值
      // 标签行
      const herH = 50 + getContentMargin.value * 2 + getContentPadding.value * 2;
      const max =
        document.querySelector(`.${prefixVar}-layout-content.full`)?.getBoundingClientRect()
          .height || 0;
      const page = document.querySelector('.ant-pagination')?.getBoundingClientRect().height || 0;
      const fixh = max - herH - serH - page - getContentMargin.value * 2;
      tableHeight.value = fixh;
      contentHeight.value = max - serH - getContentMargin.value;
    };
    getTableHeight();

    return () => (
      <>
        <div class={prefixCls} style={mainStyle.value}>
          <div
            style={props.titleStyle}
            class={`${prefixCls}-border ${
              isHeader.value ? 'h-0' : 'h-50px'
            } flex items-center flex-row justify-between ${
              props.border ? 'border-bottom-1px border-[@border-color-base] mb-10px' : ''
            }`}
          >
            <div class="flex items-center flex-1">
              <slot name="search">{slots.search ? slots.search() : null}</slot>
              <span class="text-16px font-bold mr-15px">{props.title}</span>
            </div>
            <div class="icon-btn font-bold">
              <div class="mr-8px">
                <slot name="btnList">{slots.btnList ? slots.btnList() : null}</slot>
              </div>
              <temlate>
                {props.iconList.includes('search')
                  ? getIconBtn('ik-sousuotianchong', 'sys.btn.search', 'Search')
                  : null}
                {props.iconList.includes('lineHeight')
                  ? getDropdownBtn('ik-line-height', 'sys.btn.lineHeight', 'LineHeight')
                  : null}
                {props.iconList.includes('export')
                  ? getIconBtn('ik-daochu', 'sys.btn.export', 'Export')
                  : null}
                {props.iconList.includes('import')
                  ? getIconBtn('ik-daoru', 'sys.btn.import', 'Import')
                  : null}
                {props.iconList.includes('refresh')
                  ? getIconBtn('ik-shuaxin', 'sys.btn.refresh', 'Refresh')
                  : null}
                {props.iconList.includes('setting')
                  ? getIconBtn('ik-shezhi', 'sys.btn.setting', 'Setting')
                  : null}
              </temlate>
            </div>
          </div>
          <div class="conteent-table">
            <slot>
              {slots.default
                ? slots.default({
                    // 表格高度
                    height: tableHeight.value,
                    // 行高
                    size: lineHeight.value,
                  })
                : null}
            </slot>
          </div>
        </div>
      </>
    );
  },
});

export default contentHeader;