<template>
  <div class="app-container">
    <el-row :gutter="15">
      <!-- 用户列表 -->
      <el-col :span="10">
        <el-card class="box-card" shadow="never">
          <div slot="header" class="clearfix">
            <el-input
              v-model="query.blurry"
              size="small"
              clearable
              placeholder="用户名/昵称"
              style="width: 200px"
              class="filter-item"
            />
            <el-button type="primary" size="mini" @click="search">查询</el-button>
          </div>
          <el-table
            highlight-current-row
            ref="table"
            style="width: 100%"
            :data="dataList"
            @current-change="handleCurrentChange4table"
          >
            <el-table-column prop="nickName" label="昵称" align="center" />
            <el-table-column prop="username" label="用户名" align="center" />
          </el-table>
          <!--分页组件-->
          <el-pagination
            :current-page="page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalElement"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-card>
      </el-col>
      <!-- 文件夹授权 -->
      <el-col :span="12" style="margin-bottom: 10px">
        <el-card class="box-card" shadow="never">
          <div slot="header" class="clearfix">
            <el-button
              type="primary"
              size="mini"
              @click="saveFolderAuth"
              :loading="saveAuthLoading"
              >保存</el-button
            >
          </div>
          <el-tree
            ref="menu"
            :data="folders"
            :props="defaultProps"
            check-strictly
            accordion
            node-key="id"
            default-expand-all
            :expand-on-click-node="false"
          >
            <div class="custom-tree-node" slot-scope="{ node, data }">
              <span>{{ node.label }}</span>
              <div class="authButtonWrapper">
                <el-button
                  :type="`${data.viewWhether ? 'primary' : 'default'}`"
                  icon="el-icon-view"
                  circle
                  size="small"
                  style="margin-left: 40px"
                  @click="changeAuth(data, 'viewWhether')"
                ></el-button>
                <el-button
                  :type="`${data.editWhether ? 'primary' : 'default'}`"
                  icon="el-icon-edit"
                  circle
                  size="small"
                  @click="changeAuth(data, 'editWhether')"
                ></el-button>
                <el-button
                  :type="`${data.deleteWhether ? 'primary' : 'default'}`"
                  icon="el-icon-delete"
                  circle
                  size="small"
                  @click="changeAuth(data, 'deleteWhether')"
                ></el-button>
                <el-button
                  :type="`${data.uploadWhether ? 'primary' : 'default'}`"
                  icon="el-icon-upload2"
                  circle
                  size="small"
                  @click="changeAuth(data, 'uploadWhether')"
                ></el-button>
                <el-button
                  :type="`${data.downloadWhether ? 'primary' : 'default'}`"
                  icon="el-icon-download"
                  circle
                  size="small"
                  @click="changeAuth(data, 'downloadWhether')"
                ></el-button>
              </div>
            </div>
          </el-tree>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
  
  <script>
import edocApi from "@/api/kd/edoc";
import DateRangePicker from "@/components/DateRangePicker";

export default {
  name: "Folder",
  components: {
    DateRangePicker,
  },
  data() {
    return {
      query: {
        blurry: "",
      },
      dataList: [],
      totalElement: 0,
      page: 0,
      size: 10,
      defaultProps: { children: "children", label: "name", isLeaf: "leaf" },
      currentUserId: 0,
      currentName: "",
      saveAuthLoading: false,
      showButton: false,
      folders: [],
      menuIds: [],
      // tempAuthObj: {} // 操作权限数据集合
    };
  },
  computed: {},
  mounted() {
    this.getDataList4User(); // 获取所有文件夹
  },
  created() {},
  methods: {
    search(){
      this.getDataList4User()
    },
    changeAuth(data, attr) {
      data[attr] = !data[attr];
      // console.log('*****', data)
      // deelete
      // this.tempAuthObj[data.id] =
    },

    // 触发单选
    handleCurrentChange4table(val, oldVal) {
      if (val) {
        const loading = this.$loading({
          fullscreen: false,
          text: "加载中...",
          background: "transparent",
        });
        this.currentUserId = val.id;
        // this.dataList = [];
        this.getFolderByUserId();
        loading.close();
      }
    },
    // 当前页的条数变化
    handleSizeChange(val) {
      this.size = val;
      this.getDataList4User();
    },
    // 当前第几页
    handleCurrentChange(val) {
      this.page = val;
      this.getDataList4User();
    },
    getDataList4User() {
      edocApi
        .getDataList4User({
          page: this.page > 0 ? this.page - 1 : this.page,
          size: this.size,
          blurry: this.query.blurry,
        })
        .then((res) => {
          console.log("res", res);
          this.dataList = res.content;
          this.totalElement = res.totalElements;
        });
    },

    getFolderByUserId() {
      edocApi
        .getAllDocList({
          userId: this.currentUserId,
        })
        .then((res) => {
          this.folders = res.body;
        });
      // edocApi
      //   .getFolderByUserId({
      //     userId: this.currentUserId,
      //   })
      //   .then((res) => {
      //     this.folders = res.body;
      //   });
    },

    confirmFolder() {
      if (!this.currentFolderId) {
        this.$message.warning("请选择文件夹");
        return;
      }
      this.$refs["folderForm"].validate((valid) => {
        if (valid) {
          edocApi
            .addFolder({
              ...this.folderForm,
              pid: this.currentFolderId,
            })
            .then((res) => {
              this.$message.success("操作成功");
              this.getDataList4User();
            });
        }
      });
    },
    // 保存菜单
    saveFolderAuth() {
      if (!this.currentUserId) {
        this.$message.warning("请选择用户");
        return;
      }
      const loading = this.$loading({
        fullscreen: false,
        text: "处理中...",
        background: "transparent",
      });
      edocApi
        .saveFolderAuth({
          userId: this.currentUserId,
          // data: JSON.stringify(this.folders),
          documentCatalogueVos: this.folders

        })
        .then(() => {
          this.$message.success("操作成功");
          this.saveAuthLoading = false;
        })
        .catch((err) => {
          this.saveAuthLoading = false;
        });
      loading.close();
    },
  },
};
</script>
  

  
  <style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .custom-tree-node {
  width: 100%;
}
.authButtonWrapper {
  float: right;
}
::v-deep .el-tree-node__content {
  height: 36px;
}
</style>
  de9l9l9l9l9l  ;;;;;;;;;;;;;;;;;O
  <((O9l9l9l9l))