<template>
  <div :class="[`${prefixCls}__header pr-2 py-5 mb-4`, $attrs.class]">
    <BasicTitle :helpMessage="helpMessage" normal>
      <template v-if="title">
        <div class="node-head">
          <div class="node-border" :style="getNodeStyle"></div>
          <div class="node-title" :style="getTitleStyle">{{ title }}</div>
        </div>
      </template>
      <template v-else>
        <slot name="title"></slot>
      </template>
    </BasicTitle>
    <div :class="`${prefixCls}__action`">
      <slot name="action"></slot>
      <BasicArrow
        v-if="canExpan && props?.cardStyle?.icon?.isShow"
        up
        :expand="show"
        @click="$emit('expand')"
        :iconStyle="getIconStyle"
      />
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { computed } from 'vue';
  import { BasicArrow, BasicTitle } from '/@/components/Basic';

  const props = defineProps({
    prefixCls: { type: String },
    helpMessage: {
      type: [Array, String] as PropType<string[] | string>,
      default: '',
    },
    title: { type: String },
    show: { type: Boolean },
    canExpan: { type: Boolean },
    hasLeftBorder: { type: Boolean },
    iconStyle: { type: Object },
    cardStyle: { type: Object },
  });
  const getIconStyle = computed(() => {
    if (props?.cardStyle?.icon?.isShow) {
      return {
        color: props?.cardStyle?.icon.color,
        ...props.iconStyle,
      };
    } else {
      return {
        ...props.iconStyle,
      };
    }
  });
  const getNodeStyle = computed(() => {
    if (props?.cardStyle?.title?.isShow) {
      return {
        background: props?.cardStyle?.title?.color,
        width: '4px',
        height: '16px',
        borderRadius: '2px',
      };
    } else {
      return {};
    }
  });
  const getTitleStyle = computed(() => {
    if (props?.cardStyle?.title?.isShow) {
      return {
        color: props?.cardStyle?.title?.color,
        fontSize: props?.cardStyle?.title?.fontSize
          ? props?.cardStyle?.title?.fontSize + 'px'
          : '12px',
        fontWeight: props?.cardStyle?.title?.fontWeight ?? 800,
      };
    } else {
      return {};
    }
  });
</script>
<style scoped lang="less">
  .node-head {
    display: flex;
    align-items: center;
    line-height: 23px;
  }

  .node-title {
    padding-left: 8px;
  }

  .vben-basic-arrow {
    border: 1px solid var(--dynamic-icon-color) !important;
  }
</style>
