<template>
  <div class="userbox">
    <el-button
      class="addBtn"
      type="primary"
      icon="el-icon-plus"
      @click="handleAdddevice()"
      >新建用户</el-button
    >
    <div class="usercontain">
      <el-table
        v-loading="logLoading"
        :data="userData"
        border
        stripe
        style="width: 100%"
        height="100%"
      >
        <el-table-column type="index" width="50" label="序号">
        </el-table-column>

        <el-table-column prop="name" label="用户名"> </el-table-column>
        <el-table-column prop="mark" label="备注"> </el-table-column>
        <el-table-column prop="updateTime" label="创建时间"> </el-table-column>

        <el-table-column label="操作" class-name="editClass">
          <template slot-scope="scope">
            <el-link
              type="primary"
              @click="handleSetClick(scope.row)"
              size="small"
              icon="el-icon-setting"
              >设置权限</el-link
            >
            <el-link
              type="primary"
              @click="handleEditClick(scope.row)"
              size="small"
              icon="el-icon-document"
              >修改</el-link
            >
            <el-link
              type="danger"
              @click="handleDeleteClick(scope.row)"
              size="small"
              icon="el-icon-delete"
              >删除</el-link
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <addEditDialog :title="title" ref="adduserref"></addEditDialog>
    <setPermission ref="setpermissionRef"></setPermission>
  </div>
</template>
<script>
// import { getqueryUploadsApi } from "@/utils/api/index";
import addEditDialog from "./components/addEditDialog.vue";
import setPermission from "./components/setPermission.vue";
export default {
  name: "userlist",
  components: {
    addEditDialog,
    setPermission,
  },
  data() {
    return {
      title: "", //弹窗标题
      page: 1, // 当前页数
      pageSize: 20, // 每页数量
      total: 0, //总条数
      logLoading: false,
      userData: [
        { name: "用户1", mark: "xxxxx", updateTime: "2023-12-25 10:20:30" },
        { name: "用户2", mark: "xxxxx", updateTime: "2023-12-25 10:20:30" },
        { name: "用户3", mark: "xxxxx", updateTime: "2023-12-25 10:20:30" },
      ],
    };
  },

  computed: {},
  created() {},
  mounted() {},
  methods: {
    //新增用户
    handleAdddevice() {
      this.title = "修改";
      this.$refs.adduserref.display();
      this.$refs.adduserref.getdataform(data);
    },
    //设置权限
    handleSetClick(data) {
      this.$refs.setpermissionRef.display(data);
    },
    //修改用户
    handleEditClick() {
      this.title = "修改";
      this.$refs.adduserref.display();
      this.$refs.adduserref.getdataform(data);
    },
    //删除用户
    handleDeleteClick() {
      this.$confirm("确定要删除该用户?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {})
        .catch(() => {});
    },
  },
};
</script>
<style lang="less">
.userbox {
  height: calc(100% - 24px);
  width: calc(100% - 24px);
  padding: 12px;
  .addBtn {
    display: flex;
    margin-left: auto;
    margin-bottom: 12px;
  }
  .usercontain {
    height: calc(100% - 44px);
    background: #fcc;
    .el-table__cell {
      text-align: center;
    }
    .el-table thead {
      th.el-table__cell {
        background: #fafafa;
      }
    }
    .editClass {
      .el-link.el-link--primary {
        margin-right: 14px;
      }
    }
  }
}
</style>
