<template>
  <RenderHeaderDscrp />
</template>

<script setup lang="tsx" name="LjHeaderDscrp">
import { ref, reactive, onMounted, useSlots, nextTick, provide, watch, computed, toRefs, inject } from "vue";
import { useGlobalStore } from "@/stores/modules/global";

export interface templateItem {
  field: string;
  title: string;
  [key: string]: any;
}

interface LjHeaderDscrpProps {
  /**
   * @description 数据
   */
  data: any;
  /**
   * @description 模板内容
   */
  template: templateItem[];
  // /**
  //  * @description el-row 组件的列间距
  //  */
  // gutter?: number;
}

const DEFINEGUTTER: any = {
  small: 12,
  default: 16,
  large: 24
};

const slots = useSlots();
const { assemblySize } = useGlobalStore();
const props = withDefaults(defineProps<LjHeaderDscrpProps>(), {
  data: {}
  // gutter: 12
});

const defaultGutter = computed(() => {
  return DEFINEGUTTER[assemblySize] || DEFINEGUTTER.default;
});

const RenderDscrpItem = (colspan: number, tp: templateItem) => {
  let _slot = {
    title: () => {
      return <div style="display: inline-flex; align-items: center">{tp.title}</div>;
    }
  };

  return (
    <el-col span={colspan}>
      <div class="flx-col">
        <div class="lj-headerdscrp-card__title">{tp.title}</div>
        <div class="lj-headerdscrp-card__value">{props.data[tp.field]}</div>
        {slots[tp.field + "_footer"] && slots[tp.field + "_footer"]?.()}
      </div>
    </el-col>
  );
};

const RenderHeaderDscrp = () => {
  let _span = 24 / props.template.length;
  return (
    <el-row class="lj-headerdscrp-card" gutter={defaultGutter.value}>
      {props.template.map((item: templateItem) => {
        return slots[item.field] ? slots[item.field]?.(_span, item) : RenderDscrpItem(_span, item);
      })}
    </el-row>
  );
};
</script>

<style lang="scss">
.lj-headerdscrp-card {
  background-color: $color-gray-4;
  padding: $space-a2 $space-a3;
  &__title {
    color: $color-text-secondary-text;
    @include text-style-footnote-description;
  }
  &__value {
    color: $color-text-primary-text;
    @include text-style-body-medium;
  }
}
</style>
