<template>
  <div>
    <el-table ref="table" :data="data" v-bind="_option" v-on="_option">
      <el-table-column v-for="(column, index) in columns" :key="index" v-bind="{ ...defaultColumnOption, ...column }">
        <template #header v-if="column.headerRender">
          <template-header-render :column="column" :render="column.headerRender" />
        </template>
        <template #default="scope" v-if="column.render">
          <template-render :scope="scope" :render="column.render" />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ElLoading } from 'element-plus';
const TemplateHeaderRender = props => {
  return props.render(props.column);
};
const TemplateRender = props => {
  return props.render(props.scope);
};
const { proxy } = getCurrentInstance();
const attrs = useAttrs();
const props = defineProps({
  columns: {
    type: Array,
    default: () => [],
  },
  options: {
    type: Object,
    default: () => {},
  },
  data: {
    type: Array,
    default: () => [],
  },
  loading: {
    type: Boolean,
    default: false,
  },
});
const { columns, data } = toRefs(props);
const defaultOption = reactive({
  stripe: true,
});
const defaultColumnOption = reactive({
  showOverflowTooltip: true,
});
const loadingInstance = ref(null);
const loadingDefaultOption = reactive({
  text: '加载中...',
});
const _option = computed(() => {
  return Object.assign({}, defaultOption, props.options, attrs);
});
const $table = computed(() => {
  return proxy.$refs.table;
});
watch(
  () => props.loading,
  val => {
    if (val) {
      loadingInstance.value = ElLoading.service(
        Object.assign({}, loadingDefaultOption, attrs, {
          target: proxy.$el,
        })
      );
    } else {
      loadingInstance.value && loadingInstance.value.close();
    }
  }
);
const getSelection = () => {
  return $table.selection;
};
defineExpose({
  $table,
  getSelection,
});
</script>

<style lang="scss">
.el-tooltip__popper {
  max-width: 400px;
  line-height: 180%;
  font-size: 16px;
}
</style>