<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" size="large" class="back-home-btn btn-add" @click="showAddUser">添加用户</n-button>
    <el-dialog v-model="isAddUserVisible">
      <Adduser @close="isAddUserVisible = false"></Adduser>
    </el-dialog>
    <el-dialog v-model="isshowEdit">
      <Edituser @close="isshowEdit = false"></Edituser>
    </el-dialog>
    <div class="user_skills" style="margin-top:20px;">
      <n-table striped class="eltables" :bordered="true">
        <thead>
          <tr>
            <th>添加时间</th>
            <th>用户名</th>
            <th>用户地址</th>
            <th>状态</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in tableData">
            <td>{{ item.date }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.address }}</td>
            <td>{{ item.state }}</td>
            <td>
              <n-button strong secondary type="info" size="large" @click="showEdit"
                style="margin-right: 5px;" class="edtbtn">编辑</n-button>
              <n-button strong secondary type="warning" class="edtbtn" size="large" @click="handleDelete(index)">禁用</n-button>
              <n-button strong secondary type="error" class="edtbtn" size="large" @click="handleDelete(index)">删除</n-button>
            </td>
          </tr>
        </tbody>
      </n-table>
    </div>
  </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 Adduser from "./adduser.vue";
import { NInput, NTable, NPagination } from "naive-ui";
import Edituser from "./edituser.vue";
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    state:'No'
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    state:'No'
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    state:'No'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    state:'No'
  },
]
const isAddUserVisible = ref(false);
const isshowEdit = ref(false);

const showAddUser = () => {
  isAddUserVisible.value = true;
};
const showEdit = () => {
  isshowEdit.value = true;
};

</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: 50px;
}

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

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

::v-deep .el-dialog__body {
  display: flex;
  justify-content: center;
  align-items: center;
}

::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);
  /* 半透明的灰色背景 */
}
.edtbtn{
  margin-left: 10px;
}

</style>
