<template>
  <RenderDropdownList />
</template>

<script setup lang="tsx" name="WidgetDropdownList">
import { ref, watch, computed, nextTick } from "vue";
import { detailAction } from "../interface/index";
import { useDesign } from "@/hooks/useDesign";
import Grid from "@/components/Grid/index.vue";
import GridItem from "@/components/Grid/components/GridItem.vue";
import ButtonGroup from "./ButtonGroup.vue";
import { More, ArrowDown, ArrowRight } from "@element-plus/icons-vue";
import { isArray, isObject, isFunction } from "@/utils/is";
import { cloneDeep, pick, get, omit, defaultsDeep } from "lodash-es";
import { useButtonGroup } from "@/hooks/useButtonGroup";

type Props = {
  /**
   * @description ButtonGroup组件：父组件id值
   */
  target?: any;
  buttons: any;
  assemblySize: string;
  data: any;
  /**
   * @description ButtonGroup组件：update
   */
  update: any;
};

const props = withDefaults(defineProps<Props>(), {
  assemblySize: ""
});

const inputSeacrh = ref("");
const { prefixCls } = useDesign("widget_dropdown-list");
const { getIconSlot, buttonsMenuRender, bottonDropdownRender } = useButtonGroup(props.buttons, props.data);
/**
 * @description 按钮默认宽度px
 */
//  const itemWidth = 80;
// const innerwidth = ref(0);
const groupCol = { xs: 2, sm: 3, md: 3, lg: 4, xl: 4 };

const RenderActionItem = (aciton: any) => {
  let _iconRender = getIconSlot(aciton);
  _iconRender = _iconRender.icon ? _iconRender.icon() : undefined;

  return (
    <>
      <div class={`${prefixCls}__item flx ${props.assemblySize}`} onClick={aciton.clickFunc}>
        {_iconRender && <div class={`${prefixCls}__item-icon flx-shrink flx-center`}>{_iconRender}</div>}
        <div class={`${prefixCls}__item-content flx-col flx-1`}>
          <span class="text-primary-text text-body-b title">{aciton.label}</span>
          {aciton.dscrp && (
            <span class="text-secondary-text text-f-c text-ellipsis-two" title={aciton.dscrp}>
              {aciton.dscrp}
            </span>
          )}
        </div>
      </div>
    </>
  );
};

const RenderHeaderGroup = (data: any) => {
  if (!data?.groupLabel) return <></>;

  let _render: any = [];
  data.groupAction.forEach((item: detailAction) => {
    if (item.groupAction?.length) {
      _render.push(RenderHeaderGroup(item));
      return;
    }
    let _limited = isFunction(item?.limited) ? item.limited() : item?.limited ?? false;
    if (!_limited) {
      console.log("groupAction____item :>> ", item);
      let _iconRender = getIconSlot(item);
      _iconRender = _iconRender.icon ? _iconRender.icon() : undefined;

      _render.push(<GridItem class={`${prefixCls}__item-wrapper`}>{RenderActionItem(item)}</GridItem>);
    }
  });
  if (!_render.length) {
    _render.push(<el-empty class image-size={40} description="暂无功能" />);
  }
  return (
    <>
      <Grid gap={[8, 8]} cols={groupCol} target={`${prefixCls}__dropdown-warpper`}>
        {_render}
      </Grid>
    </>
  );
};

const RenderDropdwonMenuList = (butttons: any) => {
  let dropdownRender = butttons.map((item: any, index: number) => {
    if (isArray(item)) {
      let _menuRender = null;
      if (item.length > 1) {
        _menuRender = bottonDropdownRender(item, "right-start");
      } else {
        _menuRender = buttonsMenuRender(item[0]);
      }

      return _menuRender;
    } else {
      return buttonsMenuRender(item);
    }
  });
  dropdownRender = dropdownRender.filter((item: any) => item);

  console.log("dropdownRender :>> ", dropdownRender);
  let _buttonsRdMenu = dropdownRender.map((itm: any) => {
    return (
      <>
        <el-dropdown-item>{itm}</el-dropdown-item>
      </>
    );
  });

  return (
    <>
      <el-dropdown-menu>{_buttonsRdMenu}</el-dropdown-menu>
    </>
  );
};

const RenderDropdownList = () => {
  console.log("!props.buttons?.groupAction?.length :>> ", !props.buttons?.groupAction?.length);
  if (!props.buttons?.groupAction?.length) {
    return <ButtonGroup {...props} buttons={[props.buttons]} />;
  }

  let _iconRender: any = {};
  if (props.buttons?.icon) {
    _iconRender = getIconSlot(props.buttons);
  }

  let _renderGroup: any = [];
  let slots: any = {};

  // 判断子列表，是否还是分组数据
  let ifOnlyDropdown = Object.keys(props.buttons.groupAction[0]).includes("groupLabel");
  if (!ifOnlyDropdown) {
    _renderGroup.push(RenderDropdwonMenuList(props.buttons.groupAction));

    slots = {
      dropdown: () => {
        return <>{_renderGroup}</>;
      }
    };
  } else {
    props.buttons.groupAction.forEach((group: detailAction) => {
      _renderGroup.push(
        <section class={`${prefixCls}__group`}>
          {group?.groupLabel && (
            <header class={`${prefixCls}__group-header`}>
              <span class="text-body-c text-secondary-text">{group.groupLabel}</span>
            </header>
          )}
          {RenderHeaderGroup(group)}
        </section>
      );
    });

    slots = {
      dropdown: () => {
        return (
          <>
            <section class={"flx-col"} style={{ width: "400px" }} id={`${prefixCls}__dropdown-warpper`}>
              {/* <header class={`${prefixCls}__dropdown-header flx`}>
                <div class="text-body-b text-primary-text flx-shrink mr-16">{props.buttons.groupLabel}</div>
                <el-input v-model={inputSeacrh.value} size="small" class="flx-1" maxlength="20" />
              </header> */}
              {_renderGroup}
            </section>
          </>
        );
      }
    };
  }

  return (
    <el-dropdown
      v-slots={slots}
      class={`${prefixCls}`}
      placement={!ifOnlyDropdown ? "bottom" : "bottom-end"}
      trigger="click"
      popper-class="button-group__menu-more"
    >
      <el-button size={props.assemblySize} class={`${prefixCls}__btn`} v-slots={_iconRender}>
        {props.buttons.groupLabel}
      </el-button>
    </el-dropdown>
  );
};
</script>

<style lang="scss">
$prefix-cls: "#{$namespace}-widget_dropdown-list";

.#{$prefix-cls} {
  &__btn {
    border: none !important;
  }

  &__dropdown {
    &-header {
      padding: $space-b2 $space-b1;
    }
  }

  &__group {
    padding-left: $space-b1;
    padding-right: $space-b1;

    &-header {
      margin-left: $space-b1;
      margin-right: $space-b1;
      padding-top: $space-a1;
      padding-bottom: $space-a1;
      margin-bottom: $space-b1;
      border-bottom: 1px solid $color-gray-3;
    }

    .el-empty {
      grid-column: 1 / -1;
      padding: 8px 0;

      .el-empty__description {
        margin-top: $space-b1;
        p {
          color: $color-text-disable;
        }
      }
    }
  }

  &__item {
    margin: $space-a1;
    padding: $space-a1;
    border-radius: $br-sm;
    transition: all 0.2s ease-in-out;
    flex: 1;
    cursor: pointer;

    &:hover {
      // box-shadow: 0 1px 2px -2px $color-primary-200, 0 3px 6px 0px $color-primary-100, 0 5px 12px 4px $color-primary-000;
      background-color: $color-primary-000;
      transform: translateY(-2px);

      .#{$prefix-cls}__item-content {
        .title {
          color: $color-primary-500;
        }
      }
    }

    &-wrapper {
      display: flex;
      align-items: stretch;
    }
    &-icon {
      font-size: $space-a3;
      margin-left: $space-a1;
      margin-right: $space-a1;
      .iconfont {
        font-size: $space-a3;
      }
    }

    // &.large {
    // }
    &.default {
      .#{$prefix-cls}__item-icon {
        font-size: $space-a2;
        .iconfont {
          font-size: $space-a2;
        }
      }
    }
  }
}
</style>
