<template>
  <div>
    <!-- 筛选栏 -->
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="mb-10px">设备组织查询</div>
        <el-input
          v-model="searchName"
          placeholder="设备组织查询"
        >
          <template #append>
            <el-button :icon="Search" @click="handleSearch" />
          </template>
        </el-input>
      </el-col>
      <el-col :span="8">
        <div class="mb-10px">通道编号查询</div>
        <el-input
          v-model="searchAge"
          placeholder="通道编号查询"
        >
          <template #append>
            <el-button :icon="Search" @click="handleSearch" />
          </template>
        </el-input>
      </el-col>
      <el-col :span="8">
        <div class="mb-10px">通道名称</div>
        <el-input
          v-model="searchAddress"
          placeholder="通道名称"
        >
          <template #append>
            <el-button :icon="Search" @click="handleSearch" />
          </template>
        </el-input>
      </el-col>
    </el-row>

    <!-- 操作按钮 -->
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="24">
        <el-button
          type="primary"
          :disabled="!hasSelected"
          :loading="loading"
          @click="start"
        >
          重设阈值
        </el-button>
        <span v-if="hasSelected">已选择 {{ selectedRowKeys.length }} 项</span>
      </el-col>
    </el-row>

    <!-- 表格 -->
    <el-table
      :data="filteredData"
      style="width: 100%; margin-top: 10px;"
      @selection-change="onSelectChange"
      :row-selection="selectedRowKeys"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="name" label="设备组织" width="180" />
      <el-table-column prop="age" label="通道编号" width="180" />
      <el-table-column prop="address" label="通道名称" width="180" />
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { ElButton, ElInput, ElTable, ElTableColumn, ElMessage } from 'element-plus';
import { Search } from '@element-plus/icons-vue';

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

const dataSource: DataType[] = Array.from({ length: 4 }).map((_, i) => ({
  key: i,
  name: `智慧路灯 ${i+1}`,
  age: parseFloat((Math.random() * 33).toFixed(0)),
  address: `${i}`,
}));

const selectedRowKeys = ref([]);
const loading = ref(false);
const searchName = ref('');
const searchAge = ref('');
const searchAddress = ref('');

const hasSelected = computed(() => selectedRowKeys.value.length > 0);

const handleSearch = () => {
  // 这里可以添加搜索逻辑，当前已经通过计算属性实现了过滤
  console.log('Searching...');
};

const start = () => {
  loading.value = true;
  setTimeout(() => {
    selectedRowKeys.value = [];
    loading.value = false;
    ElMessage.success('阈值已重置');
  }, 1000);
};

const onSelectChange = (newSelectedRowKeys:DataType[]) => {
  console.log('selectedRowKeys changed: ', newSelectedRowKeys);
  selectedRowKeys.value = newSelectedRowKeys;
};

const filteredData = computed(() => {
  return dataSource.filter(item =>
    item.name.includes(searchName.value) &&
    item.age.toString().includes(searchAge.value) &&
    item.address.includes(searchAddress.value)
  );
});
</script>

