<template>
  <div class="plat-wrap">
    <div class="flex">
      <div class="left-text">功能/应用列表</div>
      <div v-if="false" class="divider"></div>
      <div class="right-text">{{ currentApp.appName || "" }}</div>
    </div>
    <el-row class="wrap-list">
      <el-col class="wrap-list-left" :xs="8" :sm="8" :md="6" :lg="6" :xl="6">
        <el-menu
          ref="appmenu"
          v-loading="loading"
          class="el-menu-vertical-demo"
          active-text-color="#409EFF"
          unique-opened
        >
          <el-submenu
            v-for="item in treeList"
            :key="item.category"
            :index="item.category"
          >
            <template slot="title">
              <span>{{ item.category }}</span>
            </template>

            <div v-if="item?.children.length">
              <el-menu-item
                v-for="childItem in item?.children"
                :key="childItem.appCode"
                :index="childItem.appCode"
                @click="handleMenu(childItem)"
              >
                {{ childItem.appName }}
              </el-menu-item>
            </div>
            <div v-else style="text-align: center; padding: 16px">暂无数据</div>
          </el-submenu>
        </el-menu>
      </el-col>
      <el-col
        class="wrap-list-right"
        :xs="16"
        :sm="16"
        :md="18"
        :lg="18"
        :xl="18"
        v-if="currentApp?.optionList.length"
      >
        <div class="all-checked">
          <el-checkbox
            :value="getCheckedStatus"
            :true-label="1"
            :false-label="0"
            @change="changeAll"
          >
            选择当前项下全部权限
          </el-checkbox>
        </div>
        <div class="checked-list">
          <div v-for="item in currentApp?.optionList" :key="item.appCode">
            <div class="checked-title">
              {{ item.category }}
            </div>
            <div class="allcheckbox">
              <el-checkbox
                v-model="record.checked"
                v-for="(record, index) in item?.children"
                :key="index"
                :true-label="1"
                :false-label="0"
                class="checkbox-val"
              >
                {{ record.optionName }}
              </el-checkbox>
            </div>
          </div>
        </div>
      </el-col>
      <el-col
        class="wrap-list-right"
        :xs="16"
        :sm="16"
        :md="18"
        :lg="18"
        :xl="18"
        v-else
      >
        暂无数据
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getPermitAppListApi, savePermitAuthListApi } from "@/api/staffApi.js";

import { setTreeFormatList } from "@/utils/tools";

export default {
  props: {
    currentUser: {
      /* {
  "employeeIds": [], 职员id（查询职员权限的时候传）
  "roleId": 0, 角色id(查询角色权限的时候传)
  "searchType": 0 1单独，2所有(查询职员权限的时候传) 只有批量设置功能权限的的时候传2

      } */
      type: Object,
      default: () => ({}),
    },
  },

  components: {},
  data() {
    return {
      loading: false,
      treeList: [], // 左侧应用树
      title: "",

      currentApp: {
        optionList: [],
      },
      appList: [],
    };
  },

  watch: {
    currentUser: {
      handler(val, oldVal) {
        this.getAllData();
      },
      deep: true,
    },
    currentApp: {
      handler(val, oldVal) {
        console.log(val);
      },
      deep: true,
    },
  },
  computed: {
    getCheckedStatus() {
      for (let index = 0; index < this.currentApp?.optionList.length; index++) {
        if (
          this.currentApp?.optionList[index]?.children.find((nv) => !nv.checked)
        ) {
          return false;
        }
      }
      return true;
    },
  },

  methods: {
    getAllData() {
      this.loading = true;
      this.getMenuList();
    },

    // 点击菜单
    handleMenu(item) {
      this.currentApp = item;
    },

    //将所有操作项状态更改
    changeAllStatus(list, status) {
      list.forEach((item) => {
        item.checked = status;

        if (item?.children) {
          this.changeAllStatus(item?.children, status);
        }
        if (item?.optionList) {
          this.changeAllStatus(item?.optionList, status);
        }
      });
      return list;
    },
    // 获取菜单
    getMenuList() {
      let params = {
        searchType: this.currentUser.searchType,
      };
      if (this.currentUser.roleId) {
        params.roleId = this.currentUser.roleId;
      }
      if (
      
        this.currentUser.employeeIds &&
        this.currentUser.employeeIds?.[0]&&this.currentUser.employeeIds.length===1
      ) {
        params.employeeId = this.currentUser.employeeIds[0];
      }

      getPermitAppListApi(params)
        .then((response) => {
          if (Array.isArray(response.data)) {
            if (this.currentUser.searchType === 2) {
              //让下面的全选
              this.treeList =  response.data;
            } else {
              this.treeList = response.data;
            }
          }
        })
        .finally((es) => {
          this.loading = false;
        });
    },

    // 保存
    saveAuth() {
      this.loading = true;
      try {
        console.log(this.treeList);
        const appList = [];
        for (const ob of this.treeList) {
          ob?.children.forEach((nk) => {
            let optionList = [];
            nk?.optionList.forEach((mn) => {
              mn?.children
                .filter((x) => x.checked)
                .map(({ optionId }) => {
                  optionList.push({ optionId });
                });
            });
            if (optionList.length) {
              appList.push({
                appId: parseFloat(nk.appId),
                optionList,
              });
            }
          });
        }

        let params = {
          appList,
        };
        if (this.currentUser.employeeIds) {
          params.employeeIdList = this.currentUser.employeeIds;
        }

        if (this.currentUser.roleId) {
          params.roleId = this.currentUser.roleId;
        }
        savePermitAuthListApi(params)
          .then((response) => {
            if (response.status === 200) {
              this.$message({ type: "success", message: "操作成功" });
              this.$emit("callback", false);
              this.loading = false;
            }
          })
          .catch(() => {
            this.loading = false;
          });
      } catch (error) {
        this.loading = false;
      }
    },

    // 选择全部权限
    changeAll() {
      this.$set(
        this.currentApp,
        "optionList",
        this.currentApp.optionList.map((element, ix) => {
          return {
            ...element,
            children: element?.children.map((item) => ({
              ...item,
              checked: this.getCheckedStatus ? 0 : 1,
            })),
          };
        })
      );
    },
  },
};
</script>
<style lang="scss" scope>
.el-dialog-contract {
  .elcolEndDate {
    position: relative;
    .checkbox {
      position: absolute;
      top: 10px;
      right: 0;
    }
  }
}
#app .nest-menu .el-submenu > .el-submenu__title:hover,
#app .el-submenu .el-menu-item:hover {
  color: #409effff !important;
}
.el-menu-item.is-active {
  background: #fff !important;
  color: #409effff !important;
}
.el-submenu__icon-arrow:hover {
  color: #909399 !important;
}
.el-submenu__title {
  text-align: left;
  margin-left: 8px;
}
.el-menu-item {
  text-align: left;
}

.el-checkbox__input.is-checked + .el-checkbox__label {
  color: #666;
}
// .el-menu-item:focus, .el-menu-item:hover{background: none;}
// .el-menu-item.is-active{ @include bg_color($background-color-theme);color: #fff!important;}//选

.plat-wrap {
  position: relative;
  display: block;
  height: 100%;
}

.wrap-list {
  position: relative;
  height: 100%;
  display: contents;
}

.wrap-list-left {
  display: block;
  height: 95%;
  overflow-y: auto;
  height: calc(60vh - 120px);
  min-height: 550px;
}

.wrap-list-right {
  display: block;
  height: 100%;
  overflow-y: auto;
  padding: 12px;
}

.flex {
  display: flex;
  height: 30px;
  border-bottom: 1px solid #ededed;
}

.left-text {
  min-width: 200px;
  font-size: 15px;
  color: #237eef;
}

.right-text {
  font-size: 15px;
  color: #333;
  margin-left: 12px;
  width: 100%;
}
.divider {
  background-color: #ededed;
  height: 40px;
  width: 1px;
  margin-top: -11px;
}

.all-checked {
  text-align: left;
  height: 35px;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.checked-list {
  text-align: left;
}

.checked-title {
  height: 35px;
  display: flex;
  align-items: center;
}
.allcheckbox {
  margin-bottom: 24px;
}
.checkbox-val {
  line-height: 30px;
  margin-bottom: 6px;
}
</style>
