<template>
  <div>
    <t-table ref="table" v-bind="attrsCopy" :columns="columns">
      <template v-for="(value, key) in slots" #[key]="slotProps" :key="key">
        <slot
          :name="key"
          v-bind="slotProps"
          v-if="!(key == 'operate' && collapse)"
        ></slot>
      </template>
      <template #custom-column-header>
        <div style="display: flex; align-items: center"
          ><svg-icon
            :name="!collapse ? 'operate' : 'operate-collapse'"
            style="margin-right: 8px; cursor: pointer"
            @click="collapse = !collapse"
          />管理</div
        >
      </template>
    </t-table>
  </div>
</template>
<script setup name="MyTable">
import { useAttrs, useSlots, ref, computed, defineComponent } from 'vue';
import { cloneDeep, omit } from 'lodash-es';
const slots = useSlots();
const attrs = useAttrs();
const collapse = ref(false);
let attrsCopy = computed(() => {
  return omit(attrs, 'columns');
});
let columns = computed(() => {
  let cols = cloneDeep(attrs.columns);
  let operate = cols.find((item) => item.colKey === 'operate');
  operate.title = 'custom-column-header';
  let w = operate.width;
  operate.width = collapse.value ? 76 : w;
  return cols;
});
const table = ref();
</script>
