<template>
  <div>
    <el-table
      :data="data"
      style="width: 100%"
      @filter-change="handleFilterChange"
      @sort-change="handleSortChange"
    >
      <el-table-column
        prop="name"
        label="所属组织"
        sortable
        :filters="[
          { text: 'A', value: 'A' },
          { text: 'B', value: 'B' },
          { text: 'C', value: 'C' }
        ]"
        :filter-method="filterHandler"
        filter-placement="bottom-end"
      />
      <el-table-column
        prop="age"
        label="报警时间"
        sortable
      />
      <el-table-column
        prop="address"
        label="断线报警记录"
        :filters="[
          { text: 'A', value: 'A' },
          { text: 'B', value: 'B' },
          { text: 'C', value: 'C' }
        ]"
        :filter-method="filterHandler"
        filter-placement="bottom-end"
      />
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { ElTable, ElTableColumn } from 'element-plus';

interface DataType {
  key: string;
  name: string;
  age: string;
  address: string;
}

const data: DataType[] = [
  {
    key: '1',
    name: 'A区',
    age: '2024-08-08',
    address: 'A区出现功能异常',
  },
  {
    key: '2',
    name: 'A区',
    age: '2024-07-12',
    address: 'A区出现功能异常',
  },
  {
    key: '3',
    name: 'B区',
    age: '2024-08-01',
    address: 'B区出现功能异常',
  },
  {
    key: '4',
    name: 'C区',
    age: '2024-07-01',
    address: 'C区出现功能异常',
  },
];

const handleFilterChange = (filters) => {
  console.log('Filters:', filters);
};

const handleSortChange = ({ column, prop, order }) => {
  console.log(`Sort by ${prop}: ${order}`);
};

const filterHandler = (value, row, column) => {
  const property = column.property;
  return row[property].indexOf(value) === 0;
};
</script>

