<template>
  <!-- <div class="container">
    
  </div> -->
  <el-container class="page-container">
    <el-header height="60px" class="content-header">
      <MyHeader
        :title="'用户管理'"
        :formData="headerFormData"
        @submit="handleHeaderFormSubmit"
      ></MyHeader>
    </el-header>
    <el-container class="table-container">
      <el-aside width="260px">
        <div>组织架构</div>
        <el-input placeholder="请输入内容" v-model="treeSearchVal">
          <template slot="suffix">
            <span><i class="el-input__icon el-icon-search"></i></span>
          </template>
        </el-input>
        <el-tree
          :data="data"
          :props="defaultProps"
          @node-click="handleNodeClick"
        ></el-tree>
      </el-aside>
      <el-main>
        <MyTableHeader
          :title="tableHeaderTitle"
          :buttons="buttons"
          @buttonClick="handleButtonClick"
        ></MyTableHeader>

        <MyTable :tableData="tableData" :formData="formData" :minWidth="120">
          <!-- 自定义操作按钮，传递 row 和 index -->
          <template #operation="{ row, index }">
            <el-button
              size="mini"
              @click="handleView(row, index)"
              type="primary"
              >查看</el-button
            >
            <el-button
              size="mini"
              @click="handleEdit(row, index)"
              type="primary"
              >编辑</el-button
            >
            <el-button size="mini" @click="handleDelete(index)" type="primary"
              >删除</el-button
            >
            <el-button size="mini" @click="handleDelete(index)" type="primary"
              >启用</el-button
            >
            <el-button size="mini" @click="handleDelete(index)" type="primary"
              >停用</el-button
            >
          </template>
        </MyTable>
        <MyPagination
          :total="tableTotal"
          :page-size="pageSize"
          :current-page="currentPage"
          @pageChange="pagi_changePage"
          @sizeChange="pagi_changeSize"
        ></MyPagination>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import MyHeader from "@/components/MyHeader";
import MyTable from "@/components/MyTable";
import MyPagination from "@/components/MyPagination";
import MyTableHeader from "@/components/MyTableHeader";
export default {
  name: "user-manage",
  components: {
    MyHeader,
    MyTableHeader,
    MyTable,
    MyPagination,
  },
  data() {
    return {
      tableData: [
        { name: "张三", age: 25, address: "北京市" },
        { name: "李四", age: 30, address: "上海市" },
        { name: "王五", age: 22, address: "广州市" },
      ],
      formData: [
        {
          label: "UUID",
          fieldName: "name",
          type: "input",
          showInTable: true,
          value: "",
          width: "",
        },
        {
          label: "用户名称",
          fieldName: "age",
          type: "input",
          showInTable: true,
          value: "",
          width: "",
        },
        {
          label: "组织路径",
          fieldName: "address",
          type: "input",
          showInTable: true,
          value: "",
          width: "",
        },
          {
          label: "用户状态",
          fieldName: "address",
          type: "input",
          showInTable: true,
          value: "",
          width: "",
        },
      ],
      tableTotal: 0,
      pageSize: 10,
      currentPage: 1,
      treeSearchVal: "",
      tableHeaderTitle: "项目列表",
      buttons: [
        { label: "新建", type: "primary", methodName: "action1" ,icon:'el-icon-circle-plus'},
        { label: "删除", type: "primary", methodName: "action2" ,icon:'el-icon-remove'},
        { label: "启用", type: "primary", methodName: "action3" ,icon:'el-icon-video-play'},
        { label: "停用", type: "primary", methodName: "action4" ,icon:'el-icon-remove'},
        { label: "导出", type: "primary", methodName: "action5",icon:'el-icon-upload' },
        { label: "导入", type: "primary", methodName: "action6",icon:'el-icon-download' },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      data: [
        {
          label: "一级 1",
          children: [
            {
              label: "二级 1-1",
              children: [
                {
                  label: "三级 1-1-1",
                },
              ],
            },
          ],
        },
        {
          label: "一级 2",
          children: [
            {
              label: "二级 2-1",
              children: [
                {
                  label: "三级 2-1-1",
                },
              ],
            },
            {
              label: "二级 2-2",
              children: [
                {
                  label: "三级 2-2-1",
                },
              ],
            },
          ],
        },
        {
          label: "一级 3",
          children: [
            {
              label: "二级 3-1",
              children: [
                {
                  label: "三级 3-1-1",
                },
              ],
            },
            {
              label: "二级 3-2",
              children: [
                {
                  label: "三级 3-2-1",
                },
              ],
            },
          ],
        },
      ],
      headerFormData: [
        {
          label: "用户名称",
          fieldName: "username",
          type: "input",
          value: "",
          placeholder: "请输入用户名称",
          // isRequired: true,
        },
           {
          label: "用户状态",
          fieldName: "username",
          type: "input",
          value: "",
          placeholder: "请输入用户状态",
          // isRequired: true,
        },
        // {
        //   label: "用户状态",
        //   fieldName: "gender",
        //   type: "select",
        //   value: "",
        //   placeholder: "请选择用户状态",
        //   isRequired: true,
        //   options: [
        //     { label: "男", value: "male" },
        //     { label: "女", value: "female" },
        //   ],
        // },
        // {
        //   label: "生日",
        //   fieldName: "birthdate",
        //   type: "date",
        //   value: "",
        //   placeholder: "请选择生日",
        //   isRequired: false,
        // },
      ],
    };
  },
  methods: {
    // 头部搜索框
    handleHeaderFormSubmit() {},
    // 树结构点击
    handleNodeClick() {},
    // 列表头部功能按钮
    handleButtonClick(methodName) {},

    getList() {
      // getFileList({
      //   pageNumber: this.currentPage,
      //   pageSize: this.pageSize,
      //   fileName: this.searchName,
      // }).then((res) => {
      //   if (+res.code === 200) {
      //     this.tableData = res.data;
      //     this.tableTotal = +res.total;
      //   }
      // })
    },
    // 列表分页
    pagi_changePage(page) {
      this.currentPage = page;
      getList();
    },
    pagi_changeSize(size) {
      this.pageSize = size;
      getList();
    },
  },
  created() {},
  mounted() {},
};
</script>
<style lang="scss" scoped>
.page-container{
  // height: 100%;
  height: calc(100vh - 84px);
  width: 100%;
}
.table-container{
  padding: 0 20px;
}
.el-main {
  padding: 0 20px;
}

.el-icon-search {
  font-size: 16px;
  font-weight: 700;
  color: #1e80e0;
}
</style>
