<template>
  <div class="table">
    <el-table
      v-loading="props.loading"
      header-cell-class-name="table-head"
      row-class-name="table-row"
      :data="props.data"
      style="width: 100%"
    >
      <template v-for="({ prop, label, slot, width }, index) in props.config" :key="prop">
        <el-table-column :prop="prop" :label="label" :width="width">
          <template v-if="slot" #default="{ row }">
            <slot :row="row"></slot>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script setup lang="ts">
  const props: any = defineProps({
    loading: {
      type: Boolean,
      default: false
    },
    data: {
      type: Array,
      default: () => []
    },
    config: {
      type: Array,
      default: () => [
        {
          label: '设备名称',
          prop: 'deviceName'
        },
        {
          label: '设备编号',
          prop: 'code'
        },
        {
          label: '班组',
          prop: 'description'
        },
        {
          label: '上下线时间',
          prop: 'time'
        },
        {
          label: '设备状态',
          prop: 'state'
        }
      ]
    }
  })
</script>

<style lang="less" scoped>
  .table {
    width: 100%;
  }
  :deep(.el-table) {
    .table-head {
      background: #f6f6f6;
      .cell {
        color: #333;
      }
    }
    .table-head {
      height: 40px;
      font-size: 12px;
    }
    .table-row {
      height: 60px;
      font-weight: bold;
    }
  }
</style>
