<template>
  <div class="table">
    <el-table v-loading="props.loading" :data="props.data" :height="props.height">
      <template v-for="({ prop, label, slot, width,minWidth }) in props.config" :key="prop">
        <el-table-column :prop="prop" :label="label" :min-width="minWidth" :width="width">
          <template v-if="slot" #default="{ row }">
            <slot :row="row" :label="label"></slot>
          </template>
        </el-table-column>
      </template>
      <template #empty>
        <div class="el-table-empty">
          <el-image :src="emptybg"></el-image>
          <span>当前无数据</span>
        </div>
      </template>
    </el-table>
  </div>
</template>

<script setup>
import emptybgUrl from '@/assets/images/empty-bg.png';
const emptybg = ref(emptybgUrl)
const props = defineProps({
  loading: {
    type: Boolean,
    default: false
  },
  height: {
    type: String,
    default: ''
  },
  data: {
    type: Array,
    default: () => []
  },
  config: {
    type: Array,
    default: () => []
  }
})
</script>

<style lang="less" scoped>
.el-table-empty {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #8ECAFF;

  img {
    width: 200px;
    height: auto;
    margin-bottom: 20px;
  }
}

.table {
  width: 100%;
  :deep(.el-table) {
    background-color: transparent;
    --el-table-border-color: #223555;
    --el-table-row-hover-bg-color: #223555;
    --el-mask-color: rgba(255, 255, 255, 0.1);
  }

  :deep(.el-table .el-table__cell) {
    text-align: center;
    background-color: transparent;
  }

  :deep(.el-table tr) {
    background-color: transparent;
  }

  :deep(.el-table__header) {

    font-size: 18px;
    color: #7992C4;
  }

  :deep(.el-table__body) {
    color: #ffffff;
    font-size: 16px;
  }
}
</style>