<template>
  <RenderDescriptions v-bind="props" />
  <!-- <el-descriptions class="description_warpper" v-bind="$attrs" :column="descColumn">
    <el-descriptions-item
      v-for="(item, key) in columns"
      :key="key"
      :label="`${$t(`table.${item?.table}.${item?.field}`)} :`"
      :span="item.span || 1"
      v-bind="$attrs"
    >
      <template v-if="item.slotName">
        <slot :name="item.slotName"></slot>
      </template>
      <template v-else-if="item.render">
        {{ item.render(data) }}
      </template>
      <span class="tip_class" v-else>
        <el-tooltip v-bind="$attrs" v-if="item.tooltip" :placement="item.placement || 'bottom'">
          <span>
            <span v-if="item.filters && item.filters.list">
              {{
                constantEscape(
                  data[item.field],
                  listTypeInfo[item.filters.list],
                  item.filters.key || "value",
                  item.filters.label || "label"
                )
              }}
            </span>
            <span v-else>{{ data[item.field] }}</span>
            <el-icon :size="item.iconSize" :color="item.iconColor" style="cursor: pointer; margin-left: 2px; top: 1px">
              <Warning />
            </el-icon>
          </span>
          <template #content v-if="item.tooltip">
            <span v-if="typeof item.tooltip === 'string'">{{ item.tooltip }}</span>
            <template v-else-if="typeof item.tooltip === 'function'">
              <render-tooltip :render="item.tooltip" :item="item" />
            </template>
          </template>
        </el-tooltip>
        <span v-else>
          <span v-if="item.filters && item.filters.list">
            {{
              constantEscape(
                data[item.field],
                listTypeInfo[item.filters.list],
                item.filters.key || "value",
                item.filters.label || "label"
              )
            }}
          </span>
          <span v-else>{{ data[item.field] }}</span>
        </span>
      </span>
    </el-descriptions-item>
  </el-descriptions> -->
</template>

<script setup lang="tsx" name="LjDescription">
import { useAttrs, useSlots } from "vue";
import RenderTooltip from "./renderTooltip.vue";
import { descDataItem } from "./interface/index";
import { useI18n } from "vue-i18n";

interface LjDescProp {
  descColumn?: number | string;
  /**
   * @arguments Array 后台数据源
   */
  data?: any;
  /**
   * @arguments Object 需要解析的下拉数据
   */
  listTypeInfo?: any;
  columns?: any;
}

const props = withDefaults(defineProps<LjDescProp>(), {
  descColumn: 4,
  data: () => ({}),
  listTypeInfo: () => ({}),
  columns: () => []
});

console.log("LjDescProp columns :>> ", props);

const { t } = useI18n();

// const props = defineProps({
//   descColumn: {
//     type: Number,
//     default: 4
//   },
//   // 后台数据源
//   data: {
//     type: Object,
//     default: () => ({})
//   },
//   // 需要解析的下拉数据
//   listTypeInfo: {
//     type: Object,
//     default: () => ({})
//   },
//   columns: {
//     type: Array as unknown as any[],
//     default: () => []
//   }
// });

/**
 * 下拉数据回显中文过滤器
 * @param [String,Number] value 需要转中文的key值
 * @param {String} list  数据源
 * @param [String,Number] key  数据源的key字段（默认：value）
 * @param {String} label  数据源的label字段（默认：label）
 */
const constantEscape = (value: any, list: any[], key: string | number, label: string | number) => {
  const res = list.find(item => {
    return item[key] === value;
  });
  return res && res[label];
};

const attrs = useAttrs();
const slots = useSlots();

const RenderTooltips = (item: any) => {
  return (
    <>
      <span>{props.data[item.field]}</span>
      {/* <span class="tip_class">
        <el-tooltip {...attrs} v-if="item.tooltip" :placement="item.placement || 'bottom'">
          <span>
            <span v-if="item.filters && item.filters.list">
              {{
                constantEscape(
                  data[item.field],
                  listTypeInfo[item.filters.list],
                  item.filters.key || "value",
                  item.filters.label || "label"
                )
              }}
            </span>
            <span v-else>{{ data[item.field] }}</span>
            <el-icon :size="item.iconSize" :color="item.iconColor" style="cursor: pointer; margin-left: 2px; top: 1px">
              <Warning />
            </el-icon>
          </span>
          <template #content v-if="item.tooltip">
            <span v-if="typeof item.tooltip === 'string'">{{ item.tooltip }}</span>
            <template v-else-if="typeof item.tooltip === 'function'">
              <render-tooltip :render="item.tooltip" :item="item" />
            </template>
          </template>
        </el-tooltip>
        <span v-else>
          <span v-if="item.filters && item.filters.list">
            {{
              constantEscape(
                data[item.field],
                listTypeInfo[item.filters.list],
                item.filters.key || "value",
                item.filters.label || "label"
              )
            }}
          </span>
          <span v-else>{{ data[item.field] }}</span>
        </span>
      </span> */}
    </>
  );
};

const RenderDescriptionsItem = (props: any) => {
  let render = [];
  render = props.columns.map((item: any) => {
    if (item.render) {
      console.log("RenderDescriptionsItem item.render :>> ", item.render(props.data));
    }
    return (
      <>
        <el-descriptions-item descriptions-item label={`${t(`table.${item?.table}.${item?.field}`)} :`} span={item.span || 1}>
          {slots[item.slotName] ? slots[item.slotName]?.() : item.render ? item.render(props.data) : RenderTooltips(item)}
        </el-descriptions-item>
      </>
    );
  });
  return render;
};

const RenderDescriptions = (props: any) => {
  console.log("RenderDescriptions props :>> ", props);
  console.log("RenderDescriptions attrs :>> ", attrs);
  return (
    <>
      <el-descriptions class="description_warpper" {...props} column={Number(props.descColumn)}>
        {RenderDescriptionsItem(props)}
      </el-descriptions>
    </>
  );
};
</script>

<style lang="scss" scoped>
.description_warpper {
  :deep(.el-descriptions__label) {
    font-weight: bold;
    min-width: 65px;
  }
}

.description_warpper th,
.description_warpper td {
  border: none;
  background-color: var(--el-bg-color);
}
.description_warpper table {
  border-collapse: separate;
  text-indent: initial;
  border-spacing: 2px;
  margin: 0;
  overflow-x: inherit;
}
.description_warpper tr:nth-child(2n) {
  background-color: var(--el-bg-color);
}
</style>
