<!-- fac.vue -->
<template>
  <div class="facility-management">
    <a-card title="设施管理" :bordered="false">
      <!-- 搜索和操作区域 -->
      <div class="search-bar" style="margin-bottom: 16px;">
        <a-form
          :model="searchForm"
          layout="inline"
          class="search-form"
        >
          <a-form-item label="设施编号">
            <a-input v-model:value="searchForm.code" placeholder="请输入设施编号" />
          </a-form-item>
          <a-form-item label="设施类型">
            <a-select
              v-model:value="searchForm.type"
              placeholder="请选择类型"
              style="width: 200px"
            >
              <a-select-option value="PIPELINE">管道</a-select-option>
              <!-- 可以根据需求添加更多类型 -->
            </a-select>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" @click="fetchData">查询</a-button>
            <a-button style="margin-left: 8px" @click="resetForm">重置</a-button>
          </a-form-item>
        </a-form>
      </div>

      <!-- 表格展示 -->
      <a-table
        :columns="columns"
        :data-source="dataSource"
        :loading="loading"
        :pagination="pagination"
        row-key="id"
        @change="handleTableChange"
      >
        <template #status="{ record }">
          <a-tag :color="getStatusColor(record.status)">
            {{ statusText(record.status) }}
          </a-tag>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { message } from 'ant-design-vue';
import axios from 'axios';
import {apiRequestGet} from '@/utils/api'

// 表格列配置
const columns = [
  { title: '设施编号', dataIndex: 'code', key: 'code' },
  { title: '设施类型', dataIndex: 'type', key: 'type' },
  { title: '区域', dataIndex: 'area', key: 'area' },
  { title: '状态', dataIndex: 'status', key: 'status', slots: { customRender: 'status' } },
  { title: '安装日期', dataIndex: 'installDate', key: 'installDate' },
  { title: '上次维护日期', dataIndex: 'lastMaintainDate', key: 'lastMaintainDate' },
];

// 数据源和加载状态
const dataSource = ref([]);
const loading = ref(false);

// 分页配置
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
});

// 搜索表单
const searchForm = reactive({
  code: '',
  type: '',
});

// 获取状态对应的颜色和文本
const getStatusColor = (status) => {
  return status === 'NORMAL' ? 'green' : 'red';
};

const statusText = (status) => {
  return status === 'NORMAL' ? '正常' : '异常';
};

// 获取设施数据
const fetchData = async () => {
  loading.value = true;
  try {
    const params = {
      page: pagination.current,
      size: pagination.pageSize,
      code: searchForm.code || undefined,
      type: searchForm.type || undefined,
    };
    const response = await apiRequestGet('/facilities/list', params);
    if (response.data.success) {
      dataSource.value = response.data.data;
      pagination.total = response.data.total || response.data.data.length;
    } else {
      message.error(response.data.errorMsg || '数据获取失败');
      dataSource.value = [];
    }
  } catch (error) {
    message.error('请求失败: ' + error.message);
    dataSource.value = [];
  } finally {
    loading.value = false;
  }
};

// 重置表单
const resetForm = () => {
  searchForm.code = '';
  searchForm.type = '';
  pagination.current = 1;
  fetchData();
};

// 表格分页、排序、筛选变化时的回调
const handleTableChange = (pag) => {
  pagination.current = pag.current;
  pagination.pageSize = pag.pageSize;
  fetchData();
};

// 页面加载时获取数据
onMounted(() => {
  fetchData();
});
</script>

<style scoped>
.facility-management {
  padding: 20px;
}
.search-bar {
  display: flex;
  justify-content: space-between;
}
.search-form {
  flex: 1;
}
</style>