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

// 表格数据
const tableData = ref([
  {
    id: "001",
    name: "终端A",
    type: "智能井盖",
    imei: "123456789012345",
    maintenanceUnit: "水务局",
    installationDate: "2023-01-01",
    capabilitySet: "通信,定位,报警",
    status: "正常",
    enabled: true,
  },
  {
    id: "002",
    name: "终端B",
    type: "智能井盖",
    imei: "098765432109876",
    maintenanceUnit: "水务局",
    installationDate: "2023-02-01",
    capabilitySet: "通信,报警",
    status: "正常",
    enabled: true,
  },
  // 更多数据...
]);

// 搜索条件
const searchForm = ref({
  search: "",
});

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

// 当前选中的终端信息
const selectedTerminal = ref({});

// 根据搜索条件过滤数据
const filteredTableData = computed(() => {
  return tableData.value.filter((item) => {
    const searchValue = searchForm.value.search.toLowerCase();
    return (
      item.id.toLowerCase().includes(searchValue) ||
      item.name.toLowerCase().includes(searchValue) ||
      item.imei.toLowerCase().includes(searchValue) ||
      item.capabilitySet.toLowerCase().includes(searchValue)
    );
  });
});

// 显示详情
function showDetail(row) {
  selectedTerminal.value = row;
  dialogVisible.value = true;
}

// 新增终端表单数据
const addForm = ref({
  id: "",
  name: "",
  type: "",
  imei: "",
  maintenanceUnit: "",
  installationDate: "",
  capabilitySet: "",
});

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

// 处理新增终端表单提交
function handleAddSubmit() {
  if (
    addForm.value.id &&
    addForm.value.name &&
    addForm.value.type &&
    addForm.value.imei &&
    addForm.value.maintenanceUnit &&
    addForm.value.installationDate &&
    addForm.value.capabilitySet
  ) {
    tableData.value.push({ ...addForm.value });
    addDialogVisible.value = false;
    ElMessage.success("终端添加成功");
  } else {
    ElMessage.error("请确保所有必填项都已填写");
  }
}

// 清空新增终端表单
function resetAddForm() {
  addForm.value = {
    id: "",
    name: "",
    type: "",
    imei: "",
    maintenanceUnit: "",
    installationDate: "",
    capabilitySet: "",
  };
}

// 编辑终端表单数据
const editForm = ref({
  id: "",
  name: "",
  type: "",
  imei: "",
  maintenanceUnit: "",
  installationDate: "",
  capabilitySet: "",
});

// 控制编辑终端表单的显示与隐藏
const editDialogVisible = ref(false);

// 处理编辑终端表单提交
function handleEditSubmit() {
  if (
    editForm.value.name &&
    editForm.value.type &&
    editForm.value.imei &&
    editForm.value.maintenanceUnit &&
    editForm.value.installationDate &&
    editForm.value.capabilitySet
  ) {
    const index = tableData.value.findIndex((item) => item.id === editForm.value.id);
    if (index !== -1) {
      tableData.value[index] = { ...tableData.value[index], ...editForm.value };
      editDialogVisible.value = false;
      ElMessage.success("终端信息更新成功");
    } else {
      ElMessage.error("未找到指定终端");
    }
  } else {
    ElMessage.error("请确保所有必填项都已填写");
  }
}

// 清空编辑终端表单
function resetEditForm() {
  editForm.value = {
    id: "",
    name: "",
    type: "",
    imei: "",
    maintenanceUnit: "",
    installationDate: "",
    capabilitySet: "",
  };
}

// 显示编辑弹窗
function showEdit(row) {
  editForm.value = { ...row };
  editDialogVisible.value = 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.search"
              placeholder="请输入终端编号、名称、IMEI号或能力集"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <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-form>

    <!-- 表格 -->
    <el-table :data="filteredTableData" style="width: 100%">
      <el-table-column prop="id" label="终端编号" sortable></el-table-column>
      <el-table-column prop="name" label="终端名称" sortable></el-table-column>
      <el-table-column prop="type" label="终端类型" sortable></el-table-column>
      <el-table-column prop="imei" label="终端IMEI号" sortable></el-table-column>
      <el-table-column prop="maintenanceUnit" label="运维单位" sortable></el-table-column>
      <el-table-column
        prop="installationDate"
        label="安装时间"
        sortable
      ></el-table-column>
      <el-table-column prop="capabilitySet" label="能力集" sortable></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" type="primary" @click="showDetail(scope.row)"
            >查看详情</el-button
          >
          <el-button size="small" type="success" @click="showEdit(scope.row)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 查看详情弹窗 -->
    <el-dialog title="智能终端详情" v-model="dialogVisible">
      <el-form label-width="80px">
        <el-form-item label="终端编号">
          <span>{{ selectedTerminal.id }}</span>
        </el-form-item>
        <el-form-item label="终端名称">
          <span>{{ selectedTerminal.name }}</span>
        </el-form-item>
        <el-form-item label="终端类型">
          <span>{{ selectedTerminal.type }}</span>
        </el-form-item>
        <el-form-item label="终端IMEI号">
          <span>{{ selectedTerminal.imei }}</span>
        </el-form-item>
        <el-form-item label="运维单位">
          <span>{{ selectedTerminal.maintenanceUnit }}</span>
        </el-form-item>
        <el-form-item label="安装时间">
          <span>{{ selectedTerminal.installationDate }}</span>
        </el-form-item>
        <el-form-item label="能力集">
          <span>{{ selectedTerminal.capabilitySet }}</span>
        </el-form-item>
      </el-form>
    </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-input v-model="addForm.type" placeholder="请输入终端类型"></el-input>
        </el-form-item>
        <el-form-item label="终端IMEI号">
          <el-input v-model="addForm.imei" placeholder="请输入终端IMEI号"></el-input>
        </el-form-item>
        <el-form-item label="运维单位">
          <el-input
            v-model="addForm.maintenanceUnit"
            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.capabilitySet" 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>
    <!-- 编辑终端弹窗 -->
    <el-dialog title="编辑智能终端" v-model="editDialogVisible" width="50%">
      <el-form :model="editForm" label-width="80px">
        <el-form-item label="终端编号">
          <el-input
            v-model="editForm.id"
            disabled
            placeholder="终端编号不可修改"
          ></el-input>
        </el-form-item>
        <el-form-item label="终端名称">
          <el-input v-model="editForm.name" placeholder="请输入终端名称"></el-input>
        </el-form-item>
        <el-form-item label="终端类型">
          <el-input v-model="editForm.type" placeholder="请输入终端类型"></el-input>
        </el-form-item>
        <el-form-item label="终端IMEI号">
          <el-input v-model="editForm.imei" placeholder="请输入终端IMEI号"></el-input>
        </el-form-item>
        <el-form-item label="运维单位">
          <el-input
            v-model="editForm.maintenanceUnit"
            placeholder="请输入运维单位"
          ></el-input>
        </el-form-item>
        <el-form-item label="安装时间">
          <el-date-picker
            v-model="editForm.installationDate"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="能力集">
          <el-input
            v-model="editForm.capabilitySet"
            placeholder="请输入能力集"
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="resetEditForm">取消</el-button>
          <el-button type="primary" @click="handleEditSubmit">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
