<script setup>
import { Table, TableColumn, Button } from '@king-design/vue';
import { ref, useSlots,computed } from "vue";
import { pick,isFunction } from 'lodash-es'
import Status from "../common-status/index.vue";
import { isValidValue } from "@ksconsole/share";

const props = defineProps({
  columns: {
    type: Array,
    default: () => []
  },
  data: {
    type: Array,
    default: () => []
  }
});

// 默认格式化
const defaultFormat = ([data]) => {
  return isValidValue(data) ? data : '--'
}
const renderColumns = computed(() => {
  return props.columns.filter(item => !item.ishide).map((column) => {
    const { format = defaultFormat } = column
    return {
      ...column,
      format
    }
  })
})


const emit = defineEmits(['$change:group'])

const slots = useSlots()
function getRenderSlot() {
  return pick(slots, ['expand', 'tooltip', 'empty'])
}

function getCompound(func, ...params) {
  if (typeof func !== 'function') {
    return func
  }
  return func(...params)
}

const tableColumnKeys = [
  'key',
  'title',
  'sortable',
  'width',
  'group',
  'multiple',
  'ignore',
  'fixed',
  'align',
  'exportTitle',
  'exportCell',
  'minWidth',
  'className',
  'hideGroupHeader',
  'hidden',
  'ellipsis'
];
function getProps(obj, keys, params) {
  const model = {}
  Object.keys(obj).forEach(key => {
    const isExist = keys.includes(key)
    if (isExist) {
      const prop = obj[key]
      model[key] = getCompound(prop, params)
    }
  })
  return model
}

function getLabel(column, [data, i]) {
  const val = data[column.key]
  const { format } = column
  if (isFunction(format)) {
    return format([val, data, i])
  }
  return val
}

const KTable = ref(null)

defineExpose(new Proxy({}, {
  get(target, key) {
    return KTable.value?.[key]
  },
  has(target, key) {
    return key in KTable.value
  }
}))
</script>

<template>
  <Table
      ref="KTable"
      :data="data"
      v-bind="$attrs"
      @$change:group="emit('$change:group', $event)"
  >
    <slot name="column-start"></slot>
    <template v-for="column in renderColumns" :key="column.key">
      <!--自定义slot位置-->
      <template v-if="column.type === 'slot'" >
        <slot :name="column.slotName" :column="column"></slot>
      </template>
      <!--按钮文本-->
      <TableColumn
          v-else-if="column.type === 'link'"
          v-bind="getProps(column, tableColumnKeys, data)"
      >
        <template v-slot:template="[data, index]">
          <Button
              type="link"
              style="padding: 0"
              @click.stop="column?.click([data[column.key], data, index])"
          >
            {{ getLabel(column, [data, index]) }}
          </Button>
        </template>
      </TableColumn>
      <!--状态-->
      <TableColumn
          v-else-if="column.type === 'status'"
          v-bind="getProps(column, tableColumnKeys, data)"
      >
        <template v-slot:template="[data, index]">
          <Status v-bind="getCompound(column.props, [data[column.key], data, index])"></Status>
        </template>
      </TableColumn>
      <!--文本-->
      <TableColumn
          v-else
          v-bind="getProps(column, tableColumnKeys, data)"
      >
        <template v-slot:template="params">
          <span>{{ getLabel(column, params) }}</span>
        </template>
      </TableColumn>
    </template>
   <!--插槽转发-->
    <template
        v-for="(val, name, i) in getRenderSlot()"
        v-slot:[name]="data"
        :key="i"
    >
      <slot :name="name" v-bind="data || {}"></slot>
    </template>
    <slot/>
  </Table>
</template>

<style scoped lang="less">
</style>
