<script setup>
const props = defineProps({
  columnData: {
    type: Array,
    default: [],
  },
  tableData: {
    type: Array,
    default: [],
  },
  selection: {
    type: Boolean,
    default: true,
  },
  operate: {
    type: Boolean,
    default: true,
  },
  editBtn: {
    type: Boolean,
    default: true,
  },
  deleteBtn: {
    type: Boolean,
    default: true,
  },
  detailBtn: {
    type: Boolean,
    default: true,
  },
})
const emit = defineEmits(['select', 'edit', 'delete', 'detail'])
const multipleSelection = ref([])
const handleSelectionChange = (val) => {
  multipleSelection.value = val
  emit('select', multipleSelection.value)
}
</script>

<template>
  <div>
    <el-table :data="tableData" size="large" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column v-if="selection" type="selection" width="55" />
      <el-table-column v-for="(item, index) in columnData" :key="index" :prop="item.key" :label="item.name" :width="item.width" show-overflow-tooltip>
        <template #default="{ row }">
          <slot :name="item.key" :data="row">
            {{ row[item.key] }}
          </slot>
        </template>
      </el-table-column>
      <el-table-column v-if="operate" label="操作" width="150">
        <template #default="{ row }">
          <slot name="operate" :data="row">
            <div class="flex items-center space-x-4">
              <img v-if="editBtn" class="cursor-pointer" src="/images/edit.png" alt="" srcset="" @click="emit('edit', row)">
              <img v-if="deleteBtn" class="cursor-pointer" src="/images/delete.png" alt="" srcset="" @click="emit('delete', row)">
              <el-dropdown v-if="detailBtn">
                <div class="cursor-pointer w-24px">
                  <img class="m-auto" src="/images/dots.png">
                </div>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="emit('detail', row)">
                      查看详情
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </slot>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style lang="scss" scoped>
@use "~/styles/table.scss";
// .el-table {
//   border-radius: 16px 16px 0 0;
//   :deep(thead) {
//     th.el-table__cell {
//       height: 65px;
//       background-color: rgba(63, 140, 255, 0.1);
//     }
//   }
// }
</style>
