<template>
  <div class="simple-table">
    <div class="table-header">
      <div class="table-cell">
        <input type="checkbox" @change="toggleSelectAll($event)" />
      </div>
      <div class="table-cell">序号</div>
      <div
        v-for="header in headers"
        :key="header"
        class="table-cell"
        :style="{ width: header.width + 'px' }">
        {{ header.title }}
      </div>
      <div class="table-cell">操作</div>
    </div>
    <div
      v-for="(row, index) in tableData"
      :key="index"
      class="table-row"
      :class="{ 'zebra-row': index % 2 !== 0 }">
      <div class="table-cell">
        <input type="checkbox" v-model="selectedRows" :value="row.id" />
      </div>
      <div class="table-cell">{{ index + 1 }}</div>
      <div
        v-for="column in headers"
        :key="column.field"
        class="table-cell"
        :style="{ width: column.width + 'px' }">
        {{ row[column.field] }}
      </div>
      <div class="table-cell">
        <slot name="actions" :row="row" :index="index"></slot>
      </div>
    </div>
    <div v-if="tableData.length ===0" class="empty-table">
     暂无数据
    </div>
  </div>
</template>

<script setup>
//自定义的table组件，如果插件不能使用的话
import { ref, watch } from 'vue';

const props = defineProps({
  tableData: {
    type: Array,
    required: true
  },
  headers: {
    type: Array,
    default: () => []
  }
});

const emit = defineEmits(['select-change']);
const selectedRows = ref([]);

// Watch for changes in selectedRows and emit event to parent component
watch(selectedRows, (newSelectedRows) => {
  emit('select-change', newSelectedRows);
});

const toggleSelectAll = (event) => {
  if (event.target.checked) {
    selectedRows.value = props.tableData.map((row) => row.id);
  } else {
    selectedRows.value = [];
  }
};
</script>

<style scoped>
.simple-table {
  display: flex;
  flex-direction: column;
}

.table-header {
  display: flex;
  font-weight: bold;
  height: 100px;
  background: #e6eef6;
  border-radius: 0px 0px 0px 0px;
  font-size: 36px;
  color: #808080;
  align-items: center;
}

.table-row {
  display: flex;
  border-bottom: 1px solid #ccc;
  background: #ffffff;
  font-size: 36px;
  color: #3a3a3a;
}

.table-cell {
  padding: 20px 0;
  /* // flex: 1; */
  word-break: break-all;
  min-width: 120px;
  text-align: center;
}

.table-cell button {
  margin: 0 5px;
}

.table-cell input[type='checkbox'] {
  margin-right: 10px;
  width: 32px;
  height: 32px;
}
/* 斑马纹样式 */
.table-row.zebra-row {
  background-color: #f9f9f9;
}

.table-row:nth-child(even) {
  background-color: #fff;
}
.empty-table{
  min-height: 300px;
  font-size: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
