<template>
  <div class="table-box">
    <ProTable :config="config" ref="proTable">
      <template #left_buttons>
        <el-button type="danger" @click="removeRow">删除</el-button>
      </template>
    </ProTable>
  </div>
</template>

<script setup>
  import ProTable from '@/components/ProTable/index.vue';
  import { reactive, ref } from 'vue';

  const proTable = ref(null);

  const onCellClick = ({ row }) => {
    console.log(row, '----');
  };

  const config = reactive({
    height: 'auto',
    columns: [
      { type: 'checkbox', width: 70 },
      { field: 'name', title: 'Name', search: { el: 'input', order: 1 } },
      {
        field: 'sex',
        title: 'Sex',
        enum: [
          { label: '男', value: 'man' },
          { label: '女', value: 'woman' },
        ],
        search: {
          el: 'select',
          order: 2,
          props: { filterable: true },
        },
      },
      {
        field: 'age',
        title: 'Age',
        search: {
          el: 'input',
          order: 4,
          props: { type: 'number' },
        },
      },
      {
        field: 'create_date',
        title: 'Create Date',
        search: {
          el: 'date-picker',
          span: 2,
          order: 3,
          props: { type: 'datetimerange', valueFormat: 'YYYY-MM-DD HH:mm:ss' },
          defaultValue: ['2022-11-12 11:35:00', '2022-12-12 11:35:00'],
        },
      },
    ],
    onCellClick: onCellClick,
  });

  const removeRow = () => {
    // const arr = proTable.value.value.getCheckboxRecords();
    console.log(proTable.value.element.getCheckboxRecords(), '00000');
  };
</script>
<style lang="scss" scoped></style>
