<template>
  <div class="bf-permissiontree">
    <!-- 权限树 -->
    <div class="cont">
      <div class="paren_header">
        <p>{{ title }}</p>
      </div>
      <div class="paren_type">
        <ul>
          <li>
            <div class="log"></div>
            <p>时效规则有</p>
          </li>
          <li>
            <div class="log"></div>
            <p>数据规则有</p>
          </li>
          <li>
            <div class="log"></div>
            <p>显示及编辑权限</p>
          </li>
          <li>
            <div class="log"></div>
            <p>显示权限</p>
          </li>
        </ul>
      </div>
      <div class="paren_list">
        <ul>
          <li v-for="(item, index) in treeTitles" :key="index">
            <div
              class="up_type"
              :class="active === index ? 'up_types' : 'up_type'"
              @click="upActive(item, index)"
            >
              {{ item.AuthName }}
            </div>
          </li>
        </ul>
      </div>
      <div class="paren_cont">
        <el-scrollbar style="height: 100%">
          <el-tree
            :data="data"
            show-checkbox
            @check-change="currentChange"
            @node-click="handleNodeClick"
            :defaultProps="defaultProps"
            :expand-on-click-node="false"
            node-key="AuthId"
            default-expand-all
            ref="tree"
            highlight-current
          >
            <span class="custom-tree-node" slot-scope="{ data }">
              {{ data.AuthName }}
              <div class="logup">
                <div
                  class="one"
                  v-if="
                    data.AuthList != null && data.AuthList.ValidBegin != null
                  "
                ></div>
                <div
                  class="two"
                  v-if="data.AuthList != null && data.AuthList.Action == '1'"
                ></div>
                <div
                  class="four"
                  v-if="data.AuthList != null && data.AuthList.Action == '2'"
                ></div>
                <div
                  class="three"
                  v-if="
                    data.AuthList &&
                    (data.AuthList.EditCol ||
                      data.AuthList.DeleteRow ||
                      data.AuthList.EditRow ||
                      data.AuthList.NewCol ||
                      data.AuthList.QueryCol ||
                      data.AuthList.QueryRow)
                  "
                ></div>
              </div>
            </span>
          </el-tree>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>
<script>
// import treeData from "@/views/authorityManagement/minixs/treeData";
import { translateDataToTreeAll } from "@/utils/validate";
import { GetAuthTree } from "@/api/apiAuthority";
export default {
  props: {
    title: {
      type: String,
      default: "",
    },
    checkedKeys: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      active: 0,
      data: [],
      treeTitles: [],
      defaultProps: {
        children: "children",
        label: "AuthName",
      },
      dataObj: {}, //上级权限指定树数据
      AuthArrList: [],//权限列表源数据
      AuthList:[],//权限规则列表
      checkedList:[]//选中的列表
    };
  },
  watch: {
    checkedKeys: {
      handler(val) {
        this.checkedList = val;
        this.$refs.tree.setCheckedKeys(val);
      },
      deep: true,
    },
    "$store.state.auth.authList": {
      handler(val) {
        this.AuthList = val;
        this.resetData();
      },
      immediate: true,
      deep: true
    },
  },
  created: function () {
    this.getDataList();
  },
  methods: {
    //获取权限列表
    getDataList() {
      GetAuthTree({ QueryName: "" }).then((result) => {
        if (result.code === 0 && result.returnData.length) {
          result.returnData.forEach((item) => {
            item.flag = item.Status === 1 ? true : false;
            item["AuthList"] = null;
          });
          this.AuthArrList = _.cloneDeep(result.returnData);
          this.toTree();
        } else {
          this.$message.error(result.message);
        }
      });
    },
    //数据转树形
    toTree() {
      this.data = [];
      this.dataObj = {};
      this.treeTitles =[];
      let arr = null
      arr = translateDataToTreeAll(
          this.AuthArrList,
          "UpAuthId",
          "AuthId"
        )
      let items = null
      items = {
        AuthId: 0,
        AuthName: "所有权限",
        QueryTarget: 0,
        Status: 0,
        UpAuthId: 0,
        Type: 0,
        children: arr,
      };
      this.dataObj = _.cloneDeep(items)
      this.data = [items];
      let obj = null
      obj = _.cloneDeep(items);
      let datas = null
      datas = obj.children.filter((item) => item.Type === 1);
      datas.forEach((item) => {
        delete item.children;
      });
      delete obj.children;
      datas.unshift(obj);
      this.treeTitles = datas;
    },
    //数据切换
    upActive(item, index) {
      this.active = index;
      this.decompose([this.dataObj], item.AuthId);
      this.$refs.tree.setCheckedKeys(this.checkedList);
    },
    // 树节点选中
    currentChange() {
      this.checkedList = [],
       this.$refs.tree.getCheckedNodes().forEach(item =>{
         this.checkedList.push(item.AuthId);
       })
      this.$emit("getTreeData", this.$refs.tree.getCheckedNodes());
    },
    //获取指定数据
    decompose(data, id) {
      for (let i = 0; i < data.length; i++) {
        if (data[i].AuthId == id) {
          this.data = [data[i]];
        } else if (data[i].children && data[i].children.length > 0) {
          this.decompose(data[i].children, id);
        }
      }
    },
    //获取权限规则 从新组合数据
    resetData() {
      this.AuthArrList.forEach((item1) => {
        item1["AuthList"] = null;
        this.AuthList.forEach((item2) => {
          if (item1.AuthId == item2.AuthId) {
            item1.AuthList = item2;
          }
        });
      });
      this.toTree();
    },
    //获取点击目标
    handleNodeClick(data){
      // this.toTree();
      this.$store.state.auth.authId = data;
    }
  },
};
</script>
<style lang="scss">
@import "./permissiontree.scss";
</style>
