<script setup>
import {computed, ref} from "vue";
// 表格数据
const tableData = ref([
  {
    id: "1",
    name: '井盖1',
    purpose: '排水',
    owner: '水务局',
    installationDate: '2021-01-01',
    district: '东城区',
    street: '王府井大街',
    road: '1号',
    location: '王府井附近',
    status: '正常',
    enabled: true,
  },
  {
    id: "2",
    name: '井盖2',
    purpose: '排水',
    owner: '水务局',
    installationDate: '2021-01-01',
    district: '东城区',
    street: '王府井大街',
    road: '1号',
    location: '王府井附近',
    status: '正常',
    enabled: true,
  },
  {
    id: "3",
    name: '井盖3',
    purpose: '排水',
    owner: '水务局',
    installationDate: '2021-01-01',
    district: '东城区',
    street: '王府井大街',
    road: '1号',
    location: '王府井附近',
    status: '正常',
    enabled: true,
  },
]);

// 搜索条件
const searchForm = ref({
  id: '',
  name: '',
  district: '',
  street: '',
  road: '',
  location: '',
});

// 是否显示详情弹窗
const dialogVisible = ref(false);

// 当前选中的井盖信息
const selectedCover = ref({});

// 根据搜索条件过滤数据
const filteredTableData = computed(() => {
  if (!Object.values(searchForm.value).some(value => value)) {
    return tableData.value;
  }

  return tableData.value.filter(row => {
    const matches = [
      searchForm.value.id && row.id.includes(searchForm.value.id),
      searchForm.value.name && row.name.includes(searchForm.value.name),
      searchForm.value.district && row.district.includes(searchForm.value.district),
      searchForm.value.street && row.street.includes(searchForm.value.street),
      searchForm.value.road && row.road.includes(searchForm.value.road),
      searchForm.value.location && row.location.includes(searchForm.value.location),
    ];
    return matches.some(match => match);
  });
});

// 搜索逻辑
function search() {
}

// 显示详情
function showDetail(row) {
  selectedCover.value = row;
  dialogVisible.value = true;
}
// 新增井盖表单数据
const addForm = ref({
  id: '',
  name: '',
  purpose: '排水',
  owner: '水务局',
  installationDate: '',
  district: '',
  street: '',
  road: '',
  location: '',
  status: '正常',
  enabled: true,
});

// 控制新增井盖表单的显示与隐藏
const addDialogVisible = ref(false);

// 处理新增井盖表单提交
function handleAddSubmit() {
  if (addForm.value.id && addForm.value.name && addForm.value.installationDate &&
      addForm.value.district && addForm.value.street && addForm.value.road) {
    tableData.value.push({ ...addForm.value });
    addDialogVisible.value = false;
  }
}

// 清空新增井盖表单
function resetAddForm() {
  addForm.value = {
    id: '',
    name: '',
    purpose: '排水',
    owner: '水务局',
    installationDate: '',
    district: '',
    street: '',
    road: '',
    location: '',
    status: '正常',
    enabled: true,
  };
}

</script>

<template>
  <div>
    <!-- 搜索表单 -->
    <el-form :model="searchForm" label-width="80px">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="井盖编号">
            <el-input v-model="searchForm.id" placeholder="请输入井盖编号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="井盖名称">
            <el-input v-model="searchForm.name" placeholder="请输入井盖名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="区">
            <el-input v-model="searchForm.district" placeholder="请输入区"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="街道">
            <el-input v-model="searchForm.street" placeholder="请输入街道"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="道路">
            <el-input v-model="searchForm.road" placeholder="请输入道路"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="辅助定位">
            <el-input v-model="searchForm.location" placeholder="请输入辅助定位地址"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item>
            <el-button type="primary" @click="search">搜索</el-button>
            <el-button type="success" @click="addDialogVisible = true">添加井盖</el-button>
            <el-button type="warning" @click="">导入</el-button>
            <el-button type="danger" @click="">导出</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <!-- 表格 -->
    <el-table :data="filteredTableData" style="width: 100%">
      <el-table-column prop="id" label="井盖编号" width="180"></el-table-column>
      <el-table-column prop="name" label="井盖名称" width="180"></el-table-column>
      <el-table-column prop="purpose" label="井盖用途"></el-table-column>
      <el-table-column prop="owner" label="权属单位"></el-table-column>
      <el-table-column prop="installationDate" label="安装时间"></el-table-column>
      <el-table-column prop="district" label="区"></el-table-column>
      <el-table-column prop="street" label="街道"></el-table-column>
      <el-table-column prop="road" label="道路"></el-table-column>
      <el-table-column prop="location" label="辅助定位地址"></el-table-column>
      <el-table-column prop="status" label="井盖状态"></el-table-column>
      <el-table-column prop="enabled" label="启用状态">
        <template #default="scope">
          <el-tag :type="scope.row.enabled ? 'success' : 'danger'">{{ scope.row.enabled ? '启用' : '禁用' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" type="primary" @click="showDetail(scope.row)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 查看详情弹窗 -->
    <el-dialog title="井盖详情" v-model="dialogVisible">
      <el-descriptions :column="1">
        <el-descriptions-item label="井盖编号">{{ selectedCover.id }}</el-descriptions-item>
        <el-descriptions-item label="井盖名称">{{ selectedCover.name }}</el-descriptions-item>
        <el-descriptions-item label="井盖用途">{{ selectedCover.purpose }}</el-descriptions-item>
        <el-descriptions-item label="权属单位">{{ selectedCover.owner }}</el-descriptions-item>
        <el-descriptions-item label="安装时间">{{ selectedCover.installationDate }}</el-descriptions-item>
        <el-descriptions-item label="区">{{ selectedCover.district }}</el-descriptions-item>
        <el-descriptions-item label="街道">{{ selectedCover.street }}</el-descriptions-item>
        <el-descriptions-item label="道路">{{ selectedCover.road }}</el-descriptions-item>
        <el-descriptions-item label="辅助定位地址">{{ selectedCover.location }}</el-descriptions-item>
        <el-descriptions-item label="井盖状态">{{ selectedCover.status }}</el-descriptions-item>
        <el-descriptions-item label="启用状态">{{ selectedCover.enabled ? '启用' : '禁用' }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
    <!-- 添加井盖弹窗 -->
    <el-dialog title="添加井盖" v-model="addDialogVisible" width="50%">
      <el-form :model="addForm" label-width="80px">
        <el-form-item label="井盖编号">
          <el-input v-model="addForm.id" placeholder="请输入井盖编号"></el-input>
        </el-form-item>
        <el-form-item label="井盖名称">
          <el-input v-model="addForm.name" placeholder="请输入井盖名称"></el-input>
        </el-form-item>
        <el-form-item label="安装时间">
          <el-date-picker
              v-model="addForm.installationDate"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="区">
          <el-input v-model="addForm.district" placeholder="请输入区"></el-input>
        </el-form-item>
        <el-form-item label="街道">
          <el-input v-model="addForm.street" placeholder="请输入街道"></el-input>
        </el-form-item>
        <el-form-item label="道路">
          <el-input v-model="addForm.road" placeholder="请输入道路"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="resetAddForm">取消</el-button>
          <el-button type="primary" @click="handleAddSubmit">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">

</style>