<script setup>
import { ref, computed } from 'vue';
import { ElMessage, ElMessageBox, ElDialog } from 'element-plus';

// 示例数据
const data = [
  {
    id: 1,
    name: '井盖A',
    number: 'JG-001',
    purpose: '雨水排放',
    ownership: '水务局',
    location: '朝阳区建国路1号',
    status: '正常',
    smart: true,
    area: '朝阳区',
    street: '建国路',
    road: '1号',
    address: '1号',
    problems: ['裂缝', '下沉'],
    installationDate: '2022-01-01',
  },
  {
    id: 2,
    name: '井盖B',
    number: 'JG-001',
    purpose: '雨水排放',
    ownership: '水务局',
    location: '朝阳区建国路1号',
    status: '正常',
    smart: true,
    area: '朝阳区',
    street: '建国路',
    road: '1号',
    address: '1号',
    problems: ['裂缝', '下沉'],
    installationDate: '2022-01-01',
  },
  // 更多数据...
];

// 表格数据
const tableData = ref(data);

// 搜索条件
const searchForm = ref({
  name: '',
  installationDate: '',
});

// 根据搜索条件过滤数据
const filteredTableData = computed(() => {
  return tableData.value.filter(item => {
    const { name, installationDate } = searchForm.value;
    const matchesName = !name || item.name.includes(name);
    const matchesInstallationDate = !installationDate || item.installationDate === installationDate;

    return matchesName && matchesInstallationDate;
  });
});

// 显示详情
const detailVisible = ref(false);
const detail = ref({});

function showDetail(row) {
  detail.value = row;
  detailVisible.value = true;
}

// 重置搜索条件
function resetSearchForm() {
  Object.assign(searchForm.value, {
    name: '',
    installationDate: '',
  });
  ElMessage.success('搜索条件已重置');
}
</script>


<template>
  <div>
    <!-- 搜索表单 -->
    <el-form :model="searchForm" label-width="80px" inline>
      <el-form-item label="井盖名称">
        <el-input v-model="searchForm.name" placeholder="请输入井盖名称"></el-input>
      </el-form-item>
      <el-form-item label="安装日期">
        <el-date-picker
            v-model="searchForm.installationDate"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="resetSearchForm">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格 -->
    <el-table :data="filteredTableData" style="width: 100%" stripe>
      <el-table-column prop="name" label="井盖设备名称" width="180">
      </el-table-column>
      <el-table-column prop="number" label="井盖设备编号" width="180">
      </el-table-column>
      <el-table-column prop="purpose" label="井盖设备用途" width="180">
      </el-table-column>
      <el-table-column prop="ownership" label="权属单位" width="180">
      </el-table-column>
      <el-table-column prop="location" label="井盖设备位置">
      </el-table-column>
      <el-table-column prop="status" label="井盖设备状态" width="180">
      </el-table-column>
      <el-table-column prop="smart" label="是否智能井盖设备" width="180">
        <template #default="{ row }">
          <el-tag :type="row.smart ? 'success' : 'danger'">{{ row.smart ? '是' : '否' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template #default="{ row }">
          <el-button size="small" type="primary" @click="showDetail(row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 查看详情对话框 -->
    <el-dialog v-model="detailVisible" title="井盖设备详情" width="50%">
      <el-form label-position="top">
        <el-form-item label="井盖设备名称">
          {{ detail.name }}
        </el-form-item>
        <el-form-item label="井盖设备编号">
          {{ detail.number }}
        </el-form-item>
        <el-form-item label="井盖设备用途">
          {{ detail.purpose }}
        </el-form-item>
        <el-form-item label="权属单位">
          {{ detail.ownership }}
        </el-form-item>
        <el-form-item label="井盖设备位置">
          {{ detail.location }}
        </el-form-item>
        <el-form-item label="井盖设备状态">
          {{ detail.status }}
        </el-form-item>
        <el-form-item label="是否智能井盖设备">
          <el-tag :type="detail.smart ? 'success' : 'danger'">{{ detail.smart ? '是' : '否' }}</el-tag>
        </el-form-item>
        <el-form-item label="问题">
          <ul>
            <li v-for="(problem, index) in detail.problems" :key="index">{{ problem }}</li>
          </ul>
        </el-form-item>
        <el-form-item label="安装日期">
          {{ detail.installationDate }}
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

