<template>
  <div :class="prefixCls" :style="getStyle">
    <CollapseHeader
      v-bind="props"
      :prefixCls="prefixCls"
      :iconStyle="iconStyle"
      :cardStyle="props.cardStyle"
      :show="show"
      @expand="handleExpand"
    >
      <template #title>
        <slot name="title"></slot>
      </template>
      <template #action>
        <slot name="action"></slot>
      </template>
    </CollapseHeader>
    <div class="collapse-box">
      <CollapseTransition :enable="canExpan">
        <Skeleton v-if="loading" :active="loading" />
        <div :class="`${prefixCls}__body`" v-else v-show="show">
          <slot></slot>
        </div>
      </CollapseTransition>
    </div>
    <div :class="`${prefixCls}__footer`" v-if="$slots.footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import type { PropType } from 'vue';
  import { computed, ref } from 'vue';
  import { isNil } from 'lodash-es';
  // component
  import { Skeleton } from 'ant-design-vue';
  import { CollapseTransition } from '/@/components/Transition';
  import CollapseHeader from './CustomCollapseHeader.vue';
  import { triggerWindowResize } from '/@/utils/event';
  // hook
  import { useTimeoutFn } from '/@/hooks/core/useTimeout';
  import { useDesign } from '/@/hooks/web/useDesign';

  const props = defineProps({
    title: { type: String, default: '' },
    loading: { type: Boolean },
    /**
     *  Can it be expanded
     */
    canExpan: { type: Boolean, default: true },
    /**
     * Warm reminder on the right side of the title
     */
    helpMessage: {
      type: [Array, String] as PropType<string[] | string>,
      default: '',
    },
    /**
     * Whether to trigger window.resize when expanding and contracting,
     * Can adapt to tables and forms, when the form shrinks, the form triggers resize to adapt to the height
     */
    triggerWindowResize: { type: Boolean },
    /**
     * Delayed loading time
     */
    lazyTime: { type: Number, default: 0 },
    hasLeftBorder: { type: Boolean, default: false },
    iconStyle: { type: Object },
    cardStyle: { type: Object },
  });

  const show = ref(true);

  const { prefixCls } = useDesign('collapse-container');
  const getStyle = computed(() => {
    return {
      ...getBgStyle.value,
      ...getBorderStyle.value,
      padding:
        props?.cardStyle?.divider.isShow || props?.cardStyle?.content.isShow ? '2px 6px' : '',
      margin: ' 2px 0',
      '--dynamic-divider-border': props?.cardStyle?.divider.isShow
        ? `${props.cardStyle.divider.width}px solid ${props.cardStyle.divider.color}`
        : 'none',
      '--dynamic-icon-color': props?.cardStyle?.icon.color,
      '--dynamic-content-color': props?.cardStyle?.content.isShow
        ? props?.cardStyle?.content.bgImgUrl
          ? `url(${props.cardStyle.content.bgImgUrl})`
          : props?.cardStyle?.content.bgColor
        : '#fffff',
    };
  });
  const getBorderStyle = computed(() => {
    if (props?.cardStyle?.border?.isShow) {
      return {
        border: `${props?.cardStyle?.border?.width}px solid  ${props?.cardStyle?.border?.color}`,
      };
    } else {
      return {};
    }
  });
  const getBgStyle = computed(() => {
    if (props?.cardStyle?.background?.isShow) {
      let paddingStyle =
        props?.cardStyle?.background?.bgImgUrl || props?.cardStyle?.background?.bgColor
          ? { padding: '2px' }
          : {};
      if (props?.cardStyle?.background?.bgImgUrl) {
        return {
          background: `url(${props.cardStyle.background.bgImgUrl})`,
          backgroundSize: `100%`,
        };
      } else if (props?.cardStyle?.background?.bgColor) {
        return {
          background: props?.cardStyle?.background?.bgColor
            ? props?.cardStyle?.background?.bgColor
            : '#ffffff',
          ...paddingStyle,
        };
      } else {
        return {};
      }
    } else {
      return {};
    }
  });
  /**
   * @description: Handling development events
   */
  function handleExpand(val: boolean) {
    show.value = isNil(val) ? !show.value : val;
    if (props.triggerWindowResize) {
      // 200 milliseconds here is because the expansion has animation,
      useTimeoutFn(triggerWindowResize, 200);
    }
  }

  defineExpose({
    handleExpand,
  });
</script>
<style lang="less">
  @prefix-cls: ~'@{namespace}-collapse-container';

  .@{prefix-cls} {
    transition: all 0.3s ease-in-out;

    &__header {
      display: flex;
      height: 50px;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #eee;

      .vben-basic-arrow {
        display: flex;
        border-radius: 50%;
        border: 1px solid #c3c8cf;
        width: 14px;
        height: 14px;
        line-height: 14px;
        font-size: 12px;
        color: #c3c8cf;
        text-align: center;
      }
    }

    &__footer {
      border-top: 1px solid @border-color-light;
    }

    &__action {
      display: flex;
      text-align: right;
      flex: 1;
      align-items: center;
      justify-content: flex-end;
    }
  }

  .collapse-box {
    background: var(--dynamic-content-color);
    padding: 2px 4px;
  }

  .vben-collapse-container__header {
    border-bottom: var(--dynamic-divider-border);
  }
</style>
