<template>
  <div class="set-page-auth">
    <div class="breadcrumb" ref="breadcrumbRef">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>

        <el-breadcrumb-item>{{ title }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-scrollbar :style="{ height: treeHeight + 'px' }" class="main-tree">
      <el-tree :data="pages" ref="pageTree" show-checkbox :check-strictly="true" node-key="webId" check-on-click-node
        default-expand-all :default-checked-keys="checkedKeys" :expand-on-click-node="false">
        <template #default="{ node, data }">
          <div class="custom-tree-node">
            <span :class="{ 'font-strong': data.level == 1 }">
              {{
                data.title
              }}
              <i v-if="data.description">({{ data.description }})</i>
            </span>
            <span v-if="data.checkStatus == 1">
              <el-button type="text" size="small" @click.stop="() => setPage(node, data)" v-if="data.type == 0">配置页面内容权限
              </el-button>
            </span>
          </div>
        </template>
      </el-tree>
    </el-scrollbar>
    <div class="foot" ref="footRef">
      <el-button type="primary" size="small" @click="saveSet">保存</el-button>
    </div>
  </div>
</template>
<script setup>
import { ref, computed, watch, onMounted, nextTick } from "vue";
import { authorService } from "@/ApiService/authorService";
import templateHooks from "@/Hooks/templateHooks.js";
const { $route, $router, $message } = templateHooks();

const pages = ref([]),
  checkedKeys = ref([]),
  addKey = ref(false),
  treeHeight = ref('100%');
const pageTree = ref();
const title = computed(() => {
  return $route.query.title;
});
const authorityId = computed(() => {
  return $route.query.authorityId;
});
const breadcrumbRef = ref()
const footRef = ref()

const fetchData = () => {
  pages.value = [];
  authorService
    .setWebPageAuthoritOutputConfig(authorityId.value)
    .then(async (res) => {
      if (res.code == 0) {
        if (res.data.children && res.data.children.length != 0) {
          pages.value = await chargedata(res.data.children);
        }
      }
    });
};
const chargedata = (pages) => {
  return new Promise((resolve) => {
    if (pages == undefined || pages.length == 0) {
      resolve([]);
    }
    checkedKeys.value = [];
    pages.map((item, index) => {
      item.level = 1;
      if (item.checkStatus == 1) {
        checkedKeys.value.push(item.webId);
      }
      if (item.children && item.children.length != 0) {
        let children = item.children;
        children.map((item2) => {
          item2.level = 2;
          if (item2.checkStatus == 1) {
            checkedKeys.value.push(item2.webId);
          }
          if (item2.children && item2.children.length != 0) {
            item2.children.map((item3) => {
              item3.level = 3;
              item3.noAppend = true;
              if (item3.checkStatus == 1) {
                checkedKeys.value.push(item3.webId);
              }
              return item3;
            });
          }
          return item2;
        });
      }
      return item;
    });

    resolve(pages);
  });
};
const saveSet = () => {
  console.log(addKey.value);
  if (addKey.value) {
    return;
  }
  addKey.value = true;
  let nodes = pageTree.value.getCheckedKeys().join(",");
  authorService
    .addWebpageAuthority({
      authorityId: authorityId.value,
      ids: nodes,
      webId: 0,
    })
    .then(
      (res) => {
        if (res.code == 0) {
          $message.success("保存成功");
          fetchData();
        } else {
          $message.error(res.err);
        }
        addKey.value = false;
      },
      (err) => {
        addKey.value = false;
      }
    );
};
const setPage = (node, data) => {
  $router.push({
    path: "./setPageConAuth",
    query: {
      authorityId: authorityId.value,
      webId: data.webId,
      title: data.title,
      authorityName: title.value,
    },
  });
};
onMounted(() => {
  nextTick(() => {
    const windowHeight = document.body.clientHeight
    console.log('windowHeight', windowHeight);
    console.log('breadcrumbRef', breadcrumbRef.value.clientHeight);
    console.log('footRef', footRef.value.clientHeight);
    treeHeight.value = windowHeight - breadcrumbRef.value.clientHeight - footRef.value.clientHeight - 140
  })
})
watch(
  authorityId,
  (val) => {
    if (val && $route.name == "setPageAuth") {
      fetchData();
    }
  },
  { immediate: true }
);
</script>
<script>
export default {
  name: "setPageAuth",
};
</script>
<style lang="scss" scoped>
.set-page-auth {
  padding: 0 10px 0px 10px;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  position: relative;

  ::-webkit-scrollbar {
    width: 5px;
    /*对垂直流动条有效*/
    height: 12px;
    /*对水平流动条有效*/
  }

  /*定义滚动条的轨道颜色、内阴影及圆角*/
  ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(228, 228, 228, 0.3);
    background-color: rgba(228, 228, 228, 0.3);
    border-radius: 3px;
  }

  /*定义滑块颜色、内阴影及圆角*/
  ::-webkit-scrollbar-thumb {
    border-radius: 7px;
    -webkit-box-shadow: inset 0 0 6px rgba(196, 193, 193, 0.3);
    background-color: #aaaaaa;
  }

  /*定义两端按钮的样式*/
  /* ::-webkit-scrollbar-button {
                background-color: cyan;
            } */

  /*定义右下角汇合处的样式*/
  ::-webkit-scrollbar-corner {
    background: khaki;
  }

  .breadcrumb {
    height: 40px;
    display: flex;
    align-items: center;
    align-content: center;

    :deep(.Breadcrumb) {
      display: flex;
      align-items: center;
      align-content: center;
    }
  }

  .main-tree {
    overflow-y: auto;
    padding-bottom: 10px;
    background-color: #fff;
  }

  .el-tree {

    /* background-color: red; */
    :deep(.el-tree-node) {
      .el-tree-node__content {
        height: 40px !important;
        border-bottom: 1px solid #f1f1f1;
      }
    }
  }

  .foot {
    height: 50px;
    line-height: 50px;
    bottom: 0;

    width: 100%;
    border-top: 1px solid #dadada;
    background-color: #fff;
    padding: 5px 10px;
    box-sizing: border-box;
    z-index: 9;
    display: flex;
    align-content: center;
    align-items: center;
  }

  .custom-tree-node {
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    height: 40px;
    line-height: 40px;
    display: flex;
    justify-content: space-between;

    .font-strong {
      font-weight: bold;
    }
  }
}
</style>
