<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'
import {
  ref,
  reactive,
  computed,
  useAttrs,
  getCurrentInstance,
  watch,
  toRefs
} from 'vue'
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>