<template>
  <n-button strong secondary type="info" size="large" @click="$router.push('/')" class="back-home-btn">返回首页</n-button>
  <ItemWrap class="contetn_left-bottom contetn_lr-item" title="设备管理">
    <n-button strong secondary type="info" class="back-home-btn btn-add" size="large"
      @click="showAddUser">添加设备</n-button>
    <el-dialog v-model="isAddUserVisible">
      <Adduser @close="isAddUserVisible = false"></Adduser>
    </el-dialog>

    <el-dialog v-model="isshowEdit">
      <deviceEdit @close="isshowEdit = false"></deviceEdit>
    </el-dialog>
    <div class="user_skills" style="margin-top:30px;">
      <n-table striped class="eltables" :bordered="true">
        <thead>
          <tr>
            <th>设备名称</th>
            <th>SN</th>
            <th>设备地址</th>
            <th>添加时间</th>
            <th>通知状态</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in tableData">
            <td>{{ item.warntype }}</td>
            <td>{{ item.detail }}</td>
            <td>{{ item.address }}</td>
            <td>{{ item.date }}</td>
            <td>{{ item.state }}</td>
            <td>
              <n-button strong secondary type="info" size="large" @click="showEdit"
                style="margin-right: 5px;">编辑</n-button>
              <n-button strong secondary type="error" size="large" @click="handleDelete(index)">删除</n-button>
            </td>
          </tr>
        </tbody>
      </n-table>
    </div>
    <el-pagination class="pagination" background layout="prev, pager, next" :total="totalItems" :page-size="pageSize"
      :current-page="currentPage" @current-change="handleCurrentChange" />
  </ItemWrap>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import CapsuleChart from "@/components/datav/capsule-chart";
import { ranking } from "@/api";
import { ElMessage } from "element-plus";
import { NInput, NTable, NPagination } from "naive-ui";

import Adduser from "./adduser.vue";
import deviceEdit from "./device-edit.vue";
const tableData = [
  {
    warntype: '断电报警',
    date: '2016-05-03',
    detail: '设备断电报警',
    address: 'No. 189, Grove St, Los Angeles',
    state: 'No',
  },
  {
    warntype: '断电报警',
    date: '2016-05-03',
    detail: '设备断电报警',
    address: 'No. 189, Grove St, Los Angeles',
    state: 'No',
  },
  {
    warntype: '断电报警',
    date: '2016-05-03',
    detail: '设备断电报警',
    address: 'No. 189, Grove St, Los Angeles',
    state: 'No',
  },
  {
    warntype: '断电报警',
    date: '2016-05-03',
    detail: '设备断电报警',
    address: 'No. 189, Grove St, Los Angeles',
    state: 'No',
  },
];
const isAddUserVisible = ref(false);
const isshowEdit = ref(false);
const page = ref(1);
const showAddUser = () => {
  isAddUserVisible.value = true;
};
const showEdit = () => {
  isshowEdit.value = true;
};
// 分页相关状态
const pageSize = ref(10); // 每页显示的条目数
const currentPage = ref(1); // 当前页码
const totalItems = ref(tableData.length); // 总条目数

// 根据当前页码和每页大小计算显示的数据
// const displayedTableData = computed(() => {
//   const start = (currentPage.value - 1) * pageSize.value;
//   const end = start + pageSize.value;
//   return tableData.slice(start, end);
// });

// 当前页码改变时触发的方法
const handleCurrentChange = (val: number) => {
  currentPage.value = val;
};
</script>



<style scoped>
.contetn_lr-item {
  font-size: 30px;
  margin-top: 80px;
  height: 800px;
}

.eltables {
  width: 100%;
  font-size: large;
  text-align: center;
  margin-top: 80px;
}

.back-home-btn {
  position: absolute;
  margin-top: 30px;
  top: 10px;
  left: 10px;
}

.btn-add {
  margin-top: 50px;
  margin-left: 90%;
}

.user_skills {
  width: 100%;
  margin-top: 50%;
  text-align: center;
  font-size: larger;
}

::v-deep .el-dialog {
  position: relative;
  /* 确保伪元素定位正确 */
  background-color: rgba(255, 255, 255, 0.1);
}

::v-deep .el-dialog::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  /* 确保伪元素在内容之下 */
  background-color: inherit;
  /* 继承父元素的背景色 */
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(10px);
}

/* naive */
.eltables {
  background-color: transparent !important;
  font-size: 20px;
  text-align: center;
  border: none;
}

.eltables th {
  background-color: transparent !important;
  color: #006ff0;
  border: none;
}

.eltables td {
  background-color: transparent !important;
  color: #009ffb;
  border: none;
}

.eltables td:hover {
  background-color: rgba(0, 0, 0, 0.1);
  /* 半透明的灰色背景 */
}

::v-deep .pagination {
  display: flex;
  justify-content: right;
  align-items: center;
  margin-right: 15px;
  margin-top: 280px;
}

/* 使分页器中的按钮背景透明 */
::v-deep .el-pagination button,
::v-deep .el-pagination .btn-quicknext,
::v-deep .el-pagination .btn-next,
::v-deep .el-pagination .btn-prev,
::v-deep .el-pagination .btn-quickprev {
  height: 40px;
  width: 40px;
  font-size: 20px;
  background-color: rgba(17, 0, 255, 0.3) !important;
  /* 半透明灰色 */
  border-color: rgba(128, 128, 128, 0.3) !important;
}

/* 使分页器中的数字和链接透明 */
::v-deep .el-pagination .el-pager li {
  background-color: transparent !important;
  border-color: transparent !important;
}

/* 当鼠标悬停或激活时，保持背景透明 */
::v-deep .el-pagination button:hover,
::v-deep .el-pagination button:focus,
::v-deep .el-pagination .el-pager li:hover,
::v-deep .el-pagination .el-pager li.is-active {
  height: 40px;
  width: 40px;
  font-size: 16px;
  background-color: rgba(104, 3, 255, 0.5) !important;
  /* 加深的半透明灰色 */
}
</style>